so each one centres under the label
that opens it. The old container-anchoring right-aligned every panel to the
site's content edge, which left the Services panel visibly off-centre from
its trigger. Centring alone would push wide panels off-screen at narrow
desktop widths, so initializeDropdownAlign() measures the overflow and
feeds the correction back as --dd-shift. */
.navbar-menu .has-dropdown {
position: relative;
}
/* Hover bridge across the gap between the label and its panel.
It hangs off the
, not off .dropdown — the panel sets `overflow: hidden
auto` for its max-height guard, which clips any pseudo-element reaching
above its content box. Only declared while the menu is open, so it never
sits over the page otherwise, and it spans the panel's full width so a
diagonal move to the far column stays inside the trigger the whole way. */
.navbar-menu .has-dropdown:hover::after,
.navbar-menu .has-dropdown:focus-within::after,
.navbar-menu .has-dropdown.dd-open::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: var(--dd-bridge-w, 300px);
height: 16px;
transform: translateX(calc(-50% + var(--dd-shift, 0px)));
}
.navbar-menu .menu-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.navbar-menu .menu-trigger svg {
width: 12px;
height: 12px;
transition: transform var(--transition-fast);
}
.navbar-menu .has-dropdown:hover .menu-trigger svg,
.navbar-menu .has-dropdown:focus-within .menu-trigger svg {
transform: rotate(180deg);
}
.dropdown {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(calc(-50% + var(--dd-shift, 0px))) translateY(8px);
min-width: 460px;
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
padding: var(--spacing-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 16px;
opacity: 0;
visibility: hidden;
transition: opacity 180ms ease-out, transform 180ms ease-out,
visibility 180ms ease-out;
z-index: var(--z-dropdown);
}
.dropdown.dropdown-single {
grid-template-columns: 1fr;
min-width: 260px;
}
/* Wide 3-column mega menu (e.g. Industries). Centred under its trigger and
sized against the viewport — sizing against 100% would now resolve against
the narrow
the panel hangs off. */
.dropdown.dropdown-mega {
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 0;
width: min(660px, calc(100vw - var(--container-padding) * 2));
max-height: calc(100vh - 120px);
overflow: hidden auto;
}
/* Compact (title-only) dropdown links for large menus */
.dropdown a.dd-compact {
padding: 9px 12px;
font-weight: 600;
}
/* Grouped, categorised services mega-menu.
Was min-width:960px with 190px column minimums, which forced the panel to
1002px — wider than its own declared box. Declaring the width explicitly
and letting the columns flex keeps the same ~190px columns at desktop
while allowing the panel to shrink instead of overflow. */
.dropdown.dropdown-grouped {
grid-template-columns: repeat(3, minmax(0, 1fr));
min-width: 0;
width: min(780px, calc(100vw - var(--container-padding) * 2));
padding: var(--spacing-lg) var(--spacing-xl);
gap: 2px var(--spacing-xl);
align-content: start;
}
.dd-group { display: block; }
.dd-head {
font-family: var(--font-display);
font-size: 15.5px;
line-height: 1.25;
text-transform: none;
letter-spacing: 0;
color: var(--secondary);
font-weight: 700;
/* The old 54px reserve (two lines' worth) aligned the underlines but left
~35px of empty panel above every single-line heading. All three headings
fit on one line at every width the desktop menu is shown at, so the
reserve only ever cost vertical space. */
min-height: 0;
display: flex;
align-items: flex-end;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 2px solid rgba(14, 118, 253, 0.18);
}
.dd-group a {
display: block;
padding: 8px 10px;
border-radius: var(--radius-sm);
font-size: 15px;
line-height: 1.35;
font-weight: 500;
color: var(--dark-grey);
transition: background var(--transition-fast), color var(--transition-fast);
}
.dd-group a:hover { background: var(--light-grey); color: var(--secondary); }
.dropdown-grouped .dropdown-footer {
grid-column: 1 / -1;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-color);
}
/* The former @media (max-width:1180px) right-edge "flip" has been removed —
the panels are now container-anchored and contained at every width. */
/* Right-side vertical action rail */
.side-rail {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 900;
display: flex;
flex-direction: column;
gap: 3px;
}
.side-rail .sr-btn {
display: flex;
align-items: center;
gap: 12px;
width: 46px;
height: 46px;
padding: 0 11px;
overflow: hidden;
white-space: nowrap;
color: var(--white);
border-radius: 10px 0 0 10px;
box-shadow: -2px 3px 12px rgba(0, 0, 0, 0.18);
transition: width var(--transition-normal), filter var(--transition-fast);
}
.side-rail .sr-ic { display: flex; flex-shrink: 0; }
.side-rail .sr-btn svg { width: 24px; height: 24px; }
.side-rail .sr-label { opacity: 0; font-size: 14px; font-weight: 600; transition: opacity var(--transition-fast); }
.side-rail .sr-btn:hover { width: 168px; filter: brightness(1.08); }
.side-rail .sr-btn:hover .sr-label { opacity: 1; }
.sr-email { background: var(--secondary); }
.sr-linkedin { background: #0A66C2; }
.sr-careers { background: var(--primary); }
@media (max-width: 768px) { .side-rail { display: none; } }
/* ============================================
MODAL — consultation / inquiry dialog
============================================ */
.modal {
position: fixed;
inset: 0;
z-index: 2000;
display: none;
}
.modal.open { display: block; }
body.modal-open { overflow: hidden; }
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(7, 26, 46, 0.62);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.modal-dialog {
position: relative;
z-index: 1;
max-width: 640px;
margin: 6vh auto;
background: var(--white);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: var(--spacing-2xl);
max-height: 88vh;
overflow-y: auto;
animation: modalIn 0.25s ease-out;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
.modal-dialog h3 {
font-size: 26px;
margin: 0 0 6px;
}
.modal-sub {
color: var(--medium-grey);
margin-bottom: var(--spacing-lg);
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: var(--light-grey);
color: var(--medium-grey);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close:hover { background: var(--border-color); color: var(--primary); }
/* Compact form inside the modal so it fits without scrolling */
.modal-dialog { padding: var(--spacing-xl) var(--spacing-2xl) var(--spacing-lg); }
.modal-dialog .eyebrow { margin-bottom: 6px; }
.modal-dialog h3 { font-size: 24px; }
.modal-sub { margin-bottom: var(--spacing-md); font-size: 14px; }
.modal-form .form-grid { gap: 14px 20px; }
.modal-form .form-group { margin-bottom: 0; gap: 5px; }
.modal-form .form-control { padding: 9px 12px; }
.modal-form textarea.form-control { min-height: 76px; }
.modal-form .btn { margin-top: 16px; }
.modal-form .form-note { margin-top: 10px; margin-bottom: 0; font-size: 13px; }
@media (max-width: 600px) {
.modal-dialog { margin: 0; min-height: 100%; border-radius: 0; padding: var(--spacing-lg); }
}
/* ============================================
HOME — tabbed services showcase
============================================ */
.svc-tabs { margin-top: var(--spacing-md); }
.svc-tablist {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid var(--border-color);
}
.svc-tab {
position: relative;
flex: 1 1 200px;
background: none;
border: none;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
padding: 18px 16px;
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
color: var(--primary);
cursor: pointer;
transition: color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* The active underline is drawn by this bar rather than the button's own
border-bottom, so it can sweep in from the left. The transparent 3px border
is kept for layout, which means the tab box never changes size. */
.svc-tab::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -3px;
height: 3px;
background: var(--secondary);
opacity: 0;
transform: translateY(0) scaleX(0);
transform-origin: left center;
transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 260ms ease-out;
pointer-events: none;
}
.svc-tab:hover { color: var(--secondary); }
.svc-tab.active { color: var(--secondary); }
.svc-tab.active::after { opacity: 1; transform: translateY(0) scaleX(1); }
.svc-panels {
position: relative;
margin-top: var(--spacing-lg);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
/* The slider rail. Every panel sits side by side at full width and the rail
itself is translated, so changing tabs slides the deck across rather than
cross-fading in place. JS only ever sets the transform on .svc-track. */
.svc-track {
display: flex;
align-items: stretch;
width: 100%;
transform: translate3d(0, 0, 0);
transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
/* Vertical scrolling stays with the page; horizontal drags are ours. */
touch-action: pan-y;
}
/* While a finger/pointer is dragging, the rail must track it 1:1. */
.svc-track.is-dragging { transition: none; }
/* ---- Slider controls ----
Parked bottom-right, clear of the blue callout on every breakpoint, so the
deck reads as something that moves before anyone touches it. */
.svc-nav {
position: absolute;
right: 28px;
bottom: 28px;
z-index: 2;
display: flex;
gap: 10px;
}
.svc-arrow {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
background: rgba(6, 22, 38, 0.34);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--white);
cursor: pointer;
transition: background-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-arrow svg { width: 18px; height: 18px; }
.svc-arrow:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* The auto-advance timer, drawn. It also tells the visitor the deck is paused
while they are hovering or dragging it. .is-auto is added by JS only when the
timer is actually running, so it never appears for a reduced-motion viewer. */
.svc-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
z-index: 2;
background: rgba(255, 255, 255, 0.22);
opacity: 0;
transition: opacity 300ms ease-out;
pointer-events: none;
}
.svc-panels.is-auto .svc-progress { opacity: 1; }
.svc-progress span {
display: block;
width: 100%;
height: 100%;
background: var(--secondary);
transform: scaleX(0);
transform-origin: left center;
}
.svc-panels.is-auto .svc-progress span {
animation: svcProgress var(--svc-interval, 5000ms) linear forwards;
}
.svc-panels.is-paused .svc-progress span { animation-play-state: paused; }
@keyframes svcProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.svc-panel {
position: relative;
flex: 0 0 100%;
width: 100%;
min-height: 460px;
background-size: cover;
background-position: center;
}
/* darken the plant image for contrast (left-weighted) */
.svc-panel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(6,22,38,0.72) 0%, rgba(6,22,38,0.35) 45%, rgba(6,22,38,0.05) 75%);
}
.svc-callout {
position: relative;
z-index: 1;
width: 380px;
max-width: 82%;
min-height: 300px;
padding: 44px 40px 60px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(135deg, #1E86FF 0%, #0a53c2 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 74%, 84% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 74%, 84% 100%, 0 100%);
}
.svc-callout p {
color: var(--white);
font-size: 19px;
font-weight: 600;
line-height: 1.5;
margin: 0 0 28px;
}
.svc-explore {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
transition: text-shadow 280ms ease-out;
}
.svc-explore svg {
width: 20px;
height: 20px;
transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-explore:hover { color: var(--white); }
@media (max-width: 640px) {
.svc-tab { flex-basis: 50%; font-size: 15px; padding: 14px 10px; }
.svc-panel { min-height: 380px; }
.svc-callout { max-width: 100%; width: 100%; clip-path: none; -webkit-clip-path: none; padding: 28px 24px; min-height: 0; }
.svc-panel::after { background: linear-gradient(180deg, rgba(6,22,38,0.2), rgba(6,22,38,0.5)); }
.svc-nav { right: 16px; bottom: 16px; gap: 8px; }
.svc-arrow { width: 40px; height: 40px; }
.svc-arrow svg { width: 16px; height: 16px; }
}
/* The home showcase intro runs the full container width — .section-head-row
caps its supporting copy at 560px for the two-column headers used elsewhere,
which this single-column header does not need. Scoped to .svc-head so every
other .section-head-row keeps its original measure. */
.services .svc-head .shr-title p { max-width: none; }
/* ============================================
HOME — tabbed services showcase: motion layer
--------------------------------------------
Purely additive. Every rule that hides something for an entrance is scoped
to .services.svc-anim, a class JS adds at runtime — with scripting off (or
broken) the section renders exactly as it did before, fully visible.
Only opacity / transform / filter are animated, so nothing here reflows or
contributes to CLS.
============================================ */
/* ---- 1. Section entrance (staggered fade + rise) ---- */
.services.svc-anim .svc-head .eyebrow,
.services.svc-anim .svc-head h2,
.services.svc-anim .svc-head p,
.services.svc-anim .svc-tablist,
.services.svc-anim .svc-panels,
.services.svc-anim .container > .text-center {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: opacity, transform;
}
.services.svc-anim .svc-head h2 { transition-delay: 90ms; }
.services.svc-anim .svc-head p { transition-delay: 170ms; }
.services.svc-anim .svc-tablist { transition-delay: 250ms; }
.services.svc-anim .svc-panels { transition-delay: 330ms; }
.services.svc-anim .container > .text-center { transition-delay: 430ms; }
.services.svc-anim.in-view .svc-head .eyebrow,
.services.svc-anim.in-view .svc-head h2,
.services.svc-anim.in-view .svc-head p,
.services.svc-anim.in-view .svc-tablist,
.services.svc-anim.in-view .svc-panels,
.services.svc-anim.in-view .container > .text-center {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Once the entrance has played, drop the compositor hint AND the transform.
A lingering translate3d() keeps the element on its own composited layer,
which switches text from subpixel to greyscale antialiasing — a visible
change to how the type renders. Resetting to none restores it exactly. */
.services.svc-anim.motion-done .svc-head .eyebrow,
.services.svc-anim.motion-done .svc-head h2,
.services.svc-anim.motion-done .svc-head p,
.services.svc-anim.motion-done .svc-tablist,
.services.svc-anim.motion-done .svc-panels,
.services.svc-anim.motion-done .container > .text-center {
will-change: auto;
transform: none;
}
/* The tab underline sweeps in only after the tab strip itself has arrived. */
.services.svc-anim .svc-tab.active::after { transform: translateY(0) scaleX(0); }
.services.svc-anim.in-view .svc-tab.active::after {
transform: translateY(0) scaleX(1);
transition-delay: 420ms;
}
.services.svc-anim.in-view.svc-interacted .svc-tab.active::after { transition-delay: 0ms; }
/* ---- 2. Image layer ----
A duplicate of the panel's own background that can be scaled without moving
the blue callout sitting on top of it. It inherits the inline
background-image from .svc-panel, so no markup change is needed. */
.svc-panel { --svc-img-scale: 1; }
.svc-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: inherit;
background-size: cover;
background-position: center;
transform: scale(var(--svc-img-scale));
transform-origin: center center;
transition: transform 1300ms cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
/* Starts fractionally zoomed in, settles to 1 as the section reveals. */
.services.svc-anim:not(.in-view) .svc-panel { --svc-img-scale: 1.06; }
/* ---- 3. Blue callout: slides in from the left on reveal and on tab change ---- */
@keyframes svcCalloutIn {
from { opacity: 0; transform: translate3d(-28px, 0, 0); }
to { opacity: 1; transform: none; }
}
.svc-callout {
transition: background 320ms ease-out;
}
.services.svc-anim .svc-panel.active .svc-callout { opacity: 0; }
.services.svc-anim.in-view .svc-panel.active .svc-callout {
opacity: 1;
animation: svcCalloutIn 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 380ms both;
}
/* Once the deck slides, the incoming panel already carries its callout across
the viewport — replaying the callout's own entrance on top of that reads as
two separate moves. So after the first tab change the callout simply rides
along with the panel; the entrance animation is kept for the first reveal. */
.services.svc-anim.in-view.svc-interacted .svc-panel .svc-callout {
opacity: 1;
animation: none;
}
/* ---- 4. Hover micro-interactions (pointer devices only) ---- */
@media (hover: hover) and (pointer: fine) {
.svc-arrow:hover {
background: var(--secondary);
border-color: var(--secondary);
transform: translateY(-2px);
}
.svc-tab:hover { transform: translateY(-2px); }
/* Counter-shift keeps the underline pinned to the tab strip while the
label lifts, so the bar never appears to detach. The .svc-anim.in-view
variants exist purely to out-weigh the entrance rule in section 1. */
.svc-tab:hover::after,
.services.svc-anim.in-view .svc-tab:hover::after {
opacity: 0.32;
transform: translateY(2px) scaleX(1);
}
.svc-tab.active:hover::after,
.services.svc-anim.in-view .svc-tab.active:hover::after {
opacity: 1;
transform: translateY(2px) scaleX(1);
}
.svc-panel:hover { --svc-img-scale: 1.03; }
.svc-panel:hover::before { transition-duration: 750ms; }
/* Same gradient, a touch brighter — keeps the shape, colour family and
text rendering identical while acknowledging the pointer. */
.svc-callout:hover {
background: linear-gradient(135deg, #2B92FF 0%, #0d5fd6 100%);
}
.svc-explore:hover svg { transform: translateX(6px); }
.svc-explore:hover { text-shadow: 0 0 14px rgba(255, 255, 255, 0.4); }
.services .btn-secondary:hover svg { transform: translateX(4px); }
}
/* ---- 5. "View all services" button ---- */
.services .btn-secondary {
transition: background-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
color 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.services .btn-secondary svg {
transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ---- 6. Responsive: shorter travel, faster timing on small screens ---- */
@media (max-width: 640px) {
.services.svc-anim .svc-head .eyebrow,
.services.svc-anim .svc-head h2,
.services.svc-anim .svc-head p,
.services.svc-anim .svc-tablist,
.services.svc-anim .svc-panels,
.services.svc-anim .container > .text-center {
transform: translate3d(0, 10px, 0);
transition-duration: 440ms;
}
.services.svc-anim .svc-head h2 { transition-delay: 60ms; }
.services.svc-anim .svc-head p { transition-delay: 110ms; }
.services.svc-anim .svc-tablist { transition-delay: 160ms; }
.services.svc-anim .svc-panels { transition-delay: 210ms; }
.services.svc-anim .container > .text-center { transition-delay: 270ms; }
.services.svc-anim:not(.in-view) .svc-panel { --svc-img-scale: 1.04; }
.svc-panel::before { transition-duration: 900ms; }
.services.svc-anim.in-view .svc-tab.active::after { transition-delay: 260ms; }
.services.svc-anim.in-view .svc-panel.active .svc-callout {
animation-name: svcCalloutInSm;
animation-duration: 460ms;
animation-delay: 240ms;
}
/* Small screens slide too, so the callout rides in with its panel rather
than running its own entrance a second time. */
.services.svc-anim.in-view.svc-interacted .svc-panel .svc-callout,
.services.svc-anim.in-view.svc-interacted .svc-panel.active .svc-callout {
animation: none;
}
}
@keyframes svcCalloutInSm {
from { opacity: 0; transform: translate3d(-14px, 0, 0); }
to { opacity: 1; transform: none; }
}
/* ---- 7. Reduced motion: show everything, move nothing ---- */
@media (prefers-reduced-motion: reduce) {
.services.svc-anim .svc-head .eyebrow,
.services.svc-anim .svc-head h2,
.services.svc-anim .svc-head p,
.services.svc-anim .svc-tablist,
.services.svc-anim .svc-panels,
.services.svc-anim .container > .text-center,
.services.svc-anim .svc-panel.active .svc-callout,
.services.svc-anim.in-view .svc-panel.active .svc-callout {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
.svc-panel,
.services.svc-anim:not(.in-view) .svc-panel,
.svc-panel:hover { --svc-img-scale: 1 !important; }
.svc-panel::before,
.svc-panel.active { transition: none !important; animation: none !important; }
/* The rail still jumps to the selected panel — it just gets there
instantly, with no horizontal travel. */
.svc-track { transition: none !important; }
/* Auto-advance never starts for this viewer, so its timer bar stays put. */
.svc-progress span { animation: none !important; }
.svc-arrow,
.svc-arrow:hover { transition: none !important; transform: none !important; }
.svc-tab,
.svc-tab::after { transition: none !important; }
.svc-tab:hover { transform: none !important; }
.svc-tab:hover::after { transform: translateY(0) scaleX(1) !important; }
.services.svc-anim .svc-tab.active::after,
.services.svc-anim.in-view .svc-tab.active::after {
opacity: 1 !important;
transform: translateY(0) scaleX(1) !important;
transition-delay: 0ms !important;
}
.svc-explore:hover svg,
.services .btn-secondary:hover svg { transform: none !important; }
.svc-callout,
.svc-callout:hover { transition: none !important; }
.svc-explore,
.svc-explore:hover { transition: none !important; text-shadow: none !important; }
}
/* ============================================
HOME — About section (large heading + stats row)
============================================ */
.about-home {
background: #F4F7FB;
}
.about-home-top {
align-items: center;
}
.about-home h2 {
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.12;
margin-bottom: var(--spacing-md);
}
.about-home p {
color: var(--medium-grey);
font-size: 17px;
line-height: 1.7;
margin-bottom: var(--spacing-lg);
}
.about-home .media-frame {
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-2xl);
border-top: 1px solid var(--border-color);
}
.about-stat .as-num {
font-family: var(--font-display);
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
}
.about-stat .as-label {
color: var(--medium-grey);
font-size: 15px;
font-weight: 500;
}
/* About page: the same counter row as the homepage, but standing alone as its
own band. On the homepage it sits at the foot of a section, so it carries a
top border and 56px of lead-in — as a standalone band that doubles up with
the section padding, hence the reset. Light background because the counter
is designed for one (grey labels, hairline rule), and it keeps the page from
running three dark sections back to back. */
.about-stats-band { background: #F4F7FB; }
.about-stats-band .about-stats {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
@media (max-width: 768px) {
.about-stats { grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
}
@media (max-width: 420px) {
.about-stats { grid-template-columns: 1fr; }
}
/* ============================================
REDESIGNED FOOTER
============================================ */
.footer {
background: #061626;
color: rgba(255, 255, 255, 0.7);
padding: 0;
}
/* CTA strip */
.footer-cta {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(90deg, rgba(14, 118, 253, 0.20), rgba(14, 118, 253, 0.04));
padding: var(--spacing-2xl) 0;
}
/* keep footer icons small (unsized inline SVGs default huge) */
.footer a svg {
width: 16px;
height: 16px;
flex-shrink: 0;
vertical-align: middle;
}
.footer-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xl);
flex-wrap: wrap;
}
.footer-cta-text h3 {
color: var(--white);
font-size: clamp(22px, 2.4vw, 30px);
margin: 0 0 6px;
}
.footer-cta-text p { margin: 0; color: rgba(255, 255, 255, 0.72); }
/* main grid */
.footer-social { display: flex; gap: 10px; }
.footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.72);
transition: background var(--transition-fast), border-color var(--transition-fast),
color var(--transition-fast), transform var(--transition-fast);
}
.footer-social a:hover {
background: rgba(14, 118, 253, 0.16);
border-color: var(--secondary);
color: var(--white);
transform: translateY(-2px);
}
.footer-social svg { width: 16px; height: 16px; }
/* The LinkedIn mark is a solid glyph while the mail mark is a 2px outline, so
side by side the mail icon read noticeably lighter. Thickening its stroke
evens out the optical weight — CSS overrides the presentation attribute. */
.footer-social svg[fill="none"] :is(path, rect, circle) { stroke-width: 2.2; }
/* ---- Footer directory: four columns ruled like a table ----
Column headings sit in a band of their own with a rule beneath, and the
columns are divided by hairlines that carry straight down through the
bottom bar. Achieved with gap:0 and per-cell padding - a grid gutter would
break each divider into segments. The bottom bar reuses the same template,
which is what keeps its rules in line with the ones above it. */
.footer-grid {
display: grid;
/* The last track is as wide as the first: it has to hold the copyright on
one line, which is what squares the bottom bar off against the reference
rather than letting it wrap to two. */
grid-template-columns: 1.4fr 0.95fr 1.25fr 1.4fr;
gap: 0;
/* stretch, not start: the columns must run the full height of the band or
each divider would stop wherever its own list happened to end, leaving
four rules of four different lengths. */
align-items: stretch;
position: relative;
/* Full-bleed. The element carries .container for its box model, but the
directory is meant to span the window - so the max-width is dropped and
the page gutter is replaced with a narrow edge inset. */
max-width: none;
width: 100%;
/* No padding on the block itself. The top is flush so the heading band
starts straight under the CTA strip rather than after a band of empty
navy, and the bottom padding lives on the cells so the dividers run all
the way down to the bottom bar's rule. */
padding: 0;
}
/* The continuous rule under the heading band. A border on each
would be
interrupted at every cell's padding; one absolutely positioned line is not.
Its offset is the grid's top padding plus the fixed heading height below. */
.footer-grid::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 64px; /* the heading band's height, which is now flush to the top */
height: 1px;
background: rgba(255, 255, 255, 0.12);
}
/* The inset lives on the cells, not on the grid, so the heading rule and the
column dividers reach the window edges while the text still stands clear of
them. The last cell is inset further to clear the fixed side rail and the
back-to-top button, which sit over that corner. */
.fg-col {
padding: 0 var(--spacing-xl) var(--spacing-lg);
min-width: 0;
display: flex;
flex-direction: column;
}
.fg-col:first-child { padding-left: var(--spacing-md); }
.fg-col:last-child { padding-left: var(--spacing-md); padding-right: 72px; }
.fg-col + .fg-col { border-left: 1px solid rgba(255, 255, 255, 0.12); }
/* Fixed so all four headings share one baseline and the rule below them lands
at a single known offset. Every heading is one short line at every width the
ruled layout is used at. */
.fg-col > h5 {
height: 64px;
display: flex;
align-items: center;
margin: 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: var(--white);
}
.fg-body {
padding-top: var(--spacing-lg);
list-style: none;
margin: 0;
flex: 1; /* fills the column so its last row can sit at the foot */
}
ul.fg-body {
display: flex;
flex-direction: column;
gap: 13px;
}
.fg-body li { margin: 0; line-height: 1.45; }
.fg-col a { color: rgba(255, 255, 255, 0.68); font-size: 15px; transition: color var(--transition-fast); }
.fg-col a:hover { color: var(--white); }
.fg-col .footer-all { color: #4a97ff; font-weight: 600; }
/* --- contact column --- */
.fg-contact .fg-body {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
/* The contact details are much shorter than the three link lists, so left to
itself this column stopped a long way above the others and the band's bottom
rule ran under a lot of nothing. Dropping the social row to the foot squares
the four columns off against each other. */
.fg-contact .footer-follow { margin-top: auto; }
.footer-blurb {
margin: 0;
color: rgba(255, 255, 255, 0.62);
font-size: 15px;
line-height: 1.65;
}
.footer-contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.footer-contact-list li {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 15px;
line-height: 1.55;
}
.footer-contact-list li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent-light); }
.footer-follow > span { display: block; color: var(--white); font-weight: 600; font-size: 14px; margin-bottom: 12px; }
/* --- bottom bar --- */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding: 0;
}
.footer-grid-bottom {
padding-top: var(--spacing-md);
padding-bottom: var(--spacing-md);
align-items: center;
}
/* No heading band down here, so the rule that divides it does not apply. */
.footer-grid-bottom::before { content: none; }
.footer-grid-bottom .fg-col {
align-self: stretch;
display: flex;
flex-direction: row; /* .fg-col is a column above; not down here */
align-items: center;
padding-bottom: 0;
}
.footer-logo { height: 38px; width: auto; filter: brightness(0) invert(1); }
/* 12px so the entity name holds one line in the last track at the widths the
four-column grid is used at. */
.footer-copy { color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 1.5; }
.footer-grid-bottom a { font-size: 14px; }
/* Below the desktop grid the ruled table stops being readable: four columns
squeeze "Instrumentation & Control" onto three lines, and vertical rules
between narrow columns read as clutter. Two columns, separated by rules
between rows instead.
The cells are addressed by their position in the DOM, and .fg-contact spans
the full width, so the four children land as: row 1 = contact, row 2 =
Company (left) + Services (right), row 3 = Industries (left). Only the third
child is ever in the right-hand column - an :nth-child(even) rule would put
a left border on the two cells that start a row. */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid::before { content: none; }
/* `.fg-col + .fg-col` carries the desktop divider at (0,2,0); a bare
`.fg-col` reset is a weight lighter and loses to it, so the adjacent
selector has to be named here to clear the border. */
.fg-col,
.fg-col + .fg-col,
.fg-col:first-child,
.fg-col:last-child {
padding: var(--spacing-lg) 0;
border-left: 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fg-contact {
grid-column: 1 / -1;
border-top: 0;
padding-top: 0;
}
.fg-col:nth-child(3) {
padding-left: var(--spacing-xl);
border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.fg-col > h5 { height: auto; margin-bottom: var(--spacing-md); }
.fg-body { padding-top: 0; }
.footer-grid-bottom { grid-template-columns: 1fr; gap: var(--spacing-md); }
.footer-grid-bottom .fg-col,
.footer-grid-bottom .fg-col:nth-child(3) {
padding: 0;
border: 0;
}
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
.fg-col,
.fg-col:nth-child(3) {
padding: var(--spacing-lg) 0;
border-left: 0;
}
}
@media (max-width: 900px) {
.footer-cta-inner { flex-direction: column; align-items: flex-start; }
}
/* ============================================
ABOUT — Core Values (dark, notched cards)
============================================ */
.core-values {
background: linear-gradient(160deg, #071A2E 0%, #0A2742 100%);
padding: var(--spacing-4xl) 0;
}
.core-values .section-header h2 { color: var(--white); }
.core-values .section-header p { color: rgba(255, 255, 255, 0.72); }
.cv-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
.cv-card {
position: relative;
background: var(--white);
padding: 36px 26px 46px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.30));
transition: transform var(--transition-normal);
}
.cv-card:hover { transform: translateY(-6px); }
.cv-card .cv-top { position: absolute; top: 0; left: 0; right: 0; height: 6px; }
.cv-card .cv-icon { width: 46px; height: 46px; color: var(--primary); margin-bottom: 18px; }
.cv-card .cv-icon svg { width: 100%; height: 100%; }
.cv-card h3 { color: var(--primary); font-size: 21px; line-height: 1.2; margin: 0 0 12px; }
.cv-card p { color: var(--medium-grey); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .cv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cv-grid { grid-template-columns: 1fr; } }
/* ============================================
TESTIMONIALS — 3-card grid
============================================ */
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
}
.testi-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}
.testi-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.testi-quote-mark {
font-family: var(--font-display);
font-size: 54px;
line-height: 0.5;
color: var(--accent);
margin-bottom: var(--spacing-sm);
}
.testi-text {
color: var(--primary);
font-size: 16px;
line-height: 1.65;
flex: 1;
margin: 0 0 var(--spacing-lg);
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, var(--secondary), var(--accent));
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
}
.testi-author strong { display: block; color: var(--primary); font-size: 15px; }
.testi-author span { color: var(--medium-grey); font-size: 13px; }
@media (max-width: 992px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .testi-grid { grid-template-columns: 1fr; } }
/* ============================================
CAREERS — positions + apply sidebar
============================================ */
.careers-layout {
display: grid;
grid-template-columns: 1.55fr 1fr;
gap: var(--spacing-2xl);
align-items: start;
}
.careers-roles {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.careers-apply { position: sticky; top: 100px; }
.careers-apply-card > p { margin-bottom: var(--spacing-md); }
.careers-apply-card .form-grid { gap: 12px; }
.careers-apply-card textarea.form-control { min-height: 88px; }
.careers-apply-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: var(--radius-xl);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.careers-apply-card h3 { margin: 0 0 4px; font-size: 22px; }
.careers-apply-card > p { color: var(--medium-grey); font-size: 14px; margin-bottom: var(--spacing-md); }
/* strip the inner form's own card styling + go single-column */
.careers-apply-card .form-card { padding: 0; border: 0; box-shadow: none; background: none; }
.careers-apply-card .form-grid { grid-template-columns: 1fr; gap: 14px; }
.careers-apply-card .form-group { margin-bottom: 0; }
.careers-apply-card .form-control { padding: 10px 12px; }
.careers-apply-card textarea.form-control { min-height: 96px; }
@media (max-width: 992px) {
.careers-layout { grid-template-columns: 1fr; }
.careers-apply { position: static; }
}
@media (max-width: 620px) {
.careers-roles { grid-template-columns: 1fr; }
}
/* ---- Open positions band ----
Deliberately NOT .section-alt: on inner pages that class is flipped to dark
navy site-wide, and this band sits directly under the dark "What we offer"
section. A very light blue-grey keeps the page rhythm Dark → Light → Dark
(CTA) → Dark (footer) while leaving the white cards and navy type as-is. */
.careers-positions {
background: linear-gradient(180deg, #F4F8FD 0%, #FAFCFF 100%);
padding: var(--spacing-4xl) 0;
}
/* Room to breathe between the heading and the first row of cards. */
.careers-positions .section-header.left { margin-bottom: var(--spacing-xl); }
/* Wider gutter between the two columns and between the job cards themselves. */
.careers-positions .careers-layout { gap: var(--spacing-2xl); }
.careers-positions .careers-roles { gap: var(--spacing-lg); }
/* Both columns start on the same line: the sticky offset is what the apply
card scrolls to, not where it begins, so nothing is pushed down. */
.careers-positions .careers-apply,
.careers-positions .careers-roles { margin-top: 0; }
/* The form column reads as an equal partner to the listings rather than a
narrow sidebar — a little more inner padding and a slightly deeper shadow. */
.careers-positions .careers-apply-card {
padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
box-shadow: 0 14px 40px rgba(6, 22, 38, 0.08);
}
@media (max-width: 992px) {
/* Stacked: the form goes full width under the listings. */
.careers-positions { padding: var(--spacing-3xl) 0; }
.careers-positions .careers-layout { gap: var(--spacing-xl); }
.careers-positions .careers-apply { width: 100%; }
}
@media (max-width: 640px) {
.careers-positions { padding: var(--spacing-2xl) 0; }
.careers-positions .careers-apply-card { padding: var(--spacing-md); }
}
/* ---- Apply form: consistent field rhythm ---- */
/* One gap value for every field in the column, so labels and inputs step
down the card evenly. */
.careers-apply-card .form-grid { gap: var(--spacing-sm); }
/* Matching heights across text inputs and selects. */
.careers-apply-card .form-control { padding: 11px 14px; }
.careers-apply-card :is(input, select).form-control { height: 44px; }
.careers-apply-card textarea.form-control { min-height: 104px; padding-top: 10px; }
/* Clear separation between the last field and the submit button. */
.careers-apply-card .form-card > button[type="submit"] { margin-top: var(--spacing-md); }
/* ---- File upload field ----
The native control is kept (it is the real input, and the