in the component; the value
below is what a row that does not carry one falls back to. */
.ant-hero .anh-value {
font-weight: 700;
font-size: 22px;
line-height: 26px;
color: var(--anh-value-color, #FE4601);
text-align: right;
}
.ant-hero .anh-total {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 24px;
}
.ant-hero .anh-total .anh-label {
margin-bottom: 10px;
}
.ant-hero .anh-total-note {
margin: 0;
/* max-width: 720px; */
font-size: 16px;
line-height: 20px;
color: #FFF9F5;
}
.ant-hero .anh-total-value {
margin: 0;
font-weight: 700;
font-size: 48px;
line-height: 44px;
letter-spacing: -0.5px;
color: #FF665C;
}
/* ==========================================================================
Analytics and tracking page -- "Three questions"
(components/analytics-and-tracking/ThreeQuestions.js)
A light band on a dark page: every rule carries .ant-questions, because
style.css turns headings white inside .bg-dark.
Sizes, colours, the 20px radius and the drop shadow are the Figma's own;
the letter-spacing given there as a percentage is written here in em, which
is the same thing measured against the type size.
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-questions {
background: #F5F5F7;
padding: 90px 0 100px;
}
/* The section head -- orange eyebrow, heading, orange half -- runs at the
same size in every section on every page, so it is written once here,
unprefixed, and each section only says what colour its own heading is. The
colour has to stay prefixed: style.css sets .bg-dark h1..h6 to white at a
higher specificity than a bare class, so a light band would otherwise lose
its heading. */
.anq-eyebrow {
margin: 0 0 18px;
font-weight: 700;
font-size: 27px;
line-height: 25px;
color: #FE4601;
}
.anq-heading {
margin: 0 0 50px;
font-weight: 700;
font-size: 55px;
line-height: 52px;
letter-spacing: -0.28px;
}
.anq-accent {
color: #FE4601;
}
.ant-questions .anq-eyebrow {
color: #FE4601;
}
.ant-questions .anq-heading {
color: #1D1D1F;
}
/* The small orange line above every block -- the question number, the layer,
and "what we build" -- is one rule, so the three cannot drift apart. */
.ant-questions .anq-label {
margin: 0 0 14px;
font-weight: 600;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #FE4601;
}
.ant-questions .anq-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
/* Column, so the owner line can be pushed to the foot of the card: three
questions of different lengths still line their footers up. */
.ant-questions .anq-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 20px;
padding: 28px 28px 22px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.0627);
}
.ant-questions .anq-title {
margin: 0 0 12px;
font-weight: 700;
font-size: 26px;
line-height: 120%;
color: #1D1D1F;
}
.ant-questions .anq-body {
margin: 0 0 24px;
font-size: 15px;
line-height: 155%;
color: #6B7280;
}
.ant-questions .anq-owner {
margin: auto 0 0;
padding-top: 18px;
border-top: 1px solid #E5E5E5;
font-weight: 500;
font-size: 10px;
line-height: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #A0A0A0;
}
.ant-questions .anq-layer {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 40px;
background: #ffffff;
border-radius: 20px;
padding: 40px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.0627);
}
.ant-questions .anq-layer-title {
margin: 0;
font-weight: 700;
font-size: 40px;
line-height: 110%;
letter-spacing: -0.03em;
color: #1D1D1F;
}
.ant-questions .anq-layer-lead {
margin: 0 0 26px;
font-size: 18px;
line-height: 155%;
padding-bottom: 26px;
border-bottom: 1px solid #ddd;
color: #6B7280;
}
.ant-questions .anq-layer-body {
margin: 0;
font-size: 16px;
line-height: 165%;
color: #1D1D1F;
}
/* ==========================================================================
Analytics and tracking page -- "100 real conversions"
(components/analytics-and-tracking/ConversionLoss.js)
A dark band on the page's own dark, so the panel is separated by a border
rather than by contrast. Every rule carries .ant-loss: style.css turns
headings white inside .bg-dark and the panel's own greys would be lost.
The hundred dots are one absolutely-positioned layer under the four label
rows -- the dot takes its place from --anl-x / --anl-y, which the component
supplies, and everything else about it is decided here. Losing a dot is a
class change and a transition, never a move, so the field is identical
between the two scenarios and only the colour reads as different.
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-loss {
background: #0E0920;
padding: 100px 0 100px;
}
/* Both colours are stated here because .bg-dark carries its own rules for
headings and body copy at a higher specificity than a bare class. */
.ant-loss .anq-eyebrow {
color: #FE4601;
}
.ant-loss .anq-heading {
max-width: 900px;
color: #ffffff;
}
.ant-loss .anl-panel {
background: #150E2B;
border: 1px solid #251A3F;
border-radius: 12px;
overflow: hidden;
}
.ant-loss .anl-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 22px;
border-bottom: 1px solid #241A3F;
}
.ant-loss .anl-panel-title {
margin: 0;
font-size: 20px;
line-height: 30px;
color: #FFFFFF;
}
.ant-loss .anl-toggles {
display: flex;
flex-shrink: 0;
padding: 4px;
gap: 8px;
border-radius: 4px;
background: #08050E;
border: 1px solid #382554;
}
/* `text-transform` is reset here because the theme capitalises button text
globally, and the Figma writes these two as sentences. */
.ant-loss .anl-toggle {
padding: 10px 25px;
background: transparent;
/* border: 1px solid #2E2348; */
border-radius: 4px;
font-weight: 400;
font-size: 16px;
line-height: 17px;
text-transform: none;
color: #C9C0DE;
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.ant-loss .anl-toggle.is-active {
background: #FE4601;
border-color: #FE4601;
color: #ffffff;
}
/* The dot field and the four rows share this box: the rows sit on top of the
dots rather than beside them, which is what makes a leak read as taking its
slice out of the same hundred. */
.ant-loss .anl-body {
position: relative;
min-height: 340px;
padding: 22px;
}
/* The field stops short of the labels on the left and the loss figures on the
right, so a dot can never scatter over a word. That is also why neither
column needs a background of its own. */
.ant-loss .anl-field {
position: absolute;
top: 22px;
right: 74px;
bottom: 22px;
left: 170px;
}
.ant-loss .anl-dot {
position: absolute;
left: var(--anl-x);
top: var(--anl-y);
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
background: #6B4FE8;
transition: background 0.35s ease, transform 0.35s ease;
}
.ant-loss .anl-dot.is-lost {
background: #E05A50;
transform: scale(1.35);
}
.ant-loss .anl-rows {
position: relative;
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 296px;
margin: 0;
padding: 0;
list-style: none;
}
.ant-loss .anl-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding-top: 8px;
border-bottom: 1px solid #382554;
}
/* The panel's own background behind the two labels, so a dot never lands
under a word and turns it to noise. */
.ant-loss .anl-row-name {
padding: 2px 8px 2px 0;
font-size: 16px;
line-height: 30px;
letter-spacing: 0.04em;
color: #FFFFFF;
}
.ant-loss .anl-row-loss {
padding: 2px 0 2px 8px;
font-weight: 600;
font-size: 11px;
line-height: 15px;
color: #FE4601;
}
.ant-loss .anl-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 22px;
border-top: 1px solid #241A3F;
}
.ant-loss .anl-foot-label {
margin: 0;
font-size: 20px;
line-height: 20px;
color: #FFFFFF;
}
.ant-loss .anl-foot-value {
margin: 0;
display: flex;
align-items: baseline;
gap: 6px;
}
.ant-loss .anl-foot-count {
font-weight: 700;
font-size: 39px;
line-height: 30px;
color: #FE4601;
}
.ant-loss .anl-foot-outof {
font-size: 20px;
line-height: 18px;
color: #FFFFFF;
}
.anl-rows li:last-child {
border-bottom: none;
}
/* Asked not to be animated at: the dot still changes colour, because the
colour is the information -- only the pop and the easing go. */
@media (prefers-reduced-motion: reduce) {
.ant-loss .anl-dot {
transition: none;
}
.ant-loss .anl-dot.is-lost {
transform: none;
}
.ant-loss .anl-toggle {
transition: none;
}
}
/* ===== analytics and tracking: the hundred dots falling in ===== */
/* The dots drop in from above and the footer counts the ones that have
landed. The body clips, so they arrive out of the panel's own top edge
rather than over the heading; the per-dot delay comes in from the
component as --anl-delay, which is what scatters the fall instead of
letting it sweep row by row.
.is-armed is the held breath between mount and the section being scrolled
to -- without it the first dots would have fallen before anybody saw them.
The server's markup carries neither class, so with JavaScript off the field
is simply there. */
.ant-loss .anl-body {
overflow: hidden;
}
.ant-loss .anl-field.is-armed .anl-dot {
opacity: 0;
}
/* The rain does not put the dots back: once it has passed the bottom of the
field they stay gone, so the panel is not repopulated with a resting
scatter the moment the animation ends. */
.ant-loss .anl-field.is-spent .anl-dot {
opacity: 0;
}
/* Linear, because the count is read off the same travel: an eased fall
would cross the floor at a different moment than the arithmetic in the
component says it does. */
.ant-loss .anl-field.is-falling .anl-dot {
animation: anl-rain 2.6s linear both;
animation-delay: var(--anl-delay, 0ms);
}
/* From 30px above the field to 30px below it, whatever height the dot rests
at: --anl-h is the field's measured height and --anl-yf is the dot's place
in it as a fraction, both handed over by the component. Every dot travels
the same distance, so they all cross the floor at the same point of their
own fall -- which is the point the footer counts on. The 30px here is
FALL_EDGE_PX there; change one and change the other. */
@keyframes anl-rain {
0% {
opacity: 0;
transform: translateY(
calc(-1 * (var(--anl-h, 340px) * var(--anl-yf, 0) + 30px))
);
}
6% {
opacity: 1;
}
94% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(
calc(
var(--anl-h, 340px) - var(--anl-h, 340px) * var(--anl-yf, 0) +
30px
)
);
}
}
/* Asked not to be animated at: the field is already there, at rest, with the
arrived figure on the footer from the start. */
@media (prefers-reduced-motion: reduce) {
.ant-loss .anl-field.is-armed .anl-dot,
.ant-loss .anl-field.is-spent .anl-dot,
.ant-loss .anl-field.is-falling .anl-dot {
opacity: 1;
animation: none;
}
}
/* ==========================================================================
Analytics and tracking page -- "The mistake everyone makes"
(components/analytics-and-tracking/Mistake.js)
The page's one solid-orange band. Everything on it is white, and every
rule carries .ant-mistake because style.css colours headings and body copy
inside .bg-dark at a higher specificity than a bare class would reach.
The white rule on the left is a border on the claim column, so it is
exactly as tall as the words beside it however the heading wraps.
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-mistake {
background: #FE4601;
padding: 100px 0;
}
.ant-mistake .anm-row {
display: flex;
align-items: flex-start;
gap: 80px;
}
.ant-mistake .anm-claim {
flex: 1 1 54%;
padding-left: 30px;
border-left: 3px solid #FFFFFF;
}
.ant-mistake .anm-label {
margin: 0 0 18px;
font-weight: 700;
font-size: 27px;
line-height: 25px;
letter-spacing: 0.23px;
color: #FFFFFF;
}
.ant-mistake .anm-heading {
margin: 0;
font-weight: 700;
font-size: 65px;
line-height: 74px;
letter-spacing: -0.28px;
color: #FFFFFF;
}
.ant-mistake .anm-reason {
flex: 1 1 46%;
padding-top: 6px;
}
.ant-mistake .anm-body {
margin: 0 0 28px;
font-size: 24px;
line-height: 35px;
color: #FFFFFF;
}
.ant-mistake .anm-body:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Analytics and tracking page -- "Three people, three reports."
(components/analytics-and-tracking/ThreeReports.js)
The white card from "Three questions" carrying a different payload, on the
same #F5F5F7 band: the radius, the shadow and the 12px label are restated
here rather than shared, because the two sections are free to move apart
later and only the section head is meant to stay locked together.
Every rule carries .ant-reports -- the page is wrapped in .bg-dark, whose
h1..h6 rule in style.css would otherwise take the ink off the card titles.
The artwork is a cutout, so the purple plinth under it is drawn here and
the cadence on it stays real text.
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-reports {
background: #F5F5F7;
padding: 100px 0 100px;
}
.ant-reports .anr-heading {
margin-bottom: 50px;
color: #1D1D1F;
}
.ant-reports .anr-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.ant-reports .anr-card {
display: flex;
flex-direction: column;
padding: 30px 30px 0;
background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.0627);
overflow: hidden;
padding-right: 0;
}
.ant-reports .anr-who {
margin: 0 0 14px;
font-weight: 600;
font-size: 18px;
line-height: 21.6px;
letter-spacing: -0.27px;
text-transform: uppercase;
color: #1D1D1F;
}
.ant-reports .anr-needs {
margin: 0 0 18px;
font-weight: 700;
font-size: 36px;
line-height: 30px;
color: #FE4601;
}
.ant-reports .anr-items {
margin: 0 0 0px;
padding: 0;
list-style: none;
}
/* The dot is drawn by the rule rather than the list, so it keeps its size
and its colour whatever the line does. */
.ant-reports .anr-item {
position: relative;
padding-left: 18px;
margin-bottom: 10px;
font-size: 16.68px;
line-height: 21.6px;
color: #1D1D1F;
}
.ant-reports .anr-item:last-child {
margin-bottom: 0;
}
.ant-reports .anr-item::before {
content: "";
position: absolute;
top: 9px;
left: 0;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FE4601;
}
/* The artwork stands on the plinth: it is pushed to the foot of the card so
the three plinths line up however long the list above them runs. */
/* The artwork is a cutout with no ground of its own, so it is let out to the
card's own edges and sat on the floor of it -- contain, never cover, so
nothing of the figure is cut away. margin-top: auto pushes the block to the
foot of the card, which is what lines the three pills up however long the
list above them runs. */
.ant-reports .anr-media {
position: relative;
margin: auto 0 0;
padding-top: 0px;
}
.ant-reports .anr-image {
display: block;
width: 100%;
/* height: 250px; */
object-fit: contain;
object-position: right bottom;
}
/* Bottom left of the artwork, the way the frame draws it. */
.ant-reports .anr-cta {
position: absolute;
right: 20px;
bottom: 20px;
}
.ant-reports .swy-cta {
gap: 8px;
padding: 12px 25px;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.2px;
}
.ant-reports .swy-cta:hover,
.ant-reports .swy-cta:focus {
filter: brightness(0.93);
color: #FFFFFF;
}
/* The disc's ink is named here rather than left to --swy-purple, which is
declared on the sections that variable was written for and not on this one. */
.ant-reports .swy-cta-icon {
width: 24px;
height: 24px;
color: #8668FF;
}
/* ==========================================================================
Analytics and tracking page -- "Start with one question you cannot answer."
(components/analytics-and-tracking/Audit.js)
The closing band. The artwork is absolutely placed against the section's
right edge and the section clips it, so the crop is the same shape at every
width instead of the image resizing itself into a different composition.
The copy sits above it on z-index and keeps its own max-width, so the two
never overlap however wide the screen gets.
Every rule carries .ant-audit: the page is wrapped in .bg-dark, whose
h1..h6 rule in style.css sets its own colour at a higher specificity than
a bare class.
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-audit {
position: relative;
overflow: hidden;
background: #0B0A1E;
padding: 120px 0;
}
.ant-audit .container {
position: relative;
z-index: 1;
}
.ant-audit .ana-art {
position: absolute;
right: 1px;
bottom: 0;
z-index: 0;
max-width: 684px;
height: auto;
pointer-events: none;
}
.ant-audit .ana-text {
max-width: 620px;
}
.ant-audit .ana-heading {
margin: 0 0 26px;
font-weight: 500;
font-size: 84.4px;
line-height: 85px;
letter-spacing: -3.46px;
color: #FFFFFF;
}
.ant-audit .ana-note {
margin: 0 0 38px;
max-width: 520px;
font-size: 19.2px;
line-height: 30px;
color: #FFFFFF;
}
/* 239 x 48 is the frame's own button. It is a fixed box rather than padding,
so the pill is the same size whatever the label is changed to. */
.ant-audit .ana-cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 239px;
height: 48px;
background: #FFFFFF;
border-radius: 50px;
font-weight: 700;
font-size: 18px;
line-height: 22px;
text-transform: uppercase;
color: #FE4601;
transition: filter 0.2s ease;
}
.ant-audit .ana-cta:hover,
.ant-audit .ana-cta:focus {
filter: brightness(0.94);
color: #FE4601;
}
/* ==========================================================================
Brand page -- "Why it matters" slider arrows.
The three cards are a grid at every width except the phone, where they turn
into the same swipeable rail the homepage uses (see responsive.css). These
arrows belong to that rail only, so they are off by default and switched on
at the breakpoint that builds the track.
========================================================================== */
.brand-why .bw-nav-below {
display: none;
}
/* ==========================================================================
Brand page -- "What you get" phones.
The little rule under each format name belongs to the social-content
version of this section. On /brand the same component is reused, and there
the line is not wanted, so it is dropped under the page's own .brand-page
parent -- at every width, and without touching /social-content.
========================================================================== */
.brand-page .social-make .wmk-rule {
display: none;
}
/* ==========================================================================
Search page -- "Not Just Numbers" slider arrows.
Same arrangement as .brand-why's: the cards are a grid at every width
except the phone, where they turn into a swipeable rail (see
responsive.css). These arrows belong to that rail only.
========================================================================== */
.search-results .sr-nav-below {
display: none;
}
/* ── /search — "How we work" slider arrows (phone only) ───────────────────── */
/* The arrows belong to the phone rail. Above 560 the four steps are a grid
with nothing to scroll, so the control has nothing to do. */
.search-steps .sst-nav-below {
display: none;
}
/* ── /search — "What we measure" slider arrows (phone only) ───────────────── */
/* The arrows belong to the phone rail. Above 560 the cards are a row that
opens on hover, so the control has nothing to do. */
.search-measure .smm-nav-below {
display: none;
}
/* ── /social-content — "Platforms we run" slider arrows (phone only) ──────── */
/* The arrows belong to the phone rail. Above 560 the cards are a grid with
nothing to scroll, so the control has nothing to do. */
.social-platforms .spl-nav-below {
display: none;
}
/* ── /paid-ads — "What the accounts actually did" arrows (phone only) ─────── */
/* The arrows belong to the phone rail. Above 560 the cards are a grid with
nothing to scroll, so the control has nothing to do. */
.pa-results .par-nav-below {
display: none;
}
/* ── /paid-ads — "Eight things decide performance" arrows (phone only) ────── */
/* The arrows belong to the phone rail. Above 560 the cards are a grid, or the
desktop ramp, so the control has nothing to do. */
.pa-decides .pdw-nav-below {
display: none;
}
/* ==========================================================================
Paid ads page -- "What we measure". The arrows under the metric cards are
a phone-only control: above 560 the four cards are a row that shows whole,
so there is nothing to step through. The rail itself is in responsive.css.
========================================================================== */
.pa-measure .pms-nav-below {
display: none;
}
/* ==========================================================================
Paid ads page -- the Google and Meta marks in "Where we run them".
Every other icon in the set is drawn on a 291x221 canvas with the mark
sitting inside it, so a plain width draws them all at the same visual
size. These two came from elsewhere: google.png is a tight 158 square and
meta.png a 252x221, so the same width paints a far bigger mark. Rather
than a width per breakpoint, both are given the set's canvas shape and
contained inside it -- so they scale with whatever width the breakpoint
already sets, and only the mark inside changes.
========================================================================== */
.paid-platforms .spl-icon-google,
.paid-platforms .spl-icon-meta {
height: auto;
aspect-ratio: 291 / 221;
object-fit: contain;
}
/* The Google mark has no margin of its own at all, so it takes the one the
rest of the set carries as padding. */
.paid-platforms .spl-icon-google {
padding: 6.5% 0;
}
/* ==========================================================================
Analytics and tracking page -- "Three questions", the pieces the phone
needs (components/analytics-and-tracking/ThreeQuestions.js)
The tab row and the artwork exist only below 560; they are switched off
here so the desktop block above stays exactly as it was. The label inside
"what we build" moved into the paragraph, so it is put back to a block --
the same shape it drew as its own .
Responsive steps live at the end of responsive.css.
========================================================================== */
.ant-questions .anq-tabs,
.ant-questions .anq-shot {
display: none;
}
.ant-questions .anq-build-label {
display: block;
}
/* ==========================================================================
Analytics and tracking page -- "Three people, three reports.", the arrows
under the row (components/analytics-and-tracking/ThreeReports.js)
They belong to the phone's rail only; above 560 the row is a grid with
nothing to scroll, so they are off here and switched on in responsive.css.
========================================================================== */
.ant-reports .anr-nav-below {
display: none;
}
/* ==========================================================================
Home page -- the hero's numbers panel (components/home/Hero.js)
The sentence about 15 brands is now three numbers on one line inside the
same .hero-stat-badge panel the other heroes wear, with the markets they
were earned in reading underneath it. Only the inside of the panel is
described here, so the brand, paid ads and social heroes that share the
badge are untouched.
Responsive steps live at the end of responsive.css.
========================================================================== */
.hero-stats {
display: flex;
align-items: flex-start;
gap: 34px;
padding: 22px 17px;
max-width: 570px;
text-align: center;
}
.hero-stats .hero-stat {
flex: 1 1 0;
min-width: 0;
}
.hero-stats .hero-stat-num {
margin: 0px 0 10px;
font-weight: 700;
font-size: 40px;
line-height: 105%;
color: #FE4601;
}
.hero-stats .hero-stat-label {
margin: 0;
font-weight: 700;
font-size: 18px;
line-height: 16px;
color: #D0BDFF;
}
.hero-countries-dot {
margin: 0 5px;
font-weight: 700;
color: #FE4601;
}
.hero-countries {
margin: 20px 0 0;
max-width: 499px;
font-weight: 500;
font-size: 22.68px;
letter-spacing: 0.22px;
line-height: 27.4px;
text-align: center;
color: #ffffff!important;
}
/* ==========================================================================
Home page -- "Case Studies" (components/home/WorkShowcase.js)
One study open inside a panel on the page's dark: the copy on the left,
its artwork on the right, and the row of logos underneath acting as the
control. Only the open logo is in colour -- the rest are drained -- which
is the whole state this section has, so it is one filter rule rather than
a second set of cards.
The section keeps .workshow-section for the dark ground and the page
rhythm; everything inside it is .wsc-.
Responsive steps live at the end of responsive.css.
========================================================================== */
.wsc-cases .wsc-panel {
/* background: #1A1235; */
/* border-radius: 24px; */
/* padding: 46px 48px 40px; */
}
.wsc-cases .wsc-eyebrow {
margin: 0 0 26px;
font-weight: 700;
font-size: 54.3px;
letter-spacing: -0.28px;
line-height: 60px;
color: #FE4601;
}
.wsc-cases .wsc-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
align-items: center;
gap: 48px;
margin-bottom: 40px;
}
.wsc-cases .wsc-title {
margin: 0 0 18px;
max-width: 520px;
font-weight: 700;
font-size: 45px;
line-height: 50px;
color: #ffffff;
}
.wsc-cases .wsc-accent {
color: #FE4601;
}
.wsc-cases .wsc-body {
margin: 0 0 30px;
max-width: 680px;
font-size: 22px;
line-height: 150%;
color: #D0D0D0;
}
.wsc-cases .wsc-media {
border-radius: 20px;
overflow: hidden;
width: 459.54px;
aspect-ratio: 1 / 1;
height: 439px;
}
.wsc-cases .wsc-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wsc-cases .wsc-logos {
display: flex;
gap: 14px;
margin: 0;
padding: 0 0 4px;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.wsc-cases .wsc-logos::-webkit-scrollbar {
display: none;
}
/* The drained state is the resting one: colour is how the open study says
it is open, so the filter is lifted rather than added. */
.wsc-cases .wsc-logo {
display: block;
width: 168px;
height: 118px;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
overflow: hidden;
filter: grayscale(1);
opacity: 0.75;
transition: filter 0.35s ease, opacity 0.35s ease;
}
.wsc-cases .wsc-logo.is-on {
filter: none;
opacity: 1;
}
.wsc-cases .wsc-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.wsc-cases .wsc-cta {
padding: 6px 6px 6px 24px;
font-size: 15px;
line-height: 26px;
gap: 12px;
}
/* The disc's ink is named here rather than left to --swy-purple, which is
declared on the sections that variable was written for and not on this
one, so the arrow would otherwise draw white on white. */
.wsc-cases .wsc-cta .swy-cta-icon {
width: 26px;
height: 26px;
font-size: 11px;
color: #8668FF;
}
/* ======================================================================
CASE STUDY — /case-study/
----------------------------------------------------------------------
Every section on this page is written in the payroll admin, so the rules
below describe a shape rather than a particular study: a heading that may
arrive in three pieces, a media block that may be a still or a clip, and
rows of figures whose count is not known here.
.cs-body is the two-column frame — the page on the left, the "On this
page" rail pinned on the right. The rail is dropped below 1199, where
there is no room beside the content for it.
====================================================================== */
.cs-page {
background: #0E0920;
}
/* The page sits inside the site's own .container, so the width and the side
gutters are the ones every other page uses; this only splits that column
into the content and the rail. */
.cs-body {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 236px;
gap: 40px;
align-items: start;
}
.cs-main {
min-width: 0;
}
/* ---- the rail --------------------------------------------------------- */
.cs-toc {
position: sticky;
top: 100px;
background: #171033;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 0px;
overflow: hidden;
max-width: 270px;
}
/* The title is a band across the top of the panel, not a line of text
floating inside it. */
.cs-toc .cst-title {
margin: 0;
padding: 12px 16px;
background: #ffffff1a;
font-size: 14.5px;
text-align: center;
line-height: 14px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #C9C3E4;
}
.cs-toc .cst-list {
list-style: none;
margin: 0;
padding: 0;
}
.cs-toc .cst-list li + li .cst-link {
border-top: 1px solid rgba(255, 255, 255, .06);
}
.cs-toc .cst-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 13px;
font-size: 15px;
line-height: 17px;
font-weight: 500;
color: #B9B4CC;
text-decoration: none;
transition: color .2s ease, background .2s ease;
}
/* The section's own number, the same one printed above its heading, so the
rail and the page agree. */
.cs-toc .cst-n {
flex: 0 0 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: .4px;
color: #8668FF;
}
.cs-toc .cst-label {
flex: 1;
min-width: 0;
}
.cs-toc .cst-chev {
flex: 0 0 auto;
color: #6C63A8;
}
.cs-toc .cst-link:hover {
color: #ffffff;
background: rgba(255, 255, 255, .04);
}
/* The section currently under the reading line. */
.cs-toc .cst-link.is-on {
color: #ffffff;
background: rgba(255, 255, 255, .05);
}
.cs-toc .cst-link.is-on .cst-n,
.cs-toc .cst-link.is-on .cst-chev {
color: #FE4601;
}
.cs-toc .cst-cta {
display: block;
padding: 12px 16px;
background: #FE4601;
font-size: 11.5px;
line-height: 16px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
}
.cs-toc .cst-cta:hover {
background: #E63F00;
color: #ffffff;
}
/* ---- hero ------------------------------------------------------------- */
.cs-hero {
padding: 34px 0 0;
}
.cs-hero .container {
padding: 0;
max-width: none;
}
/* The identity strip: who the work was for on the left, what kind of work
it was on the right. */
.cs-hero .csh-ident {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 40px;
}
.cs-hero .csh-brand {
display: flex;
align-items: center;
gap: 12px;
}
.cs-hero .csh-brand-logo {
width: 53px;
height: 53px;
border-radius: 50%;
object-fit: cover;
}
.cs-hero .csh-brand-name {
margin: 0;
font-size: 18px;
line-height: 20px;
font-weight: 700;
color: #ffffff;
}
.cs-hero .csh-brand-meta {
margin: 2px 0 0;
font-size: 12.5px;
line-height: 16px;
color: #8C86A6;
}
.cs-hero .csh-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.cs-hero .csh-tag {
padding: 5px 13px;
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: .3px;
color: #D6D2E6;
}
/* The opening statement is centred, the way the design sets it, with the
paragraph and the film centred under it on the same axis. */
.cs-hero .csh-title {
max-width: 930px;
margin: 0 auto;
font-size: 56px;
line-height: 105%;
font-weight: 800;
letter-spacing: -1.2px;
text-align: center;
color: #ffffff;
}
.cs-hero .csh-accent {
color: #FE4601;
}
.cs-hero .csh-intro {
max-width: 660px;
margin: 22px auto 0;
font-size: 18.5px;
line-height: 29px;
text-align: center;
color: #fff;
}
/* ---- hero media ------------------------------------------------------- */
.cs-hero .csh-media {
position: relative;
max-width: 930px;
margin: 38px auto 0;
border-radius: 12px;
overflow: hidden;
height: 447px;
/* aspect-ratio: 16 / 9; */
background: #17102F;
}
.cs-hero .csh-still,
.cs-hero .csh-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Sits over the still until someone asks for the clip: the brand disc with a
white triangle in it, ringed so it holds up over a light frame as well as a
dark one.
`display: grid` + `place-items: center` puts the triangle dead centre, and
the triangle then takes a small margin of its own to correct for the fact
that a triangle's visual centre sits left of its box's. The triangle is
drawn in borders rather than as an svg, so it always renders at exactly
this size and colour. */
.cs-hero .csh-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 76px;
height: 76px;
padding: 0;
background: #FE4601;
border: 3px solid rgba(255, 255, 255, .9);
border-radius: 50%;
box-shadow: 0 10px 30px rgba(11, 5, 26, .35);
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.cs-hero .csh-play:hover {
background: #ff5c22;
transform: translate(-50%, -50%) scale(1.06);
}
.cs-hero .csh-play-ico {
display: block;
width: 0;
height: 0;
margin-left: 5px;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 20px solid #ffffff;
}
/* ---- hero figures ----------------------------------------------------- */
/* Four cells divided by hairlines, the way the design rules them off, rather
than four cards with gaps. The count is not fixed, so the rule is hung on
the cell instead of on a column template. */
.cs-hero .csh-stats {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 52px 0 0;
padding: 0;
}
.cs-hero .csh-stat {
flex: 1 1 180px;
min-width: 0;
padding: 0 22px;
text-align: center;
}
.cs-hero .csh-stat + .csh-stat {
border-left: 1px solid rgba(255, 255, 255, .1);
}
.cs-hero .csh-stat-value {
margin: 0;
font-size: 60px;
line-height: 68px;
font-weight: 800;
letter-spacing: -.6px;
color: #FE4601;
}
.cs-hero .csh-stat-label {
margin: 6px 0 0;
font-size: 16.5px;
line-height: 22px;
font-weight: 700;
color: #ffffff;
}
.cs-hero .csh-stat-sub {
margin: 3px 0 0;
font-size: 16px;
line-height: 16px;
color: #8C86A6;
}
/* ==========================================================================
CASE STUDY SECTIONS — the numbered stack under the hero on
/case-study/. Every rule is prefixed with its section class because
the page sits inside .bg-dark, which style.css uses to paint all headings
white; these sections need their own ink.
========================================================================== */
.cs-main .cs-section {
padding: 86px 0 0;
}
.cs-main .cs-section:last-child {
padding-bottom: 20px;
}
/* --- the "05 / THE PROBLEM" strip and the heading under it ---------------- */
.cs-main .cs-head {
max-width: 820px;
margin-bottom: 30px;
}
.cs-main .csd-eyebrow {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 4px;
font-size: 20px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
/* The whole strip is orange the way the design sets it, with the slash
dimmed so the number and the label still read as two things. */
color: #FE4601;
}
/* A section that carries no heading -- the design leaves several without one
-- should not also carry the gap that sat under the eyebrow. */
.cs-main .csd-eyebrow:only-child {
margin-bottom: 0;
}
.cs-main .csd-num {
color: #FE4601;
}
.cs-main .csd-slash {
color: rgba(254, 70, 1, .5);
}
.cs-main .csd-title {
margin: 0;
font-size: 55px;
line-height: 105%;
font-weight: 700;
color: #ffffff;
}
.cs-main .csd-accent {
color: #FE4601;
}
.cs-main .csd-intro {
margin: 16px 0 0;
font-size: 16px;
line-height: 22px;
color: #fff;
}
/* The light band and the orange band each re-ink the same strip. */
/* The eyebrow stays orange on the pale band -- the design keeps it the one
constant across both grounds. Only the heading and the paragraph turn. */
.cs-main .cs-head-light .csd-eyebrow {
color: #FE4601;
}
.cs-main .cs-head-light .csd-title {
color: #0E0920;
}
.cs-main .cs-head-light .csd-intro {
color: rgba(14, 9, 32, .7);
}
.cs-main .cs-head-on-orange .csd-eyebrow,
.cs-main .cs-head-on-orange .csd-slash,
.cs-main .cs-head-on-orange .csd-num {
color: rgba(255, 255, 255, .8);
}
.cs-main .cs-head-on-orange .csd-title,
.cs-main .cs-head-on-orange .csd-accent {
color: #ffffff;
}
.cs-main .cs-head-on-orange .csd-intro {
color: rgba(255, 255, 255, .85);
}
/* --- 01 / IN MOTION: the mosaic of clips --------------------------------
The design's shape: one wide film on the left with the rest stacked beside
it, not three equal columns. The first tile spans two rows and takes its
height from them, so the block stays flush top and bottom however tall the
right-hand column runs. */
.cs-motion .csm-grid {
display: grid;
grid-template-columns: 670px 302px;
justify-content: center;
column-gap: 18px;
row-gap: 26.45px;
margin: 0;
padding: 0;
list-style: none;
}
.cs-motion .csm-tile {
min-width: 0;
}
.cs-motion .csm-tile:first-child {
grid-row: span 2;
}
.cs-motion .csm-frame {
position: relative;
width: 304px;
height: 184px;
aspect-ratio: auto;
border-radius: 8px;
overflow: hidden;
background: #17102F;
}
/* The wide one is ruled by its two-row span, so its own ratio is dropped:
whatever the tiles beside it add up to is its height. */
.cs-motion .csm-tile:first-child .csm-frame {
width: 100%;
height: 394.45px;
}
.cs-motion .csm-still,
.cs-motion .csm-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* The hero's play button at tile size: the same brand disc, ring and
triangle, so a clip reads the same wherever it sits on the page. */
.cs-motion .csm-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 52px;
height: 52px;
padding: 0;
background: #FE4601;
border: 2px solid rgba(255, 255, 255, .9);
border-radius: 50%;
box-shadow: 0 8px 22px rgba(11, 5, 26, .35);
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.cs-motion .csm-play:hover {
background: #ff5c22;
transform: translate(-50%, -50%) scale(1.06);
}
.cs-motion .csm-play-ico {
display: block;
width: 0;
height: 0;
margin-left: 4px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 15px solid #ffffff;
}
/* --- 02 / THE WORK ITSELF: the strip that runs past on its own ----------
The look is the brand page's first marquee row, written out again here
rather than shared: /brand's row is fixed artwork, this one is whatever the
admin loaded into the study, and the two must be able to drift apart.
Two variables drive the row. --csw-h is its height, and --csw-w is the
width of a stacked column, which cannot be derived from the height: the two
halves are cropped to fill, so fixing the width is what keeps the strip's
rhythm even. Both step down together in responsive.css. */
.cs-work .csw-row {
overflow: hidden;
--csw-h: 440px;
--csw-w: 198px;
--csw-gap: 10px;
}
/* `width: max-content` stops the flex line from wrapping or shrinking: the
track has to be its full natural length for -50% to equal exactly one copy.
`will-change` keeps the strip on its own compositor layer, which is what
lets something this wide move without tearing. */
.cs-work .csw-track {
display: flex;
width: max-content;
animation-name: csw-scroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
/* Paused rather than slowed, so a piece someone is looking at stays put. */
.cs-work .csw-row:hover .csw-track {
animation-play-state: paused;
}
/* The admin can stop the strip by setting the seconds to 0. */
.cs-work .csw-track-still {
animation: none;
}
/* The trailing margin is the spacing -- see the note in the component about
why this cannot be a flex `gap`. */
.cs-work .csw-item {
flex: 0 0 auto;
margin-right: 18px;
height: var(--csw-h);
}
/* Height-driven: the tile keeps the design's 413x720 shape and takes whatever
width that needs. The ratio is declared rather than left to the file,
because a media element that has not arrived yet is zero wide and would
shove the strip sideways as each one decoded. */
.cs-work .csw-tall {
display: block;
width: auto;
height: 100%;
aspect-ratio: 413 / 720;
border-radius: 14px;
object-fit: cover;
background: #17102F;
}
/* `min-height: 0` on the halves because a flex item defaults to min-content:
without it each one would refuse to go below its natural height and the
column would push past the row. */
.cs-work .csw-stack {
display: flex;
flex-direction: column;
gap: var(--csw-gap);
width: var(--csw-w);
height: 100%;
}
.cs-work .csw-half {
display: block;
flex: 1 1 0;
min-height: 0;
width: 100%;
border-radius: 14px;
object-fit: cover;
background: #17102F;
}
@keyframes csw-scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.cs-work .csw-track {
animation: none;
}
}
/* --- 03 / THE CHALLENGE: the picture cards ------------------------------
The card is /paid-ads' "What we measure" card (.pms-card), rewritten for
the dark ground: the same rounded media block lifting its image on hover
and the same purple title. The head runs the design's way here -- heading
on the left, the paragraph set against it on the right -- so this section
overrides the single centred column every other head uses. */
.cs-main .cs-head-split {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
max-width: none;
}
.cs-main .cs-head-split .csd-head-main {
flex: 1 1 auto;
min-width: 0;
}
.cs-main .cs-head-split .csd-head-side {
flex: 0 1 360px;
}
.cs-main .cs-head-split .csd-intro {
margin: 0;
text-align: right;
}
/* The team band's line sits level with its heading rather than at the top of
it, because that heading runs to two lines here. */
.cs-teams .cs-head-split {
align-items: center;
}
.cs-problem .csp-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.cs-problem .csp-frame {
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
background: #17102F;
}
.cs-problem .csp-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.cs-problem .csp-card:hover .csp-img {
transform: scale(1.05);
}
.cs-problem .csp-title {
margin: 18px 0 0;
font-size: 22px;
line-height: 28px;
font-weight: 700;
color: #8668FF;
}
.cs-problem .csp-body {
margin: 10px 0 0;
font-size: 14px;
line-height: 23px;
color: rgba(255, 255, 255, .62);
}
/* --- 04 / OUR APPROACH: the numbered cards ------------------------------
Each card is a step: its number sits behind the words as a ghost at the
top, and the words themselves sit at the foot, so a card with two lines of
title and a card with four still line up along the bottom.
The row is ruled in four columns rather than the number of cards, which is
what keeps three of them the same width as the four in the section above
instead of stretching to fill the page.
Three grounds, chosen per card in the admin: the dark one every section
uses, a pale one, and the purple. Each carries its own ink, including the
ghost number's. */
.cs-approach .csa-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.cs-approach .csa-card {
display: flex;
flex-direction: column;
min-height: 300px;
padding: 22px 22px 26px;
background: #171033;
border: 1px solid rgba(255, 255, 255, .07);
border-radius: 16px;
}
.cs-approach .csa-light {
background: #EDEDED;
border-color: transparent;
}
.cs-approach .csa-purple {
background: #8668FF;
border-color: transparent;
}
/* Set large and faint, and pulled tight to the top of the card: it is a
marker, not a line of text. */
.cs-approach .csa-num {
display: block;
margin: 0px 0 0;
font-size: 100px;
text-align: center;
line-height: 82px;
font-weight: 700;
letter-spacing: -2px;
color: rgba(255, 255, 255, .09);
}
.cs-approach .csa-light .csa-num {
color: rgba(14, 9, 32, .16);
}
.cs-approach .csa-purple .csa-num {
color: rgba(255, 255, 255, .24);
}
/* The words are pushed to the foot of the card, which is what lines the
titles up across a row of uneven cards. */
.cs-approach .csa-title {
margin: auto 0 0;
font-size: 32px;
line-height: 113%;
font-weight: 700;
color: #ffffff;
}
.cs-approach .csa-body {
margin: 12px 0 0;
font-size: 16.5px;
line-height: 139%;
font-weight: 600;
color: rgba(255, 255, 255, .72);
}
.cs-approach .csa-light .csa-title {
color: #0E0920;
}
.cs-approach .csa-light .csa-body {
color: rgba(14, 9, 32, .68);
}
.cs-approach .csa-purple .csa-body {
color: rgba(255, 255, 255, .88);
}
/* --- 05 / WHAT WE DELIVERED: the team band -----------------------------
The band sits on the page's own dark ground -- only the cards are light.
The cards are the homepage's .sixparts-card written out for this band: the
same white panel, the same artwork bled to the card's own edges, the same
pill. They sit in a snapping scroller rather than a grid, so a study with
six teams reads the same as one with three. */
.cs-teams .cstm-track {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.cs-teams .cstm-track::-webkit-scrollbar {
display: none;
}
.cs-teams .cstm-card {
flex: 0 0 300px;
max-width: 300px;
scroll-snap-align: start;
scroll-snap-stop: always;
display: flex;
flex-direction: column;
padding: 24px 22px 24px;
background: #ffffff;
border-radius: 18px;
box-shadow: 0 1px 2px rgba(11, 11, 15, .05);
}
.cs-teams .cstm-title {
margin: 0 0 12px;
font-size: 19px;
line-height: 26px;
font-weight: 700;
color: #FE4601;
}
.cs-teams .cstm-points {
margin: 0;
padding-left: 16px;
list-style: disc;
font-size: 13px;
line-height: 22px;
color: rgba(14, 9, 32, .7);
}
.cs-teams .cstm-body {
margin: 0;
font-size: 13px;
line-height: 22px;
color: rgba(14, 9, 32, .7);
}
/* The artwork runs to the card's own edges, so the media box cancels the
card padding on both sides; the card's radius clips it. `margin-top: auto`
holds it to the foot, which lines the pictures up across a row of cards
whose lists are different lengths. */
.cs-teams .cstm-media {
margin: auto -22px 0;
padding: 18px 0 6px;
overflow: hidden;
}
.cs-teams .cstm-media img {
display: block;
width: 100%;
object-fit: contain;
}
.cs-teams .cstm-cta {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 9px 18px;
border-radius: 999px;
background: #8668FF;
color: #ffffff;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: opacity .15s ease, transform .15s ease;
}
.cs-teams .cstm-cta:hover {
color: #ffffff;
opacity: .9;
transform: translateY(-1px);
}
/* --- 06 / HOW IT RAN: the stage cards ------------------------------------
The homepage's .howruns-card written out for this page: a full-bleed image
with the copy over its clear half, a dash eyebrow, and the stage number set
large and faint into the artwork. The copy swaps sides down the list.
The cards here sit in the content column beside the rail rather than across
the page, so the type is a step smaller than the homepage's and the card
keeps the artwork's ratio instead of a fixed height.
A step with no artwork still reads: the card carries a gradient of its own,
purple by default and blue on the flipped rows, which is the alternation
the design runs. `tone` on the step overrides it. */
.cs-ran .csr-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.cs-ran .csr-card {
position: relative;
display: flex;
align-items: center;
aspect-ratio: 1800 / 671;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(115deg, #7C3FE4 0%, #A46BF5 100%);
}
.cs-ran .csr-card.is-flipped {
justify-content: flex-end;
background: linear-gradient(115deg, #3B7BE0 0%, #6FA8F2 100%);
}
.cs-ran .csr-purple,
.cs-ran .csr-purple.is-flipped {
background: linear-gradient(115deg, #7C3FE4 0%, #A46BF5 100%);
}
.cs-ran .csr-blue,
.cs-ran .csr-blue.is-flipped {
background: linear-gradient(115deg, #3B7BE0 0%, #6FA8F2 100%);
}
.cs-ran .csr-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-ran .csr-card-body {
position: relative;
z-index: 2;
width: 50%;
padding-left: 6%;
padding-right: 2%;
}
.cs-ran .csr-card.is-flipped .csr-card-body {
padding-left: 2%;
padding-right: 6%;
}
.cs-ran .csr-eyebrow {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 19px;
font-weight: 600;
line-height: 140%;
color: #ffffff;
}
.cs-ran .csr-eyebrow i {
display: block;
flex: 0 0 18px;
width: 18px;
height: 2px;
background: currentColor;
}
.cs-ran .csr-card-title {
margin: 0 0 14px;
font-size: 27px;
line-height: 130%;
font-weight: 700;
color: #ffffff;
white-space: pre-line;
}
.cs-ran .csr-card-desc {
margin: 0;
font-size: 17px;
line-height: 27px;
color: rgba(255, 255, 255, .92);
}
/* Sunk into the artwork behind the copy, on the side the copy has left. */
.cs-ran .csr-num {
position: absolute;
top: 8%;
right: 3.5%;
z-index: 1;
font-size: 72px;
line-height: 1;
font-weight: 700;
letter-spacing: -2px;
color: rgba(255, 255, 255, .22);
pointer-events: none;
}
.cs-ran .csr-card.is-flipped .csr-num {
right: auto;
left: 3.5%;
}
/* --- 09 / STACK: the folder cards ---------------------------------------
The /website-and-cro tech card (components/website-and-cro/Tech.js) drawn in
CSS: there each card is a finished PNG with the name baked in, here the
tools are typed per study, so the same shape is built and the name is real
text. The design sets this one at 205x128 -- wider and shorter than the
service page's, with no logo under the name -- and a logo is drawn only if
one is given.
The shape is three pieces: the panel, a tab riding above its right end, and
a fillet that curves the panel's top edge up into the tab's left side. The
fillet is a radial-gradient rather than a clipped box, so it inherits
--csk-ground -- the colour typed in the admin -- like the rest. */
.cs-stack .csk-row {
overflow: hidden;
margin-top: 18px;
}
/* `width: max-content` stops the line from wrapping or shrinking: the track
has to be its full natural length for -50% to equal exactly one copy. */
.cs-stack .csk-track {
display: flex;
align-items: flex-start;
width: max-content;
padding-top: var(--csk-tab, 16px);
animation-name: csk-scroll;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
/* Paused rather than slowed, so a card someone is reading stays put. */
.cs-stack .csk-row:hover .csk-track {
animation-play-state: paused;
}
.cs-stack .csk-track-still {
animation: none;
}
@keyframes csk-scroll {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-50%, 0, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.cs-stack .csk-track {
animation: none;
}
}
.cs-stack .csk-card {
--csk-ground: #262626;
--csk-tab: 16px;
position: relative;
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: 205px;
aspect-ratio: 205 / 128;
margin-right: 14px;
padding: 16px 16px 18px;
background: var(--csk-ground);
border-radius: 12px;
}
/* The tab, on the right of the card's top edge, with only its own top
corners rounded so it reads as one shape with the panel. */
.cs-stack .csk-card::before {
content: "";
position: absolute;
top: calc(var(--csk-tab) * -1);
right: 0;
width: 38%;
height: calc(var(--csk-tab) + 12px);
background: var(--csk-ground);
border-radius: 12px 12px 0 0;
}
/* The fillet: ground everywhere except a quarter-disc struck from its own
top-left corner, which is the concave curve the artwork turns there. */
.cs-stack .csk-card::after {
content: "";
position: absolute;
top: calc(var(--csk-tab) * -1);
right: 38%;
width: var(--csk-tab);
height: var(--csk-tab);
/* background: radial-gradient(
circle at 0 0,
transparent var(--csk-tab),
var(--csk-ground) var(--csk-tab)
); */
}
.cs-stack .csk-name {
position: relative;
z-index: 1;
display: block;
font-size: 17px;
line-height: 23px;
font-weight: 700;
color: #ffffff;
}
/* The logo fills the room the name leaves, centred, as it is in the artwork. */
.cs-stack .csk-logo {
position: relative;
z-index: 1;
display: block;
width: 62%;
max-height: 56%;
margin: auto auto 0;
object-fit: contain;
}
/* --- 10 / WHERE IT LANDED: the orange closing band ----------------------
Everything on the band is centred: the head, the chain, and the figures. */
.cs-landed {
margin-top: 86px;
padding: 64px 40px 68px;
background: #FE4601;
border-radius: 28px;
text-align: center;
}
.cs-landed .cs-head {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
/* The chain: plain type with an arrow between the links, not a row of boxes.
The arrows are list items of their own so the row wraps between links
rather than stranding an arrow at the end of a line. */
.cs-landed .csl-flow {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 26px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.cs-landed .csl-node {
max-width: 200px;
}
.cs-landed .csl-arrow {
display: flex;
align-items: center;
height: 22px;
color: rgba(255, 255, 255, .85);
}
.cs-landed .csl-label {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 22px;
color: #ffffff;
}
.cs-landed .csl-sub {
display: block;
margin-top: 3px;
font-size: 11px;
line-height: 16px;
color: rgba(255, 255, 255, .82);
}
/* The figures: pale pills sat side by side under the chain, sized by their
own content rather than stretched across the band. */
.cs-landed .csl-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 40px 0 0;
padding: 0;
list-style: none;
}
.cs-landed .csl-stat {
flex: 0 0 auto;
min-width: 176px;
padding: 16px 26px 18px;
background: rgba(255, 255, 255, .17);
border-radius: 14px;
}
.cs-landed .csl-value {
margin: 0 0 2px;
font-size: 34px;
line-height: 1.1;
font-weight: 800;
color: #ffffff;
}
.cs-landed .csl-slabel {
margin: 0;
font-size: 13px;
font-weight: 600;
color: #ffffff;
}
.cs-landed .csl-sub2 {
margin: 4px 0 0;
font-size: 13px;
line-height: 20px;
color: rgba(255, 255, 255, .8);
}
/* --- HOME / WHAT WE BUILD IT FOR: the rewritten copy block --------------
The heading now opens on the orange line and the body runs to two
paragraphs, so the column is wider and the type a step smaller than the
single-sentence version it replaces. The geometry of the card stage
beside it is untouched. */
.builditfor-section .builditfor-heading {
font-size: 44px;
line-height: 52px;
margin: 0 0 34px;
max-width: 1000px;
}
.builditfor-section .builditfor-copy .builditfor-desc {
max-width: 620px;
font-size: 17px;
line-height: 27px;
font-weight: 400;
}
.builditfor-section .builditfor-copy .builditfor-desc + .builditfor-desc {
margin-top: 18px;
}
/* The lead sentence is the one line of the paragraph the design sets in
the page's white ink, so it reads before the rest of the block. */
.builditfor-section .builditfor-lead {
color: #ffffff;
font-weight: 700;
}
.builditfor-section .builditfor-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 26px;
padding: 12px 26px;
background: #8668FF;
border-radius: 999px;
color: #ffffff;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: opacity .15s ease, transform .15s ease;
}
.builditfor-section .builditfor-cta:hover {
color: #ffffff;
opacity: .9;
transform: translateY(-1px);
}