/* ============================================================
ROUND TWO — 2026-08-12
Everything the second copy round needed that the design did not
already have. Kept in its own file so the round is reviewable as a
unit rather than scattered through eight others; nothing here
overrides an earlier rule, it only adds.
THE RULE THIS FILE FOLLOWS: no new visual vocabulary. Every treatment
below is an existing one from the comp, re-pointed at new markup —
.car-roles for lists of things, the .vals--numbered ordinal for
ordered principles, .svc-row for a row that links somewhere, .chapter
for a full-bleed image. Four genuinely new values exist and each is
called out where it appears.
============================================================ */
/* ------------------------------------------------------------
PARALLAX BANDS
.chapter at full height is a section in its own right — it carries a
heading and a lede and it is one of three in a sequence. Used as
punctuation between two text sections it is too tall: at 78vh a
reader scrolls past a wall of photograph with nothing to read, twice
per page.
NEW VALUE, and the only new number in the band treatment: 52vh
against the sequence's 78vh, floored at 300px. Enough that the image
is unmistakably the subject, short enough that the sections either
side stay in the same scroll gesture.
------------------------------------------------------------ */
.chapter--short{min-height:clamp(300px,52vh,520px)}
@media(max-width:640px){
.chapter--short{min-height:clamp(240px,42vh,380px)}
}
/* A band with no copy has no .chapter-in, so the scrim is doing nothing
but darkening a photograph nobody is reading text over. Lighten it —
the image is the point. Text-carrying bands keep the full gradient
from 07-chapters.css and its measured contrast. */
.chapter--short .chapter-scrim{
background:linear-gradient(180deg,rgba(21,22,22,.28) 0%,rgba(21,22,22,.18) 50%,rgba(21,22,22,.42) 100%);
}
/* ------------------------------------------------------------
THE STAR BAND, ONCE PER PAGE
.on-paper::before paints the 190px americana star band at the top of
EVERY light section. That was invisible on the comp, which had exactly
one light section before the values panels — and the comp itself
suppresses it on the second one (.faq.on-paper::before{content:none}
in 09-faq.css). So "stars open a light run, they do not repeat inside
it" is the design's own rule, just never written down.
Round two makes it load-bearing: these pages have three and four light
sections each, and left alone the motif repeated down the page and
landed a row of enormous stars in the middle of the careers listings.
.pad-block.alt already suppresses it, but .alt also draws a top border
— right between two adjacent light sections, wrong for a section that
follows a full-bleed parallax band, where the band IS the separator.
.no-stars is .alt without the rule.
Specificity 0,2,0 beats .on-paper::before regardless of source order.
------------------------------------------------------------ */
.on-paper.no-stars::before{content:none}
/* ------------------------------------------------------------
TWO-COLUMN COPY BLOCKS
The round-two pages are much wordier than the comp's homepage, and a
62ch paragraph under a full-width display heading leaves a lot of
empty right-hand page. .coo is the comp's existing two-column grid
(image | copy) and it takes prose in the second column without
modification — except that .coo centres its columns vertically, which
is right for an image and wrong for two blocks of text of different
lengths.
So .coo--copy is .coo with the columns top-aligned and the ratio
evened out, because a heading column no longer has to be narrower
than a photograph.
------------------------------------------------------------ */
.coo--copy{align-items:start}
@media(min-width:900px){
.coo--copy{grid-template-columns:.9fr 1.1fr;gap:3.4rem}
}
/* The heading column's own lede sits directly under a .d2 rather than
under an eyebrow, so it wants a little more room above it. */
.coo--copy .lede{max-width:40ch}
/* ------------------------------------------------------------
DISPLAY STATEMENT
A sentence set in display type that is too long to be a headline —
the About mission, and anything like it. NO NEW VALUES: this is the
comp's .coo blockquote, which exists for exactly this and is the only
thing in the design between .d2 (a headline) and .lede (body copy).
Declared separately rather than by adding a selector to that rule so
that changing the pull-quote treatment does not silently change every
mission statement on the site.
------------------------------------------------------------ */
.stmt{
font-family:var(--display);text-transform:uppercase;font-weight:400;
font-size:clamp(1.25rem,2.5vw,2rem);letter-spacing:-.04em;line-height:1.08;
margin:0;max-width:30ch;
}
/* ------------------------------------------------------------
SERVICE ROWS WITH DETAIL
The What We Do page gives each scope a hook line, a paragraph or two
and sometimes a capability list, where the homepage gives it a single
blurb. Same .svc-row — same hover rule, same left-edge wipe, same
"Read more" — with the middle column allowed to be taller than one
line.
align-items goes from baseline to start: baseline aligns the title
with the FIRST line of the body, which is correct when the body is
one line and looks like a mistake when it is six.
------------------------------------------------------------ */
@media(min-width:820px){
.svc-row--full{align-items:start;padding-block:2.2rem}
}
.svc-body > *:last-child{margin-bottom:0}
/* The hook. Not display type — it sits inside a row whose .d3 title is
already display type, and two display faces in one row compete. This
is body copy at full weight and full opacity against the paragraph's
.72, which is enough to read as the lead line.
SELECTOR NOTE, and it is not decoration: both of these are inside
.svc-row, so they are matched by 05-services.css's `.svc-row p`, which
is (0,1,1) and sets font-size .94rem AND opacity .72. A bare .svc-hook
is (0,1,0) and loses. That cost the hook its size and its weight, and
it multiplied the label's --earth-t down to 3.00:1 — an actual AA
failure, caught by measuring rather than by looking. Qualifying with
.svc-row takes both to (0,2,0), which wins. */
.svc-row .svc-hook{
font-size:1rem;line-height:1.45;opacity:1;
margin:0 0 .6rem;max-width:44ch;
}
/* :not() here is load-bearing, and it is the SAME specificity trap that
already bit this file once. `.svc-row--full .svc-body p + p` is (0,2,2);
`.svc-row .svc-caps-head` is (0,2,0). The capability label is a
following a
, so the paragraph-spacing rule won and pulled its
margin-top down to .55rem — measured at NINE pixels of clearance between
the end of the body copy and the label, which is what David flagged as
"check padding between restoration and the capabilities table".
Excluding the label lets its own margin apply. */
.svc-row--full .svc-body p + p:not(.svc-caps-head){margin-top:.55rem}
/* "Capabilities" label — the eyebrow treatment, at the eyebrow's
text-safe colour. --earth-t is 5.12:1 on clean paper; these rows are
never on the flag texture, so --earth-t-deep is not needed here. */
.svc-row .svc-caps-head{
font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--earth-t);opacity:1;
margin:1.7rem 0 .6rem;
}
/* The capability list is .car-roles, on paper. Two columns because
these run to eight items and a single column pushed the row past a
screen height on its own. */
.svc-caps{
list-style:none;margin:0;padding:0;
border-top:1px solid var(--line-d);
display:grid;grid-template-columns:1fr;
}
@media(min-width:560px){
.svc-caps{grid-template-columns:1fr 1fr;column-gap:1.4rem}
}
.svc-caps li{
padding:.55rem 0;border-bottom:1px solid var(--line-d);
font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
text-transform:uppercase;opacity:.78;line-height:1.5;
}
/* ------------------------------------------------------------
CORE VALUES (Leadership page)
The five "How We Lead" statements. Numbered, using the ordinal from
the .vals--numbered panel treatment — the design's established way of
showing that a list has an order. Rendered as an
because it is
one, with the visible numbers marked aria-hidden so a screen reader
hears the list's own numbering rather than both.
------------------------------------------------------------ */
.cvals{
list-style:none;margin:0;padding:0;
border-top:1px solid var(--line-d);
display:grid;grid-template-columns:1fr;
}
@media(min-width:820px){
.cvals{grid-template-columns:1fr 1fr;column-gap:3rem}
}
.cval{
padding:1.5rem 0;border-bottom:1px solid var(--line-d);
display:grid;gap:.45rem;
}
.cval-n{
font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
color:var(--earth-t);
}
.cval p{margin:0;font-size:.94rem;line-height:1.55;opacity:.76;max-width:44ch}
/* ------------------------------------------------------------
OPEN POSITIONS (Careers page)
Structurally a .svc-row: a bordered row that links somewhere, with a
title, a detail and an action word that appears on hover. Built as a
list rather than reusing .svc-row directly because the columns are
different — title, location, action, with the location column
collapsing away on the postings that do not have one.
WHY THE ACTION WORD IS ALWAYS VISIBLE HERE, unlike .svc-row's "Read
more" which fades in on hover: this list is the only thing on the
page a candidate is looking for, and hiding "Apply" behind a hover
state hides it completely on every touch device.
------------------------------------------------------------ */
.jobs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.job{border-bottom:1px solid var(--line-d)}
/* NARROW: the title takes a full row of its own, then location and
"Apply" share the line below it — location left, Apply hard right.
Left to flow, the three cells landed as title | location on row one
and Apply alone under the title on row two, which read as though
Apply belonged to the next posting down. The explicit column
assignments below also keep Apply on the right for the four postings
that have no location to print. */
.job-link{
display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;
align-items:baseline;padding:1.25rem 0;position:relative;
transition:padding-left .3s cubic-bezier(.2,.7,.2,1);
}
.job-title{grid-column:1/-1}
.job-loc{grid-column:1}
.job-link .go{grid-column:2;justify-self:end}
/* WIDE: back to one row — title, location, action. */
@media(min-width:640px){
.job-link{grid-template-columns:minmax(0,1fr) minmax(0,10rem) auto;gap:1.5rem}
.job-title{grid-column:1}
.job-loc{grid-column:2}
.job-link .go{grid-column:3}
}
.job-link::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--earth);
transform:scaleY(0);transform-origin:bottom;
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.job-link:hover,.job-link:focus-visible{padding-left:.9rem}
.job-link:hover::before,.job-link:focus-visible::before{transform:scaleY(1)}
.job-title{
font-family:var(--display);text-transform:uppercase;
font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:-.03em;line-height:1.12;
}
.job-loc{
font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
text-transform:uppercase;opacity:.72;
}
/* --earth-t, matching .svc-row .go, which is the corrected 5.12:1 value.
Not --earth: this is text, and --earth is 4.44:1. */
.job-link .go{
font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--earth-t);opacity:1;white-space:nowrap;
}
/* ------------------------------------------------------------
TRADES LIST ON PAPER
.car-roles is written for the homepage's dark careers band: light
borders, and an opacity tuned against --grey ground. On paper it
needs the dark rules and a slightly stronger opacity to hold the same
apparent weight — .78 measures 5.7:1 here against the .72 that the
dark version uses.
------------------------------------------------------------ */
.car-roles--light{border-top-color:var(--line-d);max-width:34rem}
.car-roles--light li{border-bottom-color:var(--line-d);opacity:.78}
/* ------------------------------------------------------------
SERVICE PAGE LEDE
The deck copy that now opens each service detail page. Same
.coo--copy two-column block the other pages use; the only addition is
that the capability list is no longer inside a .svc-row, so the
.svc-row-qualified rules above do not reach it and it needs its own
colour and size at the same values.
------------------------------------------------------------ */
.svc-lede .d2{max-width:18ch}
/* Same trap, different parent. On a service DETAIL page this label sits
inside .prose, where `.prose p` is (0,1,1) and beat a bare
.svc-caps-head--page at (0,1,0) — so the label inherited .prose's
paragraph margins instead of its own and the gap collapsed to 18px.
Qualifying with .prose takes it to (0,2,0) and it wins. */
.prose .svc-caps-head--page{
font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--earth-t);opacity:1;
margin:2.1rem 0 .6rem;
}
.svc-lede .svc-caps{max-width:34rem}
/* ------------------------------------------------------------
LEADERSHIP TEAM GRID (placeholder)
Same construction as .creds — a grid of fixed-ratio boxes carrying the
.ph placeholder — because it is the same situation: a layout the
client has to react to before the assets exist. 4/5 portrait boxes,
which is what a headshot wants and what .coo-img originally was before
the supplied group shots forced it to 3/2.
------------------------------------------------------------ */
.team{display:grid;gap:1.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.team{grid-template-columns:repeat(3,1fr);gap:2rem}}
.tm{margin:0}
.tm-img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line-d)}
.tm-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.tm-name{
margin:.9rem 0 .15rem;font-family:var(--display);text-transform:uppercase;
letter-spacing:-.03em;font-size:clamp(.95rem,1.3vw,1.15rem);line-height:1.1;
}
/* --earth-t, the text-safe tone: 5.12:1 on paper. Not --earth (4.44:1). */
.tm-role{
margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--earth-t);
}
/* ------------------------------------------------------------
BID FORM — error state and honeypot
The form could not fail before, so it had no failure styling. It can
now. --orange on --grey-d is 9.2:1, and orange-on-dark is the comp's
own rule for where orange is allowed.
------------------------------------------------------------ */
.frm-err{
margin:0 0 1.1rem;padding:.8rem 1rem;
border-left:3px solid var(--orange);
background:rgba(244,151,40,.08);
color:var(--paper);font-size:.9rem;line-height:1.5;
}
/* Honeypot. Positioned off-screen rather than display:none — some bots
skip genuinely hidden fields, and display:none is also the one thing
that stops a password manager treating it as a real input. */
.frm-hp{
position:absolute!important;width:1px;height:1px;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
white-space:nowrap;border:0;padding:0;margin:-1px;
}
/* ------------------------------------------------------------
PENDING-CONTENT SECTIONS
DAVID BEERS, 2026-08-13, on two separate sections:
"what is the 'credentials section' that is just above this area?"
"The people leading the work section above this does not seem to be
contained, with placeholder content."
Both are placeholder blocks waiting on the client. Measured: the team
grid IS contained — it sits exactly inside .wrap at both edges. What he
was reacting to is that a run of large grey boxes reads as a BROKEN
section rather than a deliberate one, and a reviewer should never have
to ask which it is.
So placeholders now announce themselves: a dashed rule and a plain
label saying what is missing and who it is waiting on. Costs nothing,
and it turns "is this a bug?" into "this is waiting on Katie".
THIS TREATMENT SHOULD NEVER REACH THE PUBLIC SITE. It disappears on its
own the moment real content replaces the placeholders; if a section is
still wearing it at launch, that section is not finished.
------------------------------------------------------------ */
.pending{
border:1px dashed rgba(37,38,38,.32);
padding:clamp(1.1rem,2.5vw,1.8rem);
border-radius:2px;
}
.pending-note{
display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap;
margin:0 0 1.2rem;
font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
text-transform:uppercase;line-height:1.7;
}
/* --earth-t is the text-safe tone at 5.12:1 on paper. */
.pending-note b{font-weight:400;color:var(--earth-t)}
.pending-note span{color:var(--grey);opacity:.72}