inside a , which collapsed the query's line breaks into one line. The
HTML was right and the CSS undid it; caught by looking at the rendered page. */
.post-body pre code { font: inherit; background: none; padding: 0; white-space: pre; }
/* ---- The BLACK block: the brand's `PBTerminalBlock` ----------------------
Written as ```terminal. Two block styles exist in the brand and the format could
only reach one of them, so a writer could not choose the black one when the content
actually IS a foreign screen. Bottega raised it 2026-08-10 after Allan opened the
editor, saw a grey block and missed the black.
Values read out of the master's own styles.xml, not from the guide's prose:
fill 000000 pure black, and the guide is explicit that this is OUTSIDE the
palette on purpose. The block depicts a screen that is not PB's,
and branding it would claim the screen was ours.
color CCCCCC the brand's "output" grey
Courier New at 10pt, 6pt before and after, 8.5pt side indents
NOT carried over: the four ANSI prompt colours (FF5555 user@host, 5F87FF path,
white command, CCCCCC output). In Word they are direct run formatting, because a
style holds one colour and a prompt line has four. On the web that needs syntax
highlighting, which needs JavaScript, which the CSP forbids. So the whole block is
the output grey, and a prompt line is not coloured. That is a simplification of the
brand rather than a match, and it is deliberate: the alternative is a script tag.
`:has()` because markdown-it puts the language class on , not on , and
the background belongs to the block. Supported everywhere since 2023. */
.post-body pre:has(code.language-terminal) {
background: #000;
border-left: none;
color: #CCC;
padding: 14px 16px;
}
.post-body pre:has(code.language-terminal) code { color: #CCC; }
/* Inline: the brand's `Code` character style, and that style is ONLY Courier New.
Read out of the master's styles.xml, not from memory: no shading, no colour, no
border. An earlier version here gave it a cream background and a bit of padding,
which is the web convention and is not what the brand says, so it is gone. The
font change alone is enough to tell a command from prose, because the body face is
proportional and this one is not.
`nowrap` stays: it is not decoration, it stops a browser breaking
`New-HostedOutboundSpamFilterPolicy` across two lines at an arbitrary width. */
.post-body code {
font-family: "Courier New", Courier, monospace;
font-size: 0.92em;
white-space: nowrap;
}
/* `Table2Cols`: brand blue header with white bold text, zebra rows, thin borders
on every cell. The name is not a column limit — the brand is explicit that it
bands by ROW and applies to any column count. */
.post-body table {
/* `display: block` is what makes overflow-x work on a table element, so a wide
table scrolls in place. Without it the table forces the page wider and
check-widths fails the build. */
display: block;
overflow-x: auto;
border-collapse: collapse;
margin: 24px 0;
font-size: 15px;
max-width: 100%;
}
.post-body thead th {
background: var(--lapis); /* brand blue 15317E = --lapis */
color: #fff;
font-weight: 700;
text-align: left;
}
.post-body th, .post-body td {
border: 1px solid var(--line);
padding: 8px 12px; /* brand: compact, never cramped */
vertical-align: top;
color: var(--body);
}
/* Zebra by row. The brand's row grey is F2F2F2, a hair off --cream (F2F2F0);
kept as its own token rather than reusing cream, because they are two
different values in the master. */
.post-body tbody tr:nth-child(even) td { background: var(--row-grey); }
/* Alignment written as `|:---|:---:|---:|` in the source. The classes are put here by
the `tableAlignment` transform in eleventy.config.js, which replaces the inline
`style="text-align:…"` markdown-it emits — the CSP refuses inline styles, so the
alignment did nothing at all until 2026-08-12.
Two classes deep on purpose. `.post-body thead th` above sets `text-align: left` for
every header cell, and a single-class selector would lose to it, leaving a centred
header row silently left-aligned — the same failure this whole thing exists to fix. */
.post-body th.align-left, .post-body td.align-left { text-align: left; }
.post-body th.align-center, .post-body td.align-center { text-align: center; }
.post-body th.align-right, .post-body td.align-right { text-align: right; }
/* Text for a screen reader only. It was removed along with the freshness dot
and taken back out of use, which put the words "Cards" and "List" visibly
inside two icon buttons. An icon-only control still needs a name. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- Card / list toggle (news archive) ----
Sits above the cards, right aligned, burgundy. Hidden until viewtoggle.js has
wired it, so a control that cannot do anything is never on the page. */
.view-toggle { display: none; justify-content: flex-end; gap: 4px; margin-bottom: 18px; }
.view-toggle.is-ready { display: flex; }
.vt-btn {
width: 34px; height: 34px; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: var(--white); color: var(--burgundy);
border: 1px solid var(--line); border-radius: 8px;
transition: background .15s, color .15s, border-color .15s;
}
.vt-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vt-btn svg rect { fill: currentColor; stroke: none; }
.vt-btn svg circle { fill: currentColor; stroke: none; }
.vt-btn:hover { background: var(--cream); }
.vt-btn.is-on { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }
/* A hidden panel must actually be hidden. `.news-cards { display: grid }` is a
class selector and beats the browser's built-in `[hidden] { display: none }`,
so the attribute was set, the DOM said hidden, and the grid stayed on screen.
Any rule that sets display on a panel has to be answered here. */
[data-view-panel][hidden] { display: none !important; }
/* ---- News archive, list view ---- */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { border-bottom: 1px solid var(--line-soft); }
.news-list a {
display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 20px;
padding: 14px 6px; color: var(--body);
}
.news-list a:hover { background: var(--cream); text-decoration: none; }
.nl-date { grid-row: 1 / span 2; font-size: 13px; color: var(--muted); padding-top: 2px; }
.nl-title { font-size: 15px; font-weight: 700; color: var(--lapis); }
.nl-teaser {
font-size: 14px; color: var(--muted); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 620px) {
/* The date column costs more than it gives at this width: it takes a fifth of
the line and the teaser is what people scan by. */
.news-list a { grid-template-columns: 1fr; gap: 2px; }
.nl-date { grid-row: auto; }
}
/* ---- Team profile panel: one, under the slider, empty until a card is chosen ---- */
.member-panel {
position: relative; max-width: 760px; margin: 28px auto 0;
background: var(--lapis-wash); border: 1px solid var(--lapis-wash-line); border-radius: 12px;
padding: 26px 30px 24px;
}
.member-panel[hidden] { display: none; }
.mp-close {
position: absolute; top: 10px; right: 14px;
background: none; border: 0; cursor: pointer;
font-size: 26px; line-height: 1; color: var(--muted); padding: 4px 8px;
}
.mp-close:hover { color: var(--burgundy); }
.mp-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mp-name { font-size: 16px; font-weight: 700; color: var(--lapis); }
.mp-role { font-size: 13px; color: var(--muted); }
/* The bio is rendered markdown, so it arrives as paragraphs. The gap between them
is the same 14px the block itself sits on, and the last one carries none, so a
one-paragraph bio measures exactly as it did before this became possible. */
.mp-bio { font-size: 15px; line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.mp-bio p { margin: 0 0 14px; }
.mp-bio p:last-child { margin-bottom: 0; }
.mp-linkedin { font-size: 13px; font-weight: 700; color: var(--burgundy); }
.mp-linkedin[hidden] { display: none; }
/* Images in an article body. Centred, and never wider than the image itself is,
so a small diagram is not stretched to the column width and softened.
The caption sits centred under the picture and is as wide as the picture
rather than as wide as the column: it belongs to the image, and a caption
running past its edges reads as body text that happens to be grey. */
/* `display: table` rather than fit-content, so the figure is exactly as wide as
the IMAGE. With fit-content the widest child wins, and a caption longer than
the picture stretched the figure to fit the text, which put the caption's
edges outside the image it belongs to. A table takes its width from its
content and a table-caption is forced to that width without affecting it. */
.post-body figure {
display: table; margin: 32px auto; max-width: 100%;
}
.post-body img {
max-width: 100%; height: auto; border-radius: 12px; display: block;
}
.post-body figcaption {
display: table-caption; caption-side: bottom;
padding-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5;
text-align: center;
}
/* No max-width: it sits in the article grid's centre column, which is already 696px, so
the 760px this used to carry could never apply. */
.post-foot { padding: 16px 0 56px; }
.back-link { font-size: 14px; font-weight: 700; color: var(--burgundy); }
.legal-note { font-size: 13px; color: var(--muted); font-style: italic; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
/* ---- Legal pages (privacy, cookies) — same expression as the rest ---- */
/* Left-align the legal prose to the same boxed column as the page-head heading
(so heading and body share a left edge). Paragraphs keep their own reading
measure via .legal-body p { max-width }. */
.legal-body { padding: 44px 32px 12px; width: calc(100% - 64px); max-width: calc(var(--wrap) - 64px); }
.legal-body h2 { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lapis); border-bottom: 2px solid var(--burgundy); padding-bottom: 8px; display: inline-block; margin: 36px 0 14px; }
.legal-body > p:first-child + h2, .legal-body > h2:first-child { margin-top: 8px; }
.legal-body p { font-size: 16px; line-height: 1.7; color: var(--body); margin: 0 0 14px; max-width: 720px; }
.legal-body a { color: var(--lapis); text-decoration: underline; }
.legal-body strong { color: var(--ink); }
/* ---- Careers page — postings reuse the services journey-item bar ---- */
.job-panel { padding-top: 4px; }
.job-intro { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0 0 20px; max-width: 720px; }
.job-sub { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lapis); border-bottom: 2px solid var(--burgundy); padding-bottom: 8px; display: inline-block; margin: 0 0 14px; }
.job-list { list-style: none; margin: 0 0 24px; padding: 0; max-width: 720px; }
.job-list li { position: relative; padding: 0 0 10px 22px; font-size: 15px; line-height: 1.6; color: var(--body); }
.job-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 1px; background: var(--burgundy); }
.job-apply { margin: 4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.job-apply-note { font-size: 14px; color: var(--muted); }
/* An open position, marked once. The row is otherwise identical to a standing profile,
and the difference between "we would like to meet someone like you" and "this job is
vacant" is the only thing a visitor scanning the page has to be able to see.
Burgundy on a wash rather than a solid fill: it sits inside a heading that is already
lapis, and a second solid block beside the button below would compete with it. Reuses
the pill shape of `.tag`, so the page gains no new vocabulary. */
.job-flag { display: inline-block; vertical-align: 2px; margin-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--burgundy); background: var(--cream); border: 1px solid var(--cream-2); border-radius: 20px; padding: 3px 10px; }
.job-open > summary .ji-title { color: var(--body); }
.job-empty { max-width: 760px; }
.job-empty p { font-size: 15px; line-height: 1.65; color: var(--body); margin: 0; }
.job-empty a { color: var(--lapis); text-decoration: underline; }
/* ---- Footer links column ---- */
/* ---- Responsive ---- */
/* The stages stack at 1100, not 860. Four columns below that are under 200px
wide, which was survivable when a stage was an icon and two short lines and
is not now that each carries a card: the headings wrap differently, the
stages end up different heights, and the cards inherit it. Measured at 1024:
225px next to 203px. Above 1100 the columns are 237px and everything is
equal. The rest of the 860 breakpoint is unrelated and stays where it is. */
@media (max-width: 1100px) {
.steps { flex-direction: column; gap: 28px; }
.step:not(:last-child)::after { display: none; }
.navsearch.is-ready { width: 170px; }
}
/* THE NAV COLLAPSES INTO THE DRAWER HERE, NOT AT 560px, AND THE SECOND REASON IS
NOT THIS FEATURE'S. Measured on the built page: the five links are a fixed
418px and the CTA 99px, which leaves 33px of slack at 768px and 135px at
900px, so a usable field simply does not fit beside them. The measurement also
turned up a fault that was already there: between 561px and about 660px the
header overflowed on its own, the logo squeezed from 128px to 24px and the
page scrolled sideways, because the desktop nav was being asked to hold a
width it never fits in. Collapsing at 1000px is what makes room, and it closes
that at the same time. */
@media (max-width: 1000px) {
.navlinks, .nav-cta { display: none; }
/* The button it hangs off is in the drawer now, so the flags come back into the
row on their own rather than floating over nothing. */
.nav-cta-wrap { margin-right: 0; }
.langtoggle { position: static; padding: 0; background: none; }
.logo img { height: 64px; margin-left: 0; }
/* The field takes the room the links left, up to a width where a search box
stops looking like one. */
.navsearch.is-ready,
.navsearch.is-ready:focus-within { width: auto; flex: 1 1 auto; min-width: 0; max-width: 420px; }
.nav-toggle { display: block; margin-left: auto; }
.nav-toggle summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.nav-toggle summary::-webkit-details-marker { display: none; }
.burger { position: relative; display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }
.burger::before { top: -7px; }
.burger::after { top: 7px; }
.nav-drawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line-soft); box-shadow: 0 10px 24px rgba(0,0,0,.10); display: flex; flex-direction: column; padding: 6px 20px 16px; }
.nav-drawer a { padding: 13px 2px; font-size: 16px; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.nav-drawer a.btn { margin-top: 12px; border-bottom: none; text-align: center; color: var(--white); }
}
@media (max-width: 860px) {
.sr-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
.sr-none-bars { grid-template-columns: 1fr 1fr; }
.content { flex-direction: column; }
.content .side { flex: 1 1 auto; width: 100%; margin-top: 0; }
.cat-inner { flex-direction: column; gap: 20px; }
.cat-head { flex-basis: auto; }
.cat-intro { border-left: none; padding-left: 0; border-top: 1px solid #33478a; padding-top: 20px; }
.cta-inner { flex-direction: column; align-items: flex-start; }
.about-head { flex-direction: column; align-items: flex-start; gap: 28px; }
.stat-blocks { flex-wrap: wrap; gap: 20px 28px; }
.faq-cols { grid-template-columns: 1fr; }
.ji-panel { padding-left: 26px; }
}
@media (max-width: 560px) {
.wrap, .nav-inner { padding-left: 20px; padding-right: 20px; }
.hero .wrap, .page-head.has-media .wrap { padding-right: 20px; }
.hero, .page-head, .site-footer { width: calc(100% - 40px); }
.hero-media { display: none; }
/* Everything that collapses the nav is in the 1000px block above. What is left
here is the phone: a smaller wordmark and a tighter row. */
.logo img { height: 46px; margin-left: -4px; }
.nav-inner { gap: 10px; }
.sr-cols { grid-template-columns: 1fr; gap: 20px; padding: 20px 20px 24px; }
.sr-none-bars { grid-template-columns: 1fr; }
.sr-note, .sr-none { padding-left: 20px; padding-right: 20px; }
}