/* ==========================================================================
Content Features Block — Smith 2.0 (flexible feature grid)
Variants: layout (split|stacked), bg (white|cream|navy), cols (1|2),
cards (filled|bar), heading align, optional side image, per-item accent.
========================================================================== */
.content-features {
background-color: var(--color-white);
padding: 7rem 4rem; /* 112 / 64 */
}
.content-features--bg-cream { background-color: var(--color-pampas, #f9f8f5); }
.content-features--bg-navy { background-color: var(--color-blue-zodiac, #0e1b44); }
.content-features--bg-gold { background-color: var(--color-selective-yellow, #f0b200); }
.content-features__inner {
width: 100%;
max-width: 1280px;
margin-inline: auto;
}
/* ---- Split layout: title column + feature list column ------------------- */
.content-features__grid {
display: flex;
align-items: flex-start;
gap: 5rem; /* 80px */
}
.content-features--img-right .content-features__grid { flex-direction: row-reverse; }
.content-features__content {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2.5rem; /* 40px */
}
/* ---- Stacked layout: centred/▮ head on top, grid below ------------------ */
.content-features--stacked .content-features__head {
/* 820px is the export's authored base, verbatim:
.content-features--stacked .content-features__head
{ max-width: 820px; margin: 0 auto 3rem;
display: flex; flex-direction: column; gap: 1.5rem }
and it is raised to 980px from 992px up (see the media block below).
The 950px that used to sit here came from Figma 10773:68285 and was
wrong at every width - it under-ran the desktop cap by 30px and
over-ran the tablet cap by 130px. Measured on the export, /services/:
@1400 maxw980 @1100 maxw980 @992 maxw980
@985 maxw820 @900 maxw820 @800 maxw820 */
max-width: 820px;
margin: 0 auto 3rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* The export raises the cap on desktop. This lives here, not in
figma-desktop-shared.css, because that file is enqueued BEFORE the block
stylesheets - an identical-specificity rule there loses on source order and
never renders. See the note left at figma-desktop-shared.css:330. */
@media (min-width: 992px) {
.content-features--stacked .content-features__head {
max-width: 980px;
margin-bottom: 48px;
}
}
.content-features--stacked.content-features--halign-center .content-features__head { text-align: center; }
.content-features--stacked.content-features--halign-center .content-features__title { align-items: center; }
/* Left-aligned stacked head sits flush-left in a narrower column (Figma
"Resources"/"Blog" section headers), not centred. */
.content-features--stacked.content-features--halign-left .content-features__head {
margin-left: 0;
margin-right: 0;
/* 620px, matching the export exactly:
.content-features--stacked.content-features--halign-left
.content-features__head { margin-left:0; margin-right:0;
max-width: 620px }
This carries three classes, so it also outranks the >=992px 980px step
above - the export renders the Insights "Resources" head at 620px flat
from 800 through 1400+. The 800px here was a Figma-era guess. */
max-width: 620px;
}
.content-features__title {
display: flex;
flex-direction: column;
gap: 1.5rem;
color: var(--color-blue-zodiac, var(--color-secondary));
}
.content-features--halign-center .content-features__title { text-align: center; align-items: center; }
/* Dark section: light text (incl. eyebrow — Figma 10754:5937 is white) */
.content-features--bg-navy .content-features__title,
.content-features--bg-navy .content-features__heading,
.content-features--bg-navy .content-features__eyebrow,
.content-features--bg-navy .content-features__text { color: var(--color-white, #fff); }
.content-features__eyebrow {
font-family: var(--font-family-base);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
color: var(--color-accent-gold, var(--color-selective-yellow));
margin: 0;
}
.content-features__heading {
font-family: var(--font-family-heading);
font-weight: 400; /* 400: Smith Style Guide - Hoefler Text is Regular. See docs/DECISIONS.md D8 */
font-size: 3.25rem;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-blue-zodiac, var(--color-secondary));
margin: 0;
}
.content-features__text {
font-family: var(--font-family-base);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.5;
color: var(--color-blue-zodiac, var(--color-secondary));
}
.content-features__text > * { margin: 0; }
.content-features__text > * + * { margin-top: 1.5rem; }
/* ---- Optional side image (split layout, e.g. Core Values wheel) --------- */
.content-features__media { margin-top: 0.5rem; }
.content-features__media img {
display: block;
width: 100%;
height: auto;
border-radius: 0;
}
/* ---- CTA pill ----------------------------------------------------------- */
.content-features__actions { display: flex; }
.content-features--halign-center .content-features__actions { justify-content: center; }
/* Stacked: button sits below the card list (Figma Layout/308, 60px gap). */
.content-features--stacked .content-features__actions { margin-top: 60px; }
.content-features__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.375rem 1.25rem;
background-color: var(--color-accent-gold, var(--color-selective-yellow));
/* BugZap #122 ("button padding doesn't match rest"): the 1px border made
this button 49px tall where every other gold CTA - and the Agentis design
export - renders 47px. The border was the same colour as the fill, so
removing it is a pure geometry fix. Measured 2026-08-06 at 1512. */
border: 0;
color: var(--color-blue-zodiac, var(--color-secondary));
font-family: var(--font-family-base);
font-weight: 700;
font-size: 1.25rem; /* BZ #40: Figma Button component = Barlow Bold 20px (10774:90375) */
line-height: 1.5;
text-transform: uppercase;
text-decoration: none;
border-radius: 100px;
transition: filter 0.2s ease;
}
.content-features__button:hover,
.content-features__button:focus-visible { filter: brightness(0.93); }
/* ---- Feature list / grid ------------------------------------------------ */
.content-features__list {
flex: 1 1 0;
min-width: 0;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2rem; /* 32px */
}
/* Multi-column grids */
.content-features--cols-2 .content-features__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.content-features--cols-3 .content-features__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.content-features--cols-4 .content-features__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.content-features__item {
display: flex;
flex-direction: column;
gap: 1rem;
/* BugZap #62 - 24px, not 40px. The Agentis design export authors
`.content-features__item { padding: 1.5rem }` with the comment "tighter
so cards feel wider"; measured 624x209 cards with 24px padding on the
Services 2x2. Our 2.5rem made the same cards 600x382.
Deliberately UNSCOPED. This was briefly narrowed to
`.content-features--icon-beside` on the assumption that the tighter card
was a Services-only treatment. It is not. Measured on the Agentis design export
at 1759px, every cards-filled block renders 24px padding, 16px row-gap
and a 31.2x31.2 icon regardless of variant:
home stacked bg-navy cols-4 cards-filled halign-center
about stacked bg-navy cols-2 cards-filled halign-center
insights stacked bg-white cols-2 cards-filled halign-left
and none of those three carries --icon-beside. Scoping the value to
icon-beside puts the homepage grid - the exact block BugZap #51 was
filed against - back to 40px padding and 48px icons. cards-bar is
unaffected either way because it carries its own padding rule below. */
padding: 1.5rem; /* 24px */
border-radius: 0;
}
/* Accent colours — FILLED cards */
.content-features--cards-filled .content-features__item--sage { background-color: var(--color-pine-glade, #b9c789); color: var(--color-blue-zodiac, #0e1b44); }
.content-features--cards-filled .content-features__item--teal { background-color: var(--color-surfie-green, #0f7e7c); color: var(--color-white, #fff); }
.content-features--cards-filled .content-features__item--gold { background-color: var(--color-selective-yellow, #f0b200); color: var(--color-blue-zodiac, #0e1b44); }
.content-features--cards-filled .content-features__item--navy { background-color: var(--color-blue-zodiac, #0e1b44); color: var(--color-white, #fff); }
/* ---- About "Giving Back" (bg-navy + cards-filled, Figma 10773:71618) ------
The frame hand-places the four cards in a staggered pinwheel — two column
widths (600/506-ish) with per-row insets — not a uniform 2-col grid. Body
copy runs Barlow 16px/1.5; card rows are 250 / 237 tall with a 61px gap.
Measured off the 1440 frame: row1 x106 w600 + x806 w506, row2 x147 w510 +
x766 w599. */
.content-features--bg-navy.content-features--cards-filled.content-features--cols-2 .content-features__item-text {
font-size: 1rem; /* frame 16px / 1.5 */
}
.content-features--bg-navy.content-features--cards-filled.content-features--cols-2.content-features--stacked .content-features__head {
max-width: 800px; /* frame intro wraps in an ~800px measure */
gap: 3rem; /* frame heading -> intro glyph gap 51 */
margin-bottom: 3.5rem; /* frame intro -> cards gap ~56 */
}
/* Home 308 (bg-navy cols-4, Figma 10773:68285): frame runs 290px cards on a
40px gutter (ours sat on the 24px cols-4 base). */
.content-features--bg-navy.content-features--cards-filled.content-features--cols-4 .content-features__list {
gap: 2.5rem;
}
/* ---- BugZap #71: the staggered pinwheel is deleted on purpose --------------
The hand-placed geometry that used to live here (a `min-width: 861px` flex
row with fixed 600/506/510/599 widths and 26/100/67/104 left insets, cards
pinned to 250 and 237 tall) came from the superseded Figma frame
10773:71618, not from the Agentis design export - the same reason the focus-page
2x2 geometry below was deleted.
It also could not survive a narrow window, which is what Meeky flagged. The
two rows need 1232px and 1280px of list width; the list caps at 1280 and is
otherwise viewport minus 128, so the pinwheel only held together at
viewports of 1408px and up. Measured on staging:
>=1408 2 rows, correct pinwheel
1360 3 rows - row 2 breaks
1200 4 rows - one card per row, still 600/506/510/599 wide with
992 their 26/100/67/104 insets: ragged widths, ragged indents,
861 and no gap between rows 1 and 2 (the block set `gap: 0`)
<861 clean full-width single-column stack
So the whole 861-1407 band - which is every laptop and every landscape
tablet - rendered four mismatched, differently-indented cards.
The export has no pinwheel at any width. Its `--cols-2` list is the plain
`repeat(2, 1fr)` grid already declared above, collapsing to `1fr` under
992px. Measured on the export's About page:
1440 2 rows 624 + 624, 32px gap
1200 2 rows 520 + 520
1024 2 rows 432 + 432
992 2 rows 416 + 416
<=991 4 rows full-width single column
Deleting this block drops us straight onto those numbers at every width,
because the base cols-2 grid and the max-991 collapse already match the
export rule-for-rule. No replacement rule is needed.
NOT changed here, deliberately: the `--head` max-width/gap/margin-bottom
above (800 / 48 / 56) also come from 10773:71618 and also disagree with the
export (980 / 24 / 48). That is a desktop-appearance question, not the
responsiveness bug this ticket is about, so it is left for a human call
rather than swept in. Same for the 16px item text, which is entangled with
the export's disputed global `p { font-size: 1.0625rem !important }`. */
/* Accent colours — BAR style (no fill, left colour bar; e.g. Core Values) */
.content-features--cards-bar .content-features__item {
padding: 0.25rem 0 0.25rem 1.5rem;
border-left: 4px solid var(--color-pine-glade, #b9c789);
color: var(--color-blue-zodiac, #0e1b44);
}
.content-features--cards-bar .content-features__item--sage { border-left-color: var(--color-pine-glade, #b9c789); }
.content-features--cards-bar .content-features__item--teal { border-left-color: var(--color-surfie-green, #0f7e7c); }
.content-features--cards-bar .content-features__item--gold { border-left-color: var(--color-selective-yellow, #f0b200); }
.content-features--cards-bar .content-features__item--navy { border-left-color: var(--color-blue-zodiac, #0e1b44); }
.content-features--bg-navy.content-features--cards-bar .content-features__item { color: var(--color-white, #fff); }
/* BugZap #62 - 1.95rem (31.2px), not 3rem (48px). Measured on the export's
Services 2x2: icon box 31.20x31.20, grid track `31.1953px 524.805px`. The
image fills the box rather than carrying its own fixed size, and pins to
the top-left so a non-square glyph sits on the heading baseline. */
.content-features__icon { display: inline-flex; flex-shrink: 0; width: 1.95rem; height: 1.95rem; align-self: start; align-items: flex-start; justify-content: flex-start; }
.content-features__icon img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: left top; }
.content-features__item-heading {
font-family: var(--font-family-heading);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.01em;
color: inherit;
margin: 0;
}
.content-features__item-text {
font-family: var(--font-family-base);
font-weight: 400;
/* Figma card body: Barlow 20px / 1.5 (10774:79067) — was 18px, which
shifted every line's wrap point vs the frames. */
font-size: 1.25rem;
line-height: 1.5;
color: inherit;
margin: 0;
}
/* Per-card "Learn more →" link (Insights "Resources" cards). Figma shows it
navy on both teal and sage fills. */
.content-features__item-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.75rem;
font-family: var(--font-family-base);
font-weight: 700;
font-size: 1.125rem;
line-height: 1.5;
color: var(--color-blue-zodiac, #0e1b44);
text-decoration: none;
}
.content-features__item-link:hover,
.content-features__item-link:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
}
.content-features__item-link-icon { flex: 0 0 auto; }
/* Keep the link legible if a card ever uses the navy fill. */
.content-features--cards-filled .content-features__item--navy .content-features__item-link {
color: var(--color-white, #fff);
}
/* Centred card content — Figma "Resources" grid (title, text, link centred). */
.content-features--center-cards .content-features__item {
text-align: center;
align-items: center;
}
/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
.content-features { padding: 5rem 2rem; }
.content-features__grid { flex-direction: column; gap: 3.5rem; }
.content-features--img-right .content-features__grid { flex-direction: column; }
.content-features__content,
.content-features__media,
.content-features__list { flex: 1 1 auto; width: 100%; }
/* BugZap #82 - the media column is a direct grid child in the
split-with-photo layout, so it has to stack full width too. */
.content-features--cols-2 .content-features__list,
.content-features--cols-3 .content-features__list,
.content-features--cols-4 .content-features__list { grid-template-columns: 1fr; }
}
@media (min-width: 576px) and (max-width: 991px) {
.content-features--cols-3 .content-features__list,
.content-features--cols-4 .content-features__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
.content-features { padding: 4rem 1.5rem; }
/* BugZap #62 - 1.25rem (20px), not 1.75rem (28px). The old value pulled
the then-40px base DOWN to 28px; with the base now 24px it would push
padding UP on the narrowest screens. Confirmed against the export's own
cascade: `@media (max-width: 575px) .content-features--cards-filled
.content-features__item { padding: 1.25rem }`. */
.content-features--cards-filled .content-features__item { padding: 1.25rem; }
}
/* ---- Icon beside the heading (Services four-core cards, Figma 10773:67538):
icon and heading share the top row, body text spans the full card. ---- */
.content-features--icon-beside .content-features__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1.25rem;
row-gap: 1rem;
/* BugZap #62 - `start`, matching the export verbatim:
`.content-features--icon-beside .content-features__item { display:grid;
grid-template-columns:auto 1fr; gap:1rem 1.25rem; align-items:start }`.
These two rules are the ONLY icon-beside rules the export carries. */
align-items: start;
}
.content-features--icon-beside .content-features__item-text,
.content-features--icon-beside .content-features__item-link {
grid-column: 1 / -1;
}
/* ---- Icon rails the text column (focus-page 2x2, Figma 10774:79054):
48px icon on the left, heading + body stacked to its right. ---- */
.content-features--icon-rail .content-features__item {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 1.25rem;
row-gap: 1rem;
align-items: start;
}
.content-features--icon-rail .content-features__icon {
grid-row: 1 / span 2;
align-self: start;
/* No icon size here on purpose. The 48px figure comes from the superseded
Figma frame 10774:79054, not from the Agentis design export. The export authors
exactly three --icon-rail rules and none of them sizes the icon:
.content-features--icon-rail .content-features__item
{ display:grid; grid-template-columns:auto 1fr;
gap:1rem 1.25rem; align-items:start }
.content-features--icon-rail .content-features__icon
{ grid-row:1 / span 2; align-self:start }
.content-features--icon-rail .content-features__item-text
{ grid-column:2 }
The icon falls through to the global filled-card treatment. Measured on
the export at 1759px:
/public-affairs-policy/ pad 24px track 31.1953px 524.805px
row-gap 16px icon 31.2x31.2
/lifestyle-wellness/ identical
Pinning 3rem here forces a 48px track and breaks both focus pages. */
}
.content-features--icon-rail .content-features__item-text {
grid-column: 2;
}
/* Item text renders paragraphs (blank line between them per Figma 2x2 cards). */
.content-features__item-text p { margin: 0; }
.content-features__item-text p + p { margin-top: 1.5em; }
/* Filled cards use the design's icon-left layout (Figma 10773:67759): 48px
icon column, heading beside the icon, body text aligned under the HEADING
(indented past the icon), not full-width under it. */
.content-features--cards-filled.content-features--cols-2 .content-features__item:has(.content-features__icon) {
display: grid;
/* BugZap #62 - `auto` lets the column track follow the icon box (now
1.95rem) instead of pinning it at the old 48px. Export track measures
31.1953px 524.805px; row-gap is 16px there, not 20px. */
grid-template-columns: auto 1fr;
column-gap: 1.25rem; /* 20px */
row-gap: 1rem; /* 16px */
align-items: start;
/* BugZap #233, and the other half of #208. `align-items` only tops each
item inside its row - it does not stop the ROWS themselves stretching.
The outer list grid equalises card heights, so a card whose body text is
shorter than its row-mate's carries free space, and grid hands that
slack to the auto rows in equal shares. Measured on /services/ at 1440:
the sage "Speaking Engagement Support" card needed 36+16+108.8 = 160.8
against its teal row-mate's 188, and the 27.2px surplus split 13.6/13.6,
inflating row 1 to 49.6px and starting the body copy 14px below the
neighbour's. Icons and headings were identical throughout, which is why
#208's `align-self` looked correct and this still read as misaligned.
`start` keeps both rows content-sized and leaves the slack at the card
foot. Also fixes the same 13px split on /focus-areas/business/. Safe to
unpin: no card matching this selector carries an item-link. */
align-content: start;
}
.content-features--cards-filled.content-features--cols-2 .content-features__item:has(.content-features__icon) .content-features__icon {
grid-column: 1;
grid-row: 1;
}
.content-features--cards-filled.content-features--cols-2 .content-features__item:has(.content-features__icon) .content-features__item-heading {
grid-column: 2;
grid-row: 1;
/* BugZap #208. This was `center`, which only looks right when the heading
fills the row. Grid row 1 is sized by the tallest heading across the
pair, so a one-line heading sitting next to a two-line one got centred
in a taller row and dropped below the icon: measured on /services/ at
1308px, row 54px, heading 36px, so both sage cards started 9px and 7px
lower than their icons while the two-line teal cards looked correct.
`start` matches .content-features__icon, which already uses it. */
align-self: start;
}
.content-features--cards-filled.content-features--cols-2 .content-features__item:has(.content-features__icon) .content-features__item-text,
.content-features--cards-filled.content-features--cols-2 .content-features__item:has(.content-features__icon) .content-features__item-link {
grid-column: 2;
}
/* ---- Focus-page 2x2 cards (icon-rail + cards-filled) -----------------------
The hand-placed geometry that used to live here is deleted on purpose. It
set the head to an 80px bottom margin and, above 861px, a 61px list gutter
with 310px-tall cards - every one of those numbers came from the superseded
Figma frame 10774:79054, not from the Agentis design export.
The export authors exactly three `--icon-rail` rules and all three are
layout-only: the item grid (`auto 1fr` / `gap: 1rem 1.25rem`), the icon's
`grid-row: 1 / span 2`, and the text's `grid-column: 2`. Head spacing, list
gutter and card height all fall through to the shared stacked/list values.
Measured on the export at 1759px, both focus pages
(/public-affairs-policy/ and /lifestyle-wellness/):
head_mb 48px list_gap 32px gtc 624px 624px
card 624.0 x 208.8 min-height auto
Our 80/61/310 rendered instead:
head_mb 80px list_gap 61px gtc 609.5px 609.5px
card 609.5 x 310.0 min-height 310px
The arithmetic confirms the gutter is the whole story: (1280-32)/2 = 624 and
(1280-61)/2 = 609.5, which then drags the icon-beside text track from
524.805px down to 510.305px. Restoring the export values fixes all of it. */
/* ---- Insights "Resources" (stacked halign-left + cards-filled) --------------
No override. The 3rem head gap and 112px bottom margin that used to sit here
were read off the Figma frame; the export authors no halign-left/cards-filled
head rule at all, so both values fall through to the stacked base. Measured
on the export, insights/index.html:
@1400 / @1100 / @992 / @985 / @800 -> maxw620px mb48px gap24px
i.e. gap 1.5rem and margin-bottom 3rem, exactly the base. */
/* ---- Services 2x2 (icon-beside) -------------------------------------------
BugZap #62. The hand-placed treatment that used to live here is deleted on
purpose. It set the head to 780px / 2.5rem gap / 56px margin and turned the
list into a 600px-wide flex row on a 61px gutter shifted 10px right - all
of it measured off the old Figma frame.
The Agentis design export has NO `--icon-beside` head or list override at all. The
section falls through to the shared rules, and that is what produces the
export's geometry:
head -> `.content-features--stacked .content-features__head`
(820px base; 980px + margin-bottom 48px at >=992 via
figma-layer/figma-desktop-shared.css:330)
list -> `.content-features--cols-2 .content-features__list`
(grid, repeat(2, 1fr), gap 2rem) -> 624px cards in a 1280px
container
Verified by live injection on staging before the edit - every geometry
value matched the export:
head x390 w980, margin-bottom 48px
list x240 w1280, gap 32px, display grid
card w624, padding 24px, track 31.1953px 524.805px, icon 31x31
The parallel `--icon-rail` rules above are a DIFFERENT variant (focus
pages) and are deliberately left alone. */
/* ---- About core values (split + cards-bar): heading -> intro glyph gap 65
(~40 box); intro -> items stays on the 40 box. */
.content-features--split.content-features--cards-bar .content-features__head {
gap: 2.5rem;
margin-bottom: 2rem; /* items landed +8 late at 40 */
}
/* The heading and intro live inside __title, so the per-variant __head gaps
never touched the heading -> intro rhythm. These frames all run ~16px more
than the base between heading and intro. */
.content-features--bg-navy.content-features--cards-filled .content-features__title .content-features__text,
.content-features--stacked.content-features--halign-left.content-features--cards-filled .content-features__title .content-features__text,
.content-features--icon-beside .content-features__title .content-features__text,
.content-features--split.content-features--cards-bar .content-features__title .content-features__text {
margin-top: 1rem;
}
/* Home 308 (bg-navy cols-4): frame card copy is 16px/1.5 (cards ran 122px
tall at 20px) and the intro -> cards gap is ~64. */
.content-features--bg-navy.content-features--cards-filled.content-features--cols-4 .content-features__item-text {
font-size: 1rem;
}
.content-features--bg-navy.content-features--cards-filled.content-features--cols-4.content-features--stacked .content-features__head {
margin-bottom: 4rem;
}
/* ---- BugZap #82 - About "Core Values" (split + cards-bar): full-width
intro band above a photo | values row -----------------------------------
Christine, verbatim:
"intro text - change container to full width
Let's do photo (left) 2/3 width, text 1/3 width)"
What used to be here came from the superseded Figma frame: it kept the
heading inside the left column, pushed the value list down 210px so its
first row lined up with the top of the photo, and locked the photo to
600x760. The Agentis design export drops all of that. The title is its own
full-width band above the grid (see content-features.php), and the grid
below it is photo | values on a 48px gutter with the items flush to the
top of their column.
Measured on the export at viewport 1759:
title 1280 wide, 40px of space beneath it, 16px heading -> intro
grid gap 48, align-items stretch
media 768x768 (aspect-ratio 1/1, margin-top 8)
list 464 wide, 48px gap, no min-height on the rows
item padding 2px 0 2px 32px, 10px colour bar, 12px heading -> text
ONE DELIBERATE DEVIATION FROM THE EXPORT. The export's 768px photo is not
an authored width: its media column is `flex: 0 0 auto`, so 768 is simply
the intrinsic width of the about_coreval-768x1024.jpg upload showing
through, which makes the real split 60/40 and would move again the moment
the asset is re-cropped. Christine asked for 2/3 - 1/3, so the columns get
explicit flex ratios instead: 821 / 411 of the 1232 available inside the
1280 inner. That is 53px wider than the export renders and it is stable
against asset changes. Flagged in the ticket for Christine to confirm.
TYPE. The old block forced 36px item headings and 24px item copy. The
36px never actually applied - our shared H4 card rule (--h4-card-size,
!important) already renders these at 28px, exactly as the export does, so
that override was dead code and is gone. The 24px copy is kept and simply
re-scoped to --cards-bar, matching the export's own authored rule
(.content-features--cards-bar .content-features__item-text at >=992). The
export only *renders* 17px there because of a blanket
`p { font-size: 1.0625rem !important }` in its global typography layer,
which overrides its own block rule site-wide; that is an artifact of the
export, not a design decision, and #82 says nothing about type.
Scope note: `content-features--cards-bar` appears on exactly one section
site-wide (the /about/ Core Values block) - verified by fetching all 11
templates on staging - so the --cards-bar-scoped rules below cannot reach
anything else. */
.content-features--split.content-features--cards-bar .content-features__head--full {
max-width: none;
margin: 0 0 2.5rem; /* 40px below the band, per the export */
}
/* Export runs a 16px heading -> intro gap on this band; ours carried 24px of
flex gap plus the shared 16px margin-top from the rule further up. */
.content-features--split.content-features--cards-bar .content-features__head--full .content-features__title {
gap: 1rem;
}
.content-features--split.content-features--cards-bar .content-features__head--full .content-features__title .content-features__text {
margin-top: 0;
}
@media (min-width: 992px) {
.content-features--split.content-features--cards-bar .content-features__grid {
gap: 3rem; /* 48px, was 80 */
align-items: stretch; /* photo runs the height of the values column */
}
/* Christine's 2/3 photo, 1/3 text. */
.content-features--split.content-features--cards-bar .content-features__media {
flex: 2 1 0;
min-width: 0;
margin-top: 0.5rem; /* export: 8px */
/* No aspect-ratio: the grid's align-items: stretch (also from the
export) runs the photo to the height of the values column, and a
stretched flex item ignores aspect-ratio anyway. The export's
.is-square reads as a square only because its copy is small enough
for the list to come in shorter than the photo. */
}
.content-features--split.content-features--cards-bar .content-features__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content-features--split.content-features--cards-bar .content-features__list {
flex: 1 1 0;
margin-top: 0; /* was 210 - the title no longer sits beside the list */
gap: 3rem; /* 48px, was 41 */
}
/* Export bar items: wider colour rule, deeper indent, tighter padding.
min-height is gone - the rows size to their own copy. */
.content-features--cards-bar .content-features__item {
padding: 0.25rem 0 0.25rem 2rem;
border-left-width: 10px;
}
/* Rows size to their own copy now that the list starts at the top. */
.content-features--split.content-features--cards-bar .content-features__item {
min-height: 0;
}
/* Export: .content-features--cards-bar .content-features__item-text
{ font-size: 24px; line-height: 1.5 } - base block copy is 20px. */
.content-features--cards-bar .content-features__item-text {
font-size: 1.5rem;
line-height: 1.5;
}
}
/* BugZap #62 - the Services 2x2 rhythm compensation that used to live here is
deleted. It nudged row 2 up 15px and pulled the CTA up 32px to absorb card
heights that overran the old hand-placed 600px flex layout. That layout is
gone (see the icon-beside note above), the cards are now a real 2-column
grid whose rows size themselves, and the export carries no nth-child or
actions compensation of any kind - its only icon-beside rules are the two
reproduced in the comment above. */
/* ---- Compact vertical rhythm (--compact) ----------------------------------
BugZap #70. Ported verbatim from the Agentis design export's stylesheet bundle.
Shrinks the section padding and every gap in the stack by roughly a third;
the two breakpoint steps below are the export's own, not interpolated. */
.content-features--compact {
padding-top: 4rem;
padding-bottom: 4rem;
}
.content-features--compact .content-features__grid {
gap: 3rem;
}
.content-features--compact .content-features__content {
gap: 1.5rem;
}
.content-features--compact .content-features__title {
gap: 1rem;
}
.content-features--compact .content-features__list {
gap: 1rem;
}
.content-features--compact .content-features__item {
gap: 0.5rem;
}
.content-features--compact.content-features--cards-bar .content-features__item {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.content-features--compact .content-features__item-heading {
line-height: 1.25;
}
.content-features--compact .content-features__item-text {
line-height: 1.45;
}
@media (max-width: 991px) {
.content-features--compact {
padding-top: 3rem;
padding-bottom: 3rem;
}
.content-features--compact .content-features__grid {
gap: 2rem;
}
}
@media (max-width: 575px) {
.content-features--compact {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
/* ==========================================================================
BugZap: "about us page still doesn't seem like it was updated" (Meeky, #mm
2026-08-04 13:37:38 MDT). It had not been. Measured /about/ at 1440 against
/designs/v1-original/about/ and the "Our Core Values" section came in at
1517px tall against the reference's 1145px.
IMPORTANT measuring note for whoever repeats this: the reference's images
are `loading="lazy"` and the probe iframe is parked off-screen, so on a
first pass every photo reports naturalWidth 0 and the media column collapses
to 0px - which makes the section look 830px tall and the whole comparison
worthless. Force `loading="eager"` and re-set each `src` inside the iframe,
wait, then measure. The numbers below are all post-load.
reference ours (before)
section 1145 1517
grid 1280 x 776 1280 x 1103
media 768 x 768 821 x 1095
list 464 x 651 411 x 1103
Two separate causes.
1. The 1095px photo. Our media has no aspect ratio, so under the grid's
`align-items: stretch` the `![]()
` at `width:100%; height:100%` resolves
its height against an auto-height parent - which means "auto" - and lays
out at its intrinsic 768x1024 ratio: 821 wide becomes 1095 tall. The
photo then drives the grid, and the grid drives the section.
The reference does not hit this because its media element carries a
literal `is-square` class with an explicit `aspect-ratio: 1 / 1` and
`overflow: hidden`, so the box is square and `object-fit: cover` crops
the 3:4 asset into it.
This corrects the comment further up this file, which claimed the
reference "reads as a square only because its copy is small enough for
the list to come in shorter than the photo". That was inference from
geometry and it was wrong - the square is declared. Rule read straight
off the reference bundle:
.content-features__media.is-square { aspect-ratio: 1/1; overflow: hidden;
flex: 0 0 auto; min-height: auto; max-width: 100% }
2. The 1103px list. The reference sets `align-self: flex-start` on the list
via --media-match-list, so it sizes to its own copy instead of stretching
to the photo.
WIDTH IS DELIBERATELY NOT CHANGED HERE. The reference's photo is 768px
because `flex: 0 0 auto` hands the column the asset's own intrinsic width -
whatever file happens to be uploaded sets the layout. Ours is 821px because
#82 implements Christine's "photo (left) 2/3 width, text 1/3 width" as
`flex: 2 1 0` against the 1232 available. Those are different intents, not a
bug, and the 821-vs-768 question is already open with Christine. Squaring
the box takes the section from 1517 to about 1190 against the reference's
1145; the ~45px that remains IS the 53px width difference and will close by
itself whichever way Christine answers.
========================================================================== */
/* Same selector the reference uses, so if the template ever emits `is-square`
on the media element it just works. */
.content-features__media.is-square,
.content-features--media-square .content-features__media {
aspect-ratio: 1 / 1;
overflow: hidden;
min-height: auto;
max-width: 100%;
/* The grid is `align-items: stretch`, which resolves the media's cross size
before `aspect-ratio` gets a say - so without this the square is inert
whenever the list column is taller than the photo is wide. In the
reference the photo (768) happens to be the taller of the two, so stretch
never bites there; our list runs to 920 against an 821 photo, so it does.
Pinning the media to the start of the row is what makes the two render
the same way regardless of which column wins. */
align-self: flex-start;
}
.content-features__media.is-square img,
.content-features--media-square .content-features__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
@media (max-width: 991px) {
/* Reference ships this as `:has(.content-features__media.is-square)`. The
modifier form below needs no :has and covers the same case for us. */
.content-features--media-square .content-features__grid {
align-items: center;
}
}
/* --media-match-list: the list sizes to its own copy rather than stretching to
the photo. Ported from the reference; the parts of its rule set that target
.content-features__content are dropped because our --split branch has no
such wrapper - media and list are direct siblings in the grid. */
.content-features--media-match-list.content-features--split.content-features--cards-bar .content-features__grid {
align-items: stretch;
}
.content-features--media-match-list .content-features__list {
align-self: flex-start;
}
.content-features--media-match-list .content-features__media {
min-height: 0;
overflow: hidden;
}
@media (max-width: 767px) {
.content-features--media-match-list .content-features__media img {
height: auto;
}
}
/* ---------------------------------------------------------------------------
BODY COPY SIZE — Christine, 2026-08-05: "please follow font sizing of Agentis design".
The Agentis design export sets `p { font-size: 1.0625rem !important }` globally in
main.css. Measured against the deployed export: /about/ renders 42 of 44
main-content paragraphs at 17px / 1.6, /services/ renders 21 of 26 the same.
Every font-size on these classes above this line came from Figma frames the
export supersedes (24px / 20px / 18px / 16px variants), so per the standing
"export beats superseded Figma" rule they all lose.
!important is required: the sizes being replaced live on modifier rules with
higher specificity (e.g. .content-list--chapter, .content-features--cards-bar).
The export wins the same way, so this mirrors the reference implementation.
Deliberately NOT flattened, because the export does not flatten them either:
- display paragraphs (the export keeps 22px and 32px instances)
- eyebrow / meta text at 12-13px
- .block-team__role / __joined / __modal-role, which render 14px here. The
export only shows those at 17px because its rule is blanket; Christine
confirmed the 4- and 5-column team grids stay as built, and reflowing
those labels would work against that. Left alone on purpose.
Headings were verified already correct and are untouched: /about/ h1-h4 match
the export exactly at 80/52/28/20px, all weight 400.
TRACKING (added 2026-08-05, same ruling, widened by Matt to "all font sizing
including letter spacing etc."): the export sets -0.015em on body copy -
measured at 17px / letter-spacing -0.255px on both /about/ and Home. We had
none.
Font-weight is deliberately NOT changed here. The export runs body copy at
300 where we run 400, but resolves `bolder` relative to its parent,
so dropping the wrapper to 300 would quietly demote every bold run inside
body copy from 700 to 400. That needs its own pass with explicit strong/b
weights. Measured and flagged, not applied.
--------------------------------------------------------------------------- */
.content-features__text > p,
.content-features__item-text > p {
font-size: 1.0625rem !important;
line-height: 1.6 !important;
letter-spacing: -0.015em !important;
}