/* ============================================================================
customer-story.css — Customer Stories hub + individual customer stories
Used by /pages/customer-stories.html and /customer-stories/*.html
These are customer-proof surfaces, so they follow the homepage / product-page
visual language rather than the knowledge-article language: white hero over
the homepage grid background, a two-column hero with a proof panel playing
the role the homepage dashboard plays, alternating white / light-neutral
bands, and the site's blue CTA section at the end.
Almost everything here is layout. Type, colour, spacing, buttons, cards,
pills, section padding and every breakpoint come from main.css.
The hero primitives below (.hero, .hero-veil, .hero-in, .hero-g) and the
metric tiles (.met, .ml, .mv) deliberately carry the SAME class names and
values as homepage.css and erp-product.css. Those files are page-scoped, so
the names cannot be shared from one place; repeating them is the convention
the site already uses, and it means the global responsive rules in main.css
(.hero-g collapsing to one column, .hero padding at each breakpoint) apply
here with no extra media queries. The homepage's dashboard shell (.dash,
.d-bar, .d-dot) is deliberately NOT reused: a customer-proof card must not
look like an application window.
============================================================================ */
/* ── Hero ───────────────────────────────────────────────────────────────────
Identical to the homepage hero: white ground, 48px grid, radial veil that
lifts the copy off the grid on the left. No flat colour band. */
.hero {
position: relative;
padding: 88px 0 80px;
background-color: var(--w);
background-image:
linear-gradient(var(--br) 1px, transparent 1px),
linear-gradient(90deg, var(--br) 1px, transparent 1px);
background-size: 48px 48px;
}
.hero-veil {
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 72% 68% at 28% 50%,
rgba(255, 255, 255, .96) 26%, rgba(255, 255, 255, .72) 58%, transparent 100%);
}
.hero-in { position: relative; z-index: 2; }
.hero-g {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
/* Hub hero is a single centred column — there is no per-story proof panel to
balance against, so the page leads with a centred statement instead. It is
shorter than a story hero (nothing sits beside the heading to fill it) and
its veil is centred rather than weighted left. */
/* The hub hero's bottom padding stacks with the following section's own 88px
top padding, and the two backgrounds are effectively the same, so the pair
read as one gap rather than as two section edges. 60 + 88 + the deck's own
28px bottom margin measured 176px of apparent dead space on desktop.
Reduced here rather than on .sec, which is the site-wide section rhythm and
is used by every page. Restored to 60px at 1023px and below, where the gap
was already correct. */
.hero-hub { padding: 64px 0 20px; }
.hero-hub .hero-veil {
background: radial-gradient(ellipse 62% 78% at 50% 46%,
rgba(255, 255, 255, .97) 30%, rgba(255, 255, 255, .74) 62%, transparent 100%);
}
.cs-hero-c { position: relative; z-index: 2; text-align: center; }
.cs-hero-c .cs-crumb { justify-content: center; }
/* .cs-deck carries a 28px bottom margin to separate it from the .cs-cta-row
beneath it on a story hero. The hub hero has no CTA row — the deck is its
last element — so that margin is dead space here. Hub-only: .cs-hero-c is
used by pages/customer-stories.html and nothing else. */
.cs-hero-c .cs-deck { margin-left: auto; margin-right: auto; margin-bottom: 0; }
/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.cs-crumb {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0 0 18px;
flex-wrap: wrap;
}
.cs-crumb li { display: flex; align-items: center; gap: 8px; }
.cs-crumb a { font-size: 12px; color: var(--t-m); font-weight: 500; transition: color .15s; }
.cs-crumb a:hover { color: var(--b); }
.cs-crumb span[aria-current] { font-size: 12px; color: var(--t-l); font-weight: 500; }
.cs-crumb-sep { color: var(--br); font-size: 12px; }
/* ── Hero copy ──────────────────────────────────────────────────────────── */
.hero .h1, .cs-hero-c .h1 { margin-bottom: 14px; }
/* A story headline is an editorial sentence, not a three-word marketing line,
so it is set at the site's h2 scale rather than the full h1 scale. Only the
two-column story hero is affected; the hub's short "Customer Stories" keeps
the full h1 size. */
.hero-g .h1 { font-size: clamp(27px, 2.9vw, 40px); }
.cs-deck {
font-size: 16px;
line-height: 1.65;
color: var(--t-m);
max-width: 620px;
margin-bottom: 28px;
}
.cs-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* ── Hero customer-proof card ───────────────────────────────────────────────
Balances the hero the way the homepage dashboard visual does, but carries no
application chrome — no title bar, no window dots. This is customer
evidence, and dressing it as a product screen would misrepresent it.
Built from the site's own card language: white ground, --br border, --r-l
radius, --sh-l lift in the hero, and the same 3px blue top accent that
.cs-note and .cs-quote already use for the page's evidence furniture. */
.cs-pp {
background: var(--w);
border: 1px solid var(--br);
border-top: 3px solid var(--b);
border-radius: 0 0 var(--r-l) var(--r-l);
box-shadow: var(--sh-l);
overflow: hidden;
}
.cs-pp-id { padding: 22px 24px 20px; }
.cs-pp-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 16px;
}
/* Metric tiles sit on the subtle neutral so they read as a group without
needing a coloured header above them. */
.cs-pp-met {
padding: 18px 24px 22px;
background: var(--bg-s);
border-top: 1px solid var(--br);
}
.cs-panel-name {
font-size: 13px;
font-weight: 700;
color: var(--t);
letter-spacing: -.01em;
}
.cs-panel-sub { font-size: 11.5px; color: var(--t-l); font-weight: 500; margin-top: 2px; }
.cs-met-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.met {
background: var(--w);
border-radius: 8px;
padding: 11px 13px;
border: 1px solid var(--br);
min-width: 0;
}
.ml {
font-size: 10px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--t-l);
}
.mv {
font-size: 15px;
font-weight: 800;
color: var(--t);
margin-top: 3px;
letter-spacing: -.025em;
line-height: 1.25;
}
/* ── Approved customer logo ─────────────────────────────────────────────────
Height-constrained with width:auto so the intrinsic aspect ratio survives
whatever the supplied asset's dimensions are; object-fit:contain means that
if a future wider mark made max-width clamp, it letterboxes rather than
squashing. The width/height attributes on the tag give the browser the
ratio up front so nothing shifts as the image loads. Deliberately
restrained — this is an attribution mark, not a banner. The assets carry
their own alpha, so no plate or border is drawn behind them. */
.cs-logo {
display: block;
height: 40px;
width: auto;
max-width: 190px;
object-fit: contain;
object-position: left center;
margin: 0 0 12px;
}
.cs-hub-logo {
display: block;
height: 34px;
width: auto;
max-width: 170px;
object-fit: contain;
object-position: left center;
margin: 0 0 16px;
}
/* ── Section headers, in the homepage idiom ─────────────────────────────── */
.cs-sec-hd { text-align: center; margin-bottom: 48px; }
.cs-sec-hd .body { margin-top: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }
.cs-sec-hd-l { margin-bottom: 36px; }
.cs-sec-hd-l .body { margin-top: 14px; max-width: 720px; }
/* ── Two-column narrative + panel ───────────────────────────────────────── */
.cs-split {
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 48px;
align-items: start;
}
.cs-prose > * + * { margin-top: 16px; }
.cs-prose p { font-size: 16px; line-height: 1.72; color: var(--t-m); }
.cs-prose p strong { color: var(--t); font-weight: 600; }
.cs-prose a { color: var(--b); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cs-prose a:hover { color: var(--b-dk); }
.cs-prose h3 { margin-top: 34px; }
.cs-prose h3:first-child { margin-top: 0; }
.cs-prose ul { margin: 0; padding-left: 20px; }
.cs-prose ul li { font-size: 16px; line-height: 1.72; color: var(--t-m); margin-bottom: 8px; }
.cs-prose ul li::marker { color: var(--b-bd); }
/* ── Customer snapshot card ─────────────────────────────────────────────────
Structured rows rather than a definition-list wall: each row is a small
label above its value, so nothing is squeezed and nothing needs a table. */
.cs-snap {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
overflow: hidden;
}
.cs-snap-hd {
padding: 14px 20px;
border-bottom: 1px solid var(--br);
background: var(--bg-s);
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
}
.cs-snap dl { margin: 0; padding: 4px 20px 18px; }
.cs-snap dt {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--t-l);
margin-top: 16px;
}
.cs-snap dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--t); font-weight: 500; }
/* ── Operating flow: four phases, thirteen numbered stages ──────────────────
Four ordered lists with continuous numbering (start=), so the whole
sequence stays explicit and machine-readable while reading as four
understandable phases. A grid, never a horizontal scroller. */
.cs-phase-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.cs-phase {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r);
box-shadow: var(--sh-xs);
padding: 20px 18px 18px;
min-width: 0;
}
/* Connector between phases. Sits inside the 20px gap, so it can never widen
the grid or create horizontal overflow. Hidden once the grid reflows. */
.cs-phase:not(:last-child)::after {
content: '';
position: absolute;
top: 38px;
right: -14px;
width: 8px;
height: 8px;
border-top: 1.5px solid var(--b-bd);
border-right: 1.5px solid var(--b-bd);
transform: rotate(45deg);
}
/* A story with more phases than fit one row wraps within the same four-column
grid. The connector belongs between cards on a row, so the last card of each
row does not get one. (With four phases the 4th is also :last-child, so this
changes nothing for a four-phase story.) */
.cs-phase-grid > .cs-phase:nth-child(4n)::after { display: none; }
/* Three wider phases instead of four. Used where a story's sequence divides
naturally into three groups, which also keeps each story's signature flow
visually distinguishable from the others. */
.cs-phase-3 { grid-template-columns: repeat(3, 1fr); }
.cs-phase-3 > .cs-phase:nth-child(4n)::after { display: block; }
.cs-phase-3 > .cs-phase:nth-child(3n)::after { display: none; }
.cs-phase-3 > .cs-phase:last-child::after { display: none; }
/* Five narrower phases. Used where the operating story only reads correctly as
five consecutive stages and collapsing any two would hide the handover the
story is about. Same rule as the three-phase modifier: restore the connector
the four-column rule suppressed, then suppress it at this row's own end. */
.cs-phase-5 { grid-template-columns: repeat(5, 1fr); }
.cs-phase-5 > .cs-phase:nth-child(4n)::after { display: block; }
.cs-phase-5 > .cs-phase:nth-child(5n)::after { display: none; }
.cs-phase-5 > .cs-phase:last-child::after { display: none; }
/* Narrower cards need slightly tighter step spacing to stay one screen tall. */
.cs-phase-5 .cs-phase { padding: 18px 15px 16px; }
.cs-phase-5 .cs-phase-steps li { margin-bottom: 11px; padding-left: 28px; }
/* ── Parallel band ───────────────────────────────────────────────────────
A capability that runs alongside the operating chain rather than inside
it. Drawn as one full-width strip under the phases so the reader sees it
as concurrent, not as a sixth stage. Nothing here is ordered, so it is an
unordered list and carries no numbers. */
.cs-along {
margin-top: 20px;
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: var(--r);
padding: 18px 20px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px 22px;
}
.cs-along-k {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
white-space: nowrap;
}
.cs-along-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 7px 18px;
min-width: 0;
}
.cs-along-list li { font-size: 13.5px; line-height: 1.5; color: var(--t-m); }
.cs-phase-h {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--br);
}
.cs-phase-steps { margin: 0; padding: 0; list-style: none; }
.cs-phase-steps li {
position: relative;
padding-left: 30px;
margin-bottom: 14px;
}
.cs-phase-steps li:last-child { margin-bottom: 0; }
/* Number badge drawn from the list's own counter, so the visible number always
equals the semantic position in the sequence. */
.cs-phase-steps li::before {
content: counter(list-item);
position: absolute;
left: 0;
top: 0;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--b-lt);
border: 1px solid var(--b-bd);
color: var(--b);
font-size: 10.5px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.cs-step-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--t); line-height: 1.4; }
.cs-step-d { display: block; font-size: 12px; color: var(--t-l); line-height: 1.5; margin-top: 3px; }
/* ── Topic cards ────────────────────────────────────────────────────────────
The long-form body is grouped into four parts, and each part is a stack of
topic cards rather than a run of bare h2 + paragraph. On a light-neutral
band they read as cards; on a white band as bordered panels. Either way the
text is ordinary crawlable HTML. */
.cs-topics {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 980px;
margin: 0 auto;
}
/* Three-across variant for a part made of short topics. Cards stretch to a
common height, as the homepage's card rows do. */
.cs-trio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.cs-topic {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 30px 32px;
min-width: 0;
}
.cs-topic > .h3 { margin-bottom: 14px; letter-spacing: -.02em; }
/* Prose that follows a strip or card row inside the same topic. */
.cs-prose-after { margin-top: 20px; }
/* ── Three related dimensions ───────────────────────────────────────────── */
.cs-tri {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 20px;
}
.cs-tri-c {
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: var(--r);
padding: 16px 18px;
min-width: 0;
}
.cs-tri-h {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 7px;
}
/* ── Inline sequence strip ──────────────────────────────────────────────────
Wraps rather than scrolls, so a narrow screen never gains a scrollbar. */
.cs-seq {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
list-style: none;
margin: 20px 0 0;
padding: 16px 18px;
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: var(--r);
}
.cs-seq li {
font-size: 12.5px;
font-weight: 600;
color: var(--b-dk);
background: var(--w);
border: 1px solid var(--b-bd);
border-radius: 6px;
padding: 5px 10px;
}
.cs-seq .cs-seq-sep {
background: none;
border: 0;
padding: 0;
color: var(--b);
font-weight: 700;
opacity: .55;
}
/* A secondary lifecycle strip. Deliberately lighter than the phase grid: it
supports the page's main flow rather than competing with it. */
.cs-seq-people {
margin-top: 0;
justify-content: center;
padding: 20px 22px;
}
.cs-seq-people li { font-size: 13px; }
/* ── Scope note ─────────────────────────────────────────────────────────── */
.cs-note {
background: var(--w);
border: 1px solid var(--br);
border-left: 3px solid var(--b);
border-radius: 0 var(--r) var(--r) 0;
padding: 18px 22px;
margin-top: 32px;
}
.cs-note-label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 7px;
}
.cs-note p { font-size: 14.5px; line-height: 1.68; color: var(--t-m); }
/* ── Testimonial ────────────────────────────────────────────────────────────
Editorial pull-quote. The markup comes from the build's testimonial gate
(heading, figure.cs-quote, blockquote, figcaption), so it is styled here
by element rather than by adding classes to it. Blue accent, no oversized
decorative quotation marks. */
/* The band's vertical space lives on the inner element, not on the section, so
a story whose quote is still pending collapses to nothing instead of leaving
an empty grey gap. The build's gate returns '' for any non-APPROVED status,
and a page that authors the placeholder as
{{CUSTOMER_TESTIMONIAL}}
on one line is then
genuinely :empty. Spacing is unchanged for a story that does render. */
.cs-tm { padding: 0; }
.cs-tm-in { max-width: 900px; margin: 0 auto; padding: 88px 0; }
.cs-tm-in:empty { padding: 0; }
.cs-tm-in h2 {
text-align: center;
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 800;
letter-spacing: -.025em;
line-height: 1.16;
color: var(--t);
margin-bottom: 32px;
}
.cs-quote {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-top: 3px solid var(--b);
border-radius: 0 0 var(--r-l) var(--r-l);
box-shadow: var(--sh-m);
padding: 40px 44px 32px;
margin: 0;
}
/* No decorative quotation mark. The blue top rule, the type scale and the
attribution already identify this as a customer pull-quote, and a glyph at a
restrained size read as a stray artefact rather than as a mark. */
.cs-quote blockquote {
margin: 0;
font-size: clamp(17px, 1.5vw, 19.5px);
line-height: 1.68;
font-weight: 500;
color: var(--t);
}
.cs-quote figcaption {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--br);
font-size: 13.5px;
line-height: 1.55;
color: var(--t-m);
font-weight: 600;
max-width: 60ch;
}
/* ── Outcome cards ──────────────────────────────────────────────────────── */
.cs-out {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r);
box-shadow: var(--sh-s);
padding: 24px;
}
.cs-out-h {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
padding-bottom: 12px;
margin-bottom: 14px;
border-bottom: 1px solid var(--br);
}
.cs-out ul { list-style: none; margin: 0; padding: 0; }
.cs-out li {
position: relative;
padding-left: 20px;
font-size: 14.5px;
line-height: 1.6;
color: var(--t-m);
margin-bottom: 10px;
}
.cs-out li:last-child { margin-bottom: 0; }
.cs-out li::before {
content: '';
position: absolute;
left: 2px;
top: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--b);
opacity: .45;
}
/* ── Proof at a glance ──────────────────────────────────────────────────────
Grouped tiles rather than fifteen equal-weight pills. */
.cs-proof {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r);
box-shadow: var(--sh-xs);
padding: 22px 20px;
}
.cs-proof-h {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px solid var(--br);
}
.cs-proof ul { list-style: none; margin: 0; padding: 0; }
.cs-proof li {
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: var(--t);
padding: 7px 0;
}
.cs-proof li + li { border-top: 1px dashed var(--br); }
/* ── Proof row of five ─────────────────────────────────────────────────────
.cs-proof rows are four across. A fifth card in a four-column grid strands
one card on a second row against three empty columns — the same ragged
trailing row that .cs-hub-grid--four exists to avoid.
Six columns divide cleanly by both three and two, so five cards lay out as
three then two with no hole: the first three span two columns each, the last
two span three each. Only the Pioneer story carries five proof cards. The
spans are released at 1023px, where the two-column rule below takes over. */
.cs-proof-5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.cs-proof-5 > .cs-proof:nth-child(-n + 3) { grid-column: span 2; }
.cs-proof-5 > .cs-proof:nth-child(n + 4) { grid-column: span 3; }
/* ── Customer recognition ──────────────────────────────────────────────────
A photograph of a physical award, beside the wording engraved on it.
The wording is set as a paragraph, NOT as a inside .cs-quote.
That markup belongs to the build's testimonial gate, and this story's
testimonial is not approved: reusing the quote furniture here would put what
reads as a customer pull-quote on a page whose registry says it has none.
What is quoted here is an inscription on an object, not a person speaking.
The photograph is portrait 3:4 and is never cropped, so its column is capped
in width and the plaque wording stays legible at the resulting size. */
.cs-award {
display: grid;
grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
gap: 44px;
align-items: start;
}
/* The award is photographed on white, so it cannot supply its own edge. The
panel's border does that, and the panel's ground is the same white, so the
subject reads as sitting in the card rather than pasted onto it. */
/* Grid items default to min-width:auto, which lets a long word push a column
wider than its track. Both award columns are pinned so the layout cannot be
widened by its own content. */
.cs-award-t { min-width: 0; }
.cs-award-fig {
margin: 0;
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 18px;
}
/* aspect-ratio pins the box at the intrinsic 3:4 before the file arrives, so
the section does not reflow around the image as it loads. */
.cs-award-img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
border-radius: var(--r);
}
.cs-award-fig figcaption {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--br);
font-size: 12.5px;
line-height: 1.6;
color: var(--t-l);
}
/* Same evidence furniture as .cs-note and .cs-pp: white ground, 3px blue rule.
Here the rule sits on top, so the panel reads as a plate. */
.cs-award-in {
background: var(--w);
border: 1px solid var(--br);
border-top: 3px solid var(--b);
border-radius: 0 0 var(--r-l) var(--r-l);
box-shadow: var(--sh-xs);
padding: 26px 28px 24px;
}
.cs-award-lbl {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 12px;
}
.cs-award-q {
font-size: clamp(16.5px, 1.4vw, 18.5px);
line-height: 1.66;
font-weight: 500;
color: var(--t);
}
.cs-award-src {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--br);
font-size: 13.5px;
line-height: 1.6;
color: var(--t-m);
}
.cs-award-src b { font-weight: 700; color: var(--t); }
/* ── Related capability cards ───────────────────────────────────────────────
The homepage product-card treatment: same radius, border, shadow, hover. */
.cs-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cs-rel-card {
display: block;
background: var(--w);
border-radius: var(--r-l);
border: 1px solid var(--br);
padding: 22px 22px 20px;
box-shadow: var(--sh-s);
transition: box-shadow .2s, border-color .2s;
}
.cs-rel-card:hover { box-shadow: var(--sh-m); border-color: var(--b-bd); }
.cs-rel-t {
display: block;
font-size: 15.5px;
font-weight: 700;
color: var(--t);
letter-spacing: -.015em;
margin-bottom: 7px;
}
.cs-rel-d { display: block; font-size: 13.5px; line-height: 1.6; color: var(--t-m); }
/* ── Featured story, hub ────────────────────────────────────────────────────
Deliberately full-width and two-column, so one live story fills the page
as an intentional feature. Later stories drop into .cs-hub-grid below
without touching this. */
.cs-feat {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 0;
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-m);
overflow: hidden;
}
.cs-feat-main { padding: 36px 38px; min-width: 0; }
.cs-feat-side { padding: 36px 32px; background: var(--bg); border-left: 1px solid var(--br); min-width: 0; }
.cs-feat-ind {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 10px;
}
.cs-feat-h { font-size: clamp(21px, 2.1vw, 27px); font-weight: 800; letter-spacing: -.025em; line-height: 1.22; color: var(--t); margin-bottom: 12px; }
.cs-feat-p { font-size: 15px; line-height: 1.68; color: var(--t-m); margin-bottom: 20px; }
.cs-feat-side-h {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 14px;
}
.cs-feat-met { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-feat-go {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--b);
transition: gap .15s;
}
.cs-feat:hover .cs-feat-go { gap: 10px; }
.cs-feat:hover { box-shadow: var(--sh-l); border-color: var(--b-bd); }
/* ── Hub grid, for stories beyond the featured one ──────────────────────── */
/* auto-fit collapses tracks that hold no card, so two stories balance at half
width and a third flows into a row of three with no change here. */
.cs-hub-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 20px;
}
.cs-hub-card {
display: block;
background: var(--w);
border-radius: var(--r);
border: 1px solid var(--br);
padding: 24px 22px;
box-shadow: var(--sh-s);
transition: box-shadow .2s, border-color .2s, transform .2s;
}
.cs-hub-card:hover { box-shadow: var(--sh-m); border-color: var(--b-bd); transform: translateY(-1px); }
.cs-hub-ind {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 8px;
}
.cs-hub-name { display: block; font-size: 17px; font-weight: 700; color: var(--t); letter-spacing: -.02em; margin-bottom: 9px; }
.cs-hub-desc { display: block; font-size: 14px; line-height: 1.6; color: var(--t-m); margin-bottom: 16px; }
.cs-hub-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-hub-card .cs-feat-go { margin-top: 16px; }
.cs-hub-meta span {
font-size: 11.5px;
font-weight: 600;
color: var(--b-dk);
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: 999px;
padding: 3px 10px;
}
/* ── Blue CTA section ───────────────────────────────────────────────────────
Same family as the homepage's final CTA: .sec-cta supplies the blue band
and padding from main.css; only the white-on-blue type is set here. */
.cs-cta-in { max-width: 620px; margin: 0 auto; text-align: center; }
.cs-cta-eyebrow {
display: inline-block;
background: rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .88);
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
padding: 5px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .2);
margin-bottom: 22px;
}
.cs-cta-in h2 {
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 800;
color: #fff;
letter-spacing: -.03em;
line-height: 1.16;
margin-bottom: 14px;
}
.cs-cta-in p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .72); margin-bottom: 32px; }
.cs-cta-in .cs-cta-row { justify-content: center; }
/* White primary button on the blue band, matching the homepage CTA. */
.cs-cta-in .btn-p { background: #fff; color: var(--b); padding: 13px 28px; font-size: 15px; }
.cs-cta-in .btn-p:hover { background: rgba(255, 255, 255, .9); }
/* ── Trust principles, hub ──────────────────────────────────────────────── */
.cs-trust {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r);
box-shadow: var(--sh-xs);
padding: 22px 22px 20px;
}
.cs-trust-h { font-size: 15px; font-weight: 700; color: var(--t); letter-spacing: -.015em; margin-bottom: 8px; }
.cs-trust p { font-size: 14px; line-height: 1.65; color: var(--t-m); }
/* ── Text brandmark, where no approved logo asset exists yet ──────────────
A story may be written before its logo is cleared. Rather than approximate
a customer's mark, the proof card sets the name as type in the same slot
.cs-logo occupies, at the same visual weight. When the asset arrives the
block is replaced by an ![]()
and nothing else changes.
No story currently uses this: CS-05 was written ahead of its logo and has
since received the approved mark. Kept because the situation recurs, and
the alternative when it does is approximating someone's logo. */
.cs-brandmark {
font-size: 19px;
font-weight: 800;
letter-spacing: -.02em;
color: var(--t);
line-height: 1.1;
}
.cs-brandmark-sub {
font-size: 12px;
font-weight: 600;
color: var(--t-l);
letter-spacing: .01em;
margin: 3px 0 6px;
}
/* ── Four-card More Stories row ──────────────────────────────────────────
.cs-hub-grid uses auto-fit at minmax(340px, 1fr). In the 1152px content
width that fits three cards per row, so a fourth wraps to a second row on
its own and sits left-aligned against two thirds of empty space.
This modifier lays four cards out as a balanced 2x2 instead. It applies
ONLY to the row that carries the class, so .cs-hub-grid keeps the exact
behaviour it had for three cards, and the tablet and mobile rules below
already collapse it to two columns and then one. */
.cs-hub-grid--four { grid-template-columns: repeat(2, 1fr); }
/* ── Signature chronology ────────────────────────────────────────────────
An ordered list, so the sequence is carried by the markup rather than by
the styling: with CSS disabled it still reads 2002, then 2002-2018, then
2018, then today, in order. Four equal columns on desktop, a vertical
sequence below. The connector is a border on the card, never a floating
element, so nothing can drift out of alignment. */
.cs-tl {
list-style: none;
display: grid;
/* Six columns, because the five milestones divide into the story's two eras
rather than into five equal steps: 2002, 2005 and 2002-2018 all sit inside
the full-ERP period, and 2018 and 2018-today are the transition and what
followed it. So the first three span two columns each and the last two span
three each — three cards, then two, with no stranded card and no ragged
trailing row. The wider second row also suits its content: the transition
card carries the longest description and the current-state card carries the
list of retained modules. Only this story uses .cs-tl. */
grid-template-columns: repeat(6, 1fr);
gap: 20px;
margin: 0;
padding: 0;
counter-reset: none;
}
.cs-tl > .cs-tl-item:nth-child(-n + 3) { grid-column: span 2; }
.cs-tl > .cs-tl-item:nth-child(n + 4) { grid-column: span 3; }
.cs-tl-item {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-top: 3px solid var(--b-bd);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 24px 22px 22px;
min-width: 0;
}
/* The 2018 transition is the turning point of the story, so it is the one
card the eye should land on. */
.cs-tl-turn { border-top-color: var(--t-l); }
.cs-tl-now { border-top-color: var(--b); box-shadow: var(--sh-m); }
.cs-tl-year {
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 10px;
}
.cs-tl-turn .cs-tl-year { color: var(--t-m); }
.cs-tl-h {
font-size: 16px;
font-weight: 700;
color: var(--t);
letter-spacing: -.015em;
line-height: 1.3;
margin-bottom: 8px;
}
.cs-tl-d { font-size: 13.5px; line-height: 1.65; color: var(--t-m); }
.cs-tl-mods {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cs-tl-mods li {
font-size: 11.5px;
font-weight: 700;
color: var(--b);
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: 999px;
padding: 4px 10px;
}
/* ── Then and now ────────────────────────────────────────────────────────
Two cards, deliberately unlike each other, so the historical scope cannot
be misread as the current one. */
.cs-thennow {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 980px;
margin: 0 auto;
}
.cs-tn {
border-radius: var(--r-l);
padding: 28px 30px;
min-width: 0;
}
.cs-tn-then {
background: var(--bg-s);
border: 1px solid var(--br);
}
.cs-tn-now {
background: var(--w);
border: 1px solid var(--b-bd);
box-shadow: var(--sh-m);
}
.cs-tn-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 12px;
}
.cs-tn-now .cs-tn-tag { color: var(--b); }
.cs-tn-h {
font-size: 19px;
font-weight: 800;
color: var(--t);
letter-spacing: -.02em;
margin-bottom: 10px;
}
.cs-tn-d { font-size: 14px; line-height: 1.7; color: var(--t-m); }
.cs-tn-list { list-style: none; margin: 16px 0 0; padding: 0; }
.cs-tn-list li {
font-size: 14px;
font-weight: 700;
color: var(--t);
padding: 8px 0 8px 20px;
border-top: 1px solid var(--br);
position: relative;
}
.cs-tn-list li::before {
content: "";
position: absolute;
left: 2px;
top: 15px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--b);
}
/* ── Numbered pillar ─────────────────────────────────────────────────────
A .cs-topic that carries an ordinal. Decorative only: the number is
aria-hidden and the heading carries the meaning. */
.cs-pillar-n {
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
color: var(--b);
margin-bottom: 10px;
}
.cs-pillar > .h3 { margin-bottom: 10px; }
/* ── Two-environment coexistence model ───────────────────────────────────
Neither environment is drawn as subordinate to the other: both panels are
the same size, the same weight and the same treatment, and the link
between them is a plain double-headed marker that states integration
without implying a direction, a mechanism or an owner of the data. */
.cs-coex {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 20px;
max-width: 980px;
margin: 0 auto;
}
.cs-coex-env {
background: var(--w);
border: 1px solid var(--b-bd);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 26px 28px;
min-width: 0;
}
.cs-coex-tag {
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 8px;
}
.cs-coex-h {
font-size: 22px;
font-weight: 800;
color: var(--t);
letter-spacing: -.025em;
margin-bottom: 14px;
}
.cs-coex-list { list-style: none; margin: 0; padding: 0; }
.cs-coex-list li {
font-size: 14px;
line-height: 1.6;
color: var(--t-m);
padding: 7px 0;
border-top: 1px solid var(--br);
}
.cs-coex-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 4px;
}
.cs-coex-arrow { font-size: 22px; color: var(--b); line-height: 1; }
.cs-coex-word {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
writing-mode: horizontal-tb;
text-align: center;
}
/* ── Layered operating sequence ──────────────────────────────────────────
An ordered list of stages, each tagged with the layer of the business it
belongs to. Carried by the markup rather than the styling: with CSS
disabled it reads as a numbered sequence with its layer labels intact.
Four across, two rows, so the operational stages sit on one line and the
financial and intelligence stages on the next. The left border carries the
layer colour, which is the whole visual idea — one sequence, but the reader
can see where operations end and financial control begins. */
.cs-stage {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 0;
padding: 0;
counter-reset: stage;
}
.cs-stage-i {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-left: 3px solid var(--b-bd);
border-radius: var(--r);
box-shadow: var(--sh-xs);
padding: 18px 18px 16px;
min-width: 0;
counter-increment: stage;
}
/* The ordinal is decorative: the heading carries the meaning and the list
element carries the order. */
.cs-stage-i::before {
content: counter(stage);
position: absolute;
top: 14px;
right: 14px;
font-size: 11px;
font-weight: 800;
color: var(--t-l);
letter-spacing: .04em;
}
.cs-stage-fin { border-left-color: var(--b); }
.cs-stage-bi { border-left-color: var(--b-dk, var(--b)); background: var(--b-lt); }
.cs-stage-l {
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 8px;
}
.cs-stage-fin .cs-stage-l, .cs-stage-bi .cs-stage-l { color: var(--b); }
.cs-stage-h {
font-size: 15px;
font-weight: 700;
color: var(--t);
letter-spacing: -.015em;
line-height: 1.3;
margin-bottom: 6px;
padding-right: 16px;
}
.cs-stage-d { font-size: 13px; line-height: 1.6; color: var(--t-m); }
/* ── Four-layer business environment ─────────────────────────────────────
Story 06's defining visual. Four equal panels, one per layer, each a real
heading plus a real list so the structure is in the markup. The
intelligence layer is tinted rather than enlarged: it reads the other
three, and must not look like it replaces them. */
.cs-layer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.cs-layer-c {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-top: 3px solid var(--b-bd);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 24px 22px 20px;
min-width: 0;
}
.cs-layer-bi { border-top-color: var(--b); background: var(--b-lt); }
.cs-layer-n {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
color: var(--b);
margin-bottom: 10px;
}
.cs-layer-h {
font-size: 16px;
font-weight: 800;
color: var(--t);
letter-spacing: -.02em;
line-height: 1.25;
margin-bottom: 12px;
}
.cs-layer-list { list-style: none; margin: 0; padding: 0; }
.cs-layer-list li {
font-size: 14px;
font-weight: 600;
color: var(--t-m);
padding: 8px 0 8px 18px;
border-top: 1px solid var(--br);
position: relative;
}
.cs-layer-list li::before {
content: "";
position: absolute;
left: 2px;
top: 15px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--b);
}
/* ── Continuity spine ────────────────────────────────────────────────────
A vertical ordered list with a rail down the left. Deliberately vertical
rather than the horizontal year cards used for a dated chronology: this
reads as duration, not as a sequence of events on specific dates, and no
start year is claimed. The rail is a border on the list, so nothing can
drift out of alignment, and the markers sit on the item. */
.cs-cont {
list-style: none;
margin: 0 auto;
padding: 0 0 0 34px;
max-width: 860px;
border-left: 2px solid var(--b-bd);
}
.cs-cont-i {
position: relative;
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 22px 26px 20px;
min-width: 0;
}
.cs-cont-i + .cs-cont-i { margin-top: 18px; }
/* The node on the rail. Drawn from the card so it stays put at any width. */
.cs-cont-i::before {
content: "";
position: absolute;
left: -41px;
top: 28px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--w);
border: 2px solid var(--b-bd);
}
.cs-cont-now { border-color: var(--b-bd); box-shadow: var(--sh-m); }
.cs-cont-now::before { background: var(--b); border-color: var(--b); }
.cs-cont-k {
font-size: 11px;
font-weight: 800;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--b);
margin-bottom: 8px;
}
.cs-cont-h {
font-size: 17px;
font-weight: 700;
color: var(--t);
letter-spacing: -.02em;
line-height: 1.3;
margin-bottom: 8px;
}
.cs-cont-d { font-size: 14px; line-height: 1.7; color: var(--t-m); }
.cs-cont-tags {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cs-cont-tags li {
font-size: 11.5px;
font-weight: 700;
color: var(--b);
background: var(--b-lt);
border: 1px solid var(--b-bd);
border-radius: 999px;
padding: 4px 10px;
}
/* ── Support continuity strip ────────────────────────────────────────────
Four short rows with plain arrow markers between them, one of which is
double-headed to show that the support relationship runs both ways. Kept
deliberately small: it complements the continuity spine rather than
becoming a second workflow. */
.cs-sup {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
max-width: 560px;
margin: 36px auto 0;
}
.cs-sup-i {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r);
padding: 14px 18px;
text-align: center;
}
/* The support executive is the point of the strip, so it carries the accent
while staying the same size as the rest. */
.cs-sup-hl { border-color: var(--b-bd); background: var(--b-lt); }
.cs-sup-k {
font-size: 10px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 4px;
}
.cs-sup-hl .cs-sup-k { color: var(--b); }
.cs-sup-h {
font-size: 14.5px;
font-weight: 700;
color: var(--t);
letter-spacing: -.015em;
line-height: 1.35;
}
.cs-sup-a {
text-align: center;
font-size: 16px;
line-height: 1;
color: var(--b-bd);
}
.cs-sup-a-both { color: var(--b); font-size: 18px; }
/* ── Relationship quadrant ───────────────────────────────────────────────
Four facets of one relationship, arranged 2x2. A 2x2 rather than a row of
four on purpose: these are not stages in a sequence, and a left-to-right
row would suggest they are. */
.cs-quad {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
max-width: 880px;
margin: 0 auto;
}
.cs-quad-c {
background: var(--w);
border: 1px solid var(--br);
border-radius: var(--r-l);
box-shadow: var(--sh-s);
padding: 26px 28px 22px;
min-width: 0;
}
.cs-quad-hl { border-color: var(--b-bd); background: var(--b-lt); }
.cs-quad-n {
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
color: var(--b);
margin-bottom: 10px;
}
.cs-quad-h {
font-size: 17px;
font-weight: 800;
color: var(--t);
letter-spacing: -.02em;
line-height: 1.25;
margin-bottom: 12px;
}
.cs-quad-list { list-style: none; margin: 0; padding: 0; }
.cs-quad-list li {
font-size: 14px;
font-weight: 600;
color: var(--t-m);
padding: 8px 0 8px 18px;
border-top: 1px solid var(--br);
position: relative;
}
.cs-quad-list li::before {
content: "";
position: absolute;
left: 2px;
top: 15px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--b);
}
/* ── Two-phase journey ───────────────────────────────────────────────────
For a story whose shape is a turnaround: two contrasting phases with a
pivot between them, rather than one uniform sequence. The "before" phase
is set in neutral tones and the "after" phase carries the accent, so the
change of direction is visible before a word is read.
Numbering runs continuously across both ordered lists via start=, so the
whole journey still reads 1 to 7 in order with CSS disabled. The second
phase is given more width because it holds more stages. */
.cs-jrn {
display: grid;
grid-template-columns: 1fr auto 1.4fr;
/* Panels size to their own content and centre against each other. Stretching
them to a common height would leave the shorter "before" panel with a
large void, since it holds two stages against five. */
align-items: center;
gap: 20px;
}
.cs-jrn-ph {
border-radius: var(--r-l);
padding: 26px 28px 22px;
min-width: 0;
}
.cs-jrn-before {
background: var(--bg-s);
border: 1px solid var(--br);
}
.cs-jrn-after {
background: var(--w);
border: 1px solid var(--b-bd);
box-shadow: var(--sh-m);
}
.cs-jrn-k {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 8px;
}
.cs-jrn-after .cs-jrn-k { color: var(--b); }
.cs-jrn-h {
font-size: 17px;
font-weight: 800;
color: var(--t);
letter-spacing: -.02em;
line-height: 1.3;
margin-bottom: 16px;
}
.cs-jrn-list {
margin: 0;
padding: 0 0 0 22px;
list-style: decimal;
}
.cs-jrn-list li {
padding: 10px 0;
border-top: 1px solid var(--br);
font-size: 13px;
color: var(--t-l);
}
.cs-jrn-list li::marker { font-size: 11px; font-weight: 800; color: var(--t-l); }
.cs-jrn-after .cs-jrn-list li::marker { color: var(--b); }
.cs-jrn-t {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--t);
letter-spacing: -.015em;
line-height: 1.35;
}
.cs-jrn-d {
display: block;
font-size: 13px;
line-height: 1.6;
color: var(--t-m);
margin-top: 4px;
}
/* The pivot. A single marker and a short label, sized to the content so the
two phases stay as wide as possible. */
.cs-jrn-pivot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 6px;
max-width: 128px;
}
.cs-jrn-arrow { font-size: 22px; line-height: 1; color: var(--b); }
.cs-jrn-pivot-t {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--t-l);
text-align: center;
line-height: 1.35;
}
/* ── Signature footprint ─────────────────────────────────────────────────
One origin and three extensions. The three later countries are shown as a
set rather than as a numbered path, because the order in which they came
onto the system is not part of the confirmed account and a numbered
sequence would assert one. So: an origin panel, a connector, three peers.
The origin is the emphasised element rather than the largest. It carries
the white card and blue border this file already uses for a current state,
while the three extensions sit on the soft background, which is how the
visual says "this is where it started" without needing a caption. */
.cs-fp {
display: grid;
grid-template-columns: 1fr auto 1.9fr;
/* Sized to content and centred against each other, as .cs-jrn is: the
origin panel holds a sentence and the extensions hold two words, so a
common height would leave one side mostly empty. */
align-items: center;
gap: 20px;
}
.cs-fp-origin {
background: var(--w);
border: 1px solid var(--b-bd);
box-shadow: var(--sh-m);
border-radius: var(--r-l);
padding: 26px 26px 24px;
min-width: 0;
}
.cs-fp-k {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 10px;
}
.cs-fp-k-b { color: var(--b); }
.cs-fp-c {
font-size: 25px;
font-weight: 800;
color: var(--t);
letter-spacing: -.025em;
line-height: 1.15;
margin-bottom: 10px;
}
.cs-fp-d {
font-size: 13px;
line-height: 1.6;
color: var(--t-m);
}
/* The connector, sized to its own content so both sides stay as wide as
possible. */
.cs-fp-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 6px;
max-width: 132px;
}
.cs-fp-arrow { font-size: 22px; line-height: 1; color: var(--b); }
.cs-fp-link-t {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--t-l);
text-align: center;
line-height: 1.35;
}
.cs-fp-grp { min-width: 0; }
.cs-fp-set {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
.cs-fp-x {
background: var(--bg-s);
border: 1px solid var(--br);
border-radius: var(--r-l);
padding: 20px 18px;
min-width: 0;
}
.cs-fp-xc {
display: block;
font-size: 17px;
font-weight: 800;
color: var(--t);
letter-spacing: -.02em;
line-height: 1.25;
}
.cs-fp-xd {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--b);
margin-top: 6px;
}
/* ── Signature pairing ───────────────────────────────────────────────────
Five operating areas, each with the state before and the response beside
it. Deliberately a matrix rather than a sequence: these areas run
alongside one another, so nothing is numbered and nothing connects one row
to the next. That is what keeps it distinct from the chronology, the
spine, the two-phase journey and the origin-and-peers visuals already in
this file, each of which asserts an order.
Markup is a plain list of rows, so with CSS disabled each row still reads
"area, before, with Exactlly" in that order. */
.cs-pair {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
.cs-pair-row {
display: grid;
/* The area column is fixed so all five labels align down the left edge and
the two panels stay the same width on every row. */
grid-template-columns: 148px 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.cs-pair-area {
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--b);
line-height: 1.35;
min-width: 0;
}
.cs-pair-before,
.cs-pair-after {
display: block;
border-radius: var(--r-l);
padding: 18px 20px;
min-width: 0;
}
.cs-pair-before {
background: var(--bg-s);
border: 1px solid var(--br);
}
.cs-pair-after {
background: var(--w);
border: 1px solid var(--b-bd);
box-shadow: var(--sh-s);
}
.cs-pair-k {
display: block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--t-l);
margin-bottom: 6px;
}
.cs-pair-after .cs-pair-k { color: var(--b); }
.cs-pair-t {
display: block;
font-size: 14.5px;
font-weight: 650;
color: var(--t);
line-height: 1.4;
letter-spacing: -.01em;
}
.cs-pair-arrow {
font-size: 18px;
line-height: 1;
color: var(--b);
text-align: center;
}
/* ── A second featured story ─────────────────────────────────────────────
The hub carried a single .cs-feat card until a second flagship story was
added. Stacking them full width keeps both proof panels intact, which a
two-column arrangement cannot do inside 1152px without squeezing each card
to roughly half the width its side panel needs.
Expressed as an adjacent-sibling gap rather than a wrapper, so the first
card's markup does not have to be re-indented into a new container: the
ANA card is left exactly as it was. .cs-feat itself is unchanged, and a
hub with only one featured story is unaffected because the rule needs two
to match. */
.cs-feat + .cs-feat { margin-top: 24px; }
/* ── Seven-card More Stories row ─────────────────────────────────────────
The base grid fits three cards per row in the 1152px content width, so a
seventh card would wrap to a third row on its own — the same orphan the
four-card state had, and rejected for the same reason.
This modifier lays seven cards out as 4 + 3 on a four-column grid, with
the second row centred by offsetting its first card half a column. Both
rows are then symmetrical about the centre line, which is what makes it
read as finished rather than short.
Scoped to the row that carries the class: .cs-hub-grid and the four-card
modifier are both untouched, and the existing 1023px / 767px rules take
over below desktop, so no breakpoint of its own is needed. */
/* Eight columns with every card spanning two gives four cards per row. The
fifth card is then placed at column 2 instead of column 1, so the row of
three occupies columns 2 to 7 and leaves one column clear at each end —
symmetrical about the centre line. Offsetting by a whole column of a
double-width grid is how a half-column offset is expressed without
touching card widths or using margins. */
.cs-hub-grid--seven { grid-template-columns: repeat(8, 1fr); }
.cs-hub-grid--seven > * { grid-column: span 2; }
.cs-hub-grid--seven > :nth-child(5) { grid-column: 2 / span 2; }
/* ── Eight-card More Stories row ─────────────────────────────────────────
The base grid fits three cards per row in the 1152px content width, so
eight cards would fall as 3 + 3 + 2 and leave a short final row.
Eight is the first count since three that divides evenly into a full row,
so it needs none of the machinery the seven-card state did: four equal
columns give two complete rows of four, balanced without any offset. Each
card lands at 273px, which is exactly the width the four-across seven-card
row already used, so the arrangement changes and the card size does not.
Kept alongside --four and --seven rather than replacing them, which is how
this file has treated superseded count modifiers since the four-card state:
each is inert unless a row carries its class, and .cs-hub-grid itself has
never been changed. */
.cs-hub-grid--eight { grid-template-columns: repeat(4, 1fr); }
/* Nine cards. Four columns would leave a single orphan on a third row, so the
row becomes a balanced 3 x 3. Cards are wider than the eight-card row rather
than narrower, which the card content takes comfortably. Additive and scoped
like the others: inert unless a row carries the class. */
.cs-hub-grid--nine { grid-template-columns: repeat(3, 1fr); }
/* Ten stories. A plain three-column grid would leave the tenth card alone on
its own row at full width, so the six-track pattern already used by
--seven applies here: cards span two tracks, giving three per row, and the
tenth is centred rather than left hanging at the left edge. */
.cs-hub-grid--ten { grid-template-columns: repeat(6, 1fr); }
.cs-hub-grid--ten > * { grid-column: span 2; }
.cs-hub-grid--ten > :nth-child(10) { grid-column: 3 / span 2; }
/* Eleven stories. The same six-track pattern continues: three cards per row
leaves two on the fourth row, so the tenth is placed at column 2 and the
eleventh follows it at column 4. The pair then occupies columns 2 to 5 and
leaves one track clear at each end, symmetrical about the centre line in
the same way --seven balances its row of three.
Additive and scoped like every modifier before it: inert unless a row
carries the class, and .cs-hub-grid itself is still untouched. --ten is
kept rather than replaced, which is how this file has treated superseded
count modifiers since the four-card state. */
.cs-hub-grid--eleven { grid-template-columns: repeat(6, 1fr); }
.cs-hub-grid--eleven > * { grid-column: span 2; }
.cs-hub-grid--eleven > :nth-child(10) { grid-column: 2 / span 2; }
/* Thirteen stories. Twelve needed nothing: three per row on the base grid
gave four even rows with no orphan to place. Thirteen leaves ONE card on
a fifth row, which is the same shape --ten solves, so it is solved the
same way: six tracks, every card spanning two for three per row, and the
thirteenth placed at column 3 so the single card sits centred with two
tracks clear at each end.
Additive and scoped like every modifier before it: inert unless a row
carries the class, and .cs-hub-grid itself is still untouched. --eleven
and --ten are both kept rather than replaced, which is how this file has
treated superseded count modifiers since the four-card state. */
.cs-hub-grid--thirteen { grid-template-columns: repeat(6, 1fr); }
.cs-hub-grid--thirteen > * { grid-column: span 2; }
.cs-hub-grid--thirteen > :nth-child(13) { grid-column: 3 / span 2; }
/* ── Fourteen stories ──────────────────────────────────────────────────────
The fourteenth card turns the trailing single into a trailing PAIR:
3 + 3 + 3 + 3 + 2. That is the shape --eleven already solves for eleven
cards, but --eleven cannot be reused here, because it places the tenth
child and the tenth card is the first of row four in a fourteen-card row.
So the same six tracks, every card spanning two for three per row, and the
thirteenth placed at column 2 so the final pair sits centred with one
track clear at each end.
Additive and scoped like every modifier before it: inert unless a row
carries the class, and .cs-hub-grid itself is still untouched. --thirteen
and every earlier count modifier are kept rather than replaced, which is
how this file has treated superseded counts since the four-card state. */
.cs-hub-grid--fourteen { grid-template-columns: repeat(6, 1fr); }
.cs-hub-grid--fourteen > * { grid-column: span 2; }
.cs-hub-grid--fourteen > :nth-child(13) { grid-column: 2 / span 2; }
/* ── Responsive ─────────────────────────────────────────────────────────────
main.css already collapses .hero-g, .g2, .g3 and .g4 and resets .hero /
.sec / .sec-alt / .sec-cta padding at 1023px and 767px. Only the layouts
introduced by this file need breakpoints of their own. */
@media (max-width: 1023px) {
/* Tablet and mobile spacing was already right, so both hub-hero reductions
above are released here and the gap stays exactly what it was. */
.hero-hub { padding-bottom: 60px; }
.cs-hero-c .cs-deck { margin-bottom: 28px; }
.cs-stage { grid-template-columns: 1fr 1fr; }
.cs-layer { grid-template-columns: 1fr 1fr; }
.cs-jrn { grid-template-columns: 1fr; }
.cs-jrn-pivot { flex-direction: row; max-width: none; padding: 4px 0; }
.cs-jrn-arrow { transform: rotate(90deg); }
/* The area label moves onto its own line and the two panels keep the row,
so the before/after comparison survives the narrower width. */
.cs-pair-row { grid-template-columns: 1fr auto 1fr; }
.cs-pair-area { grid-column: 1 / -1; }
/* The footprint stacks: origin, then the connector turned to point down at
the three that followed. The set stays three across here, where each card
still has room for a country name on one line. */
.cs-fp { grid-template-columns: 1fr; }
.cs-fp-link { flex-direction: row; max-width: none; padding: 4px 0; }
.cs-fp-arrow { transform: rotate(90deg); }
/* The eight-column arrangement and its offset only make sense on the
four-across desktop row. Below that the base grid's own rules take over,
so the span and the placement are both released. */
.cs-hub-grid--seven > * { grid-column: auto; }
.cs-hub-grid--ten > * { grid-column: auto; }
.cs-hub-grid--ten > :nth-child(10) { grid-column: auto; }
.cs-hub-grid--seven > :nth-child(5) { grid-column: auto; }
.cs-hub-grid--eleven > * { grid-column: auto; }
.cs-hub-grid--eleven > :nth-child(10) { grid-column: auto; }
.cs-hub-grid--thirteen > * { grid-column: auto; }
.cs-hub-grid--thirteen > :nth-child(13) { grid-column: auto; }
.cs-hub-grid--fourteen > * { grid-column: auto; }
.cs-hub-grid--fourteen > :nth-child(13) { grid-column: auto; }
.cs-tl { grid-template-columns: 1fr 1fr; }
/* Two across, with the era split released. The current-state card takes the
full row instead of sitting alone beside an empty column, which also gives
its list of retained modules the width it wants. */
.cs-tl > .cs-tl-item:nth-child(-n + 3),
.cs-tl > .cs-tl-item:nth-child(n + 4) { grid-column: auto; }
.cs-tl > .cs-tl-item:nth-child(5) { grid-column: span 2; }
.cs-coex { grid-template-columns: 1fr; }
.cs-coex-link { flex-direction: row; padding: 4px 0; }
.cs-split { grid-template-columns: 1fr; gap: 36px; }
/* Five proof cards drop to the same two-column row every other card row
uses here, so both span rules have to be released. */
.cs-proof-5 { grid-template-columns: 1fr 1fr; }
.cs-proof-5 > .cs-proof:nth-child(-n + 3),
.cs-proof-5 > .cs-proof:nth-child(n + 4) { grid-column: auto; }
/* The award stacks above its wording. The figure keeps a cap, because a
portrait 3:4 photograph at full column width becomes a screen and a half
of image before the reader reaches the text. */
.cs-award { grid-template-columns: 1fr; gap: 30px; }
.cs-award-fig { max-width: 340px; }
.cs-phase-grid { grid-template-columns: 1fr 1fr; }
/* Connectors only make sense along a single row. */
.cs-phase:not(:last-child)::after { display: none; }
/* The count modifiers re-enable the connector the four-column rule hides, at
a higher specificity than the line above, so each has to release it again
once the grid reflows. Only --5 currently has a fourth child to strand. */
.cs-phase-3 > .cs-phase:nth-child(4n)::after,
.cs-phase-5 > .cs-phase:nth-child(4n)::after { display: none; }
.cs-feat { grid-template-columns: 1fr; }
.cs-feat-side { border-left: 0; border-top: 1px solid var(--br); }
.cs-hub-grid, .cs-rel, .cs-trio { grid-template-columns: 1fr 1fr; }
.hero-g { gap: 40px; }
}
@media (max-width: 767px) {
.cs-phase-grid { grid-template-columns: 1fr; }
.cs-hub-grid, .cs-rel, .cs-trio, .cs-tri { grid-template-columns: 1fr; }
.cs-proof-5 { grid-template-columns: 1fr; }
.cs-award-in { padding: 22px 22px 20px; }
.cs-topic { padding: 24px 22px; }
.cs-quote { padding: 28px 22px 24px; }
.cs-feat-main, .cs-feat-side { padding: 26px 22px; }
.cs-met-grid { grid-template-columns: 1fr 1fr; }
.cs-prose p, .cs-prose ul li { font-size: 15px; }
.cs-logo { height: 34px; }
.cs-hub-logo { height: 30px; }
.cs-snap dl { padding: 4px 18px 16px; }
/* The chronology becomes a single vertical sequence, which is the reading
order the markup already carries. */
.cs-tl { grid-template-columns: 1fr; }
.cs-tl > .cs-tl-item:nth-child(5) { grid-column: auto; }
/* Same for the operating sequence and the four layers: one column each, in
markup order. */
.cs-stage { grid-template-columns: 1fr; }
.cs-layer { grid-template-columns: 1fr; }
.cs-layer-c { padding: 22px 20px 18px; }
/* The quadrant becomes a single column; the continuity spine keeps its rail
but tightens the inset so the cards keep their width. */
.cs-quad { grid-template-columns: 1fr; }
.cs-quad-c { padding: 22px 20px 18px; }
.cs-cont { padding-left: 22px; }
.cs-cont-i { padding: 20px 20px 18px; }
.cs-cont-i::before { left: -29px; top: 24px; }
.cs-thennow { grid-template-columns: 1fr; }
/* Each pair becomes a single column: area, before, arrow turned to point
down, then the response. Reading order is unchanged. */
.cs-pair-row { grid-template-columns: 1fr; gap: 10px; }
.cs-pair-arrow { transform: rotate(90deg); justify-self: center; }
/* Three country cards side by side would leave about 90px each at the
narrow end, so the set becomes a single column in markup order. */
.cs-fp-set { grid-template-columns: 1fr; }
.cs-tn { padding: 24px 22px; }
.cs-coex-env { padding: 22px 20px; }
/* The parallel band stacks its label above its list, so neither the label
nor a long entry has to compete for the same row. */
.cs-along { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 480px) {
.cs-seq { padding: 14px; }
.cs-out, .cs-proof, .cs-trust { padding: 20px 18px; }
}
/* The metric tiles hold a short label and a short value, so they stay two-up on
a phone — one-up made the hero panel needlessly tall. Single column only on
the narrowest devices, where two would start breaking values across lines. */
@media (max-width: 359px) {
.cs-met-grid, .cs-feat-met { grid-template-columns: 1fr; }
}