/* ===========================================================================
Base: reset, typography defaults, layout primitives
=========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Anchor targets clear the fixed header instead of hiding under it. */
scroll-padding-top: calc(var(--header-h) + 12px);
/* Entrance animations park elements a few dozen pixels off to the side
before they reveal. `clip` trims that without turning the root into a
scroll container the way `hidden` would. Safari before 16 ignores it and
falls back to the body rule below, which propagates to the viewport. */
overflow-x: clip;
}
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--step-body);
font-weight: 300;
line-height: 1.9;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* `clip`, not `hidden`: setting one axis to hidden forces the other to
auto, which turns into a scroll container and breaks the sticky
media panel on the services page. `clip` is exempt from that rule. */
overflow-x: clip;
}
/* Set while the intro sting or the mobile menu owns the screen. */
body.is-locked {
overflow: hidden;
/* Keeps the page from jumping sideways when the scrollbar disappears. */
padding-right: var(--scrollbar-w, 0px);
}
img,
video {
display: block;
max-width: 100%;
}
/* The width/height attributes on ![]()
are there to reserve space and stop
layout shift, and browsers still read the ratio from them with height:auto.
Without this they also map to a CSS height, which silently overrides any
aspect-ratio we set and stretches the image. Components that genuinely
want a fixed height (hero, card frames, band backdrops) set it themselves
with a class selector, which outranks this. */
img { height: auto; }
a {
color: var(--blue-ink);
text-decoration: none;
transition: color var(--dur-fast) ease;
}
a:hover { color: var(--blue-deep); }
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
h1, h2, h3, h4 {
font-family: var(--font-head);
color: var(--navy);
margin: 0;
line-height: 1.15;
letter-spacing: -0.5px;
font-weight: 900;
}
/* Section headings carry the scale by default, so a bare anywhere on the
page is already the right size without a wrapper class. */
h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-h2); margin: 14px 0 20px; }
h3 { font-size: var(--step-h3); }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}
/* Reversed surfaces need a focus ring that survives the navy. */
.band--dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
outline-color: var(--blue-light);
}
/* --- Layout primitives ---------------------------------------------------- */
.shell {
width: 100%;
max-width: var(--shell);
margin-inline: auto;
}
.shell--wide { max-width: var(--shell-wide); }
.band {
padding: var(--section-y) var(--gutter);
}
.band--mist {
background: var(--mist);
border-top: 1px solid var(--line);
}
.band--dark {
position: relative;
background: var(--navy-deep);
overflow: hidden;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 300;
background: var(--blue);
color: var(--white);
font-family: var(--font-head);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
padding: 14px 22px;
}
.skip-link:focus {
left: 12px;
top: 12px;
color: var(--white);
}
.visually-hidden {
position: absolute;
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;
}
/* --- Shared type patterns ------------------------------------------------- */
.eyebrow {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-head);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 3px;
color: var(--blue-ink);
text-transform: uppercase;
line-height: 1.4;
}
/* The rule draws itself in when the eyebrow reveals (see motion.css). */
.eyebrow::before {
content: "";
width: 28px;
height: 2px;
background: currentColor;
flex: none;
transform-origin: left center;
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--blue-light); }
.lede {
font-size: var(--step-lead);
font-weight: 300;
line-height: 1.85;
color: var(--slate);
}
.section-head { margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); }
.section-head--center {
text-align: center;
max-width: 640px;
margin-inline: auto;
}
.section-head h2 { font-size: var(--step-h2); margin: 14px 0 0; }
.section-head .lede { margin-top: 16px; }
.section-head--split {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
@media (min-width: 860px) {
.section-head--split {
flex-direction: row;
align-items: flex-end;
}
}