@charset "UTF-8";
/* ==========================================================================
Agile1Tech - design system
--------------------------------------------------------------------------
Hand-written CSS, no build step. This is a deliberate choice:
- no npm dependency tree to audit or keep patched
- no build server required to deploy a content fix
- the whole stylesheet ships in one render-blocking request under 20KB
Load order: tokens -> base -> layout -> components -> utilities -> motion.
COLOR CONTRAST
Amber (--gold) is 2.2:1 against white and must NEVER carry body text on a
light background. It is used as: a fill behind dark text, an accent rule,
or text on the dark navy surfaces (7.6:1). Every text/background pair used
in this file meets WCAG 2.2 AA (4.5:1 normal, 3:1 large).
========================================================================== */
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* Brand
Lightened 2026-08-03 at the owner's request - "lighter and brighter,
a bit more modern". The scale moved up roughly two steps; it is still
unmistakably navy, just less near-black.
These tokens are used BOTH as dark surfaces (white text on them) and as
dark text (on light surfaces). Lifting the scale pulls those two uses in
opposite directions, so both were measured rather than eyeballed:
white on navy-900 ............ 13.4:1 (was 17.2)
navy-900 as text on white .... 13.4:1 (was 16.3)
white on navy-700 ............ 8.1:1
Every pair still clears WCAG AA with a wide margin. Do not darken the
text colours or lighten these further without re-measuring both
directions - the failure mode is silent. */
--navy-900: #16304d;
--navy-800: #1e4066;
--navy-700: #27527f;
--charcoal: #2a3441;
/* Agile1Tech red, sampled from the official logo artwork. This is the
brand colour and leads: primary buttons, active states, brand accents.
#be1522 on white is 6.6:1, so white text on it passes AA at any size. */
--red: #be1522;
--red-dark: #97101b; /* hover */
/* Accent on dark surfaces. Lifted with the navy scale: against the new
navy-900 the old #e04452 fell to 2.8:1, under the 3:1 that SC 1.4.11
asks of a meaningful non-text boundary. #ee6470 gives 4.3:1 and still
reads red rather than pink. Used once, as a card border accent. */
--red-light: #ee6470;
/* Construction gold. The legacy site's accent colour, and the "limited
construction orange/gold" the brief asks for. Used for eyebrows on dark
surfaces, rules, and numeric markers - never for body text on light. */
--gold: #f49d1a;
--gold-dark: #c97d06;
--gold-text: #7a4d02; /* the only amber safe for text on light (5.9:1) */
/* Neutrals */
--white: #ffffff;
/* The page and panel neutrals were a warm beige (#faf8f5 / #f2eee8), which
read as slightly dated against the brand red. Moved to a bright, faintly
cool neutral - the single biggest contributor to the "lighter" feel, and
it lets the red read as deliberate rather than muddy. */
--off-white: #fbfcfe; /* page background */
--sand: #eef3f8; /* panels, alternating sections */
--line: #e4eaf1;
--line-dark: #2f5175; /* borders on dark surfaces, lifted with the navy */
--gray-600: #5b6875; /* muted text on white - 5.6:1 */
--gray-800: #3a4652; /* body text - 9.4:1 */
/* Semantic */
--bg: var(--off-white);
--surface: var(--white);
--text: var(--gray-800);
--text-strong: var(--navy-900);
--text-muted: var(--gray-600);
/* Type - system stack for zero network cost. To switch to self-hosted
Source Sans 3, add the @font-face rules and prepend the family here. */
--font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system,
"Helvetica Neue", Arial, sans-serif;
--step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
--step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem);
--step-2: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
--step-3: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
--step-4: clamp(2rem, 1.6rem + 2vw, 3rem);
--step-5: clamp(2.375rem, 1.75rem + 3.1vw, 3.75rem);
/* Space */
--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
--sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
--sp-9: 5.5rem;
--wrap: 1180px;
--radius: 10px;
--radius-lg: 16px;
/* Softer and more diffuse than before, and tinted with the lifted navy
rather than the old near-black. Wider blur at lower opacity reads as
light sitting on the surface; a tight dark shadow reads as a border. */
--shadow-sm: 0 1px 2px rgb(22 48 77 / 0.04), 0 2px 6px rgb(22 48 77 / 0.05);
--shadow-md: 0 4px 10px -2px rgb(22 48 77 / 0.06), 0 12px 28px -8px rgb(22 48 77 / 0.09);
--shadow-lg: 0 12px 32px -10px rgb(22 48 77 / 0.12), 0 28px 60px -20px rgb(22 48 77 / 0.12);
--ease: cubic-bezier(0.32, 0.72, 0.35, 1);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--sp-4);
color: var(--text-strong);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.018em;
text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--navy-700); text-underline-offset: 0.18em; }
a:hover { color: var(--gold-text); }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }
li + li { margin-top: var(--sp-2); }
hr { height: 1px; border: 0; background: var(--line); margin: var(--sp-6) 0; }
strong { color: var(--text-strong); font-weight: 650; }
/* Visible focus everywhere. Never remove without a replacement. */
:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 2px;
border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--gold); }
/* Screen-reader-only text that becomes visible on focus (skip link). */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100%;
left: var(--sp-4);
z-index: 200;
padding: var(--sp-3) var(--sp-5);
background: var(--navy-900);
color: var(--white);
font-weight: 600;
border-radius: 0 0 var(--radius) var(--radius);
text-decoration: none;
}
.skip-link:focus {
top: 0;
color: var(--white);
}
/* --------------------------------------------------------------------------
3. Layout
-------------------------------------------------------------------------- */
.wrap {
width: min(var(--wrap), 100% - 2.5rem);
margin-inline: auto;
}
@media (max-width: 30rem) { .wrap { width: min(var(--wrap), 100% - 2rem); } }
.section { padding-block: var(--sp-8); }
.section--lg { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section--dark {
background: var(--navy-900);
color: #d3dbe4;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark a { color: var(--gold); }
.section--sand { background: var(--sand); }
.section--white { background: var(--surface); }
.section-head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: var(--step-1); color: var(--text-muted); margin-bottom: 0; }
.section--dark .section-head p { color: #a9b8c8; }
.eyebrow {
display: block;
margin-bottom: var(--sp-3);
font-size: var(--step--1);
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gold-text);
}
.section--dark .eyebrow, .on-dark .eyebrow { color: var(--gold); }
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stack > * + * { margin-top: var(--sp-4); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
/* --------------------------------------------------------------------------
4. Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 0.8125rem 1.5rem;
min-height: 44px; /* AA target size */
border: 2px solid transparent;
border-radius: var(--radius);
font: inherit;
font-weight: 650;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* Primary action carries the brand red. White on #be1522 is 6.6:1. */
.btn--primary {
background: var(--red);
border-color: var(--red);
color: var(--white);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--red-dark);
border-color: var(--red-dark);
color: var(--white);
box-shadow: var(--shadow-md);
}
/* Construction-gold action, for the secondary CTA on dark surfaces where red
on navy would sit too close in value. Navy on gold is 7.6:1. */
.btn--gold {
background: var(--gold);
border-color: var(--gold);
color: var(--navy-900);
box-shadow: var(--shadow-sm);
}
.btn--gold:hover {
background: var(--gold-dark);
border-color: var(--gold-dark);
color: var(--navy-900);
box-shadow: var(--shadow-md);
}
.btn--solid {
background: var(--navy-800);
border-color: var(--navy-800);
color: var(--white);
}
.btn--solid:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.btn--outline {
background: transparent;
border-color: var(--navy-700);
color: var(--navy-800);
}
.btn--outline:hover { background: var(--navy-800); color: var(--white); }
.btn--ghost-light {
background: transparent;
border-color: rgb(255 255 255 / 0.55);
color: var(--white);
}
.btn--ghost-light:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-5);
}
/* --------------------------------------------------------------------------
5. Header + navigation
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
border-bottom: 1px solid var(--line);
}
.header-utility {
background: var(--navy-900);
color: #c3cedb;
font-size: var(--step--1);
}
/* The header uses a wider container than the page body so that eight
top-level nav items, the brand and the CTA all fit before the mobile
breakpoint. */
.site-header .wrap { width: min(1340px, 100% - 2.5rem); }
.header-utility .wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--sp-4);
min-height: 40px;
}
.header-utility a { display: inline-flex; align-items: center; gap: 0.35em; }
.util-icon { width: 0.95em; height: 0.95em; }
.header-utility a { color: #e3eaf1; text-decoration: none; font-weight: 600; }
.header-utility a:hover { color: var(--gold); text-decoration: underline; }
.header-utility .util-id { color: #93a4b6; }
.header-main .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
min-height: 76px;
/* Containing block for the full-width mega menu. */
position: relative;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--sp-3);
text-decoration: none;
/* min-width:0 lets the brand shrink inside the flex header instead of
forcing the menu button off-screen at narrow widths (WCAG 1.4.10). */
min-width: 0;
}
/* Official Agile1Tech logo artwork. Intrinsic size 568x241; width/height are
set in the markup so the header never shifts while it loads. */
.brand-logo {
width: auto;
height: 40px;
flex-shrink: 0;
}
.brand-name {
display: flex;
flex-direction: column;
line-height: 1.1;
padding-left: var(--sp-3);
margin-left: var(--sp-1);
border-left: 1px solid var(--line);
}
.brand-name b {
color: var(--navy-900);
font-size: 0.9375rem;
font-weight: 750;
letter-spacing: -0.01em;
}
.brand-name span {
color: var(--text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* The logo is red-on-transparent, so on the navy footer it sits on a white
chip. Logotypes are exempt from WCAG contrast, but muddy is still muddy. */
.footer-logo {
display: inline-block;
padding: var(--sp-3) var(--sp-4);
background: var(--white);
border-radius: var(--radius);
}
.footer-logo img { height: 36px; width: auto; }
/* Desktop nav */
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; }
/* Five top-level items rather than nine, so the labels can be set at a
readable size with real space between them instead of reading as a dense
band of small text. Company groups About / Why / Our Team / Careers. */
.nav > ul { display: flex; align-items: center; gap: var(--sp-2); }
.nav > ul > li { margin: 0; position: relative; }
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.3em;
/* The active-page underline is positioned against the link itself, so it
stays correct even where the parent is position:static. */
position: relative;
padding: 0.65rem 0.8rem;
border-radius: var(--radius);
color: var(--navy-800);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
background: none;
border: 0;
font-family: inherit;
cursor: pointer;
}
.nav-link:hover { background: var(--sand); color: var(--navy-900); }
/* is-active marks a grouped menu whose child page is the current one. */
.nav-link[aria-current="page"],
.nav-link.is-active { color: var(--gold-text); }
.nav-link[aria-current="page"]::after,
.nav-link.is-active::after {
content: "";
position: absolute;
left: 0.8rem; right: 0.8rem; bottom: 0.15rem;
height: 2px;
background: var(--gold);
border-radius: 2px;
}
.nav-caret { width: 0.6em; height: 0.6em; transition: transform 0.18s var(--ease); }
.nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.submenu {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
min-width: 20rem;
padding: var(--sp-2);
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.submenu[hidden] { display: none; }
.submenu li { margin: 0; }
.submenu a {
display: block;
padding: 0.55rem 0.75rem;
border-radius: 8px;
color: var(--navy-800);
font-size: 0.9375rem;
font-weight: 550;
text-decoration: none;
}
.submenu a:hover { background: var(--sand); color: var(--navy-900); }
/* Wide mega-menu for construction: four capability groups side by side, so
twenty services stay browsable without an endless single column.
It is positioned against the HEADER CONTAINER, not against its own .
Anchoring an 864px panel to a nav item that sits ~290px from the left edge
pushed 409px of it off-screen at ordinary zoom levels. Spanning the header
container instead means it can never overflow the viewport, because the
container is already constrained to it. The parent is switched to
position:static so it stops being the containing block. */
.nav > ul > li.has-mega { position: static; }
.submenu--wide {
display: grid;
grid-template-columns: repeat(4, minmax(11rem, 1fr));
gap: var(--sp-2) var(--sp-4);
padding: var(--sp-5);
left: 0;
right: 0;
min-width: 0;
width: auto;
}
.submenu--wide > li:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); padding-bottom: var(--sp-2); margin-bottom: var(--sp-2); }
.submenu-group > a { padding-left: 0.4rem; }
.submenu-group ul { list-style: none; margin: 0; padding: 0; }
.submenu-group ul a { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); padding: 0.35rem 0.4rem; }
.submenu-group ul a:hover { color: var(--navy-900); }
.header-cta { display: none; flex-shrink: 0; }
/* Mobile toggle */
.nav-toggle {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: 0.55rem 0.9rem;
min-height: 44px;
background: var(--navy-900);
color: var(--white);
border: 0;
border-radius: var(--radius);
font: inherit;
font-weight: 650;
font-size: 0.875rem;
cursor: pointer;
}
.nav-toggle svg { width: 1.1em; height: 1.1em; }
@media (min-width: 81rem) {
.nav { display: block; }
.header-cta { display: inline-flex; }
.nav-toggle { display: none; }
}
/* Mobile drawer */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
flex-direction: column;
background: var(--white);
overflow-y: auto;
overscroll-behavior: contain;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-4) 1.25rem;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
background: var(--white);
}
.mobile-nav-body { padding: var(--sp-4) 1.25rem var(--sp-8); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; border-bottom: 1px solid var(--line); }
.mobile-nav a, .mobile-nav .m-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
width: 100%;
padding: 0.9rem 0.25rem;
min-height: 48px;
background: none;
border: 0;
color: var(--navy-900);
font: inherit;
font-size: 1.0625rem;
font-weight: 650;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.mobile-nav .m-sub { padding: 0 0 var(--sp-3) var(--sp-4); }
.mobile-nav .m-sub[hidden] { display: none; }
.mobile-nav .m-sub li { border: 0; }
.mobile-nav .m-sub a {
padding: 0.6rem 0.25rem;
min-height: 44px;
font-size: 0.9688rem;
font-weight: 550;
color: var(--gray-800);
}
.mobile-nav .m-toggle .nav-caret { transition: transform 0.18s var(--ease); flex-shrink: 0; }
.mobile-nav .m-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mobile-nav-cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.nav-close {
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
background: var(--sand);
border: 0;
border-radius: var(--radius);
color: var(--navy-900);
cursor: pointer;
}
.nav-close svg { width: 1.25rem; height: 1.25rem; }
/* --------------------------------------------------------------------------
6. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
background: var(--navy-900);
color: #d8e0e9;
overflow: hidden;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60rem 40rem at 78% 15%, rgb(244 157 26 / 0.13), transparent 62%),
linear-gradient(160deg, rgb(12 28 44 / 0.2), rgb(12 28 44 / 0.86) 62%);
pointer-events: none;
}
.hero-media {
position: absolute;
inset: 0;
}
.hero-media img,
.hero-media video {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.42;
}
/* WCAG 2.2.2 (Pause, Stop, Hide): moving content that starts automatically and
runs longer than five seconds needs a control to stop it. Revealed by
nav.js only when the video is actually playing - if the visitor prefers
reduced motion the video never starts and no control is shown. */
.hero-motion-toggle {
position: absolute;
right: var(--sp-4);
bottom: var(--sp-4);
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: 44px;
padding: 0.5rem 0.9rem;
background: rgb(12 28 44 / 0.72);
border: 1px solid rgb(255 255 255 / 0.35);
border-radius: var(--radius);
color: var(--white);
font: inherit;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(4px);
}
.hero-motion-toggle:hover { background: var(--navy-900); border-color: var(--white); }
.hero-motion-toggle svg { width: 1em; height: 1em; }
.hero-motion-toggle[hidden] { display: none; }
.hero .wrap { position: relative; z-index: 2; }
.hero-inner {
padding-block: clamp(3.5rem, 8vw, 6.5rem);
max-width: 46rem;
}
.hero h1 {
color: var(--white);
margin-bottom: var(--sp-5);
}
.hero-lede {
font-size: var(--step-1);
color: #c6d2df;
max-width: 42rem;
}
.hero .btn-row { margin-top: var(--sp-6); }
/* Compact hero for internal pages */
.page-hero {
background: var(--navy-900);
color: #c6d2df;
padding-block: var(--sp-7);
position: relative;
}
.page-hero::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(48rem 24rem at 88% 0%, rgb(244 157 26 / 0.12), transparent 60%);
pointer-events: none;
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); max-width: 24ch; }
.page-hero .lede { font-size: var(--step-1); color: #b9c7d6; max-width: 60ch; margin-bottom: 0; }
/* Breadcrumbs */
.breadcrumb { margin-bottom: var(--sp-4); font-size: var(--step--1); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.4rem; color: #93a4b6; }
.breadcrumb li + li::before { content: "/"; color: #7d8fa3; }
.breadcrumb a { color: #cdd8e4; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; }
/* --------------------------------------------------------------------------
7. Trust bar
-------------------------------------------------------------------------- */
.trust-bar {
background: var(--navy-800);
border-top: 3px solid var(--gold);
color: #cad6e2;
padding-block: var(--sp-5);
}
.trust-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
gap: var(--sp-4) var(--sp-5);
list-style: none;
margin: 0; padding: 0;
}
.trust-list li { margin: 0; }
.trust-list dt {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.15rem;
}
.trust-list dd {
margin: 0;
color: var(--white);
font-size: var(--step-1);
font-weight: 700;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
8. Cards
-------------------------------------------------------------------------- */
.card {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card:hover {
transform: translateY(-3px);
border-color: #cfd6de;
box-shadow: var(--shadow-md);
}
.card-media {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
position: relative;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.card-body p { color: var(--text-muted); margin-bottom: var(--sp-4); }
.card-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.4em;
color: var(--navy-700);
font-weight: 650;
font-size: 0.9375rem;
text-decoration: none;
}
.card-link::after { content: "\2192"; transition: transform 0.18s var(--ease); }
.card:hover .card-link::after { transform: translateX(3px); }
.card-link:hover { color: var(--gold-text); text-decoration: underline; }
/* Whole-card link: the covers the card but the accessible name stays on
the heading text, so screen readers announce something meaningful. */
.card--linked { position: relative; }
.card--linked .card-link::before { content: ""; position: absolute; inset: 0; }
.icon-badge {
display: grid;
place-items: center;
width: 48px; height: 48px;
margin-bottom: var(--sp-4);
background: var(--sand);
color: var(--navy-800);
border-radius: var(--radius);
}
.section--dark .icon-badge { background: rgb(244 157 26 / 0.14); color: var(--gold); }
.icon-badge svg { width: 24px; height: 24px; }
/* Feature list */
.feature {
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
border-top: 3px solid var(--gold);
}
.section--dark .feature {
background: rgb(255 255 255 / 0.04);
border-color: var(--line-dark);
border-top-color: var(--gold);
}
.feature h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.feature p { color: var(--text-muted); margin-bottom: 0; font-size: 0.9688rem; }
.section--dark .feature p { color: #a9b8c8; }
/* Checked scope list */
.check-list { list-style: none; padding: 0; }
.check-list li {
position: relative;
padding-left: 1.75rem;
margin-top: var(--sp-3);
}
.check-list li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 0.5rem; height: 0.5rem;
background: var(--gold);
border-radius: 2px;
transform: rotate(45deg);
}
/* --------------------------------------------------------------------------
9. Process timeline
-------------------------------------------------------------------------- */
.process { counter-reset: step; display: grid; gap: var(--sp-5); }
@media (min-width: 48rem) {
.process { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-5); }
}
.process-step {
position: relative;
padding-top: var(--sp-5);
border-top: 2px solid var(--line-dark);
}
.process-step::before {
counter-increment: step;
content: "0" counter(step);
position: absolute;
top: -0.9rem;
left: 0;
padding-right: 0.6rem;
background: var(--navy-900);
color: var(--gold);
font-size: 0.9375rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.process-step h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.process-step p { color: #a9b8c8; font-size: 0.9688rem; margin-bottom: 0; }
/* Light-background variant of the process timeline. */
.process--light .process-step { border-top-color: var(--line); }
.process--light .process-step::before { background: var(--bg); color: var(--gold-text); }
.process--light .process-step p { color: var(--text-muted); }
.section--sand .process--light .process-step::before { background: var(--sand); }
/* --------------------------------------------------------------------------
10. Past performance
-------------------------------------------------------------------------- */
.project-card { border-left: 4px solid var(--gold); }
.meta-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
gap: var(--sp-4);
margin: 0 0 var(--sp-5);
padding: var(--sp-5);
background: var(--sand);
border-radius: var(--radius);
}
.meta-list div { margin: 0; }
.meta-list dt {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 0.15rem;
}
.meta-list dd { margin: 0; color: var(--navy-900); font-weight: 650; }
.role-tag {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
background: var(--navy-800);
color: var(--white);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
11. Credential tiles
-------------------------------------------------------------------------- */
.cred {
display: flex;
flex-direction: column;
gap: var(--sp-2);
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
min-height: 100%;
}
.cred b { color: var(--navy-900); font-size: var(--step-0); }
.cred small { color: var(--text-muted); font-size: var(--step--1); }
.cred a { font-size: var(--step--1); font-weight: 600; }
/* Unverified-content badge. Deliberately loud - it must be impossible to
mistake gated content for confirmed content during review. */
.unconfirmed {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.15rem 0.5rem;
background: #fff4d6;
border: 1px solid #e0b23c;
border-radius: 4px;
color: #6b4a00;
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.unconfirmed-note {
margin-top: var(--sp-2);
padding: var(--sp-3);
background: #fffbf0;
border-left: 3px solid #e0b23c;
border-radius: 0 4px 4px 0;
color: #6b4a00;
font-size: 0.8125rem;
line-height: 1.5;
}
.env-banner {
padding: var(--sp-3) 0;
background: #6b4a00;
color: #fff8e6;
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
}
.env-banner strong { color: #ffd88a; }
/* --------------------------------------------------------------------------
11b. Capability statement document
Rendered to read like a real one-page capability statement, so a
contracting officer gets the whole thing on screen without downloading
anything.
-------------------------------------------------------------------------- */
.capstat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.capstat-head {
display: grid;
gap: var(--sp-5);
padding: var(--sp-6);
background: var(--navy-900);
color: #c6d2df;
border-bottom: 4px solid var(--gold);
}
@media (min-width: 52rem) {
.capstat-head { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.capstat-kicker {
margin-bottom: var(--sp-2);
color: var(--gold);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.capstat-head h3 {
margin-bottom: var(--sp-2);
color: var(--white);
font-size: var(--step-3);
}
.capstat-tagline { margin-bottom: 0; color: #b3c2d2; font-size: var(--step-1); }
.capstat-ids {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
gap: var(--sp-3) var(--sp-4);
margin: 0;
padding: var(--sp-4);
background: rgb(255 255 255 / 0.06);
border-radius: var(--radius);
}
.capstat-ids div { margin: 0; }
.capstat-ids dt {
color: var(--gold);
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.capstat-ids dd { margin: 0; color: var(--white); font-weight: 700; font-size: 0.9375rem; }
.capstat-body { display: grid; }
@media (min-width: 60rem) {
.capstat-body { grid-template-columns: 1.7fr 1fr; }
}
.capstat-main { padding: var(--sp-6); }
.capstat-side {
padding: var(--sp-6);
background: var(--sand);
border-top: 1px solid var(--line);
}
@media (min-width: 60rem) {
.capstat-side { border-top: 0; border-left: 1px solid var(--line); }
}
.capstat-main > section + section,
.capstat-side > section + section { margin-top: var(--sp-6); }
.capstat h4 {
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-2);
border-bottom: 2px solid var(--gold);
color: var(--navy-900);
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.capstat-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 40rem) { .capstat-grid { grid-template-columns: 1fr 1fr; } }
.capstat-grid strong { display: block; color: var(--navy-900); margin-bottom: var(--sp-2); }
.capstat-grid p { font-size: 0.9063rem; color: var(--text-muted); margin-bottom: var(--sp-2); }
.capstat-grid ul { padding-left: 1.1em; font-size: 0.9063rem; }
.capstat-grid li + li { margin-top: 0.25rem; }
.capstat-list { list-style: none; padding: 0; font-size: 0.9375rem; }
.capstat-list li {
padding-left: 1.1rem;
margin-top: var(--sp-3);
border-left: 2px solid var(--line);
}
.capstat-list strong { color: var(--navy-900); }
.capstat-dl { margin: 0; font-size: 0.9063rem; }
.capstat-dl dt {
color: var(--text-muted);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.capstat-dl dd { margin: 0 0 var(--sp-3); color: var(--navy-900); font-weight: 600; }
.capstat-codes { list-style: none; padding: 0; font-size: 0.9063rem; }
.capstat-codes li { margin-top: var(--sp-2); color: var(--text-muted); }
.capstat-codes b { color: var(--navy-900); font-variant-numeric: tabular-nums; }
.capstat-codes em { color: var(--text-muted); font-size: 0.8438rem; }
.capstat-contact { font-style: normal; font-size: 0.9375rem; line-height: 1.8; }
/* Inline PDF viewer */
.pdf-frame {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.pdf-frame iframe {
display: block;
width: 100%;
height: min(85vh, 900px);
border: 0;
}
@media (max-width: 48rem) {
/* A tall PDF frame is unusable on a phone; shorten it and lean on the
HTML version above, which is the primary experience anyway. */
.pdf-frame iframe { height: 60vh; }
}
/* --------------------------------------------------------------------------
11c. Credential badges, licenses, partners, clients
-------------------------------------------------------------------------- */
/* Certification badge grid. Badges are supplied at differing aspect ratios,
so each sits in a fixed-height box and scales to fit rather than being
cropped or stretched. */
.badge-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
gap: var(--sp-4);
}
.badge-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-4);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
text-align: center;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.badge-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.badge-figure {
display: grid;
place-items: center;
width: 100%;
height: 82px;
}
.badge-figure img { max-height: 82px; width: auto; max-width: 100%; object-fit: contain; }
.badge-card b { color: var(--navy-900); font-size: 0.9375rem; line-height: 1.3; }
.badge-card small { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.4; }
.badge-card a { font-size: 0.8125rem; font-weight: 600; }
/* Compact badge strip for the homepage trust section. */
.badge-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--sp-5) var(--sp-7);
padding: var(--sp-5) 0;
}
.badge-strip img {
height: 58px;
width: auto;
opacity: 0.92;
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.badge-strip a:hover img,
.badge-strip li:hover img { opacity: 1; transform: scale(1.04); }
.badge-strip li { margin: 0; }
/* License card - visually distinct from certifications, because a licence is
a legal authorisation to perform work and a certification is not. */
.license-card {
display: flex;
gap: var(--sp-4);
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--red);
border-radius: var(--radius);
}
.license-card .icon-badge { margin-bottom: 0; flex-shrink: 0; background: #fdeaec; color: var(--red); }
.license-card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.license-card p { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 0; }
.license-card .license-number {
display: inline-block;
margin-top: var(--sp-2);
padding: 0.15rem 0.55rem;
background: var(--sand);
border-radius: 4px;
font-size: 0.8125rem;
font-weight: 700;
color: var(--navy-900);
font-variant-numeric: tabular-nums;
}
.section--dark .license-card { background: rgb(255 255 255 / 0.04); border-color: var(--line-dark); border-left-color: var(--red-light); }
.section--dark .license-card h3 { color: var(--white); }
.section--dark .license-card p { color: #a9b8c8; }
.section--dark .license-card .license-number { background: rgb(255 255 255 / 0.1); color: var(--white); }
/* Client / partner name tiles. Text, not logos - see clients.php for why. */
.name-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: var(--sp-4);
}
.name-tile {
padding: var(--sp-5);
background: var(--surface);
border: 1px solid var(--line);
border-top: 3px solid var(--navy-800);
border-radius: var(--radius);
}
.name-tile--partner { border-top-color: var(--gold); }
.name-tile { display: flex; flex-direction: column; }
/* Facility illustration at the head of a client tile. */
.name-tile-figure {
display: block;
margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
background: var(--navy-900);
}
.name-tile-figure img { display: block; width: 100%; height: auto; }
.name-tile b { display: block; color: var(--navy-900); font-size: var(--step-1); margin-bottom: var(--sp-1); }
.name-tile small { display: block; color: var(--text-muted); font-size: 0.8125rem; }
.name-tile small + small { margin-top: var(--sp-2); }
.name-tile a { font-size: 0.8125rem; font-weight: 600; }
/* Project status pill */
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.status-pill--ongoing { background: #e8f5e9; color: #1b5e20; }
.status-pill--ongoing::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2e7d32; }
.status-pill--complete { background: var(--sand); color: var(--navy-800); }
/* --------------------------------------------------------------------------
11d. Project galleries
-------------------------------------------------------------------------- */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
gap: var(--sp-4);
}
.gallery-item {
position: relative;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
background: var(--navy-800);
aspect-ratio: 4 / 3;
}
.gallery-item button {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.gallery-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.3s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item figcaption {
position: absolute;
inset: auto 0 0 0;
padding: var(--sp-4) var(--sp-3) var(--sp-3);
background: linear-gradient(transparent, rgb(12 28 44 / 0.85));
color: var(--white);
font-size: 0.8125rem;
text-align: left;
}
/* Before / after pair */
.compare {
display: grid;
gap: var(--sp-3);
grid-template-columns: 1fr 1fr;
margin: 0 0 var(--sp-5);
}
.compare figure { margin: 0; }
.compare figcaption {
margin-top: var(--sp-2);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.compare img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
/* Lightbox dialog.
A closed