/* ════════════════════════════════════════
VANGUARD ELECTRICAL COMPLIANCE — SHARED STYLESHEET
════════════════════════════════════════ */
/* ── Tokens ── */
:root {
--navy: #0f1c43;
--navy-2: #12224e;
--navy-3: #16295c;
--navy-4: #1f3672;
--gold: #e4a024;
--gold-hover: #c07f14;
--gold-light: #f2c76b;
--blue: #3f73b9;
--blue-light: #5d8fd4;
--blue-dark: #2a5490;
--text: #e8e8e8;
--text-muted: #9fb2cf;
--white: #ffffff;
--border: rgba(63,115,185,0.30);
--border-gold: rgba(228,160,36,0.32);
--radius: 6px;
--shadow: 0 4px 24px rgba(0,0,0,0.35);
--transition: 0.25s ease;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--navy); color: var(--text); font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 1.75; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ── Utility ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.gold { color: var(--gold); }
.section-tag {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase;
color: var(--gold);
border: 1px solid var(--border); border-radius: 20px;
padding: 4px 14px; margin-bottom: 16px;
}
.section-title {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.6rem, 3.5vw, 2.2rem);
font-weight: 700; line-height: 1.2;
color: var(--white); margin-bottom: 16px;
}
.section-title span { color: var(--gold); }
.section-intro { color: var(--text-muted); font-size: 1.05rem; max-width: 580px; margin-bottom: 48px; }
.btn {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 0.85rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
border-radius: var(--radius); padding: 14px 32px;
cursor: pointer; transition: var(--transition); border: none;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-outline { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--navy); }
.divider { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 0 0 28px; }
.divider-centre { margin: 0 auto 28px; }
/* ════════════════════════════════════════
TOP BAR
════════════════════════════════════════ */
.top-bar { background: var(--navy-3); border-bottom: 1px solid var(--border); padding: 8px 0; font-size: 0.8rem; color: var(--text-muted); }
.top-bar .container { display: flex; justify-content: flex-end; align-items: center; gap: 28px; }
.top-bar a:hover { color: var(--gold); }
.top-bar .tb-item { display: flex; align-items: center; gap: 7px; }
/* ════════════════════════════════════════
HEADER
════════════════════════════════════════ */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--navy); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 24px; max-width: 1160px; margin: 0 auto; gap: 16px; }
.site-logo img { max-height: 44px; width: auto; margin: 0 auto; }
.site-logo a { display: inline-block; cursor: pointer; }
/* ── Logo power-on ──
Amber bloom that rises and settles as the page arrives. Uses filter and
opacity only — neither affects layout, so the header never moves and there
is no CLS cost. drop-shadow follows the PNG's alpha, so the glow traces the
letterforms rather than a bounding box. */
@keyframes logo-glow {
0% {
opacity: 0.35;
filter: drop-shadow(0 0 0 rgba(228,160,36,0));
}
40% {
opacity: 1;
filter: drop-shadow(0 0 10px rgba(228,160,36,0.9))
drop-shadow(0 0 26px rgba(228,160,36,0.5));
}
100% {
opacity: 1;
filter: drop-shadow(0 0 0 rgba(228,160,36,0));
}
}
.site-logo img {
animation: logo-glow 3s ease-out both;
will-change: filter, opacity;
}
@media (prefers-reduced-motion: reduce) {
.site-logo img { animation: none; }
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 6px; }
.nav-right { justify-content: flex-end; }
.nav-left a, .nav-right a { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px; border-radius: var(--radius); transition: var(--transition); white-space: nowrap; }
.nav-left a:hover, .nav-right a:hover { color: var(--gold); }
.nav-left a.active, .nav-right a.active { color: var(--gold); }
.nav-right .btn-nav-cta { background: var(--gold); color: var(--navy) !important; padding: 8px 18px; }
.nav-right .btn-nav-cta:hover { background: var(--gold-hover); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; appearance: none; -webkit-appearance: none; color: inherit; line-height: 0; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.mobile-nav { display: none; flex-direction: column; background: var(--navy-3); border-top: 1px solid var(--border); padding: 16px 24px; gap: 4px; }
.mobile-nav a { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); padding: 10px 0; border-bottom: 1px solid var(--border); transition: var(--transition); }
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav.open { display: flex; }
/* ════════════════════════════════════════
HOME DROPDOWN
Desktop opens on hover or keyboard focus — :focus-within means tabbing to
Home reveals the menu and the next Tab lands inside it, so there is no JS
and no aria-expanded to keep honest. visibility is transitioned alongside
opacity (delayed on the way out) so the menu cannot be tabbed into or
clicked while it is invisible.
════════════════════════════════════════ */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop-menu {
position: absolute; top: 100%; left: 0; z-index: 120;
display: flex; flex-direction: column; min-width: 190px;
background: var(--navy-3); border: 1px solid var(--border);
border-radius: var(--radius); padding: 6px; box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu {
opacity: 1; visibility: visible; transform: translateY(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav-drop-menu a { padding: 9px 12px; white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--navy-4); }
@media (prefers-reduced-motion: reduce) {
.nav-drop-menu { transition: none; }
}
/* Mobile drawer: a real disclosure, because there is no hover to open with.
The chevron and the panel both key off aria-expanded, so the button's state
and what is on screen can never disagree. */
.mnav-group { display: flex; flex-direction: column; }
.mnav-toggle {
display: flex; align-items: center; justify-content: space-between;
font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 600;
color: var(--text-muted); background: none; border: 0;
border-bottom: 1px solid var(--border);
padding: 10px 0; text-align: left; cursor: pointer;
transition: var(--transition);
}
.mnav-toggle:hover { color: var(--gold); }
.mnav-toggle::after {
content: ''; width: 7px; height: 7px; margin-right: 4px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 0.2s ease;
}
.mnav-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.mnav-sub { display: none; flex-direction: column; padding-left: 14px; }
.mnav-toggle[aria-expanded="true"] + .mnav-sub { display: flex; }
@media (prefers-reduced-motion: reduce) {
.mnav-toggle::after { transition: none; }
}
/* ════════════════════════════════════════
HOMEPAGE HERO
════════════════════════════════════════ */
.hero { background: radial-gradient(ellipse at 10% 90%, rgba(63,115,185,0.28) 0%, transparent 55%), linear-gradient(135deg, #09122d 0%, #0f1c43 50%, #1c3069 100%); padding: 110px 0 100px; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(63,115,185,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(63,115,185,0.07) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.hero::after { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(228,160,36,0.12) 0%, transparent 70%); pointer-events: none; }
.hero .container { position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.hero-tag::before { content: ''; display: block; width: 28px; height: 2px; background: var(--gold); }
.hero h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 800; line-height: 1.15; color: var(--white); margin-bottom: 24px; max-width: 700px; }
.hero h1 span { color: var(--gold); }
.hero p { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-muted); max-width: 560px; margin-bottom: 40px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 48px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.hero-stat strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; margin-bottom: 4px; }
.hero-stat span { font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* Star in the stat row — inline SVG rather than the ★ glyph, which falls back to
a system font at the wrong weight and varies by platform. */
.stat-star {
width: 0.72em; height: 0.72em;
fill: currentColor;
margin-left: 0.06em;
vertical-align: baseline;
position: relative; top: 0.02em;
}
/* ════════════════════════════════════════
HERO SLIDER
Images cross-fade behind fixed hero text. The headline, CTAs and stats never
move, so there is one stable LCP element and the message can't rotate away.
Layer order: slides(0) < scrim(1) < grid/glow(2) < content(3)
════════════════════════════════════════ */
/* ── Per-slide hero copy ──
All six blocks share one grid cell, so the wrapper is always as tall as the
longest block. Without that, buttons and stats would jump every rotation as
headline length changed. */
.hero-copy { display: grid; }
.hero-copy-item {
grid-area: 1 / 1;
opacity: 0; visibility: hidden;
transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.hero-copy-item.is-active {
opacity: 1; visibility: visible;
transition: opacity 0.8s ease, visibility 0s linear 0s;
}
/* Slides 2-6 use so the page keeps a single
*/
.hero-copy-item .hero-h {
font-family: 'Montserrat', sans-serif;
font-size: clamp(2.2rem, 5.5vw, 3.8rem);
font-weight: 800; line-height: 1.15;
color: var(--white); margin-bottom: 24px; max-width: 700px;
}
.hero-copy-item .hero-h span { color: var(--gold); }
.hero-copy-item .hero-lead {
font-size: clamp(1rem, 2vw, 1.15rem);
color: var(--text-muted); max-width: 560px; margin-bottom: 40px;
}
@media (prefers-reduced-motion: reduce) {
.hero-copy-item { transition: none; }
}
.hero-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-slide {
position: absolute; inset: 0;
opacity: 0; transition: opacity 1.4s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
/* ── Ken Burns ──
Slow drift on whichever slide is showing. Two rules keep it safe:
scale never drops below 1.08, and translate never exceeds the overscan that
scale buys (at 1.08 there is 4% hidden each side, so 1.5% of travel can
never expose an edge). Directions alternate so six slides don't all drift
the same way. Duration exceeds the 6.5s dwell, so motion is always still in
progress when the crossfade takes over — it never visibly parks. */
@keyframes ken-a {
from { transform: translate(0, 0) scale(1.08); }
to { transform: translate(-1.5%, -1%) scale(1.18); }
}
@keyframes ken-b {
from { transform: translate(1%, 1%) scale(1.18); }
to { transform: translate(0, 0) scale(1.08); }
}
@keyframes ken-c {
from { transform: translate(1.5%, 0) scale(1.08); }
to { transform: translate(-1%, -1.5%) scale(1.18); }
}
@keyframes ken-d {
from { transform: translate(-1%, 1.2%) scale(1.18); }
to { transform: translate(0.5%, -0.5%) scale(1.08); }
}
/* The animation is applied to every slide permanently and merely paused when
the slide is not showing. Scoping it to .is-active instead looks tidier but
is wrong: removing an animation snaps the transform back instantly, and that
snap lands mid-crossfade while the outgoing slide is still half-visible. A
transition cannot smooth it either — animation values sit above specified
styles in the cascade, so removing one never triggers a transition.
`infinite alternate` means it ping-pongs rather than parking at the end
after its first run, so a slide is still drifting on its fifth showing. */
.hero-slide img {
animation: ken-a 11s linear infinite alternate;
animation-play-state: paused;
}
.hero-slide.is-active img {
animation-play-state: running;
will-change: transform;
}
.hero-slide:nth-child(2) img { animation-name: ken-b; }
.hero-slide:nth-child(3) img { animation-name: ken-c; }
.hero-slide:nth-child(4) img { animation-name: ken-d; }
.hero-slide:nth-child(5) img { animation-name: ken-b; }
.hero-slide:nth-child(6) img { animation-name: ken-c; }
@media (prefers-reduced-motion: reduce) {
.hero-slide img,
.hero-slide.is-active img { animation: none; transform: scale(1.08); }
}
/* Left-weighted scrim keeps the headline legible over any photo, plus a
vertical pass so the stats row at the bottom stays readable. */
.hero-scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(90deg, #0f1c43 0%, rgba(15,28,67,0.94) 34%, rgba(15,28,67,0.62) 68%, rgba(15,28,67,0.40) 100%),
linear-gradient(180deg, rgba(15,28,67,0.45) 0%, rgba(15,28,67,0.10) 38%, rgba(15,28,67,0.70) 100%);
}
.hero.has-slider::before, .hero.has-slider::after { z-index: 2; }
.hero.has-slider .container { z-index: 3; }
/* Dots — bottom right, clear of .hero-stats on the left */
.hero-dots {
/* Height here is purely about the fold, not about clearing anything: the
stat items are left-packed and end far to the left of the dots, so the
two never meet horizontally however wide the window is. The hero runs
past the bottom of the viewport on shorter screens, and at the old 32px
that put the dots below the fold and out of reach. 136px lifts them
to just above the stats row, which keeps them in view on a laptop while
still reading as the bottom-right corner of the hero. */
position: absolute; right: 32px; bottom: 136px; z-index: 4;
display: flex; gap: 10px;
}
.hero-dots button {
width: 10px; height: 10px; padding: 0;
border-radius: 50%; cursor: pointer;
background: rgba(255,255,255,0.32);
border: 1px solid rgba(255,255,255,0.5);
appearance: none; -webkit-appearance: none;
transition: var(--transition);
}
.hero-dots button:hover { background: rgba(255,255,255,0.6); }
.hero-dots button[aria-current="true"] {
background: var(--gold); border-color: var(--gold);
transform: scale(1.25);
}
.hero-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 768px) {
/* Only 64px of clear space exists below the stats block here, and the hero
is taller than the phone screen regardless — so the dots cannot be lifted
into view, only off the very edge. 34px is as far up as they go before
they start sitting on the stats. */
.hero-dots { right: 20px; bottom: 34px; }
/* Portrait viewports crop hard — favour the left of frame where subjects sit */
.hero-slide img { object-position: 35% center; }
/* Text runs full width here, so the horizontal scrim is replaced by an even
wash — otherwise line-ends sit over the bright side of the photo. */
.hero-scrim {
background:
linear-gradient(180deg, rgba(15,28,67,0.86) 0%, rgba(15,28,67,0.72) 45%, rgba(15,28,67,0.88) 100%);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: none; }
}
/* ════════════════════════════════════════
INNER PAGE HERO (banner)
════════════════════════════════════════ */
.page-hero {
background: radial-gradient(ellipse at 8% 95%, rgba(63,115,185,0.22) 0%, transparent 55%), linear-gradient(135deg, #09122d 0%, #0f1c43 60%, #1c3069 100%);
padding: 64px 0 56px;
position: relative; overflow: hidden;
border-bottom: 1px solid var(--border);
}
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(63,115,185,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(63,115,185,0.06) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; }
.page-hero::after { content: ''; position: absolute; top: -80px; right: -80px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(228,160,36,0.10) 0%, transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
/* Flocking canvas behind a page hero. Sits above the grid overlay but below
.page-hero .container (z-index 1), so headline and breadcrumb stay on top. */
.page-hero .hero-bg {
position: absolute; inset: 0; z-index: 0;
display: block; width: 100%; height: 100%;
pointer-events: none;
}
.breadcrumb { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--blue-light); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }
.page-hero h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; color: var(--white); margin-bottom: 14px; }
.page-hero h1 span { color: var(--gold); }
.page-hero .hero-intro { font-size: 1.05rem; color: var(--text-muted); max-width: 640px; }
/* ════════════════════════════════════════
PAGE CONTENT (inner pages)
════════════════════════════════════════ */
.page-content { padding: 72px 0; }
.page-content + .page-content { padding-top: 0; }
.content-block { margin-bottom: 56px; }
.content-block:last-child { margin-bottom: 0; }
.content-block h2 {
font-family: 'Montserrat', sans-serif;
font-size: clamp(1.3rem, 2.5vw, 1.7rem);
font-weight: 700; color: var(--white);
margin-bottom: 18px; line-height: 1.25;
}
.content-block h2 span { color: var(--gold); }
.content-block p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 14px; line-height: 1.8; }
.content-block p:last-child { margin-bottom: 0; }
/* Styled list */
.vec-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.vec-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-muted); font-size: 0.95rem; }
.vec-list li::before { content: ''; display: block; width: 7px; height: 7px; background: var(--blue-light); border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.vec-list li strong { color: var(--text); }
/* Checklist (bold items) */
.vec-checklist { display: flex; flex-direction: column; gap: 14px; }
.vec-checklist li { display: flex; align-items: flex-start; gap: 14px; }
.check-icon { width: 22px; height: 22px; background: rgba(63,115,185,0.20); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-icon svg { width: 11px; height: 11px; }
.vec-checklist li p { color: var(--text-muted); font-size: 0.93rem; margin: 0; }
.vec-checklist li strong { color: var(--text); }
/* Info card */
.info-card { background: var(--navy-3); border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 24px 28px; margin: 28px 0; }
.info-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.info-card strong { color: var(--gold); }
/* Two column layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.two-col-wide { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
/* Code grid (observation codes, etc) */
.code-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 8px; }
.code-item { background: var(--navy-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.code-label { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.code-item p { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
/* ── SERVICES STRIP (homepage) ── */
.services-strip { background: var(--navy-3); padding: 80px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.service-card { background: var(--navy); border: 1px solid var(--border); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 32px 28px; transition: var(--transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.service-icon { width: 44px; height: 44px; background: rgba(63,115,185,0.16); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.service-icon svg { width: 22px; height: 22px; }
.service-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.service-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; }
.service-card a { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; transition: var(--transition); }
.service-card a:hover { gap: 10px; }
.services-more { text-align: center; margin-top: 8px; }
.services-more p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px; }
/* ── ALL SERVICES GRID ── */
.all-services { padding: 80px 0; background: var(--navy-2); }
.all-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-service { display: flex; align-items: center; gap: 14px; background: var(--navy-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; transition: var(--transition); cursor: pointer; }
.mini-service:hover { border-color: var(--gold); background: var(--navy-4); }
.mini-dot { width: 8px; height: 8px; background: var(--blue-light); border-radius: 50%; flex-shrink: 0; }
.mini-service span { font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--text); }
/* ── WHY CHOOSE US ── */
.why-us { padding: 90px 0; background: var(--navy); }
.why-us-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.why-list { display: flex; flex-direction: column; gap: 16px; }
.why-item { display: flex; gap: 14px; align-items: flex-start; }
.why-check { width: 22px; height: 22px; background: rgba(63,115,185,0.20); border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.why-check svg { width: 11px; height: 11px; }
.why-item p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.why-item strong { color: var(--text); }
.why-accred { background: var(--navy-3); border: 1px solid var(--border); border-radius: 10px; padding: 36px; }
.why-accred h3 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; }
.accred-list { display: flex; flex-direction: column; gap: 14px; }
.accred-item { display: flex; align-items: center; gap: 14px; background: var(--navy); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.accred-badge { width: 36px; height: 36px; background: rgba(63,115,185,0.16); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 0.65rem; font-weight: 800; color: var(--gold); letter-spacing: 0.04em; text-align: center; line-height: 1.1; }
/* Logo variant of the accreditation badge.
Certification marks are supplied full-colour for light backgrounds, so they
sit on a white tile rather than being recoloured — recolouring a certification
mark breaches every one of these bodies' usage rules. */
.accred-badge--logo {
width: 132px; height: 42px;
background: var(--white);
border-radius: 6px;
padding: 5px 10px;
}
.accred-badge--logo img {
max-height: 100%; max-width: 118px;
width: auto; height: auto;
object-fit: contain; display: block;
}
.accred-item span { font-size: 0.85rem; color: var(--text-muted); }
/* ── TESTIMONIALS ── */
.our-story { padding: 80px 0; background: var(--navy-2); }
.our-story .container { max-width: 780px; text-align: center; }
.our-story p { color: var(--text-muted); font-size: 1.02rem; margin-bottom: 20px; }
.our-story .btn { margin-top: 12px; }
#our-story { scroll-margin-top: 110px; }
.testimonials { padding: 80px 0; background: var(--navy-3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.testimonials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.testimonial-card { background: var(--navy); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; position: relative; }
.quote-mark { font-family: Georgia, serif; font-size: 5rem; line-height: 0.6; color: rgba(63,115,185,0.20); position: absolute; top: 24px; right: 24px; pointer-events: none; }
.testimonial-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 24px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 40px; height: 40px; background: rgba(63,115,185,0.20); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.author-info strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--white); }
.author-info span { font-size: 0.78rem; color: var(--text-muted); }
.stars { display: flex; gap: 3px; margin-bottom: 14px; }
.stars svg { width: 14px; height: 14px; fill: var(--gold); }
/* ── CTA STRIP (inner pages) ── */
.cta-strip {
padding: 80px 0;
background: radial-gradient(ellipse at 8% 95%, rgba(63,115,185,0.22) 0%, transparent 55%), linear-gradient(135deg, #09122d 0%, #0f1c43 60%, #1c3069 100%);
border-top: 1px solid var(--border);
text-align: center;
position: relative; overflow: hidden;
}
.cta-strip::after { content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(circle, rgba(228,160,36,0.09) 0%, transparent 70%); pointer-events: none; }
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--white); margin-bottom: 14px; }
.cta-strip h2 span { color: var(--gold); }
.cta-strip p { color: var(--text-muted); font-size: 1rem; max-width: 520px; margin: 0 auto 32px; }
.cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* ── CONTACT SECTION (homepage) ── */
.contact-section { padding: 90px 0; background: var(--navy); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-info { padding-top: 8px; }
.contact-info .section-intro { margin-bottom: 36px; }
.contact-details { display: flex; flex-direction: column; gap: 18px; }
.contact-detail { display: flex; align-items: flex-start; gap: 14px; }
.cd-icon { width: 38px; height: 38px; background: rgba(63,115,185,0.16); border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cd-icon svg { width: 18px; height: 18px; }
.cd-text strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.cd-text span { font-size: 0.92rem; color: var(--text-muted); }
.contact-form-wrap { background: var(--navy-3); border: 1px solid var(--border); border-radius: 10px; padding: 40px; }
.contact-form-wrap h3 { font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--gold); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select { width: 100%; background: var(--navy); border: 1px solid var(--navy-4); border-radius: var(--radius); color: var(--text); font-family: 'Open Sans', sans-serif; font-size: 0.92rem; padding: 11px 14px; outline: none; transition: var(--transition); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--blue-light); }
.form-group textarea { min-height: 110px; resize: vertical; }
.form-group select { appearance: none; cursor: pointer; }
.form-submit { width: 100%; margin-top: 8px; }
/* ── ABOUT PAGE ── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.team-card { background: var(--navy-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-align: center; }
.team-avatar { width: 64px; height: 64px; background: rgba(63,115,185,0.16); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--gold); }
.team-card h3 { font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.team-card span { font-size: 0.82rem; color: var(--gold); }
.experience-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 8px; }
.exp-item { background: var(--navy-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 16px; text-align: center; }
.exp-item strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; }
.exp-item span { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
/* ── FOOTER ── */
.site-footer { background: #080f27; border-top: 1px solid var(--border); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--border); }
.footer-brand img { max-height: 40px; margin-bottom: 18px; }
.footer-brand p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; max-width: 260px; }
.footer-col h4 { font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 0.88rem; color: var(--text-muted); transition: var(--transition); }
.footer-col ul a:hover { color: var(--gold); }
.footer-contact-item { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.footer-contact-item svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.footer-contact-item span { font-size: 0.88rem; color: var(--text-muted); }
.footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.8rem; color: var(--text-muted); }
.footer-bottom a { color: var(--blue-light); }
/* ════════════════════════════════════════
BEFORE / AFTER COMPARISON
Without JS this renders as two stacked images with captions — still useful,
just not draggable. .is-ready is added by script.
════════════════════════════════════════ */
.compare { margin: 28px 0; }
.compare figcaption {
font-size: 0.85rem; color: var(--text-muted);
margin-top: 12px; text-align: center;
}
.compare-frame { display: grid; gap: 12px; }
.compare img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.compare-label {
position: absolute; top: 14px; z-index: 3;
font-family: 'Montserrat', sans-serif;
font-size: 0.68rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 12px; border-radius: 20px;
background: rgba(9,18,45,0.82); color: var(--white);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
pointer-events: none; opacity: 0; transition: opacity var(--transition);
}
.compare.is-ready .compare-label { opacity: 1; }
.compare-label-before { left: 14px; }
.compare-label-after { right: 14px; }
.compare.is-ready .compare-frame {
position: relative; display: block;
overflow: hidden; border-radius: var(--radius);
border: 1px solid var(--border);
cursor: ew-resize; user-select: none; -webkit-user-select: none;
touch-action: pan-y;
}
.compare.is-ready .compare-after {
position: absolute; inset: 0;
width: var(--pos, 50%);
overflow: hidden;
}
/* the clipped layer must render at full frame width, or it squashes */
.compare.is-ready .compare-after img {
width: auto; height: 100%;
max-width: none; border-radius: 0;
}
.compare.is-ready .compare-before img { border-radius: 0; }
.compare-handle {
position: absolute; top: 0; bottom: 0; z-index: 4;
left: var(--pos, 50%); width: 44px;
transform: translateX(-50%);
display: none; align-items: center; justify-content: center;
background: none; border: none; padding: 0;
cursor: ew-resize; appearance: none; -webkit-appearance: none;
}
.compare.is-ready .compare-handle { display: flex; }
.compare-handle::before {
content: ''; position: absolute; top: 0; bottom: 0;
width: 2px; background: var(--gold);
box-shadow: 0 0 12px rgba(228,160,36,0.55);
}
.compare-handle::after {
content: ''; width: 38px; height: 38px; border-radius: 50%;
background: var(--gold);
box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.compare-handle:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* ════════════════════════════════════════
THERMAL HOVER REVEAL
Hover on pointer devices, tap on touch (.is-revealed is toggled by script).
Both images are always in the DOM, so it degrades to the visible photo.
════════════════════════════════════════ */
.reveal-pair {
position: relative; margin: 28px 0;
border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border);
cursor: crosshair;
}
.reveal-pair img { display: block; width: 100%; height: auto; }
.reveal-pair .reveal-top {
position: absolute; inset: 0;
opacity: 0; transition: opacity 0.45s ease;
}
.reveal-pair:hover .reveal-top,
.reveal-pair:focus-within .reveal-top,
.reveal-pair.is-revealed .reveal-top { opacity: 1; }
.reveal-hint {
position: absolute; left: 50%; bottom: 16px; z-index: 3;
transform: translateX(-50%);
font-family: 'Montserrat', sans-serif;
font-size: 0.7rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 7px 16px; border-radius: 20px;
background: rgba(9,18,45,0.85); color: var(--white);
border: 1px solid var(--border);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
transition: opacity var(--transition); pointer-events: none;
}
.reveal-pair:hover .reveal-hint,
.reveal-pair.is-revealed .reveal-hint { opacity: 0; }
.reveal-pair figcaption {
position: absolute; left: 14px; top: 14px; z-index: 3;
font-family: 'Montserrat', sans-serif;
font-size: 0.66rem; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 5px 12px; border-radius: 20px;
background: rgba(9,18,45,0.82); color: var(--gold);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal-pair .reveal-top { transition: none; }
}
/* ════════════════════════════════════════
REVIEW STARS — COIN POP
Each star fades up, overshoots, and settles with a small secondary bounce,
staggered left to right. Hooked to .is-visible from the scroll-reveal
system, so they fire as the testimonial arrives rather than on page load.
════════════════════════════════════════ */
@keyframes star-pop {
0% { opacity: 0; transform: translateY(7px) scale(0.3); }
40% { opacity: 1; transform: translateY(-9px) scale(1.3); }
65% { opacity: 1; transform: translateY(1px) scale(0.92); }
82% { opacity: 1; transform: translateY(-2px) scale(1.04); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Hidden only once script has marked the card — no JS means stars stay visible */
.testimonial-card.js-reveal .stars svg { opacity: 0; }
.testimonial-card.is-visible .stars svg {
transform-origin: center bottom;
animation: star-pop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
/* stagger left to right, starting as the card itself finishes settling */
.testimonial-card.is-visible .stars svg:nth-child(1) { animation-delay: 0.22s; }
.testimonial-card.is-visible .stars svg:nth-child(2) { animation-delay: 0.31s; }
.testimonial-card.is-visible .stars svg:nth-child(3) { animation-delay: 0.40s; }
.testimonial-card.is-visible .stars svg:nth-child(4) { animation-delay: 0.49s; }
.testimonial-card.is-visible .stars svg:nth-child(5) { animation-delay: 0.58s; }
@media (prefers-reduced-motion: reduce) {
.testimonial-card.js-reveal .stars svg,
.testimonial-card.is-visible .stars svg {
opacity: 1; animation: none; transform: none;
}
}
/* ── Fifth star flare ──
The last coin lands and flares: a bloom on the star itself plus a shockwave
ring expanding from it. The ring lives on .stars::after because SVG elements
can't carry pseudo-elements of their own.
fit-content matters: .stars is a block-level flex container, so without it
the box spans the full card width and `right: 0` lands the ring over on the
quote mark instead of the last star. */
.stars { position: relative; width: fit-content; }
@keyframes star-glow {
0% { filter: drop-shadow(0 0 0 rgba(242,199,107,0)); }
30% { filter: drop-shadow(0 0 6px rgba(242,199,107,0.95))
drop-shadow(0 0 15px rgba(228,160,36,0.7)); }
100% { filter: drop-shadow(0 0 0 rgba(242,199,107,0)); }
}
@keyframes star-flare {
0% { opacity: 0; transform: scale(0.35); }
18% { opacity: 0.95; }
55% { opacity: 0.55; }
100% { opacity: 0; transform: scale(3.8); }
}
/* star-pop keeps running; star-glow rides alongside it on the last star only */
.testimonial-card.is-visible .stars svg:nth-child(5) {
animation-name: star-pop, star-glow;
animation-duration: 0.55s, 0.6s;
animation-delay: 0.58s, 0.72s;
animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.2), ease-out;
animation-fill-mode: both, both;
}
/* Burst sits exactly over the last star: same 14px box, pinned to the right
edge. clip-path gives it the star silhouette; the radial-gradient leaves the
centre hollow so it reads as an expanding star-shaped shockwave rather than
a growing solid blob. Square box matters — a non-square one skews the star. */
.testimonial-card.is-visible .stars::after {
content: '';
position: absolute; right: 0; top: 50%;
margin-top: -7px;
width: 14px; height: 14px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
background: radial-gradient(circle,
rgba(242,199,107,0) 28%,
rgba(242,199,107,0.95) 55%,
rgba(228,160,36,0.65) 78%,
rgba(228,160,36,0) 100%);
opacity: 0;
pointer-events: none;
animation: star-flare 0.7s ease-out 0.74s both;
}
@media (prefers-reduced-motion: reduce) {
.testimonial-card.is-visible .stars svg:nth-child(5) { animation: none; }
.testimonial-card.is-visible .stars::after { animation: none; display: none; }
}
/* ════════════════════════════════════════
TERMINAL CARET ON THE NAME FIELD
A blinking block cursor showing where to start typing. Shown only while the
field is empty AND unfocused — the moment you click in, the browser's real
caret takes over and this one gets out of the way.
════════════════════════════════════════ */
.caret-field { position: relative; display: block; }
/* Permanent extra left padding so the text start never shifts when the fake
caret disappears on focus — no jump, and it reads as a prompt indicator. */
.caret-field input { padding-left: 32px; }
.type-caret {
position: absolute; left: 15px; top: 50%;
transform: translateY(-50%);
width: 8px; height: 1.05em;
background: var(--gold);
opacity: 0;
pointer-events: none;
}
/* :placeholder-shown is true only while the field is empty */
.caret-field input:placeholder-shown:not(:focus) ~ .type-caret {
animation: caret-blink 1.06s steps(1, end) infinite;
}
@keyframes caret-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* A blinking element is a known migraine and vestibular trigger, so hold it
steady rather than removing the affordance entirely. */
@media (prefers-reduced-motion: reduce) {
.caret-field input:placeholder-shown:not(:focus) ~ .type-caret {
animation: none; opacity: 0.65;
}
}
/* ════════════════════════════════════════
FORM EDGE GLOW
Blooms when the form enters view, then holds a soft rim. box-shadow and
border-color only — no layout impact. .is-lit is added by script, so the
form looks normal if JS never runs.
════════════════════════════════════════ */
@keyframes form-lit {
0% {
border-color: var(--border);
box-shadow: 0 0 0 0 rgba(228,160,36,0);
}
45% {
border-color: rgba(228,160,36,0.75);
box-shadow: 0 0 30px 2px rgba(228,160,36,0.42),
0 0 64px rgba(228,160,36,0.16);
}
100% {
border-color: rgba(228,160,36,0.38);
box-shadow: 0 0 18px rgba(228,160,36,0.15);
}
}
.contact-form-wrap.is-lit {
animation: form-lit 1.8s ease-out both;
}
/* reduced motion / no-JS fallback: settled state, no bloom */
@media (prefers-reduced-motion: reduce) {
.contact-form-wrap.is-lit { animation: none; }
}
.contact-form-wrap.no-anim {
animation: none !important;
border-color: rgba(228,160,36,0.38);
box-shadow: 0 0 18px rgba(228,160,36,0.15);
}
/* ════════════════════════════════════════
SCROLL REVEALS
.js-reveal is added by script, so a no-JS visitor never gets a blank page.
════════════════════════════════════════ */
.js-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js-reveal { opacity: 1; transform: none; transition: none; }
}
/* ════════════════════════════════════════
STICKY MOBILE QUOTE BAR
════════════════════════════════════════ */
.quote-bar { display: none; }
@media (max-width: 768px) {
.quote-bar {
display: flex; gap: 10px; align-items: stretch;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(9,18,45,0.96);
border-top: 1px solid var(--border);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transform: translateY(110%);
transition: transform 0.35s ease;
}
.quote-bar.is-shown { transform: translateY(0); }
.quote-bar a {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-family: 'Montserrat', sans-serif;
font-size: 0.82rem; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
border-radius: var(--radius); padding: 13px 14px;
min-height: 46px; /* comfortable tap target */
}
.quote-bar .qb-call {
flex: 0 0 auto; width: 52px;
background: transparent; color: var(--gold);
border: 1px solid var(--gold);
}
.quote-bar .qb-call svg { width: 17px; height: 17px; }
.quote-bar .qb-quote { flex: 1 1 auto; background: var(--gold); color: var(--navy); }
/* keep the bar from covering the last of the footer */
body { padding-bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) {
.quote-bar { transition: none; }
}
/* ════════════════════════════════════════
SHORT-VIEWPORT HERO
The hero runs ~880px tall, which overflows a laptop screen and pushes the
stats row below the fold. Rather than scrolling the page on load — which
would crop the hero on tall monitors where it already fits, and fight the
browser's scroll restoration — the hero simply takes less vertical room when
there is less to give. Scoped above the mobile breakpoint so phones, which
have their own stacked layout, are untouched.
════════════════════════════════════════ */
@media (min-width: 769px) and (max-height: 900px) {
.hero { padding: 72px 0 64px; }
.hero-stats { margin-top: 44px; padding-top: 28px; }
}
@media (min-width: 769px) and (max-height: 780px) {
.hero { padding: 42px 0 40px; }
.hero h1 { margin-bottom: 18px; }
.hero p, .hero-copy-item .hero-lead { margin-bottom: 28px; }
.hero-stats { margin-top: 26px; padding-top: 18px; gap: 34px; }
.hero-stat strong { font-size: 1.7rem; }
}
/* ════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1024px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.all-services-grid { grid-template-columns: repeat(2, 1fr); }
.why-us-inner { grid-template-columns: 1fr; gap: 48px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.contact-inner { grid-template-columns: 1fr; gap: 48px; }
.two-col { grid-template-columns: 1fr; gap: 40px; }
.two-col-wide { grid-template-columns: 1fr; gap: 40px; }
.experience-grid { grid-template-columns: repeat(3, 1fr); }
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.top-bar { display: none; }
.nav-left, .nav-right { display: none; }
.hamburger { display: flex; }
.header-inner { grid-template-columns: auto 1fr auto; }
.site-logo { grid-column: 2; }
.hamburger { grid-column: 3; }
.services-grid { grid-template-columns: 1fr; }
.all-services-grid { grid-template-columns: 1fr 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.hero { padding: 72px 0 64px; }
.hero-stats { gap: 28px; }
.form-row { grid-template-columns: 1fr; }
.code-grid { grid-template-columns: 1fr; }
.experience-grid { grid-template-columns: repeat(2, 1fr); }
.team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.all-services-grid { grid-template-columns: 1fr; }
.experience-grid { grid-template-columns: 1fr 1fr; }
}