elements, and base.css caps every
at --measure (~68ch). Without this the flex box itself is only ~640px of a 1152px container, so `justify-content: center` centres the button inside that narrow box — landing it around x=395 instead of 640, i.e. visibly left of centre. Same trap as the Our Brands lead paragraph in §5.3, opposite fix: there the box had to be centred, here it has to be allowed to fill. */ .button-row--center { justify-content: center; max-width: none; } /* Right-aligned variant — Our Story's "Explore Our Story" CTA (maintainer, 2026-08-17). `max-width: none` is required here for exactly the reason spelled out above: the row is a
, base.css caps it at --measure (~68ch), and without the override `justify-content: flex-end` would pin the button to the right edge of that ~640px box rather than the container's, landing it near the middle of the page. */ .button-row--end { justify-content: flex-end; max-width: none; } /* Outline button on a dark (ink-900) surface — the hero and the 404 error card: gold-300 text/border, not the light-surface .button--secondary treatment. */ .hero .button--secondary, .error-card .button--secondary { color: var(--gold-300); border-color: var(--ink-700); } .hero .button--secondary:hover, .error-card .button--secondary:hover { background: var(--ink-800); border-color: var(--gold-500); } /* ============================================================ 5.1a — Trust logo marquee. TWO CALLERS since 2026-08-25: the homepage hero and /contact/'s arc hero. The heading read "homepage hero only" until then; nothing about these rules changed when the second caller arrived, because none of them was ever scoped to `.hero` — they key off `.trust-marquee` alone. WHAT A THIRD CALLER MUST SUPPLY IS A DARK SURFACE. `.trust-marquee__logo` carries `filter: brightness(0) invert(1)`, which paints every logo flat white; on a light band the row would disappear. Both current callers are ink-900. That filter is the one thing here that is not surface-agnostic — the mask, the track arithmetic and the optical heights all travel anywhere. A pure-CSS infinite band — no JS, no rAF, no library. Read the header comment in partials/trust-marquee.njk for the mechanism; the two rules below that markup cannot express are: `width: max-content` on the track is REQUIRED. Without it the flex box is capped at the wrapper's width, every item is squeezed, and translateX(-50%) measures half of the wrong thing. `padding-inline-end: var(--marquee-gap)` is the seam fix, and it is exact rather than approximate. `gap` puts space only BETWEEN items, so the 12 items (6 logos x 2 passes) give 11 gaps — translating to -50% would land half a gap short of the duplicate's first logo and hitch once per cycle. The trailing padding supplies the missing 12th gap, making the track 12 logos + 12 gaps; half of that is 6 logos + 6 gaps, which is precisely item 7's left edge. THE GAP AND THE PADDING MUST STAY EQUAL — that is why both read from one --marquee-gap custom property instead of two literals that could drift. Changing the logo count does not affect this; changing only one of the pair does. The band is NOT full-bleed (maintainer, 2026-08-19): index.njk wraps it in a `.container`, so it loops inside the same measure as the hero copy and canvas and its edges align with the h1. Do not reproduce that width here with a `max-width` calc — `.container`'s inline padding is 24px but 32px at >=64em, and only the primitive itself tracks that. The wrapper also carries the `.graticule > .container { position: relative }` that lifts hero content above the absolutely-positioned grid motif (components.css §4.16), so the band needs no positioning of its own. ============================================================ */ .trust-marquee { --marquee-gap: var(--space-16); margin-top: var(--space-16); overflow: hidden; /* Fade both ends to transparent. A hard clip exposes the trick; the dissolve is what sells "infinite". 10% rather than the 12.5% a full-bleed band wants: inside the container the fade has ~1136px to work in instead of the whole viewport, and at 12.5% it ate ~142px a side — enough to leave a logo half dissolved at the exact edge the band is supposed to line up with. -webkit- prefix retained for Safari, which still needs it. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); } .trust-marquee__track { display: flex; align-items: center; list-style: none; margin: 0; padding: var(--space-2) var(--marquee-gap) var(--space-2) 0; gap: var(--marquee-gap); width: max-content; /* linear is non-negotiable — any easing makes the loop visibly pulse at the seam. ~4s per logo in one pass; re-time this if the logo count changes, since a fixed duration over a longer track scrolls faster. */ animation: trust-marquee-scroll 24s linear infinite; will-change: transform; } .trust-marquee__item { flex-shrink: 0; display: flex; align-items: center; } /* brightness(0) crushes every logo — grey, colour, whatever — to black while preserving alpha; invert(1) then lifts it to flat white. This is what makes six unrelated vendor marks read as one designed system, and it is why every source file must have a transparent background: an opaque one renders as a solid white rectangle. The 0.65 keeps them supporting evidence rather than competition for the h1. Both depend on the hero being dark. */ .trust-marquee__logo { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 0.65; } /* Optical sizing. These are NOT arbitrary and must not be collapsed into one uniform height: a 2.2:1 mark and a 4.1:1 wordmark set to the same pixel height do not carry the same visual weight. Judge by area and stroke thickness, not by the number. */ /* BBB is a square 1:1 outline mark among 2:1-4:1 wordmarks. It needs a noticeably taller box than any of them to carry equal visual weight — matching its height to theirs makes it read as a small stray icon. */ .trust-marquee__logo--bbb { height: 64px; } .trust-marquee__logo--jbt { height: 40px; } .trust-marquee__logo--jvc { height: 37px; } .trust-marquee__logo--fedex { height: 31px; } .trust-marquee__logo--trustpilot { height: 31px; } .trust-marquee__logo--paypal { height: 29px; } @keyframes trust-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Let a visitor stop the band to actually read a logo. */ .trust-marquee:hover .trust-marquee__track { animation-play-state: paused; } /* base.css §(reduced motion) already forces animation-duration to 0.01ms !important globally, which would leave this looping tens of thousands of times a second at its end state. Killing the animation NAME stops it outright, and animation-name is not what that rule marks !important. */ @media (prefers-reduced-motion: reduce) { .trust-marquee__track { animation: none; } } /* Below 640px the desktop gap and heights make the band read as heavy furniture rather than a supporting detail. Scale both together; the seam holds because the padding reads the same custom property. */ @media (max-width: 40em) { .trust-marquee { --marquee-gap: var(--space-12); margin-top: var(--space-12); } .trust-marquee__logo { height: 30px; } .trust-marquee__logo--bbb { height: 46px; } .trust-marquee__logo--jbt { height: 29px; } .trust-marquee__logo--jvc { height: 27px; } .trust-marquee__logo--fedex { height: 23px; } .trust-marquee__logo--trustpilot { height: 23px; } .trust-marquee__logo--paypal { height: 21px; } } /* ============================================================ 5.2 — Two-column body copy (homepage only). Used twice: Who We Are's §2 paragraphs, and §5.3's Our Brands columns. One rule rather than two identical ones, so the pair cannot drift apart. Paragraphs sit side by side from 64em and stack below it, matching the breakpoint the hero splits on. The spacing is arranged so the stacked case is byte-for-byte the layout it had before the wrapper existed: base.css gives every
a --space-4 bottom margin, which used to separate these two and then separate the second from the "Learn More" link. Here the paragraph margins are zeroed and that same --space-4 is re-supplied as the grid gap and as the wrapper's own bottom margin. At 64em the gap widens to --space-8 because it is then a COLUMN gutter, not a paragraph break. Paragraphs keep base.css's --measure cap deliberately. It does not bind at the current 1200px container (each column is ~552px), but it is the site's line-length discipline and should survive a wider container rather than be overridden away here. ============================================================ */ /* `.brands__cols` half of these three rules is DORMANT since 2026-08-18: the two brand sentences it laid out moved into the brand modals, and the wrapper went with them. The `.who-we-are__cols` half is still live and is why the selectors stay — do not delete these rules on the strength of the brands half being unused. */ .who-we-are__cols, .brands__cols { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); } .who-we-are__cols p, .brands__cols p { margin-block: 0; } @media (min-width: 64em) { .who-we-are__cols, .brands__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } /* ============================================================ 5.3 — "Our Brands" shell + centred intro (homepage only). .brands__shell encloses the headline, the intro paragraph and the .brand-panels grid in one white card on the muted band, so the section reads as a single contained object (maintainer, 2026-08-18). .brands__intro centres the headline and the copy; the panel grid is its sibling inside the shell and stays left-aligned. `margin-inline: auto` is required, not cosmetic. base.css caps every
at --measure (~68ch), which really does bind on a full-width paragraph inside the 1200px container, so without it the box stays hard left and only its text centres inside that box, leaving the block visibly off-centre under the headline. The selector stays plural because it also covered the dormant .brands__cols paragraphs (§5.2), where a ~552px track never reaches the cap and the auto margins resolve to zero harmlessly. ============================================================ */ /* --- The arc field behind the Our Brands band (2026-08-20) ------------- Markup and the geometry rationale live in partials/brands-arcs.njk; this is only placement and colour. SCOPED TO .section--arcs, NEVER TO .section--muted. The muted band class is used in 17 places across 9 templates (About, Expertise, Responsibility, Contact, Our Story, Leadership, and every odd brand-page section) — a rule on .section--muted would put this vortex behind all of them. The modifier is an opt-in and that is the point of it: THREE bands carry it, each by name — #brands here, .contact-hero (2026-08-19) and the homepage Our Story band (2026-08-25). It was #brands alone until those two, so read the count as "every caller is deliberate", not as "this is general to muted bands". ONLY .brands-arcs's PLACEMENT AND COLOUR ARE SHARED. Both dark callers also punch the convergence out of the band's middle, which #brands does not need — see the mask rule at §5.13. */ .section--arcs { position: relative; overflow: hidden; } /* `overflow: hidden` above is load-bearing, not tidiness: the arcs originate on an ellipse WIDER and TALLER than the band (0.62W x 0.78H, see the partial), so without clipping they extend past the section into the neighbouring bands and, at narrow widths, push the document's scrollWidth out and produce horizontal overflow. Verified with tools/viewport.mjs. */ .section--arcs > .container { position: relative; } /* No z-index on either of these. .section--arcs is position:relative with z-index:auto, so it does NOT open a stacking context; the arc div and the container are then simply painted in document order, and the container — being later — wins. Same technique .hero uses for its gold graticule (§5.1). Adding a z-index here would work too, and would be the first step toward a stacking context nobody needs. */ .brands-arcs { position: absolute; inset: 0; pointer-events: none; /* Fades the arcs where they meet the band's TOP AND BOTTOM edges, so they dissolve instead of ending as 28 cut stroke-ends against the sections above and below. VERTICAL ONLY, AND A RADIAL MASK IS THE WRONG TOOL HERE — this was tried twice before landing on a linear one. A radial gradient fades from the centre outward, but the centre is precisely the region .brands__shell already covers: the only place these arcs are ever visible is the outer band the shell does not reach. So every radial mask trades away exactly the pixels the motif needs, and tuning its radius only chooses between "invisible" and "no fade at all". Do not reintroduce one. The left and right edges are deliberately NOT faded. The section is full-bleed, so those cuts land at the viewport edge, where a clipped background reads as normal — the same way the `.graticule` grid (components.css §4.16) simply runs off the sides. It is only the horizontal boundaries, which abut another band, where a hard cut looks like a mistake. 14% of a ~614px band is ~86px of ramp at each end, comfortably more than the ~48px of open space above and below the shell, so the falloff is already well under way before an arc reaches the boundary. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); } .brands-arcs svg { display: block; width: 100%; height: 100%; } /* gold-500 is legal here for the same reason it is legal on the hero graticule and inside the hero canvas: this is non-text decoration, and tokens.css's "large/non-text only" note on gold-500 is a contrast rule about glyphs. Nothing is set on top of these strokes — .brands__shell is opaque and covers the field's dense centre entirely. The two opacities are low because the band is neutral-100, a far lighter ground than the hero's ink; the same stroke that reads as faint structure on near-black reads as a hard scratch on off-white. These were set by eye against the rendered band, not derived. */ .brands-arcs__paths path { fill: none; stroke: var(--gold-500); stroke-width: 1; opacity: 0.4; } /* hero-viz.js's BRIGHT_EVERY dial: every fourth arc is a permanent bright one, which is what stops the field reading as a flat screen of identical strokes. Kept at the same 1-in-4 ratio here. */ .brands-arcs__paths .brands-arcs__arc--bright { opacity: 0.62; stroke-width: 1.25; } .brands-arcs__dots circle { fill: var(--gold-500); opacity: 0.7; } /* --- The travelling pulses (hero-viz.js's comet pass, in CSS) ---------- One pulse path per arc, sharing the arc's own `d`. Motion is a dash swept along the path; the per-arc animation-duration and animation-delay are inline on each element, generated from hero-viz.js's speed and phase dials (see the partial). THE COLOUR LOGIC IS INVERTED FROM THE HERO, ON PURPOSE. In the canvas the comet head is `champagne` (--gold-100) and its body --gold-300, because those are the BRIGHTEST tones available and the hero is near-black: the pulse reads by being lighter than its ground. This band is --neutral-100 (#F3F1ED), where gold-100 (#F6ECD6) is very nearly the background colour and would be invisible. So the relationship is preserved by flipping it — the pulse reads by being DARKER than its ground, at --gold-700, against the --gold-500 resting arcs. Same figure/ground, opposite direction. This mirrors the decision already recorded in hero-viz.js, where the prototype's dimmest tone had to become --neutral-700 rather than the semantically obvious --ink-700, for the same class of reason: a tone is only "faint" or "bright" relative to what it sits on. THE DASH GEOMETRY. `pathLength="1"` on each path (see the partial) makes these numbers the hero's own `t` values: stroke-dasharray: 0.12 1 — 0.12 IS hero-viz.js's TAIL, unchanged. The gap of 1 is a full path length, so only ONE comet is ever on an arc; drop it and the arc fills with a repeating dotted train. stroke-dashoffset: 0.12 -> -1 — the sweep. Direction matters and is easy to get backwards: INCREASING the offset walks the dash toward the path START, so travelling origin -> destination means counting DOWN. It begins at 0.12 (dash sitting just off the origin end, invisible) and ends at -1 (just past the destination, invisible, and under the shell in any case). Total travel 1.12, which is why the comet is off-screen for a twelfth of each loop rather than popping in at full length. `linear` because the hero advances its pulses on raw elapsed time; an ease would make them lurch at the ends of every loop. */ .brands-arcs__pulses path { fill: none; stroke: var(--gold-700); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0.12 1; opacity: 0.62; animation-name: b79-arc-pulse; animation-timing-function: linear; animation-iteration-count: infinite; } /* hero-viz.js gives a boosted arc a thicker, brighter comet (lineWidth 2 vs 1.4, alpha 0.95 vs 0.7). Same ratio here, read as darker rather than brighter for the reason above. */ .brands-arcs__pulses .brands-arcs__pulse--bright { stroke-width: 2; opacity: 0.85; } @keyframes b79-arc-pulse { from { stroke-dashoffset: 0.12; } to { stroke-dashoffset: -1; } } /* REDUCED MOTION: the pulses are removed outright and the static arc field remains, which is the whole motif minus the movement. `display: none` rather than leaning on base.css's global flattener, and that is deliberate. The flattener sets `animation-duration: 0.01ms !important` on everything, which is the right hammer for a one-shot transition but pathological against `animation-iteration-count: infinite` — it does not stop the animation, it asks for a loop every hundredth of a millisecond, on 28 elements. Removing the elements is unambiguous and costs nothing, and it is why this rule must not be "simplified" away as redundant with base.css. */ @media (prefers-reduced-motion: reduce) { .brands-arcs__pulses { display: none; } } /* NOT RENDERED BELOW 64em, matching .hero__viz (§5.1) — and for the same kind of reason, though this one is layout rather than battery. Below 1024px .brands__shell fills nearly the full band width, leaving no rail for the arcs to be seen in; all that would render is a few strokes in the thin strip above and below the card, which reads as debris rather than as a motif. `display: none` and not `visibility` or `opacity: 0` so the SVG is not rasterised at all on phones. */ @media (max-width: 63.99em) { .brands-arcs { display: none; } } .brands__intro p { margin-inline: auto; max-width: 84ch; } /* ...and the cap itself is widened past base.css's 68ch (maintainer, 2026-08-18: "lessen the side margins"). 68ch left ~250px of dead rail on each side of a 3-line centred paragraph inside the 1200px shell, so the copy read narrower than the panel grid beneath it. 84ch runs the intro to roughly the shell's interior at 1200px while still being a cap, so every width below that resolves to 100% and nothing overflows. This is deliberately looser than the reading measure: it applies ONLY to this one short, centred lead paragraph, not to running body copy. */ /* The shell's own surface — the same white/radius-lg/e1/neutral-200 treatment .brand-panel and §5.7's closing cards use, so the three card surfaces on the homepage agree. No hover state: this is a container, not a control. Padding is deliberately TWO steps, not one. The panels inside are cards with --space-8 of their own padding, so the shell's padding is paid twice on every side; at 390px a flat --space-8 shell leaves a panel only ~214px of interior. --space-4 below 40em keeps the phone layout as wide as it was before the shell existed, then it opens up to --space-8 and stays there — see the comment on the 64em rule below for why it does not open further at desktop. */ /* The shell's own surface — the same white/radius-lg/e1/neutral-200 treatment .brand-panel and §5.7's closing cards use, so the three card surfaces on the homepage agree. No hover state: this is a container, not a control. IT WAS BRIEFLY --grad-hero, ON 2026-08-20, AND THE MAINTAINER REVERSED IT THE SAME DAY ("I decided that I don't like it"). Reverted in full: the gradient, the copied .hero::before graticule, the `position: relative` the overlay needed on the shell and its children, and the #fff / neutral-200 copy inversion that went with a dark ground. Do not reinstate any of it piecemeal on the theory that a part was worth keeping — the parts only made sense together, and the decision was against the result. The section's ARC FIELD is a separate, earlier change and is untouched by that reversal — it lives on the .section--arcs band around this shell, not on the shell, and it is still there. Padding is deliberately TWO steps, not one. The panels inside are cards with --space-8 of their own padding, so the shell's padding is paid twice on every side; at 390px a flat --space-8 shell leaves a panel only ~214px of interior. --space-4 below 40em keeps the phone layout as wide as it was before the shell existed, then it opens up to --space-8 and stays there — see the comment on the 64em rule below for why it does not open further at desktop. */ .brands__shell { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--e1); border: 1px solid var(--neutral-200); padding: var(--space-4); } @media (min-width: 40em) { .brands__shell { padding: var(--space-8); } } /* --space-8, not --space-12, since 2026-08-19 (maintainer, to cut vertical scroll). The shell holds two short cards and spent 499px at 1440px doing it — the least dense block on the page after the closing section. NOTE this breaks the "same step the section's own block padding takes in base.css" symmetry the comment above once claimed; that symmetry was the original reason for --space-12 and it is deliberately given up here. The 40em step below is UNCHANGED and still --space-8, so this buys nothing on a phone — where the shell is --space-4 for the interior-width reason above — and nothing on a tablet. It is a desktop-only gain. */ @media (min-width: 64em) { .brands__shell { padding: var(--space-8); } } /* Space between the intro block and the panel grid. base.css leaves the intro's last
only --space-4, which is a paragraph break, not the gap between two blocks inside a card. Set here rather than on the grid so .brand-panels stays reusable. */ .brands__intro { text-align: center; margin-bottom: var(--space-6); } .brands__intro > :last-child { margin-bottom: 0; } /* Card-inside-a-card: the shell took the white surface, so the panels cannot also be white — at rest they are the muted band's own neutral-100 with the hairline carrying the edge, and they resolve to white on hover. That fill change is the lift here; the e2 shadow, the gold hairline and the 1px translate are all still the component's (components.css §4.3) and are untouched. Scoped to .brands__shell so .brand-panel keeps its own white treatment anywhere it is reused. Contrast re-checked on the new fill: gold-700 (the role eyebrow and the "Explore" label) measures 4.89:1 on neutral-100, down from 5.52:1 on white. Still AA for normal text, but there is no headroom left — do not move any gold-700 text here to a lighter gold, and do not deepen this fill past neutral-100. `var(--brand-wash-image)` IS NOT OPTIONAL IN THESE TWO DECLARATIONS. components.css §4.3 puts the card's gold corner bloom in the `background` SHORTHAND, and a shorthand resets background-image to `none` — so writing `background: var(--neutral-100)` here, as this rule did before 2026-08-20, silently strips the wash from the only place the component actually renders. The variable is declared on .brand-panel itself, so naming it costs nothing and there is no second copy of the gradient to keep in sync. The same applies to any future fill override on this element: carry the variable with it, or use `background-color` and leave the shorthand alone. The wash does NOT need a strength override for the neutral-100 fill. It is a gold-over-fill color-mix against transparent, so it composites onto whatever is beneath it; the 9%/16% pair reads near-identically on neutral-100 and on the white hover state, which was checked rather than assumed. */ .brands__shell .brand-panel { background: var(--neutral-100) var(--brand-wash-image) no-repeat; box-shadow: none; } /* `box-shadow` has to be re-stated here, not just in the rest rule above: pages.css loads after components.css and `.brands__shell .brand-panel` ties `.brand-panel:hover` on specificity, so the flat rest shadow would otherwise win over the component's hover --e2 and the lift would lose its shadow. */ .brands__shell .brand-panel:hover, .brands__shell .brand-panel:focus-visible { background: #fff var(--brand-wash-image) no-repeat; box-shadow: var(--e2); } /* ============================================================ Shared inner-page header (layouts/page.njk's .page__header) — a hairline separates the eyebrow/h1 block from body content on every page.njk-based page. No fill change from the page body (kit's own /about/ header sits on the same #FAF9F7 as the page). ============================================================ */ .page__header { padding-block: var(--space-16) var(--space-12); border-bottom: 1px solid var(--neutral-200); } /* --split: the opt-in variant for a page that passes `headerNav`, i.e. /responsibility/ (2026-08-18) and /expertise/ (2026-08-20). Title left, chip row right (maintainer). Everything is inside the ≥64em query on purpose — below it the modifier does nothing at all and the three children stack in source order, eyebrow → h1 → chips, which is exactly the layout the page had when the bar was a separate full-bleed row. So phones see no change from this at all. `align-items: end` rather than `center`: the chips read as sitting ON the title's baseline rather than floating beside its optical middle, which is what makes them look attached to the h1 instead of parked in the whitespace. `justify-self: end` pins them to the container's right edge — the gap between title and chips is the point, since filling that dead space is what the move was for. minmax(0, 1fr) on the second column, not 1fr: the chip row is a flex line with `overflow-x: auto`, and a bare 1fr takes its min-content width as a floor, so the row would push the grid wider than the container and reintroduce horizontal overflow instead of scrolling. The auto/minmax pair is what lets the h1 keep its natural width while the chips absorb the remainder and scroll if they must. */ @media (min-width: 64em) { .page__header--split { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-8); align-items: end; } .page__header--split .eyebrow { grid-column: 1; grid-row: 1; } .page__header--split h1 { grid-column: 1; grid-row: 2; margin-bottom: 0; } /* The bar STRETCHES to its track (grid's default) and the chips are right-aligned INSIDE it. The obvious-looking `justify-self: end` on the bar itself is wrong and was measured wrong: justify-self opts the item out of `stretch`, so it sizes to max-content instead of the track, overflows leftward, and its `overflow-x: auto` never engages because the nav box is content-sized too. That produced a 0px gap to the title at 1280-1920 and a 176px OVERLAP of the title at 1024. Stretching is what hands the width constraint back to the grid. */ .page__header--split .tabbar { grid-column: 2; grid-row: 2; min-width: 0; } /* Right-aligned, and ALLOWED TO WRAP. The wrap is not decoration — it is the only thing that makes flex-end safe. Measured: the four chips at body size are 857px wide and the second column is 826px at every viewport (the container caps at 1200px, so the track stops growing), i.e. they overflow by 31px at 1024 AND at 1920. Flex content that overflows a flex-end container spills past its START edge, where it cannot be scrolled to — which is exactly how the chips ended up printed across the title, 176px into it at 1024px. Wrapping removes the overflow condition instead of trying to scroll out of it. */ .page__header--split .tabbar ul { justify-content: flex-end; flex-wrap: wrap; row-gap: var(--space-2); } /* …and with the chips at --type-small they fit on ONE line at every width, so the wrap above stays a safety net rather than the normal case. Dropping from the inherited 17px body size is also right on its own terms: beside a 48px title these are secondary navigation, and 14.5px is the floor tokens.css allows. min-height stays 44px, so the tap target does not shrink with the type. */ .page__header--split .tabbar a { font: var(--type-small); padding: 0 var(--space-3); } } /* Below the split, the bar is a plain block under the title and needs the space the old full-bleed row got from its own padding. */ @media (max-width: 63.99em) { .tabbar { margin-top: var(--space-6); } } /* ============================================================ Name/address/phone reset — used on the homepage closing section and /contact/. Browsers italicize
by default; the kit sets it in plain roman type alongside the rest of the page copy. ============================================================ */ .nap { font-style: normal; } .nap p { margin: 0 0 var(--space-4); } /* ============================================================ 5.7 — Homepage closing band. RESPONSIBILITY LEFT, LOOKING AHEAD RIGHT from 64em (maintainer, 2026-08-20). Until that date these were two stacked sections; index.njk's header comment for the band records the merge and why the surface is the muted one. Below 64em the two columns stack in source order — Responsibility, then Looking Ahead — which is the order the content doc reads and the order the page has always had. Responsibility sits left simply by being first in the markup; there is no `grid-column` swap. THE LEFT COLUMN IS NOT A CARD. That is a constraint, not a preference: `.reveal-list__item[open]` (components.css §4.14) marks the open row with a white background, which a white card behind it would cancel out. The Looking Ahead card keeps the shared surface rule below (white, radius-lg, e1, neutral-200 hairline) because it has no such state to show. `align-items: start`, not `center` or `stretch`. The two columns are different kinds of thing — a heading plus a four-row disclosure list on the left, a short card plus a 320px ring on the right — and they are close but not equal in height (about 620px against 600px at 1280px). Starting them together is what makes the band read as two columns rather than as a card floating beside a list. Stretching instead would run the white card to the list's full height and leave a slab of empty white under three lines of copy; centring would drop the whole right column ~20px and lose the shared top the two hang from. THE TWO EYEBROWS SIT ON ONE LINE, and the `padding-top` below is what puts them there (maintainer, 2026-08-21: "Looking Ahead seems to be slightly lower"). This REVERSES the 2026-08-20 note that read "the card's own padding then sets its eyebrow a little lower, and that is the card reading as a card" — do not restore the offset on that comment's authority. `align-items: start` levels the two COLUMN BOXES, but only the right one has a visible box: the card's 24px padding and 1px border held its first line of text 25px below "RESPONSIBILITY", which is the gap that was reported. It is fixed by pushing the LEFT column's content down to the card's text, not by pulling the card up to the left column's. Pulling the card up would work geometrically and look wrong — the section pads 48px, so a 25px lift leaves the white card floating 23px off the band's top edge. Padding the bare column costs nothing visually instead, because there is no left-hand box for the space to show up in; it simply merges into the section's own top padding. NOT the horizontal axis, and that is deliberate. The same 25px insets the card's text from its track (the text starts at 681.5px against the column's 656.5px at 1280). Cancelling it would mean either indenting the Responsibility column 25px — breaking the left rail every other section on the page shares at 64.5px — or bleeding the card 25px into the 48px gutter. The columns are already horizontally aligned where it counts: equal 544px tracks, both flush to the container rails. History, because this composition has moved several times: two matched white cards side by side (copy + contact, 2026-08-18), then one full-width copy card with the mark beneath it when the contact card was commented out, then the copy card left with the mark alone in the right column. Each is gone rather than left commented, because each was a different composition, not a variant to toggle. ============================================================ */ .closing__inner { display: grid; gap: var(--space-8); } @media (min-width: 64em) { .closing__inner { grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } /* Match the card's own inset so "RESPONSIBILITY" and "LOOKING AHEAD" start on the same line — see the eyebrow note above. It tracks the card rule below (--space-6 padding + a 1px border); the two must move together, so change this if that padding ever changes. Scoped to the two-column state on purpose: below 64em the columns stack and there is nothing across from the eyebrow to line up with, so the extra 25px would just be a dent in the band's top. */ .closing__resp { padding-top: calc(var(--space-6) + 1px); } } /* Left column. No surface of its own — see the note above. The resets are the same pair .closing__copy carries: the section's own padding supplies the space the eyebrow's and the button row's margins would otherwise double. */ .closing__resp > :first-child { margin-top: 0; } .closing__resp > :last-child { margin-bottom: 0; } /* Right column. A wrapper, new with the 2026-08-20 merge: the copy card and the mark were two grid children of .closing__inner, one per column, and are now stacked in one. --space-8 between them, matching the gap .closing__inner uses when it stacks. `align-content: start` so the pair hangs from the top of the column with the left column's heading rather than centring against the taller list. */ .closing__ahead { display: grid; gap: var(--space-8); align-content: start; } /* The mark sits under the Looking Ahead card, centred on it. Full 320px, unlike the Responsibility asides' 240px: the right column is ~542px wide and holds only the card and the ring, so the drawing runs at its authored size and --resp-ring-stroke stays at 1. THE TWO ALWAYS MOVE TOGETHER — the viewBox is 320 units, so any smaller --resp-ring-size renders every stroke at that fraction and the mark goes anaemic unless the stroke multiplier compensates (240px needs 320/240 = 1.3333). See §5.9. No optical offset. An earlier revision pulled the ring 7.5px left to drag its drawn edge onto the left edge of the card above it; the ring is centred under a full-column card now, so there is no edge to align to and the offset would only push it off-centre. */ .closing__mark { justify-self: center; width: 100%; } .closing__mark .resp-ring { --resp-ring-size: 320px; --resp-ring-stroke: 1; margin-top: 0; margin-inline: auto; } /* VISIBLE ON MOBILE — the one exception to `.resp-ring`'s blanket below-64em hide (§5.9). Maintainer, 2026-08-24: "ensure that gold ingot svg on the looking ahead section is visible on mobile homepage." The hide exists for the `.band__aside` instances, where the ring stacks between an