/* ===== 00-base.css ===== */
/* ==========================================================================
Avispa design system
Transcribed from the design document: the 38a handoff sheet, the 37a states
sheet, and the built pages the sheets were derived from. Where those sources
disagreed, the built pages won. They are what was signed off visually.
Three colours are DELIBERATELY not the design's values. Each is marked
"AA fix" below with the measured contrast ratio and the reason. The site's
own accessibility statement (/accessibility) commits to WCAG 2.1 AA, so a
token that fails it is a bug in the design, not a constraint on the build.
Order: fonts -> tokens -> reset -> primitives -> type -> controls ->
components -> motion -> utilities.
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts
Archivo is a variable font, so one file carries 400-700. Two subsets are
self-hosted: latin, and latin-ext for the accented names in the roster.
Self-hosted rather than loaded from Google so the site sets no third-party
cookies and needs no consent gate to render.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400 700;
font-stretch: 100%;
font-display: swap;
src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* --------------------------------------------------------------------------
2. Tokens
-------------------------------------------------------------------------- */
:root {
/* Colour ------------------------------------------------------------- */
--navy: #1b2d5e;
--navy-hover: #33477f;
--gold: #f2b705;
--gold-hover: #d9a404; /* darkens on white */
--gold-active: #c29303;
--gold-on-navy-hover: #ffcb33; /* lightens on navy */
/* AA fix: the handoff sheet ships #B07A15 labelled "gold on white (AA)".
It measures 3.72:1, short of the 4.5:1 AA needs for the 13-14px text it
carries (page eyebrows, "Explore service →" links). #9A6C12 is 4.64:1 and
is the smallest darkening that clears the bar. */
--gold-text: #9a6c12;
--gold-text-hover: #8a5f10; /* 5.64:1 */
--gold-text-design: #b07a15; /* the original, kept for large display use */
/* AA fix: eyebrows on a gold band were #7A5C00, 3.44:1 against #F2B705.
#5F4700 is 4.84:1. */
--gold-deep: #5f4700;
--ink: #111827;
--body: #4b5563;
--muted: #6b7280;
--hairline: #e5e7eb;
--border: #d1d5db;
--border-strong: #9ca3af;
--surface: #ffffff;
--surface-alt: #f3f4f6;
--surface-sunken: #f9fafb;
--disabled-fg: #9ca3af;
--on-navy: #c7d0e8;
--on-navy-link: #d3dbf0;
/* AA fix: the footer's copyright and separators were #51619B, 2.23:1 on
navy. #8FA0CB is 5.09:1 and is already in the palette (ghost borders). */
--on-navy-dim: #8fa0cb;
--hairline-navy: #33477f;
--error: #b42318;
--success: #067647;
/* Type ---------------------------------------------------------------- */
--font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--size-display: 3.25rem; /* 52px. Pages override; Home runs 54px */
--size-section: 2.125rem; /* 34px */
--size-card-title: 1.5rem; /* 24px */
--size-card-title-sm: 1.25rem; /* 20px: compact link cards */
--size-lede: 1.0625rem; /* 17px. Home hero overrides to 18px */
--size-body: 1.0625rem; /* 17px */
--size-card-body: 0.9375rem; /* 15px */
--size-eyebrow-page: 0.8125rem; /* 13px */
--size-eyebrow: 0.75rem; /* 12px */
--size-stat: 2.75rem; /* 44px */
--size-small: 0.8125rem; /* 13px: helper and error text */
--measure: 30rem; /* 480px body measure */
/* Spacing scale, verbatim from the handoff sheet -------------------- */
--s-10: 0.625rem;
--s-14: 0.875rem;
--s-18: 1.125rem;
--s-20: 1.25rem;
--s-22: 1.375rem;
--s-26: 1.625rem;
--s-32: 2rem;
--s-36: 2.25rem;
--s-40: 2.5rem;
--s-44: 2.75rem;
--s-48: 3rem;
--s-56: 3.5rem;
--s-64: 4rem;
--s-72: 4.5rem;
--s-80: 5rem;
/* Layout -------------------------------------------------------------- */
--content-max: 70rem; /* 1120px */
--gutter: var(--s-48);
--header-h: 4.875rem; /* 78px */
/* Measured height of the QuoteBand, which the hero subtracts from the
viewport so both fit on load. Keep in step with .quote-band__inner. */
--quote-h: 9.5rem;
/* Motion -------------------------------------------------------------- */
--t-fast: 120ms ease-out; /* colour shifts */
--t-base: 200ms ease-out; /* underlines, card fills, presses */
--t-drawer: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
--t-reveal: 600ms ease-out;
}
/* Tablet: 768-1119px. Gutter 32px, header 72px. */
@media (max-width: 1119px) {
:root {
--gutter: var(--s-32);
--header-h: 4.5rem; /* 72px */
--size-display: 2.875rem; /* 46px */
}
}
/* Mobile: below 768px. Gutter 20px, header 64px. */
@media (max-width: 767px) {
:root {
--gutter: var(--s-20);
--header-h: 4rem; /* 64px */
--size-display: 2.125rem; /* 34px */
--size-section: 1.625rem; /* 26px */
}
}
/* --------------------------------------------------------------------------
3. Reset
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* The closed mobile drawer is position:fixed and parked at translateX(100%).
Chrome on macOS does not count that toward the scrollable area; Chrome on
Linux does, producing a horizontal scrollbar on every page. `clip` stops
it without creating a scroll container; `hidden` would, and that would
break the sticky header. */
overflow-x: clip;
}
body {
margin: 0;
background: var(--surface);
color: var(--body);
font-family: var(--font);
font-size: var(--size-body);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* Locked while the mobile drawer is open; overflow:hidden alone does not
hold on iOS. */
body.is-nav-open {
overflow: hidden;
touch-action: none;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd,
address {
margin: 0;
}
ul,
ol {
list-style: none;
padding: 0;
}
address {
font-style: normal;
}
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
a {
color: inherit;
text-decoration: none;
}
/* --------------------------------------------------------------------------
4. Focus
The states sheet's prose asks for a gold ring; every swatch it draws is
navy. Navy is 13.3:1 on white, gold is 1.8:1 and would fail WCAG 1.4.11.
Building the swatches.
-------------------------------------------------------------------------- */
/* The header is sticky, so an in-page jump would land with the target tucked
underneath it. Offset by exactly the header's height and no more: these
targets are full-bleed bands that butt against the band above, so any extra
margin leaves a slice of the previous band (a strip of the gold quote band,
on the home page) hanging above the one you asked for. */
[id] {
scroll-margin-top: var(--header-h);
}
:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.on-navy :focus-visible,
.site-footer :focus-visible,
.mobile-nav :focus-visible,
.band--navy :focus-visible,
.cookie-banner :focus-visible {
outline-color: #ffffff;
}
.skip-link {
position: fixed;
left: var(--s-20);
top: -6rem;
z-index: 200;
background: var(--navy);
color: #fff;
font-size: var(--size-card-body);
font-weight: 600;
padding: var(--s-14) var(--s-22);
transition: top var(--t-base);
}
.skip-link:focus {
top: var(--s-10);
}
/* --------------------------------------------------------------------------
5. Layout primitives
-------------------------------------------------------------------------- */
.wrap {
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.band {
padding-block: var(--s-40);
}
.band--navy {
background: var(--navy);
color: var(--on-navy);
}
.band--gold {
background: var(--gold);
color: var(--ink);
}
.band--alt {
background: var(--surface-alt);
border-top: 1px solid var(--hairline);
}
/* Contrast is a property of a PAIR, not of a colour. Two tokens clear AA on
white but land just under it on the grey surface:
--muted 4.83:1 -> 4.39:1, --gold-text 4.64:1 -> 4.21:1. Both carry 12-14px
text (eyebrows, "Explore service" links), which needs 4.5:1.
Redefining the custom properties on the grey contexts steps every nested
use down one notch automatically, including a card whose background only
turns grey on hover. */
.band--alt,
.trusted-by,
a.card:hover,
.card--linked:hover,
/* Same reason, same fill: the nav panel's rows turn --surface-alt on hover, and
they carry a 13px blurb in --muted and a 12px numeral in --gold-text. */
.nav-panel__link:hover {
--muted: #616875; /* 5.09:1 on #F3F4F6 */
--gold-text: var(--gold-text-hover); /* 5.12:1 on #F3F4F6 */
}
.band--tight {
padding-block: var(--s-26);
}
.band--loose {
padding-block: var(--s-64);
}
.band--ruled {
border-top: 1px solid var(--hairline);
}
/* HairlineGrid: 2 to 5 up, 1px dividers, no gap, no radius, no shadow.
Built as a 1px grid gap over a hairline background so every cell matches
height and the rules stay crisp at any zoom. */
.grid {
display: grid;
gap: 1px;
background: var(--hairline);
border-block: 1px solid var(--hairline);
}
.grid > * {
background: var(--surface);
/* A grid item's automatic minimum size is its min-content width, so a cell
will refuse to shrink below its longest word and push the whole track out.
At 1120px the 5-up lifecycle and the 3-up press grid both did exactly that
under Linux font metrics, which are wider than macOS's. min-width:0 lets
the text wrap instead. */
min-width: 0;
}
/* A grid cell that is an wrapping a whole-card link: the anchor has to
fill the cell or the hover fill and the gold bottom rule stop short of its
edges. The grid already stretches the to the row height, so the card
only needs to fill its own parent.
Do NOT do this by making the a flex container: that applies to every
list cell in every grid on the site and lays their contents out in a ROW,
which silently turned the MSP lifecycle steps and the press-kit cells into
horizontal strips. */
.grid > li > .card {
height: 100%;
}
/* A band whose grid runs to the 1120px cap but whose rules bleed to the edge
is drawn as a capped wrapper with no gutter; the cells supply their own. */
.wrap-full {
max-width: var(--content-max);
margin-inline: auto;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Tablet: 3-up becomes 2-up plus a full-width row; 4- and 5-up become 2-up. */
@media (max-width: 1119px) {
.grid--3,
.grid--4,
.grid--5 {
grid-template-columns: repeat(2, 1fr);
}
.grid--3 > :last-child:nth-child(odd) {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.grid--2,
.grid--3,
.grid--4,
.grid--5 {
grid-template-columns: 1fr;
}
.grid--3 > :last-child:nth-child(odd) {
grid-column: auto;
}
}
/* --------------------------------------------------------------------------
6. Typography
-------------------------------------------------------------------------- */
.eyebrow {
font-size: var(--size-eyebrow);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
}
.eyebrow--page {
font-size: var(--size-eyebrow-page);
letter-spacing: 0.3em;
color: var(--gold-text);
}
.eyebrow--on-gold {
color: var(--gold-deep);
}
.eyebrow--on-navy {
color: var(--gold);
}
.display {
font-size: var(--size-display);
font-weight: 600;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--ink);
text-wrap: balance;
}
.section-title {
font-size: var(--size-section);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: balance;
}
.card-title {
font-size: var(--size-card-title);
font-weight: 600;
line-height: 1.25;
color: var(--navy);
}
.card-title--sm {
font-size: var(--size-card-title-sm);
}
.lede {
font-size: var(--size-lede);
line-height: 1.7;
color: var(--body);
max-width: var(--measure);
}
.card-body {
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
/* Home runs one step above the shared ramp: 54px headline, 18px lede. Every
other page uses the 52px/17px defaults. */
.display--home {
font-size: 3.375rem;
}
.lede--home {
font-size: var(--size-lede-home, 1.125rem);
line-height: 1.65;
}
@media (max-width: 1119px) {
.display--home {
font-size: var(--size-display);
}
}
.prose {
max-width: var(--measure);
}
.prose > * + * {
margin-top: var(--s-20);
}
.prose h2 {
font-size: var(--size-card-title);
font-weight: 600;
line-height: 1.3;
color: var(--navy);
margin-top: var(--s-40);
}
.prose h3 {
font-size: var(--size-card-title-sm);
font-weight: 600;
color: var(--ink);
margin-top: var(--s-32);
}
.prose ul {
list-style: disc;
padding-left: 1.2em;
}
.prose li + li {
margin-top: var(--s-10);
}
.prose a:not([class]) {
color: var(--gold-text);
font-weight: 600;
box-shadow: inset 0 -1px 0 var(--gold-text);
transition: color var(--t-fast);
}
.prose a:not([class]):hover {
color: var(--gold-text-hover);
}
/* Legal pages run a wider measure and a smaller size than marketing copy. */
.prose--legal {
max-width: 46rem;
font-size: 1rem;
line-height: 1.75;
}
.band--navy .display,
.band--navy .section-title,
.band--navy .card-title {
color: #fff;
}
.band--navy .lede,
.band--navy .card-body {
color: var(--on-navy);
}
/* --------------------------------------------------------------------------
7. Controls
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-10);
font-size: var(--size-card-body);
font-weight: 600;
line-height: 1.2;
padding: 15px 30px;
border: 1px solid transparent;
text-align: center;
transition:
background-color var(--t-fast),
border-color var(--t-fast),
color var(--t-fast),
transform var(--t-base);
}
.btn--gold {
background: var(--gold);
color: var(--ink);
}
.btn--gold:hover {
background: var(--gold-hover);
}
.btn--gold:active {
background: var(--gold-active);
transform: translateY(1px);
}
.btn--secondary {
border-color: var(--border-strong);
color: var(--ink);
font-weight: 500;
}
.btn--secondary:hover {
border-color: var(--navy);
background: var(--surface-alt);
}
.btn--secondary:active {
border-color: var(--navy);
background: var(--hairline);
transform: translateY(1px);
}
/* Navy button variant used outside the primary navigation. */
.btn--navy {
background: var(--navy);
color: #fff;
padding: 12px 26px;
font-size: 0.875rem;
}
.btn--navy:hover {
box-shadow: inset 0 -2px 0 var(--gold);
}
/* The CTA band's button: the only ink-filled button in the system. */
.btn--ink {
background: var(--ink);
color: #fff;
flex: none;
}
.btn--ink:hover {
background: #000;
}
.btn--ink:active {
transform: translateY(1px);
}
/* Ghost, on navy. */
.btn--ghost {
border-color: var(--on-navy-dim);
color: #fff;
font-weight: 500;
}
.btn--ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.08);
}
.band--navy .btn--gold:hover,
.mobile-nav .btn--gold:hover {
background: var(--gold-on-navy-hover);
}
.btn--block {
display: flex;
width: 100%;
}
.btn[disabled],
.btn[aria-disabled="true"] {
background: var(--hairline);
border-color: var(--hairline);
color: var(--disabled-fg);
cursor: not-allowed;
transform: none;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: var(--s-14);
margin-top: var(--s-36);
}
/* Arrow link. The arrow nudges 3px right on hover; the glyph does not recolour
independently of the label. */
.arrow-link {
display: inline-flex;
align-items: baseline;
gap: 0.4em;
font-size: 0.875rem;
font-weight: 600;
color: var(--gold-text);
transition: color var(--t-fast);
}
.arrow-link::after {
content: "→";
transition: transform var(--t-base);
}
.arrow-link:hover {
color: var(--gold-text-hover);
box-shadow: inset 0 -1px 0 var(--gold-text);
}
.arrow-link:hover::after {
transform: translateX(3px);
}
.band--navy .arrow-link,
.site-footer .arrow-link {
color: var(--gold);
}
/* Links on navy sit at #D3DBF0 and go white with a gold underline on hover. */
.link-on-navy {
color: var(--on-navy-link);
transition: color var(--t-fast);
}
.link-on-navy:hover {
color: #fff;
box-shadow: inset 0 -1px 0 var(--gold);
}
/* --------------------------------------------------------------------------
8. SiteHeader
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--hairline);
}
/* Containing block for .nav-panel. It has to be this element and not the nav
item that opens the panel: anchored to the item, the panel's left edge landed
wherever the item happened to sit and a 960px panel overhung the viewport
between 900 and 1119px. This is `.wrap`, so it is capped at 1120px and
gutter-padded. A panel inset by --gutter can never exceed the content width.
Absolute offsets resolve against the PADDING box, which is why the panel sets
left: var(--gutter) rather than left: 0. */
.site-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-32);
height: var(--header-h);
}
.lockup {
display: flex;
align-items: center;
gap: var(--s-14);
flex: none;
color: var(--navy);
}
.lockup__mark {
width: 40px;
height: 40px;
flex: none;
}
.lockup__name {
display: block;
font-size: 1.125rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy);
}
.lockup__sub {
display: block;
margin-top: 3px;
font-size: 0.5rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
.lockup--white,
.lockup--white .lockup__name {
color: #fff;
}
.lockup--white .lockup__sub {
color: var(--on-navy);
}
/* `align-self: stretch` down this chain is for the NavPanel, and it changes
nothing visually: every one of these is a flex container with
align-items: center, so the contents stay centred while the boxes grow to the
full header height. What it buys is an unbroken pointer target. The panel
hangs from the header's bottom edge, and while the nav item was only as tall
as its own text there was a ~28px band of header between the two: the pointer
left the item on its way down, and the panel closed under the hand reaching
for it. Full-height item, no gap. */
.site-nav {
align-self: stretch;
display: flex;
align-items: center;
gap: var(--s-32);
}
.site-nav__list {
align-self: stretch;
display: flex;
align-items: center;
gap: 34px;
}
.site-nav__item--panel {
align-self: stretch;
display: flex;
align-items: center;
gap: 2px;
}
.site-nav__link {
display: inline-block;
padding-block: 4px;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
transition:
color var(--t-fast),
box-shadow var(--t-fast);
}
.site-nav__link:hover {
color: var(--navy);
box-shadow: inset 0 -2px 0 var(--gold);
}
/* Same underline for "this is the page" and "this page sits under it"; the
distinction matters to assistive tech, not to the eye. */
.site-nav__link[aria-current="page"],
.site-nav__link.is-section {
color: var(--navy);
font-weight: 600;
box-shadow: inset 0 -2px 0 var(--gold);
}
/* The states sheet draws nav-link focus at offset 4px, not the global 2px. */
.site-nav__link:focus-visible {
outline-offset: 4px;
}
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
flex: none;
}
.nav-toggle__bars {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-end;
}
.nav-toggle__bars > span {
display: block;
height: 2px;
width: 24px;
background: var(--navy);
}
/* The third bar is gold: the only place the mark's accent appears in chrome. */
.nav-toggle__bars > span:last-child {
width: 15px;
background: var(--gold);
}
/* Nav collapses to the hamburger at 900px, per the handoff sheet. */
@media (max-width: 899px) {
.site-nav {
display: none;
}
.nav-toggle {
display: flex;
}
.nav-toggle__bars > span {
width: 22px;
}
.nav-toggle__bars > span:last-child {
width: 14px;
}
}
/* --------------------------------------------------------------------------
8b. NavPanel: the Managed Services disclosure panel
Six ecosystems in two groups, rendered on every page from
site.managedServices. Chrome, not page content, so it lives in the base
sheet.
Closed state is `display: none`, not opacity/visibility. A panel that keeps
its box while hidden is a 960px absolutely-positioned element inside a sticky
header, and check-responsive.mjs exempts only fixed/hidden/display:none
subtrees, so anything else here would report as a horizontal overflow at
every breakpoint on every page. The reveal is an animation instead of a
transition, which needs no box while closed. The global
prefers-reduced-motion block already reduces it to nothing.
-------------------------------------------------------------------------- */
.site-nav__disclosure {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
color: var(--muted);
transition: color var(--t-fast);
}
.site-nav__disclosure:hover {
color: var(--navy);
}
/* Matches the nav link's own 4px focus offset from the states sheet. */
.site-nav__disclosure:focus-visible {
outline-offset: 3px;
}
.site-nav__chev {
width: 6px;
height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--t-base);
}
.site-nav__item--panel[data-open="true"] .site-nav__chev {
transform: translateY(1px) rotate(-135deg);
}
.nav-panel {
display: none;
position: absolute;
/* Positioned against .site-header__inner, not against the item, which is why
`top: 100%` is the header's height rather than the underside of the link's
text box. +1px clears the header's own bottom hairline instead of sitting
on it. */
top: calc(100% + 1px);
/* Spans the content column exactly: left edge under the lockup, right edge
under the Contact CTA. Both offsets rather than a width, so it cannot
overhang the viewport at any width: .site-header__inner is capped at
1120px and gutter-padded, and absolute offsets resolve against its padding
box. A fixed width was tried at 960px and landed 64px short of the right
gutter, which reads as a mistake rather than a decision. */
left: var(--gutter);
right: var(--gutter);
padding: var(--s-32) var(--s-36) var(--s-26);
background: var(--surface);
border: 1px solid var(--hairline);
/* Gold top rule: the same "this is the active branch" signal the nav links
draw under themselves, continued onto the panel it opens. */
border-top: 2px solid var(--gold);
box-shadow: 0 18px 40px -18px rgba(27, 45, 94, 0.28);
}
/* Two ways in, and they are mutually exclusive by design.
nav.js puts `js-nav` on , which switches the hover/focus-within
fallback off and hands every open and close to the script, so
`aria-expanded` and the visible state can never disagree. Without the script
the fallback is the whole behaviour: hover for a pointer, :focus-within for a
keyboard, and the panel is still fully operable. */
html:not(.js-nav) .site-nav__item--panel:is(:hover, :focus-within) > .nav-panel,
.site-nav__item--panel[data-open="true"] > .nav-panel {
display: block;
animation: nav-panel-in 160ms ease-out;
}
/* A 3px transparent bridge across the header's bottom hairline.
The item ends at the header's content edge and the panel starts 1px below it,
so the row the hairline occupies belongs to neither: a pointer travelling down
into the panel leaves the item's subtree for one pixel. That was enough to
break both ways in. With the script running, dwelling on that row for 180ms
fired the close timer and the panel then could not be re-entered, because the
pointer was already inside where it used to be. Without the script the
:hover fallback had no timer at all and the panel vanished at exactly y=78.
This strip belongs to the panel, which is a DOM descendant of the item, so
hovering it keeps both the item hovered and pointerleave unfired. It adds no
layout box and exists only while the panel is displayed. */
.nav-panel::before {
content: "";
position: absolute;
/* The padding box starts 2px below the border box (the gold rule), so -3px
reaches 1px above the panel's outer top edge. */
top: -3px;
left: 0;
right: 0;
height: 3px;
}
@keyframes nav-panel-in {
from {
opacity: 0;
transform: translateY(-6px);
}
}
.nav-panel__head {
padding-bottom: var(--s-18);
border-bottom: 1px solid var(--hairline);
}
.nav-panel__eyebrow {
color: var(--gold-text);
font-size: var(--size-eyebrow-page);
letter-spacing: 0.3em;
}
.nav-panel__promise {
margin-top: var(--s-10);
font-size: var(--size-card-title-sm);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--ink);
}
.nav-panel__groups {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s-36);
padding-block: var(--s-26);
}
/* A hairline between the halves rather than a gap alone: the two groups are a
claim about how the six divide, and the rule is what makes that readable. */
.nav-panel__group + .nav-panel__group {
border-left: 1px solid var(--hairline);
padding-left: var(--s-36);
}
.nav-panel__group-label {
color: var(--navy);
}
.nav-panel__group-note {
margin-top: 4px;
margin-bottom: var(--s-14);
font-size: var(--size-small);
color: var(--muted);
}
.nav-panel__link {
display: grid;
grid-template-columns: 1.75rem 1fr;
align-items: baseline;
padding: var(--s-10) var(--s-14);
/* Pulled back out so the resting text aligns with the group label above and
only the hover fill is inset. */
margin-inline: calc(var(--s-14) * -1);
transition: background-color var(--t-fast);
}
.nav-panel__link:hover {
background: var(--surface-alt);
}
.nav-panel__link[aria-current="page"] {
box-shadow: inset 2px 0 0 var(--gold);
}
.nav-panel__num {
grid-row: span 2;
font-size: var(--size-eyebrow);
font-weight: 600;
letter-spacing: 0.14em;
color: var(--gold-text);
}
.nav-panel__label {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--navy);
}
.nav-panel__blurb {
margin-top: 3px;
font-size: var(--size-small);
line-height: 1.5;
color: var(--muted);
}
.nav-panel__more {
display: flex;
flex-wrap: wrap;
gap: var(--s-14) var(--s-32);
padding-top: var(--s-18);
border-top: 1px solid var(--hairline);
}
.nav-panel__more-link {
font-size: var(--size-small);
}
/* --------------------------------------------------------------------------
9. MobileNav drawer
-------------------------------------------------------------------------- */
.mobile-nav {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
flex-direction: column;
background: var(--navy);
color: #fff;
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform var(--t-drawer);
}
/* Closed-state hiding is the `inert` attribute plus the off-screen transform,
NOT `visibility: hidden`. inert already removes the drawer from the tab
order, the accessibility tree and pointer events. Because the element is
never in a hidden subtree, focus() lands synchronously the moment the
drawer opens. Making focus wait for a visibility transition to finish is how
a keyboard user ends up focused on nothing. The element is position:fixed,
so parking it off-screen adds no scrollable width. */
.mobile-nav[inert] {
pointer-events: none;
}
.mobile-nav[data-open="true"] {
transform: translateX(0);
}
/* Above the breakpoint the drawer can never open, so keep it out of the way
entirely rather than relying on the transform alone. */
@media (min-width: 900px) {
.mobile-nav {
display: none;
}
}
.mobile-nav__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-20);
height: var(--header-h);
padding-inline: var(--gutter);
border-bottom: 1px solid var(--hairline-navy);
flex: none;
}
.mobile-nav__close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
margin-right: -10px;
font-size: 2rem;
line-height: 1;
color: var(--gold);
}
.mobile-nav__body {
flex: 1;
padding: var(--s-20) var(--gutter);
}
.mobile-nav__lines > li + li,
.mobile-nav__rest > li + li {
border-top: 1px solid var(--hairline-navy);
}
.mobile-nav__lines a {
display: flex;
align-items: baseline;
gap: var(--s-14);
padding-block: var(--s-20);
font-size: 1.25rem;
font-weight: 600;
color: #fff;
}
/* Group heading above each half of the six. */
.mobile-nav__group {
margin-top: var(--s-26);
margin-bottom: var(--s-10);
color: var(--gold);
}
.mobile-nav__group:first-child {
margin-top: var(--s-10);
}
/* The drawn service list was three items at 20px. It is six now, and at 20px
most of the labels wrapped to two lines. 17px keeps all six on one line at
390px; the numeral treatment, which is the drawn detail that matters, is
unchanged.
It does NOT make the drawer fit: six ecosystems plus two group headings plus
six secondary links is 1049px of content in a 390x844 viewport, where the
three-line version fit in exactly 844. The drawer scrolls now, and what keeps
the CTA and the phone number on screen is the sticky foot below, not the
type size. Adding a drawer link costs scroll, not visibility. */
.mobile-nav__lines--eco a {
padding-block: var(--s-14);
font-size: 1.0625rem;
}
.mobile-nav__lines--eco a[aria-current="page"] {
color: var(--gold);
}
.mobile-nav__num {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--gold);
}
.mobile-nav__rest {
margin-top: var(--s-26);
border-top: 1px solid var(--hairline-navy);
}
.mobile-nav__rest a {
display: block;
padding-block: var(--s-14);
font-size: 1rem;
color: var(--on-navy);
}
/* Sticky, because the drawer's content no longer fits a 390x844 viewport now
that it lists six ecosystems. `flex: 1` on the body already parks this at the
bottom when the content does fit, so this changes nothing in that case; when
it does not, the CTA and the phone number stay on screen instead of sitting
205px below the fold. It needs its own fill: the list scrolls underneath it. */
.mobile-nav__foot {
flex: none;
position: sticky;
bottom: 0;
background: var(--navy);
padding: var(--s-22) var(--gutter) var(--s-32);
border-top: 1px solid var(--hairline-navy);
}
.mobile-nav__foot .btn {
font-size: 1rem;
padding: 17px 24px;
}
.mobile-nav__phone {
display: block;
margin-top: var(--s-14);
text-align: center;
font-size: var(--size-card-body);
color: var(--on-navy-link);
}
/* --------------------------------------------------------------------------
10. Hero
-------------------------------------------------------------------------- */
.hero {
display: grid;
grid-template-columns: 1fr 1.15fr;
min-height: 440px;
border-bottom: 1px solid var(--hairline);
}
.hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--s-56) var(--s-40) var(--s-48) var(--gutter);
max-width: calc(var(--content-max) / 2 + var(--gutter));
margin-left: auto;
}
.hero__copy > .display {
margin-top: var(--s-22);
}
.hero__copy > .lede {
margin-top: var(--s-22);
}
.hero__media {
position: relative;
background: var(--navy);
min-height: 320px;
}
.hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Framed from the bottom so the crop takes sky rather than the team's feet:
a group shot cut off at the ankles reads as a mistake. */
object-position: 50% 82%;
}
/* Sits under the photo so the navy band below reads as continuous. */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(27, 45, 94, 0.35), transparent 40%);
}
.hero--reversed .hero__copy {
order: 2;
}
/* Single column below 768px, photo above copy. */
@media (max-width: 767px) {
.hero {
grid-template-columns: 1fr;
min-height: 0;
}
.hero__media {
order: -1;
aspect-ratio: 4 / 3;
min-height: 0;
}
.hero__copy {
padding: var(--s-32) var(--gutter) var(--s-36);
max-width: none;
margin-left: 0;
}
.btn-row {
margin-top: var(--s-26);
}
.btn-row .btn {
flex: 1 1 100%;
padding: 17px 24px;
font-size: 1rem;
}
}
/* --------------------------------------------------------------------------
11. Cards
-------------------------------------------------------------------------- */
/* Cards are whole-card links, so their internals are spans. A flex column
makes those spans lay out as blocks without a `.card > * { display: block }`
wildcard, which would otherwise out-specify the display on the children
that need their own (the mark row, the arrow link). */
.card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--s-40) var(--gutter);
transition:
background-color var(--t-base),
box-shadow var(--t-base);
}
/* No lift, no shadow, no radius. The fill changes and a 3px gold rule is
drawn along the bottom edge. */
a.card:hover,
.card--linked:hover {
background: var(--surface-alt);
box-shadow: inset 0 -3px 0 var(--gold);
}
a.card:hover .arrow-link {
color: var(--gold-text-hover);
}
a.card:focus-visible {
outline-offset: -2px;
}
.card__marks {
display: flex;
align-items: center;
gap: var(--s-14);
margin-bottom: var(--s-18);
}
.card__rule {
width: 1px;
height: 28px;
background: var(--hairline);
}
.card__title {
margin-top: var(--s-14);
}
.card__body {
margin-top: var(--s-10);
}
.card .arrow-link {
margin-top: var(--s-18);
}
.service-mark {
width: 38px;
height: 36px;
flex: none;
}
.service-mark--lg {
width: 44px;
height: 42px;
}
@media (max-width: 1119px) {
.card {
padding: var(--s-36) var(--gutter);
}
}
@media (max-width: 767px) {
.card {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
12. StatCell
-------------------------------------------------------------------------- */
.stat {
padding: var(--s-44) var(--s-40);
}
.stat__value {
font-size: var(--size-stat);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--navy);
}
/* The design draws the percent sign full size on the baseline, in gold: it is
part of the figure, not a footnote marker. */
.stat__value sup,
.stat__unit {
font-size: inherit;
color: var(--gold-text);
vertical-align: baseline;
}
.stat__caption {
margin-top: var(--s-10);
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
/* Where a figure has no published source, the caption carries the note rather
than the number standing alone. See README "Outstanding from the client". */
.stat__source {
margin-top: var(--s-10);
font-size: 0.75rem;
color: var(--muted);
}
/* --------------------------------------------------------------------------
13. QuoteBand
-------------------------------------------------------------------------- */
.quote-band {
background: var(--gold);
color: var(--ink);
}
.quote-band__inner {
display: flex;
align-items: center;
gap: var(--s-40);
padding-block: var(--s-26);
}
.quote-band__text {
flex: 1;
}
.quote-band blockquote {
margin-top: 6px;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.5;
max-width: 47.5rem;
}
.quote-band__source {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s-10);
flex: none;
padding-left: var(--s-32);
border-left: 1px solid rgba(17, 24, 39, 0.25);
}
.quote-band__role {
font-size: var(--size-eyebrow);
font-weight: 600;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.quote-band__client {
display: flex;
align-items: center;
gap: 8px;
}
.quote-band__glyph {
height: 20px;
width: auto;
}
/* The client wordmarks in the design are set in Archivo at 800, not supplied
as logo files. Kept as text so they scale and stay selectable. */
.quote-band__wordmark {
font-size: 1.375rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--navy);
}
@media (max-width: 767px) {
.quote-band__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-20);
padding-block: 30px 32px;
}
.quote-band__source {
align-items: flex-start;
padding-left: 0;
padding-top: var(--s-18);
border-left: 0;
border-top: 1px solid rgba(17, 24, 39, 0.25);
width: 100%;
}
}
/* --------------------------------------------------------------------------
14. CTABand
-------------------------------------------------------------------------- */
.cta-band {
background: var(--gold);
color: var(--ink);
}
.cta-band--bordered {
border-top: 1px solid var(--hairline);
}
.cta-band__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-36);
padding-block: 34px;
}
.cta-band__statement {
font-size: var(--size-card-title);
font-weight: 600;
letter-spacing: -0.01em;
text-wrap: balance;
}
@media (max-width: 767px) {
.cta-band__inner {
flex-direction: column;
align-items: stretch;
gap: var(--s-20);
padding-block: 30px 32px;
}
.cta-band__statement {
font-size: 1.375rem;
line-height: 1.3;
}
.cta-band .btn {
padding: 17px 24px;
font-size: 1rem;
}
}
/* --------------------------------------------------------------------------
14b. WhyBand
The "Why Avispa " proof strip that closes each service page.
One component for all three, because three bespoke flex rows drifted apart:
the label sat vertically centred against a wrapping row, so on /eor the
three claims broke 2 + 1 and left the label floating in the gap.
A grid gives every claim an equal column and a gold rule to sit under.
-------------------------------------------------------------------------- */
.why-band__label {
color: var(--gold-text);
margin-bottom: var(--s-22);
}
.why-band__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-32);
}
.why-band__list li {
border-top: 2px solid var(--gold);
padding-top: var(--s-14);
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
@media (max-width: 1119px) {
.why-band__list {
grid-template-columns: repeat(2, 1fr);
gap: var(--s-26);
}
}
@media (max-width: 767px) {
.why-band__list {
grid-template-columns: 1fr;
gap: var(--s-20);
}
}
/* --------------------------------------------------------------------------
15. TrustedBy
-------------------------------------------------------------------------- */
.trusted-by {
background: var(--surface-alt);
border-top: 1px solid var(--hairline);
}
.trusted-by__inner {
display: flex;
align-items: center;
gap: var(--gutter);
padding-block: var(--s-26);
}
.trusted-by__label {
flex: none;
}
.trusted-by__logos {
display: flex;
align-items: center;
gap: var(--gutter);
flex-wrap: wrap;
}
.trusted-by__logos img {
height: 22px;
width: auto;
}
.trusted-by__mbe {
display: flex;
align-items: center;
gap: var(--s-14);
margin-left: auto;
flex: none;
}
.trusted-by__mbe img {
height: 30px;
width: auto;
}
.trusted-by__mbe span {
font-size: var(--size-eyebrow);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy);
}
@media (max-width: 1119px) {
.trusted-by__inner,
.trusted-by__logos {
gap: var(--s-32);
}
.trusted-by__logos img {
height: 20px;
}
}
@media (max-width: 767px) {
.trusted-by__inner {
flex-wrap: wrap;
gap: var(--s-20);
padding-block: 28px 30px;
}
.trusted-by__label {
width: 100%;
}
.trusted-by__logos {
gap: var(--s-22) var(--s-26);
}
.trusted-by__logos img {
height: 19px;
}
.trusted-by__mbe {
margin-left: 0;
width: 100%;
padding-top: var(--s-18);
border-top: 1px solid var(--hairline);
}
}
/* --------------------------------------------------------------------------
16. GlobeBand
-------------------------------------------------------------------------- */
.globe-band {
background: var(--navy);
color: var(--on-navy);
}
.globe-band__inner {
display: flex;
align-items: center;
gap: var(--s-44);
padding-block: var(--s-36);
}
.globe-band__globe {
width: 150px;
height: auto;
margin-block: -10px;
flex: none;
}
.globe-band__title {
margin-top: var(--s-10);
font-size: var(--size-card-title);
font-weight: 600;
color: #fff;
}
.flag-chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-20);
margin-top: var(--s-18);
}
.flag-chips li {
display: flex;
align-items: center;
gap: var(--s-10);
font-size: var(--size-card-body);
}
.flag-chips img {
width: 22px;
height: auto;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(238, 241, 248, 0.25);
flex: none;
}
@media (max-width: 1119px) {
.globe-band__inner {
gap: var(--s-32);
}
.globe-band__globe {
width: 132px;
margin-block: -8px;
}
}
@media (max-width: 767px) {
.globe-band__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-20);
padding-block: 34px 36px;
}
}
/* --------------------------------------------------------------------------
17. TeamCard
-------------------------------------------------------------------------- */
.team-card {
padding: var(--s-40);
text-align: left;
}
.team-card__photo {
width: 104px;
height: 104px;
margin-bottom: var(--s-22);
border-radius: 50%;
overflow: hidden;
background: var(--surface-alt);
}
.team-card__photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Hover restores full colour. Nothing moves. */
filter: saturate(0.85);
transition: filter var(--t-base);
}
.team-card:hover .team-card__photo img {
filter: saturate(1);
}
.team-card:hover .arrow-link {
box-shadow: inset 0 -1px 0 var(--gold-text);
}
.team-card--lead .team-card__photo {
width: 132px;
height: 132px;
}
.team-card__name {
font-size: var(--size-card-title);
font-weight: 600;
color: var(--navy);
}
.team-card__role {
margin-top: 4px;
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
.team-card .arrow-link {
margin-top: var(--s-18);
}
@media (max-width: 767px) {
.team-card {
padding: var(--s-32) var(--gutter);
}
.team-card__photo,
.team-card--lead .team-card__photo {
width: 88px;
height: 88px;
}
}
/* --------------------------------------------------------------------------
18. Forms
-------------------------------------------------------------------------- */
.form {
display: flex;
flex-direction: column;
gap: var(--s-22);
}
.form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-18);
}
@media (max-width: 767px) {
.form {
gap: var(--s-18);
}
.form__row {
grid-template-columns: 1fr;
}
}
.field {
display: flex;
flex-direction: column;
}
.field__label {
margin-bottom: var(--s-10);
font-size: var(--size-eyebrow);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.field__input,
.field__textarea,
.field__select {
width: 100%;
border: 1px solid var(--border);
padding: 14px 16px;
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--ink);
background: var(--surface);
border-radius: 0;
transition:
border-color var(--t-fast),
background-color var(--t-fast);
}
.field__input::placeholder,
.field__textarea::placeholder {
color: var(--disabled-fg);
}
.field__input:hover,
.field__textarea:hover,
.field__select:hover {
border-color: var(--border-strong);
}
/* Navy border carries the contrast; the gold ring is the secondary signal.
This is the one place gold is used as a focus indicator, and it is safe
because it never carries the requirement alone. */
.field__input:focus-visible,
.field__textarea:focus-visible,
.field__select:focus-visible {
border-color: var(--navy);
outline: 2px solid rgba(242, 183, 5, 0.55);
outline-offset: 1px;
}
.field__textarea {
min-height: 120px;
resize: vertical;
}
.field__select {
appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 L6 6 L11 1' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 12px 8px;
}
.field__input[disabled],
.field__textarea[disabled],
.field__select[disabled] {
border-color: var(--hairline);
background: var(--surface-sunken);
color: #c4c8cf;
cursor: not-allowed;
}
.field__error {
margin-top: var(--s-10);
font-size: var(--size-small);
font-weight: 500;
line-height: 1.5;
color: var(--error);
}
/* Errors appear only after a submit attempt (the design: "validate on blur,
never on keystroke"), and only on the field that is actually invalid, not
on every field at once. Never signalled by colour alone: the red border is
accompanied by the message below, which is what carries the meaning. */
.field__error {
display: none;
}
.field__error:empty {
display: none !important;
}
.form.is-validated .field__input:invalid,
.form.is-validated .field__textarea:invalid,
.form.is-validated .field__select:invalid {
border-color: var(--error);
}
.form.is-validated .field__input:invalid ~ .field__error,
.form.is-validated .field__textarea:invalid ~ .field__error,
.form.is-validated .field__select:invalid ~ .field__error {
display: block;
}
/* Interest chips. A visually-hidden checkbox keeps the semantics; the label
is the pill. */
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-10);
}
.chip input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.chip span {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 9px 16px;
border: 1px solid var(--border);
border-radius: 99px;
font-size: var(--size-small);
font-weight: 500;
color: var(--body);
cursor: pointer;
transition:
background-color var(--t-fast),
border-color var(--t-fast),
color var(--t-fast);
}
.chip:hover span {
border-color: var(--border-strong);
background: var(--surface-alt);
}
.chip input:checked + span {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
.chip input:focus-visible + span {
outline: 2px solid var(--navy);
outline-offset: 2px;
}
.form__actions {
display: flex;
align-items: center;
gap: var(--s-22);
flex-wrap: wrap;
}
.form__helper {
font-size: var(--size-small);
color: var(--muted);
}
.form__status[data-state="error"] {
border-left: 3px solid var(--error);
padding: var(--s-14) var(--s-18);
background: var(--surface-sunken);
font-size: var(--size-card-body);
color: var(--error);
}
.form-success {
border: 1px solid var(--hairline);
border-left: 3px solid var(--gold);
padding: var(--s-22) 24px;
}
.form-success__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--navy);
}
.form-success__body {
margin-top: 8px;
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
/* Submitting: same width, label swaps, spinner at 800ms linear. */
.btn[aria-busy="true"] .btn__spinner {
display: block;
animation: spin 800ms linear infinite;
}
.btn__spinner {
display: none;
width: 16px;
height: 16px;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* iOS zooms the page when a focused input's text is under 16px. */
@media (max-width: 767px) {
.field__input,
.field__textarea,
.field__select {
padding: 16px;
font-size: 1rem;
}
.field__textarea {
min-height: 110px;
}
}
/* --------------------------------------------------------------------------
19. SiteFooter
-------------------------------------------------------------------------- */
.site-footer {
background: var(--navy);
color: var(--on-navy-dim);
font-size: var(--size-small);
}
.site-footer__inner {
display: flex;
align-items: center;
gap: var(--s-26);
padding-block: var(--s-26);
}
.site-footer__mark {
width: 20px;
height: 20px;
flex: none;
}
/* The design fits the whole row on one line at 1120px. The middots are drawn
as generated content (a real "·" between each pair would be read out by a
screen reader), so the gap has to account for the dot's own width sitting
inside the following item, not just the space between items. */
.site-footer__links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--s-14);
}
.site-footer__links li + li::before {
content: "·";
margin-right: var(--s-14);
color: var(--on-navy-dim);
}
.site-footer__links li {
display: flex;
align-items: center;
}
.site-footer__links a {
color: var(--on-navy-link);
transition: color var(--t-fast);
}
.site-footer__links a:hover {
color: #fff;
box-shadow: inset 0 -1px 0 var(--gold);
}
.site-footer__copy {
margin-left: auto;
flex: none;
}
@media (max-width: 1119px) {
.site-footer__inner {
padding-block: var(--s-20);
}
}
@media (max-width: 767px) {
.site-footer__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-18);
padding-block: 30px 34px;
}
.site-footer__links {
flex-direction: column;
align-items: flex-start;
gap: var(--s-14);
}
.site-footer__links li + li::before {
content: none;
}
.site-footer__copy {
margin-left: 0;
}
}
/* --------------------------------------------------------------------------
20. Cookie banner
Nothing is set until a choice is made, and no wall blocks the page.
-------------------------------------------------------------------------- */
.cookie-banner {
position: fixed;
inset: auto 0 0 0;
z-index: 90;
background: var(--navy);
color: #fff;
}
.cookie-banner[hidden] {
display: none;
}
.cookie-banner__inner {
display: flex;
align-items: center;
gap: var(--s-36);
padding-block: var(--s-26);
}
.cookie-banner__text {
flex: 1;
margin-top: var(--s-10);
font-size: var(--size-card-body);
line-height: 1.65;
color: var(--on-navy);
max-width: 32.5rem;
}
.cookie-banner__text a {
color: var(--gold);
font-weight: 600;
}
.cookie-banner__actions {
display: flex;
align-items: center;
gap: var(--s-10);
flex: none;
}
.cookie-banner__actions .btn {
font-size: 0.875rem;
padding: 14px 22px;
}
@media (max-width: 767px) {
.cookie-banner__inner {
flex-direction: column;
align-items: stretch;
gap: var(--s-20);
}
.cookie-banner__actions {
flex-wrap: wrap;
}
.cookie-banner__actions .btn {
flex: 1 1 auto;
}
}
/* --------------------------------------------------------------------------
21. Motion
Section reveal: 600ms ease-out, 40px rise, once only, 80px trigger offset.
Sections are visible by default; the script opts in by adding .js-reveal,
so a failed script load can never leave the page blank.
-------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
opacity: 0;
transform: translateY(40px);
transition:
opacity var(--t-reveal),
transform var(--t-reveal);
}
.js-reveal [data-reveal][data-revealed="true"] {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.js-reveal [data-reveal] {
opacity: 1;
transform: none;
}
}
/* --------------------------------------------------------------------------
22. Utilities
-------------------------------------------------------------------------- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.stack > * + * {
margin-top: var(--s-20);
}
.text-center {
text-align: center;
}
@media print {
.site-header,
.mobile-nav,
.cookie-banner,
.cta-band,
.skip-link {
display: none !important;
}
body {
color: #000;
}
}
/* Spam trap on the contact form. Positioned off-screen rather than
display:none, because some bots skip fields they can tell are hidden. */
.honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --------------------------------------------------------------------------
GlobeBand: rotating globe
The rotation is drawn to a canvas by /assets/js/globe.js, which re-projects
the geometry every animation frame. That is continuous, where the 120-frame
sprite it replaced was quantised: "smoother" could only ever mean "more
frames", and 120 already cost 456KB against ~25KB for the geometry.
The still below is the fallback and is never removed: the canvas simply
covers it once it has something to show.
-------------------------------------------------------------------------- */
.globe-band__globe {
position: relative;
width: 150px;
height: 150px;
margin-block: -10px;
flex: none;
background: url("/assets/img/globe-still.png") center / contain no-repeat;
}
.globe-band__canvas {
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
/* Revealed by the script only after its first paint. */
.globe-band__canvas[data-ready="true"] {
opacity: 1;
}
@media (max-width: 1119px) {
.globe-band__globe {
width: 132px;
height: 132px;
margin-block: -8px;
}
}
/* ===== 50-404-and-cookies.css ===== */
/* ==========================================================================
404 (/404.html) and the global cookie-consent banner (design section 39a).
Two unrelated things share one file because they share one design sheet.
Everything here is prefixed `e404-` (page-scoped) or `cookie-banner__`
(the block 00-base.css already owns; only the parts the base sheet does
not draw are added below).
========================================================================== */
/* --------------------------------------------------------------------------
1. Hero
The 404 hero is the shared .hero grid at the ratio and padding 39a draws:
1.05fr 1fr, copy inset 80/40/72/48. The right column is a flat navy panel
holding an SVG rather than a photograph, so it does not reuse .hero__media
(no object-fit, no gradient scrim).
-------------------------------------------------------------------------- */
.e404-hero {
grid-template-columns: 1.05fr 1fr;
}
.e404-hero .hero__copy {
padding: var(--s-80) var(--s-40) var(--s-72) var(--gutter);
}
/* 50px, one step under the 52px default. 39a and the press kit are the two
pages that run it. Falls back to the ramp below the desktop breakpoint. */
.e404-title {
font-size: 3.125rem;
}
.e404-lede {
max-width: 28.75rem; /* 460px: 39a runs a narrower measure than the 480 default */
}
.e404-hero .hero__copy > .e404-lede {
margin-top: var(--s-20);
}
.e404-hero__panel {
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-48);
background: var(--navy);
}
.e404-mark {
width: 280px;
height: auto;
}
@media (max-width: 1119px) {
.e404-title {
font-size: var(--size-display);
}
.e404-hero .hero__copy {
padding: var(--s-56) var(--s-32) var(--s-48) var(--gutter);
}
.e404-hero__panel {
padding: var(--s-40) var(--s-32);
}
.e404-mark {
width: 240px;
}
}
@media (max-width: 767px) {
/* Single column: the illustration goes above the copy, matching the hero
photo reorder every other page makes. */
.e404-hero {
grid-template-columns: 1fr;
}
.e404-hero__panel {
order: -1;
padding: var(--s-32) var(--gutter);
}
.e404-hero .hero__copy {
padding: var(--s-32) var(--gutter) var(--s-36);
}
.e404-mark {
width: 200px;
}
}
/* --------------------------------------------------------------------------
2. "Where you were probably headed": four compact link cards
-------------------------------------------------------------------------- */
.e404-links-band {
padding-block: var(--s-44);
}
.e404-links-title {
margin-bottom: 24px;
}
/* 39a draws this grid with a full 1px frame; the shared .grid only rules the
block edges because it is normally used edge to edge. */
.e404-links {
border-inline: 1px solid var(--hairline);
}
/* The cell, not the card, is the grid item, so the card has to stretch or a
short card would hover-fill only part of its cell. */
.e404-links > li {
display: flex;
}
.e404-card {
flex: 1;
padding: var(--s-26) 24px;
}
.e404-card__title {
margin-top: var(--s-10);
}
.e404-card .arrow-link {
margin-top: var(--s-14);
}
@media (max-width: 767px) {
.e404-card {
padding: var(--s-26) var(--s-20);
}
}
/* --------------------------------------------------------------------------
3. Cookie banner
The block lives in 00-base.css; these are the parts 39a draws that the base
sheet does not: the copy column, the mobile button order, and the two copy
deltas between the desktop and 390px mockups.
-------------------------------------------------------------------------- */
.cookie-banner__copy {
flex: 1;
}
/* Desktop reads "Manage", mobile reads "Manage preferences" (39a). Both labels
ship; the hidden one is out of the accessibility tree with display:none, so
only the visible label is announced. */
.cookie-banner__manage-long {
display: none;
}
@media (max-width: 767px) {
/* 39a inverts the order at 390px: Accept all, then Essential only, then
Manage as a borderless text link. */
.cookie-banner__actions {
flex-direction: column;
align-items: stretch;
}
.cookie-banner__actions .btn {
font-size: 1rem;
padding: 16px 24px;
}
.cookie-banner__accept {
order: 1;
}
.cookie-banner__essential {
order: 2;
}
.cookie-banner__manage {
order: 3;
min-height: var(--s-44);
padding: var(--s-10);
border-color: transparent;
font-size: var(--size-card-body);
color: var(--on-navy-dim);
}
.cookie-banner__manage:hover {
border-color: transparent;
background: none;
color: #fff;
}
.cookie-banner__manage-short {
display: none;
}
.cookie-banner__manage-long {
display: inline;
}
/* 39a's mobile body copy drops this sentence. */
.cookie-banner__optional {
display: none;
}
}
/* ===== 50-about.css ===== */
/* ==========================================================================
/about (section 9b). Founder story.
Hero with a gold caption chip pinned to the photo, three principle cells,
the Magnit quote band. No CTA band on this page.
========================================================================== */
/* 9b draws the hero at 1.1fr 1fr with a 420px minimum, one notch narrower on
the photo side than Home's 1fr 1.15fr.
Gated behind min-width because this file is concatenated AFTER 00-base.css:
an unguarded two-column rule here outranks base's mobile single-column rule
no matter which media query base put it in. */
@media (min-width: 768px) {
.hero--about {
grid-template-columns: 1.1fr 1fr;
min-height: 420px;
}
}
/* No scrim here. The shared gradient exists so a hero can bleed into the navy
band beneath it; on About the band beneath is white, and the scrim would
also tint the gold caption chip. */
.hero--about .hero__media::after {
content: none;
}
/* Framed a little high so the caption chip sits over the jacket rather than
across the face. */
.hero--about .hero__media img {
object-position: center 22%;
}
/* About's headline is 50px, one step under the 52px shared default. Below
1120px it rejoins the responsive ramp. */
.display--about {
font-size: 3.125rem;
line-height: 1.1;
}
@media (max-width: 1119px) {
.display--about {
font-size: var(--size-display);
}
}
/* --------------------------------------------------------------------------
Caption chip: the only element on the site anchored to an image. It stays
pinned to the photo's bottom-left corner at every width.
-------------------------------------------------------------------------- */
.about-caption {
position: absolute;
left: 0;
bottom: 0;
background: var(--gold);
color: var(--ink);
padding: var(--s-18) var(--s-26);
}
.about-caption__name {
display: block;
font-size: var(--size-body);
font-weight: 600;
line-height: 1.3;
}
.about-caption__role {
display: block;
font-size: var(--size-eyebrow);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 767px) {
.about-caption {
padding: var(--s-14) var(--s-20);
}
.about-caption__name {
font-size: 1rem;
}
.about-caption__role {
font-size: 0.6875rem;
}
}
/* --------------------------------------------------------------------------
Principles row
-------------------------------------------------------------------------- */
/* The hero already draws the rule above this row, and the gold quote band
below needs none, so drop the grid's own outer borders and keep only the
1px gutters between cells. */
.about-principles {
border-block: 0;
}
/* 9b insets these cells 40px, not the 48px page gutter. Built as drawn. */
.about-principle {
padding: var(--s-44) var(--s-40);
}
.about-principle__title {
margin-top: var(--s-14);
}
.about-principle__body {
margin-top: var(--s-10);
}
@media (max-width: 1119px) {
.about-principle {
padding: var(--s-36) var(--s-32);
}
}
@media (max-width: 767px) {
.about-principle {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
Quote band attribution
-------------------------------------------------------------------------- */
/* Magnit sets its wordmark lowercase and tighter than Dolby's or UCSF's, so
this one opts out of the shared uppercase treatment. */
.about-wordmark {
text-transform: none;
letter-spacing: -0.02em;
}
/* ===== 50-contact.css ===== */
/* ==========================================================================
/contact (section 24a)
The split: navy detail panel left, form right, 1fr 1.1fr, min-height 560px.
Everything here is prefixed .contact- so it cannot collide with another page.
========================================================================== */
/* The grid runs to the 1120px cap so the panel edges land exactly where the
design draws them. The navy fill still has to reach the left viewport edge:
a box-shadow does that without adding layout width, where a negative-inset
pseudo-element would push out a horizontal scrollbar. */
.contact-split {
display: grid;
grid-template-columns: 1fr 1.1fr;
min-height: 35rem; /* 560px */
max-width: var(--content-max);
margin-inline: auto;
}
.contact-panel {
display: flex;
flex-direction: column;
padding: var(--s-64) var(--gutter);
box-shadow: -100vw 0 0 var(--navy);
}
.contact-panel__title {
margin-top: var(--s-22);
font-size: 2.875rem; /* 46px, the contact step of the display ramp */
}
.contact-panel__lede {
margin-top: var(--s-22);
max-width: 26.25rem; /* 420px */
}
/* --------------------------------------------------------- detail blocks */
/* Pushed to the foot of the panel by margin-top:auto, as drawn. */
.contact-details {
display: flex;
flex-direction: column;
gap: var(--s-22);
margin-top: auto;
padding-top: var(--s-40);
}
.contact-detail__label {
display: block;
color: var(--on-navy-dim);
}
.contact-detail__phone {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: var(--size-card-title-sm);
font-weight: 600;
color: #fff;
transition: box-shadow var(--t-fast);
}
.contact-detail__phone:hover {
box-shadow: inset 0 -2px 0 var(--gold);
}
.contact-detail__body {
margin-top: 8px;
font-size: 1rem;
line-height: 1.5;
color: var(--on-navy-link);
}
/* The press link is drawn at the body size (16px), not the 14px arrow-link
default, and stays gold because it sits on navy. */
.contact-detail__link {
align-items: center;
min-height: 44px;
font-size: 1rem;
}
.contact-panel .arrow-link:hover {
color: var(--gold-on-navy-hover);
box-shadow: inset 0 -1px 0 var(--gold);
}
.contact-social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 1rem;
}
.contact-social li {
display: flex;
align-items: center;
}
/* Middots as generated content so they stay out of the accessibility tree. */
.contact-social li + li::before {
content: "·";
margin-right: 8px;
color: var(--on-navy-dim);
}
.contact-social a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* ----------------------------------------------------------- form column */
.contact-form-panel {
display: flex;
flex-direction: column;
padding: var(--s-64) var(--gutter);
}
.contact-form {
flex: 1;
}
/* The chip group is a fieldset for grouping semantics; strip the UA chrome. */
.contact-form__interest {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
.contact-form__interest legend {
padding: 0;
}
/* The textarea takes the slack so the form fills the 560px panel, as drawn. */
.contact-form__message,
.contact-form__message .field__textarea {
flex: 1;
}
/* 37a's own states sheet ends with "Tap targets 44px minimum". The shared chip
is drawn at a 38px pill; the chip group exists only on this page, so raise it
here rather than diverge the base component. */
.contact-form .chip span {
min-height: 44px;
}
.contact-form__actions {
justify-content: space-between;
}
.contact-form__submit {
padding-inline: 34px; /* the contact submit is the one 34px button (24a) */
}
/* The base sheet reveals every .field__error once the form has been submitted
once. Scope it to the field that actually failed, so a corrected field does
not keep a stale message under it. */
.contact-form.is-validated .field__input:valid ~ .field__error,
.contact-form.is-validated .field__textarea:valid ~ .field__error {
display: none;
}
/* -------------------------------------------------------------- tablet */
/* The split stacks: navy panel full width, form beneath it. */
@media (max-width: 1119px) {
.contact-split {
grid-template-columns: 1fr;
min-height: 0;
}
.contact-panel,
.contact-form-panel {
padding: var(--s-48) var(--gutter);
}
}
/* -------------------------------------------------------------- mobile */
@media (max-width: 767px) {
.contact-panel,
.contact-form-panel {
padding: var(--s-32) var(--gutter) var(--s-36);
}
.contact-panel__title {
font-size: 2rem; /* 32px */
line-height: 1.15;
letter-spacing: -0.02em;
}
.contact-details {
gap: var(--s-20);
margin-top: var(--s-26);
padding-top: var(--s-26);
border-top: 1px solid var(--hairline-navy);
}
.contact-form__message,
.contact-form__message .field__textarea {
flex: 0 auto;
}
.contact-form__actions {
flex-direction: column-reverse;
align-items: stretch;
gap: var(--s-14);
}
.contact-form__submit {
width: 100%;
padding: 18px 24px;
font-size: 1rem;
}
}
/* The band above the footer on this page is navy, so the footer carries the
divider the design draws on 24a. */
.contact-page .site-footer {
border-top: 1px solid rgba(238, 241, 248, 0.22);
}
/* ===== 50-diversity.css ===== */
/* ==========================================================================
/diversity (26a)
Hero, the three StatCells, and the navy NMSDC certification band.
========================================================================== */
/* --------------------------------------------------------------------------
Hero
26a runs a wider photo column than the shared hero (1fr 1.28fr vs 1fr 1.15fr)
and a shorter minimum height.
-------------------------------------------------------------------------- */
.diversity-hero {
grid-template-columns: 1fr 1.28fr;
min-height: 420px;
/* The StatCell grid below supplies the rule; keeping both would draw 2px. */
border-bottom: 0;
}
/* 44px headline, one step below the 52px shared display, as drawn. min()
keeps it from *growing* at the narrower breakpoints, where the shared token
steps to 46px (tablet) and 34px (mobile). */
.diversity-hero__title {
font-size: min(2.75rem, var(--size-display));
line-height: 1.1;
}
/* 400px measure, narrower than the 480px default. */
.diversity-hero .lede {
max-width: 25rem;
}
.diversity-hero__cta {
white-space: nowrap;
}
.diversity-hero .hero__media img {
object-position: 70% 55%;
}
@media (min-width: 768px) {
/* The design insets the copy column 36px from the photo, not the shared 40px.
Scoped above 768px because the shared hero goes single-column below it and
the copy column takes the page gutter on both sides. */
.diversity-hero .hero__copy {
padding-right: var(--s-36);
}
}
/* Both of these restate the shared mobile hero rules, which this file would
otherwise outrank on source order alone: single column, photo above copy. */
@media (max-width: 767px) {
.diversity-hero {
grid-template-columns: 1fr;
min-height: 0;
}
}
/* --------------------------------------------------------------------------
StatCells
The shared .stat carries the type and the 44px/40px desktop padding; only the
narrower breakpoints need adding, since the 40px side padding would otherwise
overrun the 32px and 20px gutters.
-------------------------------------------------------------------------- */
@media (max-width: 1119px) {
.diversity-stats .stat {
padding: var(--s-36) var(--gutter);
}
}
/* At tablet the 3-up drops to 2-up and the third cell spans both columns, so
its caption needs a measure or it runs the full width of the band. */
@media (min-width: 768px) and (max-width: 1119px) {
.diversity-stats > li:last-child .stat__caption {
max-width: var(--measure);
}
}
@media (max-width: 767px) {
.diversity-stats .stat {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
NMSDC / MBE band
-------------------------------------------------------------------------- */
.diversity-mbe {
padding-block: var(--s-44);
}
.diversity-mbe__inner {
display: flex;
align-items: center;
gap: var(--s-48);
}
/* The logo is full colour, so it sits on a white chip to stay legible on navy.
The 4px radius here is the only rounded corner in the system outside the
99px form chip. content-box so the drawn 44px is the artwork itself and the
chip padding sits outside it, as in the design. */
.diversity-mbe__logo {
box-sizing: content-box;
height: var(--s-44);
width: auto;
flex: none;
padding: 8px 12px;
background: var(--surface);
border-radius: 4px;
}
.diversity-mbe__title {
font-size: 1.375rem; /* 22px, between the 24px and 20px card-title steps */
line-height: 1.3;
}
.diversity-mbe__body {
margin-top: 8px;
max-width: 45rem; /* 720px */
}
@media (max-width: 1119px) {
.diversity-mbe {
padding-block: var(--s-36);
}
.diversity-mbe__inner {
gap: var(--s-26);
}
.diversity-mbe__title {
font-size: var(--size-card-title-sm);
}
}
@media (max-width: 767px) {
.diversity-mbe {
padding-block: var(--s-32);
}
.diversity-mbe__inner {
display: block;
}
.diversity-mbe__logo {
margin-bottom: var(--s-18);
}
}
/* --------------------------------------------------------------------------
Footer
Per chrome spec §2.4, the footer gains a top rule on the three pages whose
last band is itself navy; otherwise the two navies run together.
-------------------------------------------------------------------------- */
.page-diversity .site-footer {
border-top: 1px solid rgba(238, 241, 248, 0.22);
}
/* ===== 50-eor.css ===== */
/* ==========================================================================
/eor/: Service Line 03, Employer of Record. Transcribed from 22a.
Only the four things the shared sheet has no equivalent for: the hero's
1.1fr column split and 48x46 mark, the two responsibility panels, the
four-up fact row, and the grey "why" strip. Everything else on the page is
.hero / .grid / .card-title / .eyebrow / .band--alt straight out of 00-base.
========================================================================== */
/* --------------------------------------------------------------------------
Hero
22a runs 1.1fr / 1fr at 420px, where Home runs 1fr / 1.15fr at 440px.
-------------------------------------------------------------------------- */
/* Gated behind min-width because this file is concatenated AFTER 00-base.css:
an unguarded two-column rule here outranks base's mobile single-column rule
regardless of which media query base put it in. */
@media (min-width: 768px) {
.hero--eor {
grid-template-columns: 1.1fr 1fr;
min-height: 420px;
}
}
/* The EOR mark is drawn one step above the card sizes here: 48 x 46, sitting
above the eyebrow rather than beside it. */
.eor-hero__mark {
width: 48px;
height: 46px;
margin-bottom: var(--s-20);
}
/* Service-line pages put the photo BELOW the copy on mobile, the opposite of
Home, which leads with the image. The scrim goes with it: the mobile
service-line photo is drawn flat, with no gradient. */
@media (max-width: 767px) {
.hero--eor .hero__media {
order: 0;
aspect-ratio: auto;
height: 230px;
}
.hero--eor .hero__media::after {
content: none;
}
}
/* --------------------------------------------------------------------------
Shared block rules
Each band below draws its own top hairline and the band after it supplies
the next one, so .grid's bottom border would double the line to 2px.
-------------------------------------------------------------------------- */
.eor-block .grid {
border-bottom: 0;
}
/* The panel headings and the "why" label are section eyebrows in gold-text
(12px / .24em), not the 13px / .3em page eyebrow. */
.eor-eyebrow--gold {
color: var(--gold-text);
}
/* --------------------------------------------------------------------------
"We take on" / "You retain"
-------------------------------------------------------------------------- */
.eor-panel {
padding: var(--s-48);
}
.eor-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: var(--s-20);
font-size: var(--size-card-body);
line-height: 1.5;
color: var(--body);
}
/* --------------------------------------------------------------------------
Speed / Reach / Risk / Cost
-------------------------------------------------------------------------- */
.eor-fact {
padding: var(--s-36) var(--s-32);
}
.eor-fact__title {
margin-top: 12px;
}
/* 22a sets these captions at 14px, one step below the 15px card body. */
.eor-fact__body {
margin-top: var(--s-10);
font-size: 0.875rem;
}
/* --------------------------------------------------------------------------
Tablet
The two-up holds; the four-up drops to two-up with the shared .grid rules.
-------------------------------------------------------------------------- */
@media (max-width: 1119px) {
.eor-panel {
padding: var(--s-36) var(--s-32);
}
.eor-fact {
padding: var(--s-32) 28px;
}
}
/* --------------------------------------------------------------------------
Mobile: everything single column, 20px gutter.
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
.eor-panel {
padding: var(--s-32) var(--gutter);
}
.eor-fact {
padding: 28px var(--gutter);
}
}
/* ===== 50-legal.css ===== */
/* ==========================================================================
50-legal.css: /terms/ and /accessibility/
Design section 40a is one canvas frame holding two page mockups that share a
shell: a title block, then a two-column hairline split. Terms puts a sticky
"ON THIS PAGE" rail beside the body (220px 1fr); Accessibility puts a
"WHAT WE BUILD IN" list beside it (1.15fr 1fr). Everything below is shared.
The 1px rules come from the base .grid (gap:1px over a hairline background),
so the divider between the columns becomes a divider *above* the second cell
as soon as the grid collapses to one column on mobile, which is exactly the
behaviour the responsive spec asks for.
========================================================================== */
/* --------------------------------------------------------------------------
Title block (40a: padding 64px 48px 24px)
-------------------------------------------------------------------------- */
.legal-head {
padding-block: var(--s-64) 24px;
}
/* 44px is the legal/diversity step of the display ramp (design-system §2.1);
the shared --size-display is 52px, so this page sets its own. */
.legal-title {
font-size: 2.75rem;
line-height: 1.1;
}
.legal-meta {
margin: 1rem 0 var(--s-32);
font-size: 0.875rem;
color: var(--muted);
}
@media (max-width: 1119px) {
.legal-head {
padding-block: var(--s-48) var(--s-20);
}
.legal-title {
font-size: 2.25rem;
}
}
@media (max-width: 767px) {
.legal-head {
padding-block: 34px var(--s-20);
}
.legal-title {
font-size: 1.875rem;
}
}
/* --------------------------------------------------------------------------
The split: tracks only; .grid draws the rules
-------------------------------------------------------------------------- */
.legal-split {
grid-template-columns: 220px 1fr;
}
.legal-split--wide {
grid-template-columns: 1.15fr 1fr;
}
/* Tablet narrows the rail rather than dropping it. */
@media (max-width: 1119px) {
.legal-split {
grid-template-columns: 180px 1fr;
}
}
@media (max-width: 767px) {
.legal-split,
.legal-split--wide {
grid-template-columns: 1fr;
}
}
/* --------------------------------------------------------------------------
Contents rail
-------------------------------------------------------------------------- */
.legal-toc {
padding: var(--s-48) var(--s-32) var(--s-48) var(--gutter);
}
/* The rail is short and the body is long, so it tracks the reader down the
page. Offset by the sticky header so it never slides under it. */
.legal-toc__inner {
position: sticky;
top: calc(var(--header-h) + var(--s-32));
}
.legal-toc__label {
margin-bottom: var(--s-20);
}
.legal-toc__list {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 0.875rem;
line-height: 1.4;
}
.legal-toc__list a {
display: inline-block;
padding-block: 2px;
font-weight: 500;
color: var(--body);
transition: color var(--t-fast);
}
.legal-toc__list a:hover {
color: var(--navy);
box-shadow: inset 0 -1px 0 var(--gold);
}
@media (max-width: 1119px) {
.legal-toc {
padding: var(--s-40) 24px var(--s-40) var(--gutter);
}
}
/* Mobile: the rail collapses above the body as a horizontal wrap list. */
@media (max-width: 767px) {
.legal-toc {
padding: 24px var(--gutter);
}
.legal-toc__inner {
position: static;
}
.legal-toc__list {
flex-direction: row;
flex-wrap: wrap;
gap: 10px 16px;
}
.legal-toc__list a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding-block: 0;
}
}
/* --------------------------------------------------------------------------
Body and aside cells
The measure sits on an inner element, never on the grid cell. A narrowed
cell would stop filling its column and the hairline gap would show through.
-------------------------------------------------------------------------- */
.legal-body,
.legal-aside {
padding: var(--s-48) var(--gutter);
}
.legal-prose {
max-width: 42.5rem; /* 680px, the 40a body column */
}
.legal-prose--narrow {
max-width: 35rem; /* 560px, the 40a accessibility column */
}
.legal-prose > * + * {
margin-top: 34px;
}
.legal-prose--narrow > * + * {
margin-top: var(--s-32);
}
.legal-prose section > * + * {
margin-top: 12px;
}
.legal-prose h2 {
margin-top: 0;
font-size: var(--size-card-title-sm);
line-height: 1.3;
color: var(--navy);
/* Anchor targets clear the sticky header. */
scroll-margin-top: calc(var(--header-h) + var(--s-20));
}
.legal-callout {
border-left: 3px solid var(--gold);
padding-left: var(--s-20);
}
.legal-callout > * + * {
margin-top: 6px;
}
.legal-callout__title {
font-size: 1rem;
font-weight: 600;
color: var(--navy);
}
@media (max-width: 1119px) {
.legal-body,
.legal-aside {
padding: var(--s-40) var(--gutter);
}
}
@media (max-width: 767px) {
.legal-body {
padding: 30px var(--gutter) var(--s-36);
}
.legal-aside {
padding: var(--s-32) var(--gutter) var(--s-36);
}
.legal-prose,
.legal-prose--narrow {
max-width: none;
}
.legal-prose > * + *,
.legal-prose--narrow > * + * {
margin-top: 28px;
}
/* Legal prose does not need to grow on a phone; the headings hold their size
so the structure still reads. */
.legal-prose p {
font-size: var(--size-card-body);
line-height: 1.7;
}
}
/* --------------------------------------------------------------------------
"What we build in" list (/accessibility only)
-------------------------------------------------------------------------- */
.legal-aside__label {
margin-bottom: 24px;
}
.legal-features > li {
padding-block: var(--s-18);
border-bottom: 1px solid var(--hairline);
}
.legal-features > li:last-child {
border-bottom: 0;
}
.legal-features__title {
font-size: 1rem;
font-weight: 600;
line-height: 1.3;
color: var(--navy);
}
.legal-features__body {
margin-top: 6px;
}
/* ===== 50-managed-services-how-it-works.css ===== */
/* ==========================================================================
/managed-services/how-it-works/: the five-step MSP program lifecycle (33a)
Bands, top to bottom: hero -> 5-up lifecycle grid -> two-up "what you see /
what we run" -> grey "every step of the way" strip -> gold CTA band.
The four light bands butt directly against each other, so every 1px rule is
drawn exactly once: the hero's own bottom hairline is the rule above the
steps, the steps grid's bottom rule is the rule above the two-up, and the
grey strip supplies the rule above itself.
========================================================================== */
/* --------------------------------------------------------------------------
Hero: 1fr 1.28fr, 380px, 44px headline (the how-it-works step of the ramp)
-------------------------------------------------------------------------- */
.msp-hiw-hero {
grid-template-columns: 1fr 1.28fr;
min-height: 380px;
}
/* The copy column is inset 36px from the photo here, not the shared 40px. */
.msp-hiw-hero .hero__copy {
padding-right: var(--s-36);
}
.msp-hiw-hero .hero__media img {
object-position: 70% 58%;
}
.msp-hiw-hero__title {
font-size: 2.75rem; /* 44px */
}
.msp-hiw-hero__lede {
max-width: 25rem; /* 400px */
}
/* "← Managed Services". The glyph is decorative, so it sits in its own
aria-hidden span; this just tightens the button's default 10px gap. */
.msp-hiw-back {
gap: 0.4em;
}
@media (max-width: 1119px) {
.msp-hiw-hero {
grid-template-columns: 1fr 1.15fr;
}
.msp-hiw-hero__title {
font-size: 2.5rem; /* 40px */
}
}
@media (max-width: 767px) {
.msp-hiw-hero {
grid-template-columns: 1fr;
min-height: 0;
}
.msp-hiw-hero .hero__copy {
padding-right: var(--gutter);
}
.msp-hiw-hero__title {
font-size: var(--size-display);
}
.msp-hiw-hero__lede {
max-width: none;
}
}
/* --------------------------------------------------------------------------
The five steps
-------------------------------------------------------------------------- */
.msp-hiw-steps {
border-top: 0;
}
.msp-hiw-step {
padding: 38px 28px 42px;
}
/* The first cell carries the page gutter so the numerals line up with the
header lockup and the hero copy. */
.msp-hiw-steps > li:first-child {
padding-left: var(--gutter);
}
/* The design draws these as a near-invisible watermark in --hairline, which
measures 1.24:1 on white. They are the only cue to which step you are
reading, so a low-vision user needs to be able to read them: #868C98 is
3.38:1, clearing the 3:1 that 44px/600 text needs as "large".
The also carries the sequence semantically, so a screen reader gets the
position regardless. Hence aria-hidden on the numeral itself, which would
otherwise be announced twice. */
.msp-hiw-step__num {
font-size: var(--size-stat);
font-weight: 600;
line-height: 1;
color: #868c98;
}
.msp-hiw-step__title {
margin-top: 16px;
font-size: 1.1875rem; /* 19px */
font-weight: 600;
line-height: 1.25;
color: var(--navy);
}
.msp-hiw-step__body {
margin-top: var(--s-10);
font-size: 0.875rem; /* 14px */
line-height: 1.6;
color: var(--body);
}
/* Tablet: 2-up, the fifth step spans the row. No carousel: the design system
has none, and a five-wide row of 14px copy is unreadable under 1120px. */
@media (max-width: 1119px) {
.msp-hiw-step {
padding: var(--s-32) var(--gutter) var(--s-36);
}
.msp-hiw-steps > li:last-child {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.msp-hiw-step {
padding: 28px var(--gutter) 30px;
}
.msp-hiw-steps > li:last-child {
grid-column: auto;
}
}
/* --------------------------------------------------------------------------
What you see / what we run
-------------------------------------------------------------------------- */
.msp-hiw-split {
border-block: 0;
}
.msp-hiw-panel {
padding: var(--s-48);
}
.msp-hiw-panel__title {
margin-top: var(--s-14);
}
.msp-hiw-panel__body {
margin-top: var(--s-10);
}
@media (max-width: 1119px) {
.msp-hiw-panel {
padding: var(--s-36) var(--gutter);
}
}
@media (max-width: 767px) {
.msp-hiw-panel {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
"Every step of the way" strip
-------------------------------------------------------------------------- */
.msp-hiw-strip {
padding-block: 30px;
}
.msp-hiw-strip__inner {
display: flex;
align-items: center;
gap: var(--s-36);
}
.msp-hiw-strip__label {
flex: none;
color: var(--gold-text);
}
.msp-hiw-strip__list {
display: flex;
gap: var(--s-44);
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
@media (max-width: 1119px) {
.msp-hiw-strip__inner,
.msp-hiw-strip__list {
flex-wrap: wrap;
gap: var(--s-20) var(--s-32);
}
}
@media (max-width: 767px) {
.msp-hiw-strip__inner {
flex-direction: column;
align-items: flex-start;
gap: var(--s-18);
}
.msp-hiw-strip__list {
flex-direction: column;
gap: 12px;
}
}
/* ===== 50-managed-services.css ===== */
/* ==========================================================================
/managed-services/: the hub for the six managed workforce ecosystems.
The hero is design section 23a. Everything below it is the `eco-` component
built for this page: a sequenced list where the order carries meaning, which
is the one thing the base sheet's hairline card grids cannot express. A
.grid--3 says "three peers", and these are six steps.
Everything else on the page is base components: .hero, .band--navy,
.why-band, and the CTA band the layout emits from front matter.
========================================================================== */
/* --------------------------------------------------------------------------
Hero
The design draws this hero at 1.1fr 1fr: the copy column is the wider one,
where Home runs 1fr 1.15fr. At the 1120px cap that puts the copy column at
587px, which is exactly where .hero__copy's own max-width lands it.
-------------------------------------------------------------------------- */
.msp-hero {
grid-template-columns: 1.1fr 1fr;
}
.msp-hero__mark {
margin-bottom: var(--s-20);
}
/* The design crops this frame at 35% rather than the shared 100%: the
subject sits left of centre and the right edge is empty desk. */
.msp-hero .hero__media img {
object-position: 35% center;
}
@media (max-width: 767px) {
/* The cascade trap, and this file was the one service-line sheet that had not
closed it: the ungated `1.1fr 1fr` above is concatenated AFTER 00-base.css,
including after base's own `@media (max-width: 767px) .hero
{ grid-template-columns: 1fr }`, and at equal specificity. So it won at
every width and this hero stayed two columns on a phone. Measured at 390px
it computed 231px of copy beside a 159px slice of photograph, with the h1
over five lines. check-responsive.mjs cannot see it because nothing
overflows: the columns just squeeze.
50-staffing.css restates the column the same way; 50-eor.css instead gates
its rule behind min-width: 768px. Either is correct; this matches the
nearer sibling. min-height needs no restating: .msp-hero sets none, so
base's mobile `min-height: 0` still applies. */
.msp-hero {
grid-template-columns: 1fr;
}
/* Service-line heroes put the copy first and the photo below it, the
opposite of Home. The mobile comp draws it 230px tall with no scrim. */
.msp-hero .hero__media {
order: 0;
height: 230px;
aspect-ratio: auto;
}
.msp-hero .hero__media::after {
content: none;
}
}
/* --------------------------------------------------------------------------
The six: section frame and intro
This section uses .wrap rather than .wrap-full: the rows are hairline-ruled
inside the content column, not bled to the viewport edge, so they need the
wrapper's gutters.
-------------------------------------------------------------------------- */
.eco-section {
padding-block: var(--s-72) var(--s-80);
}
.eco-intro__lede {
margin-top: var(--s-18);
max-width: 34rem;
}
.eco-group {
margin-top: var(--s-56);
}
/* Gold rule under the group label: the same 2px gold the WhyBand puts over
each claim, used here to separate the two halves of the six. */
.eco-group__head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--s-10) var(--s-20);
padding-bottom: var(--s-14);
border-bottom: 2px solid var(--gold);
}
/* The group label is an so the six row titles have something to sit
under, but it reads as an eyebrow: .eyebrow--page already supplies the size,
weight and colour, and the reset already zeroes the heading margin, so it
needs no rule of its own. */
.eco-group__note {
font-size: var(--size-card-body);
color: var(--muted);
}
/* --------------------------------------------------------------------------
The rows
Three columns at desktop: numeral, copy, proof points. Two text columns
rather than one is deliberate: a single column at the 1024px content width
would either run to a 1000px measure or strand half the row empty.
-------------------------------------------------------------------------- */
.eco {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 19rem);
column-gap: var(--s-40);
padding-block: var(--s-36);
}
.eco + .eco {
border-top: 1px solid var(--hairline);
}
/* --gold-text, not the design's --gold-text-design. #B07A15 is 3.72:1, which
clears AA only as "large" text. This numeral drops to 20px/600 on mobile,
where whether 600 counts as bold is a judgement call. #9A6C12 is 4.64:1 and
needs no judgement at either size. */
.eco__num {
font-size: var(--size-card-title);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--gold-text);
}
.eco__title {
letter-spacing: -0.01em;
}
.eco__lede {
margin-top: var(--s-10);
max-width: var(--measure);
}
.eco__link {
margin-top: var(--s-18);
}
/* Hex bullets, matching the comb in the service marks. clip-path rather than a
rotated square so the shape is the mark's hexagon and not a diamond. */
.eco__points {
display: grid;
align-content: start;
gap: var(--s-14);
}
.eco__points li {
position: relative;
padding-left: var(--s-18);
font-size: var(--size-card-body);
line-height: 1.55;
color: var(--body);
}
.eco__points li::before {
content: "";
position: absolute;
left: 0;
/* 0.55em down from the line box's top puts the bullet on the first line's
x-height, which is where it reads as aligned with the text. */
top: 0.55em;
width: 7px;
height: 8px;
background: var(--gold);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Tablet: the proof points move under the copy, both still clear of the
numeral column so the row keeps its hanging-number shape. */
@media (max-width: 1119px) {
.eco {
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: var(--s-32);
}
.eco__points {
grid-column: 2;
margin-top: var(--s-22);
}
}
@media (max-width: 767px) {
.eco-section {
padding-block: var(--s-48) var(--s-56);
}
.eco-group {
margin-top: var(--s-40);
}
/* One column: the numeral sits above the title rather than beside it. Left
as a grid so .eco__points keeps its own grid-column reset below. */
.eco {
grid-template-columns: minmax(0, 1fr);
padding-block: var(--s-26);
}
.eco__num {
font-size: var(--size-card-title-sm);
margin-bottom: var(--s-10);
}
.eco__points {
grid-column: 1;
margin-top: var(--s-20);
}
}
/* --------------------------------------------------------------------------
The navy statement band that names the two halves
-------------------------------------------------------------------------- */
.eco-statement__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
gap: var(--s-40) var(--gutter);
}
.eco-statement__title {
margin-top: var(--s-18);
}
/* .lede caps at the 480px body measure, which is right for a hero column and
too narrow for the wider half of a two-column band. */
.eco-statement__lede {
max-width: 38rem;
}
@media (max-width: 899px) {
.eco-statement__inner {
grid-template-columns: minmax(0, 1fr);
}
}
/* ===== 50-press.css ===== */
/* ==========================================================================
Press kit: /press/ (design section 34a)
A brand reference sheet: logo downloads, service line marks, the palette,
a type specimen, and the approved boilerplate. Everything here is prefixed
.press- so it cannot collide with another page's rules.
One deliberate difference from the design: the small notes beside the
section eyebrows are drawn in #9CA3AF (2.5:1 on white). They carry real
information, so they are built with --muted (4.8:1).
The palette swatches DO use the design's own hex values, including the
#B07A15 amber and "Warm Stone" #E9E7E2. This page documents the brand
palette, so the drawn values are the data. No text sits on those fills;
every swatch label sits on white in --ink / --muted.
========================================================================== */
/* --------------------------------------------------------------- 1. Hero */
.press-hero {
padding-block: var(--s-72) var(--s-56);
border-bottom: 1px solid var(--hairline);
}
.press-hero .display {
margin-top: var(--s-22);
}
.press-hero .lede {
margin-top: var(--s-22);
}
/* 34a sets this headline at 50px, one step under the 52px page default. */
.press-hero__title {
font-size: 3.125rem;
max-width: 47.5rem;
}
/* The press lede runs wider than the 480px default measure. */
.press-hero__lede {
max-width: 38.75rem;
}
@media (max-width: 1119px) {
.press-hero {
padding-block: var(--s-56) var(--s-44);
}
.press-hero__title {
font-size: var(--size-display);
}
}
@media (max-width: 767px) {
.press-hero {
padding-block: var(--s-32) var(--s-36);
}
}
/* ----------------------------------------------------------- 2. Sections */
.press-section {
padding-block: 52px;
border-bottom: 1px solid var(--hairline);
}
@media (max-width: 1119px) {
.press-section {
padding-block: var(--s-40);
}
}
@media (max-width: 767px) {
.press-section {
padding-block: var(--s-32);
}
}
/* Section eyebrow on the left, the qualifying note hard right. */
.press-sechead {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-10) var(--s-20);
margin-bottom: 28px;
}
.press-note {
font-size: var(--size-small);
color: var(--muted);
}
.press-label {
margin-bottom: var(--s-22);
}
/* -------------------------------------------------- 3. Download grids */
/* The base .grid rules the top and bottom edges only; 34a draws this grid
inset inside the gutter, so it is boxed on all four sides. */
.press-grid {
border: 1px solid var(--hairline);
}
.press-grid--logos {
grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 1119px) {
.press-grid--logos {
grid-template-columns: repeat(2, 1fr);
}
/* The lockup cell is the widest; it takes the full row rather than shrink. */
.press-grid--logos > :first-child {
grid-column: span 2;
}
}
@media (max-width: 767px) {
.press-grid--logos {
grid-template-columns: 1fr;
}
.press-grid--logos > :first-child {
grid-column: auto;
}
}
.press-cell {
padding: 34px var(--s-32);
}
.press-cell--mark {
padding: 30px var(--s-26);
}
/* Beats `.grid > *`, which paints every cell white. */
.press-grid > .press-cell--navy {
background: var(--navy);
}
@media (max-width: 767px) {
.press-cell,
.press-cell--mark {
padding: var(--s-26) var(--s-20);
}
}
/* Keeps the three logo cells' captions on the same baseline whatever the
artwork height. */
.press-preview {
display: flex;
align-items: center;
gap: 16px;
min-height: 76px;
}
.press-lockup__mark {
width: 52px;
height: 52px;
flex: none;
}
.press-mark-wasp {
width: 56px;
height: 56px;
flex: none;
}
.press-mark {
width: 56px;
height: 54px;
flex: none;
}
.press-lockup__name {
display: block;
font-size: 1.375rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--navy);
}
.press-lockup__sub {
display: block;
margin-top: 5px;
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
}
.press-cell__title {
margin-top: var(--s-26);
font-size: var(--size-lede);
font-weight: 600;
line-height: 1.3;
color: var(--navy);
}
.press-cell--mark .press-cell__title {
margin-top: var(--s-20);
font-size: 1rem;
}
.press-cell__body {
margin-top: 8px;
font-size: 0.875rem;
line-height: 1.6;
color: var(--body);
}
.press-cell--navy .press-cell__title {
color: #fff;
}
.press-cell--navy .press-cell__body {
color: var(--on-navy);
}
/* Download link. Same system as .arrow-link, with a down glyph and enough
vertical padding to clear the 44px tap target. */
.press-dl {
display: flex;
width: fit-content;
align-items: baseline;
gap: 0.4em;
margin-top: 6px;
padding-block: 14px;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.3;
color: var(--gold-text);
transition: color var(--t-fast);
}
.press-dl::after {
content: "↓";
transition: transform var(--t-base);
}
.press-dl:hover {
color: var(--gold-text-hover);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.press-dl:hover::after {
transform: translateY(3px);
}
.press-cell--mark .press-dl {
margin-top: 0;
font-size: var(--size-small);
}
.press-cell--navy .press-dl {
color: var(--gold);
}
.press-cell--navy .press-dl:hover {
color: var(--gold-on-navy-hover);
}
/* --------------------------------------------- 4. Color / typography split */
.press-split {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 1px;
background: var(--hairline);
border-bottom: 1px solid var(--hairline);
}
.press-split > * {
background: var(--surface);
padding: 52px var(--gutter);
}
.press-split__label {
margin-bottom: var(--s-26);
}
@media (max-width: 1119px) {
.press-split {
grid-template-columns: 1fr;
}
.press-split > * {
padding-block: var(--s-40);
}
}
@media (max-width: 767px) {
.press-split > * {
padding-block: var(--s-32);
}
}
.press-swatches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-14);
}
/* The hairline keeps the near-white "Warm Stone" chip visible on white. */
.press-swatch {
display: block;
height: 78px;
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.1);
}
.press-swatch--navy {
background: var(--navy);
}
.press-swatch--gold {
background: var(--gold);
}
/* The design's #B07A15. The UI uses --gold-text for amber TEXT; this swatch is
documenting the published palette value, not carrying copy. */
.press-swatch--amber {
background: var(--gold-text-design);
}
/* "Warm Stone" is listed as a brand color in 34a and used on no page, so it
has no working token; it lives here only. */
.press-swatch--stone {
background: #e9e7e2;
}
.press-swatch__name {
display: block;
margin-top: 12px;
font-size: 0.875rem;
font-weight: 600;
color: var(--ink);
}
.press-swatch__spec {
display: block;
margin-top: 4px;
font-size: var(--size-small);
line-height: 1.5;
color: var(--muted);
}
.press-rule {
margin-top: 24px;
max-width: 32.5rem;
font-size: 0.875rem;
line-height: 1.6;
color: var(--body);
}
@media (max-width: 767px) {
.press-swatches {
grid-template-columns: repeat(2, 1fr);
}
}
.press-typeface {
font-size: var(--size-stat);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--navy);
}
.press-type-body {
margin-top: var(--s-14);
font-size: var(--size-card-body);
line-height: 1.6;
color: var(--body);
}
.press-specimen {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--hairline);
}
.press-specimen__headline {
font-size: var(--size-card-title-sm);
font-weight: 600;
color: var(--ink);
}
/* #374151 is the nav-link grey; it is the specimen's drawn value and has no
token of its own. */
.press-specimen__subhead {
font-size: var(--size-lede);
font-weight: 500;
color: #374151;
}
.press-specimen__body {
font-size: var(--size-card-body);
color: var(--body);
}
/* -------------------------------------------------------- 5. Boilerplate */
.press-boiler {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-36);
}
.press-boiler__title {
margin-bottom: 12px;
font-size: 1rem;
font-weight: 600;
color: var(--navy);
}
.press-boiler__text {
padding-left: var(--s-18);
border-left: 3px solid var(--gold);
font-size: 1rem;
line-height: 1.7;
color: var(--body);
}
@media (max-width: 767px) {
.press-boiler {
grid-template-columns: 1fr;
gap: var(--s-32);
}
}
/* ===== 50-privacy-policy.css ===== */
/* ==========================================================================
Privacy Policy: /privacy-policy/ (design section 28a)
Only three things on this page have no equivalent in the base sheet: the
legal title block, its 44px headline (the type ramp's Display step is 52px),
and the wrapper around the cookie-choice control. Everything else is
.wrap / .eyebrow / .display / .prose--legal / .btn.
========================================================================== */
/* Title block. 28a: padding 64px 48px 24px, 1px hairline below. The 24px
bottom padding sits under the meta line's own 32px margin, so the band
carries the sum (56px) and the meta needs no margin of its own. */
.privacy-head {
padding-block: var(--s-64) var(--s-56);
border-bottom: 1px solid var(--hairline);
}
.privacy-head__title {
/* 44px/1.1, the legal-page headline size (28a, 40a). No token: the ramp's
Display step is 52px and Section is 34px. */
font-size: 2.75rem;
line-height: 1.1;
margin-top: var(--s-22);
}
.privacy-head__meta {
/* 14px #6B7280, 16px below the headline. Neither value has a token. */
margin-top: 1rem;
font-size: 0.875rem;
color: var(--muted);
}
/* Body. 28a: padding 40px 48px 56px. */
.privacy-body {
padding-block: var(--s-40) var(--s-56);
}
/* .prose h2 carries a 40px top margin for the gaps *between* sections; the
first one would otherwise double up with the band's own top padding. */
.privacy-body .prose > :first-child {
margin-top: 0;
}
/* The button is a block-level control inside a text flow, so the paragraph
wrapper must not inherit the surrounding line-height. */
.privacy-cookie {
display: flex;
line-height: 1;
}
@media (max-width: 1119px) {
.privacy-head {
padding-block: var(--s-48);
}
.privacy-head__title {
font-size: 2.25rem; /* 36px */
}
.privacy-body {
padding-block: var(--s-32) var(--s-48);
}
}
@media (max-width: 767px) {
.privacy-head {
padding-block: var(--s-36) var(--s-48);
}
.privacy-head__title {
font-size: 1.875rem; /* 30px */
line-height: 1.15;
}
.privacy-body {
padding-block: var(--s-26) var(--s-36);
}
/* Full-width tap target, matching the mobile button rule in the base sheet. */
.privacy-cookie .btn {
flex: 1 1 auto;
padding: 17px 24px;
font-size: 1rem;
}
}
/* ===== 50-staffing.css ===== */
/* ==========================================================================
/staffing: Service Line 01, including the MedOps healthcare practice.
Design source: section 20a. Only what the shared components cannot already
express lives here; everything else reuses 00-base.css.
========================================================================== */
/* --------------------------------------------------------------------------
1. Hero
20a runs the copy column wider than the photo (1.1fr 1fr, against Home's
1fr 1.15fr) and a shallower minimum height (420px against 440px).
-------------------------------------------------------------------------- */
.staffing-hero {
grid-template-columns: 1.1fr 1fr;
min-height: 420px;
}
/* The Staffing and MedOps marks sit side by side above the eyebrow, split by a
hairline. This is the pairing rule for every Staffing context. */
.staffing-marks {
display: flex;
align-items: center;
gap: var(--s-18);
margin-bottom: var(--s-20);
}
@media (max-width: 767px) {
/* This sheet is concatenated after 00-base.css, so the two declarations
above would otherwise outrank the base sheet's mobile .hero reset. Restate
it here rather than rewriting the page in min-width queries. */
.staffing-hero {
grid-template-columns: 1fr;
min-height: 0;
}
/* Service-line heroes keep the photo BELOW the copy. Home is the page that
lifts it above, and the base sheet is written for Home. */
.staffing-hero .hero__media {
order: 0;
}
/* No scrim on the service-line mobile photo: there is no navy band beneath
it to blend into. */
.staffing-hero .hero__media::after {
content: none;
}
}
/* --------------------------------------------------------------------------
2. Engagement grid
The hero's own bottom hairline and the MedOps panel's top hairline already
run full-bleed, so the grid's border-block would double them.
-------------------------------------------------------------------------- */
.staffing-engagement {
border-block: 0;
}
/* --------------------------------------------------------------------------
3. Avispa Tech practice
A dedicated technical-staffing practice within the broader Staffing line.
-------------------------------------------------------------------------- */
.tech-practice {
padding-block: var(--s-56);
}
.tech-practice__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--s-56);
align-items: center;
}
.tech-practice__mark {
margin-bottom: var(--s-18);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
}
.tech-practice__mark span {
color: var(--gold);
}
.tech-practice__title {
margin-top: var(--s-14);
color: #fff;
}
.tech-practice__lede {
margin-top: var(--s-18);
max-width: 34rem;
color: var(--on-navy-link);
line-height: 1.7;
}
.tech-practice__link {
margin-top: var(--s-18);
}
.tech-practice__areas {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--hairline-navy);
border-left: 1px solid var(--hairline-navy);
}
.tech-practice__areas li {
min-height: 8rem;
padding: var(--s-20);
border-right: 1px solid var(--hairline-navy);
border-bottom: 1px solid var(--hairline-navy);
color: var(--on-navy-link);
font-size: var(--size-card-body);
line-height: 1.5;
}
.tech-practice__areas span {
display: block;
margin-bottom: 8px;
color: #fff;
font-weight: 600;
}
@media (max-width: 767px) {
.tech-practice {
padding-block: var(--s-36);
}
.tech-practice__inner {
grid-template-columns: 1fr;
gap: var(--s-32);
}
.tech-practice__areas {
grid-template-columns: 1fr;
}
.tech-practice__areas li {
min-height: 0;
}
}
/* --------------------------------------------------------------------------
4. MedOps split panel
Photo left, copy right: the mirror of the hero. Full-bleed like the hero,
with the copy capped so its right edge lands on the 1120px content cap.
-------------------------------------------------------------------------- */
.medops {
display: grid;
grid-template-columns: 1fr 1.15fr;
border-top: 1px solid var(--hairline);
}
.medops__media {
position: relative;
background: var(--navy);
min-height: 360px;
}
.medops__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
}
.medops__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(27, 45, 94, 0.35), transparent 40%);
}
.medops__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--s-56) var(--gutter);
max-width: calc(var(--content-max) / 2 + var(--gutter));
margin-right: auto;
}
.medops__mark {
margin-bottom: var(--s-18);
}
.medops__eyebrow {
margin-bottom: 16px;
}
/* 20a sets section body one step below the hero lede: 16px/1.7 on a 460px
measure, not the 17px/480px default. */
.medops__lede {
margin-top: var(--s-14);
font-size: 1rem;
line-height: 1.7;
color: var(--body);
max-width: 28.75rem;
}
.medops__list {
display: flex;
flex-direction: column;
gap: var(--s-10);
margin-top: var(--s-22);
font-size: var(--size-card-body);
line-height: 1.5;
color: var(--body);
}
.medops__list li {
display: flex;
align-items: center;
gap: 12px;
}
/* Gold hex glyph. Decorative: the list semantics carry the structure. */
.medops__bullet {
width: 10px;
height: 10px;
flex: none;
background: var(--gold);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.medops__term {
font-weight: 600;
color: var(--navy);
}
/* align-self keeps the inline-flex link from stretching to the column width,
which would drag its hover underline across the whole panel.
24px is the drawn gap; the 11px of vertical padding that lifts a 14px link
to a 44px tap target is subtracted back out of the margins, so the drawn
spacing is unchanged. */
.medops__link {
align-self: flex-start;
margin-top: 13px;
margin-bottom: -11px;
padding-block: 11px;
}
@media (max-width: 767px) {
.medops {
grid-template-columns: 1fr;
}
.medops__media {
aspect-ratio: 4 / 3;
min-height: 0;
}
.medops__copy {
padding: var(--s-32) var(--gutter) var(--s-36);
max-width: none;
margin-right: 0;
}
}
/* --------------------------------------------------------------------------
5. QuoteBand: UCSF
The wordmark tracks tighter than the Dolby lockup the base sheet is set for.
-------------------------------------------------------------------------- */
.staffing-wordmark {
letter-spacing: -0.02em;
}
/* ===== 50-team.css ===== */
/* ==========================================================================
/team: roster (design section 25a)
Two blocks the base sheet does not already cover:
1. a navy hero whose photograph is a background rather than a column, so it
cannot reuse .hero;
2. the group-label cell that spans the roster grid.
Everything else is .grid / .team-card / .arrow-link straight from 00-base.
========================================================================== */
/* --------------------------------------------------------------------------
1. Hero: navy band, photo at 40% behind a left-heavy navy scrim
-------------------------------------------------------------------------- */
.team-hero {
position: relative;
background: var(--navy);
color: var(--on-navy);
overflow: hidden;
}
.team-hero__media {
position: absolute;
inset: 0;
}
/* eleventy-img wraps the ![]()
in a , which would otherwise collapse
to auto height and leave the image nothing to size against. */
.team-hero__media picture {
display: block;
width: 100%;
height: 100%;
}
.team-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
opacity: 0.4;
}
/* linear-gradient(100deg, navy .88 25%, navy .25). Written through the token
so the scrim tracks --navy rather than repeating its hex. */
.team-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
color-mix(in srgb, var(--navy) 88%, transparent) 25%,
color-mix(in srgb, var(--navy) 25%, transparent)
);
}
.team-hero__inner {
position: relative;
padding-block: var(--s-72) var(--s-64);
}
.team-hero .eyebrow {
margin-bottom: var(--s-22);
}
/* Team and About run 50px, one step under the 52px shared default. */
.display--team {
font-size: 3.125rem;
line-height: 1.1;
max-width: 43.75rem;
color: #fff;
}
.team-hero__lede {
margin-top: var(--s-20);
max-width: 32.5rem;
color: var(--on-navy);
}
@media (max-width: 1119px) {
.team-hero__inner {
padding-block: var(--s-56) var(--s-48);
}
.display--team {
font-size: var(--size-display);
}
}
@media (max-width: 767px) {
.team-hero__inner {
padding-block: var(--s-40);
}
}
/* --------------------------------------------------------------------------
2. Roster grids
Each group is its own hairline grid so the two headings stay real section
headings. Consecutive grids would otherwise stack two 1px rules where the
design draws one, and the last grid hands its bottom rule to the CTA band
(which sets its own border-top via `ctaBordered`).
-------------------------------------------------------------------------- */
.team-grid {
border-block: 0;
}
.team-group + .team-group .team-grid {
border-top: 1px solid var(--hairline);
}
/* The group label is a full-width cell with no bottom padding, so the grid's
own 1px gap reads as a rule directly under it. */
.team-grid__label {
grid-column: 1 / -1;
padding: var(--s-40) var(--s-40) 0;
}
/* The avatar partial emits the photo slot as a so it can hold either a
or a monogram, and width/height do not apply to an inline box.
The needs the same treatment: without a box of its own it collapses
to auto height and the image has nothing to size against. */
.team-grid .team-card__photo {
display: block;
}
.team-grid .team-card__photo picture {
display: block;
width: 100%;
height: 100%;
}
/* "Connect on LinkedIn" is the only control on a card and is set at 14px, so
its hit area is extended to ~44px. Absolute, so nothing moves and the hover
underline stays on the text baseline. */
.team-grid .arrow-link {
position: relative;
}
.team-grid .arrow-link::before {
content: "";
position: absolute;
inset: -11px 0;
}
@media (max-width: 1119px) {
/* At 2-up the label eats a whole row, so the parity the base sheet assumes
for .grid--3 is inverted: a hole is left when the member count is odd,
which is when the last CHILD is even. An unfilled cell would show the
grid's hairline background as a solid block, so the last card fills it. */
.team-grid > :last-child:nth-child(odd) {
grid-column: auto;
}
.team-grid > :last-child:nth-child(even) {
grid-column: 1 / -1;
}
.team-grid__label {
padding: var(--s-36) var(--gutter) 0;
}
/* The base card has no tablet step; the roster follows the 36a card
precedent of 36px/32px. */
.team-grid .team-card {
padding: var(--s-36) var(--gutter);
}
}
@media (max-width: 767px) {
.team-grid__label {
padding: var(--s-32) var(--gutter) 0;
}
}
/* ===== 50-workforce-ecosystems.css ===== */
/* ==========================================================================
/workforce-ecosystems: the operating-philosophy page (design section 32a)
Everything here is prefixed `we-` so it cannot collide with another page's
sheet. Only what the base component library genuinely has no equivalent for
lives here: the photo-backed navy hero, the four-layer list with hex
bullets, the split that carries the ecosystem diagram, and the diagram's
own type scale (SVG text cannot use the shared type classes).
========================================================================== */
/* --------------------------------------------------------------------------
1. Hero: navy band with the photo at .35 under a 100deg scrim.
Design: padding 80px 48px 68px; headline capped at 780px, lede at 560px.
-------------------------------------------------------------------------- */
.we-hero {
position: relative;
overflow: hidden;
}
.we-hero__media {
position: absolute;
inset: 0;
}
.we-hero__media > picture {
display: block;
height: 100%;
}
.we-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
opacity: 0.35;
}
.we-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(27, 45, 94, 0.95) 35%,
rgba(27, 45, 94, 0.55)
);
}
.we-hero__inner {
position: relative;
/* 68px has no step on the spacing scale; it is the drawn value. */
padding-block: var(--s-80) 68px;
}
.we-hero__title {
margin-top: var(--s-22);
max-width: 48.75rem; /* 780px */
}
.we-hero__lede {
margin-top: var(--s-22);
max-width: 35rem; /* 560px */
}
@media (max-width: 1119px) {
.we-hero__inner {
padding-block: var(--s-56) var(--s-48);
}
}
@media (max-width: 767px) {
.we-hero__inner {
padding-block: var(--s-36) 34px;
}
}
/* --------------------------------------------------------------------------
2. StatCells
The row sits directly under the navy hero, so it carries no top rule. The
shared .stat cell also has no responsive padding of its own.
-------------------------------------------------------------------------- */
.we-stats {
border-top: 0;
}
@media (max-width: 1119px) {
.we-stats .stat {
padding: var(--s-36) var(--s-32);
}
}
@media (max-width: 767px) {
.we-stats .stat {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
3. The four-layer split: list left, diagram panel right
-------------------------------------------------------------------------- */
.we-split {
display: grid;
grid-template-columns: 1fr 1.05fr;
}
.we-split__copy {
padding: var(--s-64) var(--s-40) var(--s-56) var(--gutter);
}
.we-split__title {
margin-top: var(--s-20);
max-width: 26.25rem; /* 420px */
}
.we-split__panel {
background: var(--surface-alt);
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-40) 24px;
}
.we-layers {
display: flex;
flex-direction: column;
gap: var(--s-22);
margin-top: 1.875rem; /* 30px */
}
.we-layer {
display: flex;
gap: 1rem;
}
/* The hex bullet is the mark's comb cell at 14px. Decorative: every row is
still named in bold, so the colour never carries meaning on its own. */
.we-layer__bullet {
width: 14px;
height: 14px;
flex: none;
margin-top: 4px;
background: var(--navy);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.we-layer__bullet--gold {
background: var(--gold);
}
.we-layer__bullet--dim {
opacity: 0.55;
}
.we-layer__bullet--faint {
opacity: 0.3;
}
.we-layer__name {
font-size: 1rem;
font-weight: 600;
color: var(--navy);
}
@media (max-width: 1119px) {
.we-split {
grid-template-columns: 1fr;
}
.we-split__copy {
padding: var(--s-48) var(--gutter);
}
.we-split__panel {
padding: var(--s-32) 24px;
}
}
@media (max-width: 767px) {
.we-split__copy {
padding: var(--s-36) var(--gutter);
}
.we-split__panel {
padding: 28px var(--gutter);
}
.we-layers {
gap: var(--s-18);
}
}
/* --------------------------------------------------------------------------
4. The ecosystem diagram
Concentric hexagons, 560x540 viewBox. SVG text cannot use the shared type
classes, so the four steps it draws are declared here in user units (which
equal the drawn px because the viewBox is 1:1 with the artboard).
-------------------------------------------------------------------------- */
.we-diagram {
width: 100%;
max-width: 33.75rem; /* 540px */
height: auto;
font-family: var(--font);
}
.we-diagram__ring {
fill: none;
stroke: var(--navy);
stroke-width: 2;
}
.we-diagram__ring--outer {
opacity: 0.3;
}
.we-diagram__ring--middle {
opacity: 0.55;
}
.we-diagram__ring--inner {
stroke-width: 2.5;
}
.we-diagram__core {
fill: var(--gold);
}
/* Knocked out of the panel background so the rings do not run through a label. */
.we-diagram__mask {
fill: var(--surface-alt);
}
.we-diagram__label {
font-size: 18px;
font-weight: 600;
fill: var(--navy);
}
.we-diagram__sub {
font-size: 13px;
font-weight: 400;
fill: var(--gold-deep);
}
.we-diagram__layer {
font-size: 15px;
font-weight: 600;
fill: var(--navy);
}
.we-diagram__node {
font-size: 14px;
font-weight: 500;
fill: var(--body);
}
/* --------------------------------------------------------------------------
5. Service-line row
-------------------------------------------------------------------------- */
.we-services {
border-top: 1px solid var(--hairline);
padding: var(--s-56) var(--gutter) 1rem;
}
/* The drawn grid is a 1px gap over a hairline fill with no outer rule: the
band above supplies the only line, the gold CTA band closes it below. */
.we-services__grid {
border-block: 0;
margin-top: var(--s-36);
}
.we-service-card {
padding: var(--s-36) var(--s-40);
}
.we-service-card .card__title {
margin-top: 0.75rem; /* 12px */
}
@media (max-width: 1119px) {
.we-service-card {
padding: var(--s-36) var(--gutter);
}
}
@media (max-width: 767px) {
.we-service-card {
padding: var(--s-32) var(--gutter);
}
}
/* --------------------------------------------------------------------------
6. CTA band
Every other page draws the gold band at 34px vertical; 32a draws it at 38px.
Scoped to this page's body class so the shared partial stays untouched.
-------------------------------------------------------------------------- */
.page-workforce-ecosystems .cta-band__inner {
padding-block: 38px;
}
@media (max-width: 767px) {
.page-workforce-ecosystems .cta-band__inner {
padding-block: 30px 32px;
}
}
/* ===== 70-avatar.css ===== */
/* Monogram stand-in for a team member with no photograph yet. Deliberately
reads as a placeholder rather than imitating a portrait. */
.avatar-monogram {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--surface-alt);
box-shadow: inset 0 0 0 1px var(--hairline);
color: var(--navy);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1;
}
.team-card__photo--lead .avatar-monogram {
font-size: 2.25rem;
}
@media (max-width: 767px) {
.avatar-monogram,
.team-card__photo--lead .avatar-monogram {
font-size: 1.5rem;
}
}