/* =========================================================================
Intenteon — "Warm Editorial" SHARED FOUNDATION (warm.css)
=========================================================================
WHAT THIS IS
------------
A shared, OPT-IN token + base + component foundation extracted and
generalized from the shipped homepage stylesheet (site/css/home.css).
It is the single source of truth for the "Warm Editorial" look that the
upcoming page ports consume: Who We Are, What We Do, Solutions hub,
Forge, and VeriAction.
USAGE CONTRACT (the ports MUST follow this exactly)
----------------------------------------------------
1. Add the opt-in body class:
2. Link this file AFTER styles.css so its .warm-scoped rules win where
they intentionally override shared components:
3. Every selector here is scoped under the `.warm` root class. A page
that does NOT set class="warm" gets ZERO rules from this file — so
the homepage (which uses its own `.home` scope) and the 21 unmigrated
navy pages are provably untouched. `.warm` and `.home` never collide.
4. Always set width & height attributes on ![]()
so the browser reserves
space via aspect-ratio (CLS<0.1); wrap constrained media in .we-media.
SURFACE MODEL
-------------
A single LIGHT editorial canvas (warm ivory). Interactive blue is
ground-dependent per brand canon (CANON-v1 §8, decision D2). #256199 is a
sanctioned canon color, formally blessed as the deep-ground interactive
variant (GH #78, ratified 2026-07-20):
- #2C6FAA (--blue) interactive/text on LIGHT grounds — passes AA
- #256199 (--blue-deep) interactive/text on the deeper ivory ground
#F1EBDF — 5.45:1, passes AA
- #4DA6E0 (--blue-light) DECORATION on DARK grounds ONLY. Fails AA on
light — never a text/interactive color on light.
No external network requests: body/UI font is the site's self-hosted
"Inter" (see styles.css @font-face); display headings use a system serif
stack. Nothing is @import-ed and no remote url() is referenced.
========================================================================= */
/* =========================================================================
1. TOKENS (canon v1 §8 — copied verbatim from home.css :root)
========================================================================= */
.warm {
--paper: #F7F4EE;
--paper-deep: #F1EBDF;
--card: #FBF9F4;
--ink: #0C1C2E;
--ink-soft: #1A3555;
--blue: #2C6FAA; /* interactive on LIGHT grounds only (AA) */
--blue-deep: #256199; /* interactive/text on the deeper ivory ground */
--blue-light: #4DA6E0; /* decoration/accent on DARK grounds only */
--hair: #E4DDCE;
--hair-strong: #D8CFBC;
--muted: #6B6154;
--we-serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
--we-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--we-edge: clamp(1.25rem, 5vw, 5.5rem);
--we-maxw: 1200px;
/* Long-form article reading layout (see §12 ARTICLE / EDITORIAL) */
--we-measure: 46rem; /* unified article column — generous reading width */
}
/* =========================================================================
2. BASE — canvas, box-sizing, resets, base typography
-------------------------------------------------------------------------
Force the warm ivory canvas even under prefers-color-scheme: dark, so a
warm page never half-flips to dark (mirrors how home.css pins the ivory
surface). The rest of the site remains dark-mode aware; only .warm pages
are pinned light.
========================================================================= */
body.warm {
background: var(--paper);
color: var(--ink);
font-family: var(--we-sans);
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
/* Content root wrapper. Ports may wrap page content in .we-root, but every
base rule below also applies directly under body.warm so it is optional. */
.warm .we-root {
background: var(--paper);
color: var(--ink);
font-family: var(--we-sans);
line-height: 1.6;
font-size: 17px;
-webkit-font-smoothing: antialiased;
}
.warm .we-root,
.warm .we-root *,
.warm .we-root *::before,
.warm .we-root *::after { box-sizing: border-box; }
.warm .we-root p { margin: 0; }
.warm .we-root h1,
.warm .we-root h2,
.warm .we-root h3 { margin: 0; font-weight: 500; }
/* :where() keeps this reset at (0,2,1) so the later .we-prose a / .we-root p a
link rules win by source order; class-bearing anchors (buttons, .we-link)
still escape via the :not([class]) match-exclusion. */
.warm .we-root a:where(:not([class])) { color: inherit; text-decoration: none; }
.warm .we-root img,
.warm .we-root svg { max-width: 100%; height: auto; }
/* CLS-safe media wrapper. Ports should wrap constrained/hero imagery in
.we-media and set width & height attributes on the ![]()
so the browser
reserves space via the intrinsic aspect-ratio (keeps CLS < 0.1). */
.warm .we-media { display: block; }
.warm .we-media img { display: block; width: 100%; height: auto; }
/* Nav wordmark: warm pages pin the LIGHT ivory canvas even under
prefers-color-scheme: dark, so they must keep the LIGHT wordmark (#2c6faa
accent). Otherwise styles.css's dark-mode rule swaps in the #4da6e0 dark
wordmark on a light ground — a canon §8 violation (light-blue on light).
Higher specificity than the .nav-logo-* base rules, so it wins in both modes. */
.warm .nav-logo-light { display: block; }
.warm .nav-logo-dark { display: none; }
/* =========================================================================
3. TYPOGRAPHY — serif display headings, sans body, eyebrow, links
========================================================================= */
/* Serif display headings. Use the semantic tag OR the utility class. */
.warm .we-h1,
.warm .we-root h1 {
font-family: var(--we-serif);
font-weight: 500;
font-size: clamp(2.6rem, 6.5vw, 4.6rem);
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--ink);
text-wrap: balance;
}
.warm .we-h2,
.warm .we-root h2 {
font-family: var(--we-serif);
font-weight: 500;
font-size: clamp(2rem, 4.4vw, 3.15rem);
line-height: 1.06;
letter-spacing: -0.015em;
color: var(--ink);
text-wrap: balance;
}
.warm .we-h3,
.warm .we-root h3 {
font-family: var(--we-serif);
font-weight: 500;
font-size: clamp(1.35rem, 2.6vw, 1.7rem);
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ink);
text-wrap: balance;
}
/* Kerning polish limited to the large serif display type only. Kept OFF the
page root (body.warm / .we-root) so optimizeLegibility never gates body-text
paint / LCP; the small win is worth it only on these few large headings. */
.warm .we-h1,
.warm .we-h2,
.warm .we-h3,
.warm .we-belief blockquote { text-rendering: optimizeLegibility; }
/* Italic emphasis inside serif headings (the homepage "we-em" treatment) */
.warm .we-em { font-style: italic; color: var(--ink-soft); }
/* Body copy helper */
.warm .we-lead {
font-family: var(--we-sans);
font-size: clamp(1.05rem, 1.7vw, 1.28rem);
line-height: 1.6;
color: var(--muted);
max-width: 54ch;
}
.warm .we-prose {
font-family: var(--we-sans);
color: var(--muted);
font-size: 1rem;
line-height: 1.65;
max-width: 66ch;
}
/* Eyebrow / overline label (uppercase, tracked) */
.warm .we-kicker,
.warm .we-eyebrow {
font-family: var(--we-sans);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
/* Warm link style — AA-safe #2C6FAA on light, with the underline affordance
the homepage uses. On the deeper ivory ground use --blue-deep (see §7). */
.warm .we-link {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.warm .we-link:hover { text-decoration-thickness: 2px; }
/* In-prose contextual links inside body copy */
.warm .we-prose a,
.warm .we-root p a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 2px;
}
.warm .we-prose a:hover,
.warm .we-root p a:hover { text-decoration-thickness: 2px; }
/* =========================================================================
4. LAYOUT — page container, section rhythm, dividers
========================================================================= */
.warm .we-wrap {
max-width: var(--we-maxw);
margin-inline: auto;
padding-inline: var(--we-edge);
width: 100%;
}
/* Section vertical rhythm */
.warm .we-section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.warm .we-section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
/* Deeper ivory ground section. Blue text/links inside must use --blue-deep
for AA contrast against the deeper ground (see §7). */
.warm .we-section-deep { background: var(--paper-deep); }
/* Section heading block */
.warm .we-section-head { max-width: 46ch; }
.warm .we-section-head .we-h2,
.warm .we-section-head h2 { margin-top: 0.9rem; }
/* Hairline divider */
.warm .we-hairline,
.warm .we-divider {
border: 0;
border-top: 1px solid var(--hair);
margin: 0;
}
/* =========================================================================
5. BUTTONS — solid primary + ghost/secondary, arrow affordance
========================================================================= */
.warm .we-btn {
display: inline-flex;
align-items: center;
gap: 0.55em;
font-family: var(--we-sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
padding: 0.85em 1.5em;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
/* Solid primary — --blue with #fff text passes AA (4.5:1+) */
.warm .we-btn-primary {
background: var(--blue);
color: #fff;
border-color: var(--blue);
}
.warm .we-btn-primary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
/* Ghost / secondary — #8F7D5F is the resting border. It clears the WCAG 1.4.11
>=3:1 non-text bar on ALL three ivory grounds (paper #F7F4EE 3.63:1, card
#FBF9F4 3.79:1, deep #F1EBDF 3.36:1). #9A8A6B (GH #78's first suggestion) was
measured at only 2.84:1 on the deep ground, so we went one step darker to keep
the boundary real everywhere a ghost button can land. Kept in sync with home.css. */
.warm .we-btn-ghost {
background: transparent;
color: var(--ink);
border-color: #8F7D5F;
}
.warm .we-btn-ghost:hover { border-color: var(--ink); }
/* Arrow nudge affordance */
.warm .we-btn .we-arrow { transition: transform .2s ease; }
.warm .we-btn:hover .we-arrow { transform: translateX(3px); }
/* Inline "link with arrow" affordance (card/section footers) */
.warm .we-arrow-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
font-family: var(--we-sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
}
.warm .we-arrow-link .we-arrow { transition: transform .2s ease; }
.warm .we-arrow-link:hover { color: var(--blue); }
.warm .we-arrow-link:hover .we-arrow { transform: translateX(4px); }
/* =========================================================================
6. GRID UTILITIES — responsive n-up grids for hub pages
========================================================================= */
.warm .we-grid {
display: grid;
gap: 1.25rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.warm .we-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.warm .we-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* =========================================================================
7. CARDS — editorial cards (var(--card) + hairline borders) + hairline
pillar grid. Two families:
.we-card standalone card (shadow lift on hover)
.we-pillars-grid / .we-pillar seamless hairline grid of cards
========================================================================= */
/* --- standalone card --- */
.warm .we-card {
background: var(--card);
border: 1px solid var(--hair);
border-radius: 16px;
padding: clamp(1.6rem, 2.6vw, 2.1rem);
display: flex;
flex-direction: column;
min-height: 100%;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.warm .we-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 44px -32px rgba(12, 28, 46, 0.4);
border-color: var(--hair-strong);
}
.warm .we-card-name {
font-family: var(--we-serif);
font-size: 1.5rem;
letter-spacing: -0.01em;
color: var(--ink);
}
.warm .we-card-tag {
margin-top: 0.5rem;
font-family: var(--we-serif);
font-style: italic;
font-size: 1.02rem;
color: var(--blue);
}
.warm .we-card-desc {
margin-top: 1rem;
color: var(--muted);
font-size: 0.96rem;
line-height: 1.6;
flex: 1;
}
.warm .we-card-link {
margin-top: 1.6rem;
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink-soft);
align-self: flex-start;
text-decoration: none;
}
.warm .we-card-link .we-arrow { transition: transform .2s ease; }
.warm .we-card:hover .we-card-link { color: var(--blue); }
.warm .we-card:hover .we-card-link .we-arrow { transform: translateX(4px); }
/* --- hairline pillar grid (seamless 1px-gutter cards) --- */
.warm .we-pillars-grid {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: var(--hair);
border: 1px solid var(--hair);
border-radius: 14px;
overflow: hidden;
}
.warm .we-pillars-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.warm .we-pillar {
background: var(--paper);
padding: clamp(1.75rem, 3vw, 2.6rem);
display: flex;
flex-direction: column;
gap: 0.7rem;
transition: background-color .25s ease;
}
.warm .we-pillar:hover { background: var(--card); }
.warm .we-pillar-idx {
font-family: var(--we-serif);
font-style: italic;
font-size: 1rem;
color: var(--blue);
}
.warm .we-pillar h3,
.warm .we-pillar .we-h3 {
font-family: var(--we-serif);
font-size: 1.4rem;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
}
.warm .we-pillar p {
color: var(--muted);
font-size: 0.98rem;
line-height: 1.6;
}
/* Cards on the deeper (paper-deep) ground read against a matching surface,
and blue text/links switch to --blue-deep for AA on the deeper ground. */
.warm .we-section-deep .we-pillars-grid {
background: var(--hair-strong);
border-color: var(--hair-strong);
}
.warm .we-section-deep .we-pillar { background: var(--paper-deep); }
.warm .we-section-deep .we-pillar:hover { background: var(--card); }
.warm .we-section-deep .we-card-tag,
.warm .we-section-deep .we-link,
.warm .we-section-deep .we-pillar-idx,
.warm .we-section-deep .we-prose a { color: var(--blue-deep); }
/* =========================================================================
8. BELIEF BAND — signature navy (dark ground) section pattern.
On this DARK ground, --blue-light is allowed as decoration/accent.
========================================================================= */
.warm .we-belief {
background: var(--ink);
color: var(--paper);
padding-block: clamp(4.5rem, 11vw, 8.5rem);
position: relative;
}
.warm .we-belief::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(120% 90% at 15% 0%, rgba(44, 111, 170, 0.20), transparent 55%),
radial-gradient(90% 80% at 100% 100%, rgba(26, 53, 85, 0.55), transparent 60%);
pointer-events: none;
}
.warm .we-belief .we-wrap { position: relative; }
.warm .we-belief-mark {
font-family: var(--we-serif);
font-size: 5rem;
line-height: 0.7;
color: var(--blue-light); /* dark ground — allowed */
opacity: 0.55;
height: 2.4rem;
}
.warm .we-belief blockquote {
margin: 1.4rem 0 0;
font-family: var(--we-serif);
font-weight: 500;
font-size: clamp(1.8rem, 4.6vw, 3.4rem);
line-height: 1.18;
letter-spacing: -0.01em;
color: #FBF8F2;
max-width: 20ch;
text-wrap: balance;
}
.warm .we-belief blockquote .we-turn {
display: block;
color: var(--blue-light); /* dark ground — allowed */
font-style: italic;
}
.warm .we-belief cite {
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 2.6rem;
font-style: normal;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(247, 244, 238, 0.62);
}
.warm .we-belief cite::before {
content: "";
width: 42px;
height: 1px;
background: var(--blue-light);
flex: none;
}
/* =========================================================================
9. ACCESSIBILITY — visible focus for keyboard users
========================================================================= */
.warm :focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
/* =========================================================================
10. RESPONSIVE — collapse multi-column grids on narrow viewports
========================================================================= */
@media (max-width: 900px) {
.warm .we-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.warm .we-grid-2 { grid-template-columns: 1fr; }
.warm .we-pillars-grid,
.warm .we-pillars-grid-3 { grid-template-columns: 1fr; }
}
/* =========================================================================
11. REDUCED MOTION — honor prefers-reduced-motion for every helper
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.warm *,
.warm *::before,
.warm *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
/* =========================================================================
12. ARTICLE / EDITORIAL — unified single-column long-form reading layout.
-------------------------------------------------------------------------
ONE centered, left-aligned reading column (.we-article-grid) capped at
--we-measure (~66-70ch). Header, dateline, body, tags, and hero image all
share that same width and left edge — the "spine" — so nothing floats
indented in the middle. --we-measure is the SINGLE SOURCE OF WIDTH TRUTH;
the body sets max-width:none so only the column governs the measure.
(History: an earlier version used a 3-column margin-rail grid that centered
the body inside a wider band — it rendered as a narrow off-center column and
was replaced by this simple centered column. A separate hero-image "breakout"
was also removed after a cascade overflow bug; the image is plain column-width.)
Specificity discipline (the anti-recurrence rule): every selector below is
single-class depth and no rule uses !important, so overrides resolve by
source order at equal specificity.
========================================================================= */
/* --- article column: ONE centered, left-aligned reading column. Header,
dateline, image, body, tags all share this width and left edge (the spine),
so nothing floats indented in the middle. --- */
.warm .we-article-grid {
max-width: var(--we-measure);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 1.75rem); /* small edge safety only — NOT the big --we-edge, which would shrink the measure */
width: 100%;
}
.warm .we-article-grid > * { min-width: 0; }
/* Kill the double section padding between a hero-less header and the body. */
.warm .we-article-bodywrap { padding-top: 0; }
/* Hero image spans the full column width — simple and overflow-proof. (An
earlier wider "breakout" used margin-left:50%/translateX, which a later
.we-article-media margin reset defeated into a large left overflow; a plain
column-width image cannot overflow, so we keep it.) */
.warm .we-article-full { width: 100%; }
/* --- header: eyebrow + reduced serif title + horizontal dateline --- */
.warm .we-article-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.warm .we-article-kicker { color: var(--blue); }
.warm .we-article-title {
margin-top: 0.9rem;
/* The .we-h1 hero clamp is too big for a full sentence — reduce it so a
long title breaks to 2-3 confident lines instead of ~6 cramped ones. */
font-size: clamp(2rem, 3.4vw, 2.55rem);
line-height: 1.15; /* .we-h1's 1.04 is too tight once a title wraps to multiple lines */
text-wrap: balance;
}
/* Horizontal dateline: a hairline rule under the title carrying kicker-style
meta (date + byline). Disciplined press meta, not a vertical rail. */
.warm .we-article-dateline {
margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
padding-top: 0.85rem;
border-top: 1px solid var(--hair);
font-family: var(--we-sans);
font-size: 0.85rem;
letter-spacing: 0.02em;
color: var(--muted);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5em;
}
.warm .we-article-date { color: var(--muted); }
.warm .we-article-byline { color: var(--ink-soft); font-weight: 600; }
.warm .we-article-dot { color: var(--hair-strong); }
/* --- featured image (spans the column width; .we-article-full = width:100%) --- */
.warm .we-article-media {
margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
border-radius: 14px;
overflow: hidden;
background: var(--paper-deep);
}
.warm .we-article-image {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1200 / 628;
object-fit: cover;
}
/* Optional caption for future use (image credit / context). */
.warm .we-article-caption {
margin-top: 0.6rem;
font-family: var(--we-sans);
font-size: 0.8rem;
color: var(--muted);
}
/* --- body: the grid track governs width; this is long-form prose --- */
.warm .we-article-body {
max-width: none; /* the article column is the width source */
color: var(--ink-soft);
font-size: 1.15rem; /* ~19.5px — comfortable long-form reading scale */
line-height: 1.75;
overflow-wrap: anywhere; /* guard long URLs inside {{.ContentHTML}} */
}
/* Serif lede — first paragraph in serif is the premium editorial tell.
CSS-only, no drop cap. Higher specificity than the base rule below. */
.warm .we-article-body > p:first-of-type {
font-family: var(--we-serif);
font-size: clamp(1.2rem, 2.2vw, 1.45rem);
line-height: 1.55;
color: var(--ink-soft);
}
.warm .we-article-body h2,
.warm .we-article-body h3 {
font-family: var(--we-serif);
color: var(--ink);
line-height: 1.2;
}
.warm .we-article-body h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 2.5rem 0 0.75rem; }
.warm .we-article-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.55rem); margin: 2rem 0 0.6rem; }
.warm .we-article-body p { margin: 0 0 1.15rem; }
.warm .we-article-body ul,
.warm .we-article-body ol { margin: 0 0 1.15rem 1.4rem; }
.warm .we-article-body ul { list-style: disc; }
.warm .we-article-body ol { list-style: decimal; }
.warm .we-article-body li { margin-bottom: 0.45rem; padding-left: 0.35rem; }
.warm .we-article-body li::marker { color: var(--blue); }
.warm .we-article-body blockquote {
margin: 1.75rem 0;
padding: 0.4rem 0 0.4rem 1.4rem;
border-left: 3px solid var(--blue);
font-family: var(--we-serif);
font-style: italic;
font-size: 1.2rem;
color: var(--ink);
}
/* --- tags --- */
.warm .we-article-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: clamp(2rem, 4vw, 2.75rem);
}
.warm .we-article-tag {
display: inline-flex;
align-items: center;
font-family: var(--we-sans);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.35em 0.85em;
border-radius: 999px;
border: 1px solid var(--hair-strong);
background: var(--card);
color: var(--ink-soft);
}
/* --- footer: brand signature eyebrow + back link (works for all article
types — a newsroom mark, not a product-specific claim) --- */
.warm .we-article-back {
margin-top: clamp(2.5rem, 5vw, 3.25rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
border-top: 1px solid var(--hair);
}
.warm .we-article-signature-mark {
display: block;
margin-bottom: 0.6rem;
font-family: var(--we-sans);
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: var(--blue);
}
/* --- CTA action row (shared by the article foot CTA) --- */
.warm .we-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 1.5rem;
}
/* The article foot CTA centers its content so it aligns with the centered
reading column above it (no left-edge jump from article to CTA band). */
.warm .we-article-cta { text-align: center; }
.warm .we-article-cta .we-cta-actions { justify-content: center; }
/* (No responsive breakout rules needed — the single column is fluid via
max-width + padding, and the hero image is always column-width.) */