/* ==========================================================================
PAGE :: HOME
--------------------------------------------------------------------------
OWNER: unassigned
FIGMA: desktop node-id 2079-1484 | mobile node-id 2106-2627
Linked by index.html itself, after css/main.css:
It is NOT imported by the manifest. See block 7 of css/main.css for why.
Every section on the homepage is a banner-delimited block in this file,
in the order the sections appear on the page. One file per page, not one
per section. Copy the shape from css/pages/_EXAMPLE-page.css for a new
page.
Every selector in a block starts with that SECTION's prefix, `hero_`,
`problem_`, and so on, never `home_`. The prefix is what stops two
sections in one file colliding, and it is what lets a section move to
another page without a rename.
========================================================================== */
/* hero section css */
.hero_section {
position: relative;
padding-bottom: var(--hero-bottom);
/* CLIPPED ON X ONLY. The decor items bleed past both side edges by design
and have to stay clipped, or they widen the page. Nothing in here bleeds
vertically, and .hero_brand deliberately sits ABOVE the section's top
edge, so the Y axis is left visible. `clip` on one axis and `visible` on
the other is a legal pair; with `hidden` the visible side would be
forced to `auto` and the section would grow a scrollbar. */
overflow-x: clip;
overflow-y: visible;
}
/* --------------------------------------------------------------------------
THE BRAND TAB
--------------------------------------------------------------------------
Frame 2777:20 draws the paper tab 243x64 at the top centre of the page,
with the eyebrow at y 82 under it, and draws no links and no CTA. That is
the resting state of this page: the bar is hidden (data-nav-hidden-at-rest
in index.html) and this tab is the only lockup on screen.
media/strike-while-lockup.svg is the whole cut-out, sheet and torn edge
included, which is why this is one and not a wrapper plus a mask.
PLACED IN THE BAR'S BAND, not under it. The nav is sticky, so it holds its
72px at the top of the page whether it is visible or not. Pulling this up
by exactly that height lands it at page y 0, which is where the nav's own
lockup sits (measured, both at 1440 and at 375), so revealing the bar on a
scroll up does not shift the tab by a pixel, and the two never read as two
different tabs. It also keeps the hero's own rhythm untouched: the eyebrow
stays at y 82, exactly as the frame draws it.
The bar carries --nav-z, so on the way in it passes over this rather than
under it. No z-index needed here.
-------------------------------------------------------------------------- */
.hero_brand {
position: absolute;
top: calc(var(--nav-height) * -1);
left: 50%;
transform: translateX(-50%);
width: var(--nav-lockup-w);
max-width: 100%;
height: auto;
/* Decorative, and the nav's copy is the real link. Nothing to click. */
pointer-events: none;
}
.hero_container {
position: relative;
}
.hero_rhythm {
padding-top: var(--hero-padding-top);
}
.hero_layout {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero_eyebrow {
color: var(--color-ink);
opacity: var(--opacity-deemphasis);
}
.hero_heading {
max-width: 52.5rem;
margin-top: var(--hero-eyebrow-gap);
}
/* underline rides the phrase so it survives a reflow.
left bottom, not bottom: the reveal grows the background's width from 0%,
and a centred x-position would draw it outward from the middle instead of
left to right. At the finished 100% width the two are identical. */
.hero_heading-mark {
--line-mark-height: 0.3125rem;
--line-mark-dur: 1200ms;
display: inline-block;
background-image: url("/media/home/hero-underline.svg");
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% var(--line-mark-height);
}
.hero_tagline {
max-width: 50rem;
opacity: var(--opacity-deemphasis);
}
.hero_form {
width: 100%;
max-width: 40rem;
margin-top: var(--hero-form-gap);
}
.hero_decor-item {
position: absolute;
height: auto;
}
.hero_decor-item.is-topleft {
top: 0;
left: -14.6094%;
width: 34.0920%;
}
.hero_decor-item.is-topright {
top: 0;
right: -8.6232%;
width: 33.7013%;
}
.hero_decor-item.is-left {
top: 27.7110rem;
left: -12.1246%;
width: 23.3312%;
}
.hero_decor-item.is-right {
top: 28.4933rem;
right: -2.1773%;
width: 14.5649%;
}
.hero_decor-item.is-center {
position: static;
align-self: flex-start;
margin-top: var(--hero-center-gap);
margin-left: 35.2344%;
width: 26.9531%;
}
/* intro section css */
.intro_section {
position: relative;
padding-bottom: var(--section-large);
}
.intro_layout {
display: grid;
grid-template-columns: 48.4375% 46.875%;
justify-content: space-between;
align-items: start;
}
.intro_copy {
padding-top: var(--intro-copy-offset);
}
/* Nicola Display Regular 32/40, not the h4 class: that one is Medium */
.intro_para {
font-family: var(--font-display);
font-size: var(--fs-h4);
font-weight: var(--weight-regular);
line-height: var(--lh-h4);
letter-spacing: var(--ls-h4);
color: var(--color-ink-copy);
}
.intro_para + .intro_para {
margin-top: var(--intro-para-gap);
}
/* same trick as the hero, blue stroke here */
.intro_mark {
--line-mark-height: 0.3rem;
--line-mark-dur: 1500ms; /* draws left to right, unhurried */
display: inline-block;
background-image: url("/media/home/intro-underline.svg");
background-repeat: no-repeat;
background-position: left calc(100% + var(--space-tiny));
background-size: 100% var(--line-mark-height);
}
.intro_cta {
margin-top: var(--intro-cta-gap);
}
.intro_checks {
display: flex;
gap: var(--space-large);
margin-top: var(--intro-checks-gap);
}
.intro_check {
display: flex;
align-items: center;
gap: var(--space-xsmall);
}
.intro_check-icon {
flex-shrink: 0;
}
.intro_media {
display: block;
width: 100%;
height: auto;
}
/* client logo marquee section css */
.logos_section {
position: relative;
display: flex;
align-items: center;
height: var(--logos-bar-height);
}
.logos_section::before {
content: "";
position: absolute;
top: calc((var(--logos-bar-height) - var(--logos-bar-art, 8.5rem)) / 2);
right: 0;
left: 0;
height: var(--logos-bar-art, 8.5rem);
background-image: url("/media/home/marquee-bar.png");
background-repeat: repeat-x;
background-position: left top;
background-size: var(--logos-bar-tile, 1440px) var(--logos-bar-art, 8.5rem);
}
.logos_marquee {
position: relative;
}
.home_marquee {
margin-top: var(--space-xsmall);
}
.logos_logo {
display: block;
max-width: none;
}
.logos_logo[src*="sumoquote"] { width: calc(226.498px * var(--logos-scale, 1)); height: calc(33.531px * var(--logos-scale, 1)); } /* 2451:12 */
.logos_logo[src*="aspire"] { width: calc(108.409px * var(--logos-scale, 1)); height: calc(52.0px * var(--logos-scale, 1)); } /* 2451:24 */
.logos_logo[src*="truckbase"] { width: calc(236.258px * var(--logos-scale, 1)); height: calc(28.059px * var(--logos-scale, 1)); } /* 2451:28 */
.logos_logo[src*="smartmoving"] { width: calc(224.697px * var(--logos-scale, 1)); height: calc(32.1px * var(--logos-scale, 1)); } /* 2451:33 */
.logos_logo[src*="quipli"] { width: calc(121.467px * var(--logos-scale, 1)); height: calc(34.096px * var(--logos-scale, 1)); } /* 2451:49 */
.logos_logo[src*="servicetitan"] { width: calc(222.85px * var(--logos-scale, 1)); height: calc(45.044px * var(--logos-scale, 1)); } /* 2451:52 */
.logos_logo[src*="knowhow"] { width: calc(169.023px * var(--logos-scale, 1)); height: calc(36.035px * var(--logos-scale, 1)); } /* 2451:55 */
.logos_logo[src*="review-wave"] { width: calc(156.741px * var(--logos-scale, 1)); height: calc(33.829px * var(--logos-scale, 1)); } /* 2451:58 */
.logos_logo[src*="sphinxbio"] { width: calc(190.901px * var(--logos-scale, 1)); height: calc(51.479px * var(--logos-scale, 1)); } /* 2451:61 */
.logos_logo[src*="tymber"] { width: calc(188.208px * var(--logos-scale, 1)); height: calc(48.905px * var(--logos-scale, 1)); } /* 2451:64 */
.logos_logo[src*="pushpress"] { width: calc(191.759px * var(--logos-scale, 1)); height: calc(48.169px * var(--logos-scale, 1)); } /* 2451:69 */
.logos_logo[src*="papertrail"] { width: calc(173.742px * var(--logos-scale, 1)); height: calc(30.836px * var(--logos-scale, 1)); } /* 2451:72 */
.logos_logo[src*="credit-repair-cloud"] { width: calc(170.694px * var(--logos-scale, 1)); height: calc(36.035px * var(--logos-scale, 1)); } /* 2451:73 */
.logos_logo[src*="spry"] { width: calc(93.918px * var(--logos-scale, 1)); height: calc(33.406px * var(--logos-scale, 1)); } /* 2451:103 */
.logos_logo[src*="deardoc"] { width: calc(145.509px * var(--logos-scale, 1)); height: calc(34.748px * var(--logos-scale, 1)); } /* 2451:105 */
/* proof / case-study marquee section css */
.proof_section {
position: relative;
padding-top: var(--space-huge);
padding-bottom: var(--space-huge);
overflow: clip;
}
/* .max-width-large's 52rem wraps this to 3 lines; 57rem is the narrowest
width that still balances it into 2. */
.proof_heading {
max-width: 57rem;
}
/* The generous gap above the cards is the section's own rhythm, not the
scaffold's section padding, because it sits between two children of the
same section rather than at its top or bottom edge. */
.proof_marquee {
margin-top: var(--space-huge);
}
/* the-problem / testimonials + copy section css */
.problem_section {
position: relative;
padding-top: var(--space-huge);
overflow: clip;
}
/* Narrow, left-aligned reading column, centred as a block. Shared by the
heading group and the lower copy block so both wrap at the same width.
45rem matches the reading column's authored width in the Figma export. */
.problem_wrapper {
width: 100%;
max-width: 45rem;
margin-left: auto;
margin-right: auto;
}
/* h1-h6 default to text-wrap:balance (see 02-reset.css), which rebalances
this heading into "...expertise" starting its own line. A plain greedy
wrap keeps "expertise" with the line above, matching the export. */
.problem_heading {
text-wrap: wrap;
}
/* Trust 2A 24/32, the same face/size the export uses for both the intro
line and the copy block below the cards (title-1 scale, regular weight,
not the Figtree body-copy scale). */
.problem_intro {
margin-top: var(--space-medium);
font-family: var(--font-body);
font-size: var(--fs-title-1);
line-height: var(--lh-title-1);
letter-spacing: var(--ls-title-1);
font-weight: var(--weight-regular);
color: var(--color-ink-copy);
}
/* Same trick as .hero_heading-mark / .intro_mark: a hand-drawn stroke riding
under the phrase as a background image, so it survives a reflow. The
three assets are all 6px tall raster strokes, stretched to the phrase's
width exactly like the existing marks; nothing here invents a new idiom.
display: inline (not inline-block) plus box-decoration-break: clone is
what makes the stroke follow a wrapped phrase: each wrapped line becomes
its own fragment box and gets its own copy of the background, sized and
positioned against that fragment only, instead of one image stretched
across the whole (invisible, multi-line) bounding box. */
.problem_mark {
--line-mark-height: 0.375rem;
--line-mark-dur: 1000ms; /* slower than --dur-slow: this reads as a drawn stroke */
display: inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
background-repeat: no-repeat;
background-position: left calc(100% + var(--space-xxsmall));
background-size: 100% var(--line-mark-height);
}
/* Heavier than the blue strokes: this one sits under the section's largest
type, where a 6px line reads as a hairline. The asset is solid ink across
all six of its source rows, so scaling the height just thickens it. */
.problem_mark.is-red {
--line-mark-height: 0.5rem;
background-image: url("/media/home/problem/red-line.png");
}
/* Both blue strokes get a touch more weight than the 6px default too, just
short of the red one, since they sit under smaller type. */
.problem_mark.is-blue-lg {
--line-mark-height: 0.4375rem;
background-image: url("/media/home/problem/blue-line-lg.png");
}
.problem_mark.is-blue-sm {
--line-mark-height: 0.4375rem;
background-image: url("/media/home/problem/blue-line-sm.png");
}
/* Scroll-in growth, driven by js/modules/reveal.js via [data-reveal-mark].
Gated behind .reveal-ready so a blocked/failed script never leaves the
line invisible: the base rule above (full width) is the fail-safe state.
Only background-size (not opacity) animates, so the text underneath
never fades or moves; each wrapped-line fragment grows independently but
in sync, since box-decoration-break: clone gives each one its own size. */
.reveal-ready .problem_mark[data-reveal-mark],
.reveal-ready .hero_heading-mark[data-reveal-mark] {
background-size: 0% var(--line-mark-height);
}
/* The intro stroke is the one long line on a quiet paragraph, so it draws
noticeably slower than the problem marks and starts as soon as it is
observed (no lead-in delay); the observer itself also fires it earlier,
via data-reveal-mark="early" in the markup. */
.reveal-ready .intro_mark[data-reveal-mark] {
--line-mark-delay: 0ms;
background-size: 0% var(--line-mark-height);
}
.reveal-ready [data-reveal-mark].is-revealed {
animation: line-mark-reveal var(--line-mark-dur, var(--dur-slow)) var(--ease-out)
var(--line-mark-delay, var(--dur-base)) both;
}
@keyframes line-mark-reveal {
from { background-size: 0% var(--line-mark-height); }
to { background-size: 100% var(--line-mark-height); }
}
/* --------------------------------------------------------------------------
TESTIMONIAL CALLOUTS
--------------------------------------------------------------------------
Three speech cards. A slight rotation and vertical stagger per card keeps
them organic rather than a rigid three-up grid.
-------------------------------------------------------------------------- */
.problem_cards {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--space-xlarge) var(--space-large);
margin-top: var(--space-xlarge);
}
.problem_card {
position: relative;
isolation: isolate;
flex: 0 1 20rem;
max-width: 22rem;
background-color: #e5e2e2;
transform: translateY(var(--card-ty, 0rem)) rotate(var(--card-rotate, 0deg));
}
.problem_card.is-a { --card-rotate: -2deg; }
.problem_card.is-b { --card-rotate: 1deg; --card-ty: 1rem; flex-basis: 22rem; max-width: 24rem; }
.problem_card.is-c { --card-rotate: -1.5deg; }
/* Idle most of the cycle, then a quick, tiny nudge, like a notification
tapping for attention. Base position always returns via the --card-*
vars so this layers on top of each card's resting tilt/offset. */
@keyframes problem-card-nudge {
0%, 74%, 100% {
transform: translateY(var(--card-ty, 0rem)) rotate(var(--card-rotate, 0deg));
}
81% {
transform: translateY(calc(var(--card-ty, 0rem) - 0.05rem)) rotate(calc(var(--card-rotate, 0deg) - 1deg));
}
88% {
transform: translateY(var(--card-ty, 0rem)) rotate(calc(var(--card-rotate, 0deg) + 1deg));
}
95% {
transform: translateY(var(--card-ty, 0rem)) rotate(calc(var(--card-rotate, 0deg) - 0.4deg));
}
}
@media (prefers-reduced-motion: no-preference) {
.problem_card {
animation-name: problem-card-nudge;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
/* Slightly different durations/delays so the three never nudge in sync. */
.problem_card.is-a { animation-duration: 6.2s; animation-delay: 0s; }
.problem_card.is-b { animation-duration: 6.6s; animation-delay: 0.6s; }
.problem_card.is-c { animation-duration: 7s; animation-delay: 1.2s; }
}
.problem_card-text {
padding: var(--space-medium);
font-family: var(--font-body);
font-size: var(--fs-medium);
line-height: var(--lh-body);
letter-spacing: var(--ls-normal);
color: var(--color-ink-copy);
}
.problem_card-tail {
position: absolute;
left: var(--space-large);
top: 92%;
width: 20%;
z-index: -1;
}
/* --------------------------------------------------------------------------
LOWER COPY BLOCK
-------------------------------------------------------------------------- */
.problem_copy p {
font-family: var(--font-body);
font-size: var(--fs-title-1);
line-height: var(--lh-title-1);
letter-spacing: var(--ls-title-1);
font-weight: var(--weight-regular);
color: var(--color-ink-copy);
}
.problem_copy {
margin-top: var(--space-xxlarge);
}
/* the opening line carries the section's point, so it leads heavier */
.problem_copy p:first-child {
font-weight: var(--weight-medium);
}
.problem_copy p + p {
margin-top: var(--space-medium);
}
/* --------------------------------------------------------------------------
MOUNTAIN ARTWORK
--------------------------------------------------------------------------
Bleeds off the bottom-right corner and partly over the divider below.
Absolute to .problem_section, so it tracks the true viewport edge like
the divider it sits on. The margin-right below caps that drift: it holds
the asset to the right edge of a virtual 1840px canvas centred in the
viewport once the screen gets wider than that, instead of letting the
gap grow without limit on ultrawide monitors. max() clamps it to 0 below
1840px, so the asset reads as flush right again down to mobile, no
breakpoint needed. Negative z-index keeps it behind the copy/cards, since
it is a background decoration, not content. */
/* Figma parks this asset off-canvas (2315:8058 at x=1502 in a 1440 frame), so
the placement below is the build's own. Its foot lands inside the 3.2rem
divider band that follows the section, 2rem shy of the band's bottom
edge (the section's bottom edge IS the divider's bottom edge, since the
divider is the section's last flow child). */
.problem_mountain {
position: absolute;
right: 0;
bottom: 1.2rem;
margin-right: max(0px, calc((100vw - 1840px) / 2));
z-index: -1;
height: 12.5rem; /* the asset is 511x190 at 1x; width follows naturally */
width: auto;
}
/* --------------------------------------------------------------------------
SECTION DIVIDER
--------------------------------------------------------------------------
Full-bleed, so it sits outside .padding-global like the marquees do. The
shadow (::before) is the soft cast falling from this section, kept behind
via z-index; the textured border (::after) is the rough tear at the seam
itself, painted on top. Pseudo-elements instead of two extra img elements.
-------------------------------------------------------------------------- */
.problem_divider {
position: relative;
width: 100%;
height: 3.2rem;
margin-top: var(--space-xhuge);
}
.problem_divider::before,
.problem_divider::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100%;
min-width: 91.75rem;
transform: translateX(-50%);
background-repeat: no-repeat;
}
.problem_divider::before {
background-image: url("/media/home/problem/section-shadow.png");
background-position: center top;
background-size: 100% 100%;
z-index: 0;
}
.problem_divider::after {
background-image: url("/media/home/problem/grey-textured-border.png");
background-position: center bottom;
background-size: 100% 2.5rem;
z-index: 2; /* highest of the three layers, always on top of the mountain */
}
@media screen and (max-width: 991px) {
.problem_cards {
gap: var(--space-large) var(--space-medium);
margin-top: var(--space-large);
}
.problem_copy {
margin-top: var(--space-large);
}
.problem_mountain {
height: 10rem;
}
/* intro goes single column: the panel drops under the copy */
.intro_layout {
grid-template-columns: 1fr;
justify-content: stretch;
gap: var(--space-xlarge);
}
.intro_copy {
padding-top: 0;
}
.intro_media {
max-width: 37.5rem;
}
/* the side plates crowd the copy once the container stops shrinking */
.hero_decor-item.is-left,
.hero_decor-item.is-right {
display: none;
}
.hero_heading,
.hero_tagline {
max-width: none;
}
/* The compact bar is shorter and its lockup is smaller, and the tab has to
keep landing exactly on the bar's own lockup. Both numbers are the nav's
own mobile tokens rather than new ones, so the two cannot drift. */
.hero_brand {
top: calc(var(--nav-height-mobile) * -1);
width: var(--nav-lockup-w-mobile);
}
.proof_heading {
max-width: 40rem;
}
}
@media screen and (max-width: 767px) {
.problem_cards {
flex-direction: column;
align-items: center;
gap: var(--space-large) 0;
margin-top: var(--space-large);
}
.problem_card,
.problem_card.is-a,
.problem_card.is-b,
.problem_card.is-c {
flex-basis: auto;
width: 100%;
max-width: 20rem;
}
.problem_copy {
margin-top: var(--space-xlarge);
}
.problem_mountain {
height: 8rem;
}
/* the field and its key stack, both full width. 2106:2682 */
.form_inline.is-embedded {
flex-direction: column;
gap: var(--field-stack-gap);
min-height: 0;
padding-right: 0;
background-color: transparent;
}
.form_inline.is-embedded .form_input {
width: 100%;
min-height: var(--btn-height);
background-color: var(--color-surface-field);
border-radius: var(--radius-field);
}
.form_inline.is-embedded .button {
width: 100%;
}
.form_inline.is-embedded:focus-within {
outline: none;
}
.hero_layout {
text-align: center;
}
/* everything centres and the CTA goes full width. 2106:2694 */
.intro_layout {
text-align: center;
}
.intro_para,
.intro_checks {
text-align: center;
}
.intro_cta {
display: flex;
width: 100%;
}
.intro_checks {
flex-direction: column;
align-items: center;
gap: var(--space-xsmall);
}
/* the cards run off the edge and swipe. 2106:2812 */
.proof_marquee {
margin-top: var(--space-xlarge);
}
}
/* mobile, measured off the 440 frame 2106-2627 */
@media screen and (max-width: 479px) {
/* the marked phrase wraps on mobile, so each line gets its own stroke. 2106:2658 / 2659 */
.hero_heading-mark {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.intro_mark {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* 20/28 -2%, not the h4 step. 2106:2689 */
.intro_para {
font-size: var(--fs-title-2);
line-height: var(--lh-title-2);
letter-spacing: var(--intro-para-ls);
}
/* copy to panel is 32 on mobile, checks stack at 12. 2106:2706 / 2701 */
.intro_layout {
gap: var(--space-medium);
}
.intro_checks {
gap: var(--intro-check-row-gap);
}
/* only three plates survive on mobile: the roofer and the dentist are not
drawn at 440 at all. positions are % of the 392 container. */
.hero_decor-item.is-topleft {
top: 2.3125rem;
left: -41.33%;
width: 68%;
}
.hero_decor-item.is-topright {
top: 8%;
right: -38%;
width: 70.79%;
}
/* 440 crops the same art to a taller box, anchored bottom. 2106:2688 */
.hero_decor-item.is-center {
margin-left: 21.17%; /* 107px */
width: 57.91%; /* 227px */
object-fit: cover;
object-position: bottom;
}
.intro_media {
max-width: none;
}
/* 340 wide against the 392 container, 32/40 not the h2 step. 2106:2811 */
.proof_heading {
max-width: 21.25rem;
font-size: var(--proof-heading-fs);
line-height: var(--proof-heading-lh);
}
/* mobile rhythm is 80 between sections, 40 inside. 2106-2627 */
.proof_section {
padding-top: var(--space-xxlarge);
padding-bottom: var(--section-rhythm-mobile);
}
.proof_marquee {
margin-top: var(--section-rhythm-mobile);
}
.problem_section {
padding-top: var(--section-rhythm-mobile);
}
.problem_wrapper {
max-width: none;
width: auto;
margin-left: var(--space-small);
margin-right: var(--space-small);
}
/* the bubbles stagger rather than centre. 2106:2848 / 2852 / 2856 */
.problem_cards {
align-items: stretch;
}
.problem_card,
.problem_card.is-a,
.problem_card.is-c {
width: 52%;
max-width: none;
margin-right: auto;
}
.problem_card.is-b {
width: 62%;
max-width: none;
margin-left: auto;
margin-right: 0;
}
.problem_card.is-c{
margin-top: 2rem;
}
.problem_card-text{
padding: var(--space-small);
}
.problem_mountain {
height: 6rem;
}
.hero_decor-item.is-center{
margin-top: 3rem
}
}
/* the reason (two fundamental questions) section css */
/* FIGMA: closed state 2227-1229, open state 2238-4740, mobile 2275-889.
Both desktop states are standalone frames, not children of 2315-7821,
so where this lands in the page was originally a judgement call rather
than a measured position (the heading reads as a direct answer to
.problem_section's closing line, "just another complicated SaaS product
that their team will never adopt") - built ahead of Deals Dying on that
basis, then moved to sit right after it instead, per direct request. */
/* Neither side is the --space-huge both used pre-reorder: this section's
own padding is a judgement call (a standalone Figma frame with no fixed
neighbour, see the comment above), but .process_section's 140px top pad
IS a real, [LOCKED] measurement off its own frame (2227:529) - so on
that boundary too, the fix belongs entirely on this side, not by
shaving a verified figure that also carries that section's inset
shadow. Top: Deals Dying's own content already carries a 96px bottom
padding (.padding-section-medium), so this used to stack into ~192px of
dead space with no colour break to justify it. Bottom: same idea one
boundary later, 96 + process's own 140 read as too much once measured
against the rest of the page's section-to-section rhythm. */
/* No background-color of its own any more - .dealsdying-reason_group
supplies one shared backdrop for this section and .dealsdying_section
together, so painting a second one here would just hide it again.
padding-top trimmed a second time (48 -> 32px) after the shared
backdrop made the boundary read as one continuous surface rather than
two sections that need a visible gap between them at all. */
.reason_section {
position: relative;
padding-top: var(--space-medium);
padding-bottom: var(--space-large);
}
/* Same reasoning as .dealsdying_content: needs to out-rank the shared
.dealsdying_texture (z-index: 0) now that the two sit in the same
.dealsdying-reason_group, or the texture - itself positioned - paints
over this section's actual copy instead of staying behind it. */
.reason_content {
position: relative;
z-index: 1;
}
.reason_heading {
max-width: var(--reason-heading-w);
margin-left: auto;
margin-right: auto;
text-align: center;
}
.reason_cards {
margin-top: var(--space-xlarge);
}
/* Specificity over .grid-2's own gap, not source order: 40px here, not the
32px shared token .grid-2 defaults to. */
.reason_cards.grid-2 {
gap: var(--reason-cards-gap);
}
/* Grid, not flex: both faces are stacked into the same cell below (see
.reason_face), which makes the row size to whichever face is TALLER -
closed or open - permanently, not just whichever one is currently
showing. That is what stops the card (and its side-by-side neighbour,
stretched to match via .grid-2's default align-items:stretch) from
resizing every time a face toggles. */
.reason_card {
display: grid;
grid-template-areas: "face";
min-height: var(--reason-card-min-h);
background-color: var(--color-reason-card-bg);
}
/* Both faces share the same grid-area, so they overlap instead of
stacking top-to-bottom - the grid's own equivalent of position:absolute
but without opting out of the sizing calculation the way absolute
positioning would. Grid's default align-items/justify-items: stretch
fills the shared cell exactly like the old flex:1 did. */
.reason_face {
position: relative;
grid-area: face;
display: flex;
flex-direction: column;
padding: var(--reason-card-pad);
opacity: 1;
transition: opacity var(--dur-base) var(--ease-inout);
}
/* NOT display:none. The whole point of the grid-area overlap above is
that both faces keep contributing to the row's height at all times -
display:none would pull the hidden one out of that calculation and
bring back the resize this is meant to prevent. visibility:hidden gets
the same "invisible and untouchable" result (also drops it from the a11y
tree and tab order, like `hidden` normally does) while still reserving
its space. */
.reason_face[hidden] {
display: flex;
visibility: hidden;
pointer-events: none;
}
/* Crossfade, driven by js/modules/reason.js: the outgoing face gets this
class and fades to 0 over --dur-base, THEN gets `hidden` once the
timeout matching that duration elapses. The incoming face gets it
applied a frame before `hidden` is lifted, so it starts the reveal at
opacity 0 and fades up the same way, rather than popping straight to
fully visible the instant the swap happens. */
.reason_face.is-fading {
opacity: 0;
}
/* Whichever row carries the toggle button sits on the card's bottom edge
regardless of how tall the illustration or the paragraph stack above it
runs - closed state's question+toggle row, open state's toggle alone. */
.reason_face > *:last-child {
margin-top: auto;
}
/* The open face's toggle is a bare last child, not nested in a .reason_row
with a heading to push against - so, unlike the closed face's button,
it needs its own horizontal alignment or it sits at the row's start
(the left edge) instead of flush with the badge/heading row above it. */
.reason_face > .reason_toggle {
align-self: flex-end;
}
.reason_media-row {
display: flex;
align-items: flex-start;
}
/* Below 992px (see the .reason_media-row rule in the tablet query further
down) the image stays a normal flex item, sized by flex:1/height:auto.
At desktop it is taken out of flow entirely - see the position:absolute
override below - so these are dead there but still what renders it at
tablet and mobile widths. */
.reason_media {
display: block;
flex: 1;
min-width: 0;
max-width: 100%;
height: auto;
}
/* Desktop only: each illustration is individually placed in Figma, not
derived from the badge/row it sits next to (see the token comment in
css/01-tokens.css), so it is positioned absolutely against .reason_face
rather than laid out in the .reason_media-row flex it shares with the
badge - the badge stays in flow at its own 32/32 inset, unaffected. */
@media screen and (min-width: 992px) {
.reason_media {
position: absolute;
top: var(--reason-media-top);
left: var(--reason-media-left);
width: var(--reason-media-w);
height: var(--reason-media-h);
max-width: none;
object-fit: cover;
}
.reason_card:nth-child(1) {
--reason-media-top: var(--reason-media-1-top);
--reason-media-left: var(--reason-media-1-left);
--reason-media-w: var(--reason-media-1-w);
--reason-media-h: var(--reason-media-1-h);
}
.reason_card:nth-child(2) {
--reason-media-top: var(--reason-media-2-top);
--reason-media-left: var(--reason-media-2-left);
--reason-media-w: var(--reason-media-2-w);
--reason-media-h: var(--reason-media-2-h);
}
}
/* .reason_row is reused for two different pairings, which need opposite
packing: the closed face's heading+toggle want to sit at opposite ends
of the row (space-between), but the open face's badge+heading want to
sit snug together at the fixed --reason-row-gap - space-between there
would spend the row's entire leftover width as the gap between just
those two items, stranding the heading far right of its badge instead
of right beside it. */
.reason_row {
display: flex;
align-items: center;
gap: var(--reason-row-gap);
}
.reason_face.is-closed .reason_row {
justify-content: space-between;
}
.reason_face.is-open .reason_row {
justify-content: flex-start;
}
/* Only meaningful in that same open-face row: lets the heading claim the
rest of the row's width (so a longer question still wraps at the full
available width) without moving where it starts. */
.reason_face.is-open .reason_question {
flex: 1;
}
.reason_question {
color: var(--color-text);
}
.reason_badge {
position: relative;
isolation: isolate;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: var(--reason-badge-size);
height: var(--reason-badge-size);
font-family: var(--font-body);
font-size: var(--reason-badge-fs);
font-weight: var(--weight-medium);
letter-spacing: var(--reason-badge-ls);
color: var(--reason-badge-ink);
}
/* Fill painted by a pseudo-element so the deckle filter can rough up the
square's edge without rippling the digit sitting on top of it - same
reasoning as .accordion_trigger::before, same shared filter. 2227:1234 */
.reason_badge::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-brand);
filter: url(#sw-deckle);
}
.reason_body {
margin-top: var(--reason-body-gap);
color: var(--color-ink-copy);
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
}
.reason_body > * + * {
margin-top: var(--reason-body-p-gap);
}
.reason_list li {
position: relative;
padding-left: 1em;
}
.reason_list li + li {
margin-top: var(--reason-body-p-gap);
}
/* Centred on the FIRST line specifically (half its line-height), not on
the li's own total height - centring on the whole box instead floats
the dot between the lines once a narrow card wraps an item to two,
like the mobile card's third bullet. */
.reason_list li::before {
content: "";
position: absolute;
left: 0;
top: calc((var(--case-text-lh) - var(--reason-list-dot)) / 2);
width: var(--reason-list-dot);
height: var(--reason-list-dot);
border-radius: 50%;
background-color: currentColor;
}
/* The icon is the exported Figma asset (circle backdrop + glyph baked
together), swapped by which .reason_face is visible - never a filter or
a rotate. See the token comment on --reason-toggle-size. */
.reason_toggle {
flex-shrink: 0;
display: block;
width: var(--reason-toggle-size);
height: var(--reason-toggle-size);
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.reason_toggle img {
display: block;
width: 100%;
height: 100%;
}
.reason_outro {
max-width: 30rem;
margin: var(--space-xlarge) auto 0;
color: var(--color-ink-copy);
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
text-align: center;
}
.reason_outro p + p {
margin-top: var(--reason-body-p-gap);
}
/* No mobile frame supplied for this section - interpolated, same as the
note on --reason-card-min-h. This has to sit in its OWN media query
here, after .reason_card's desktop rule above, rather than in the
shared 767/479 blocks earlier in this file: those come BEFORE this
component's desktop block in source order, so equal-specificity rules
placed there would lose to the desktop rule regardless of viewport.
991, not 767: .grid-2 itself only collapses the two cards to one
column at 767 (css/04-layout.css), but each card's badge+illustration
row runs out of room well before that - at 768-991 the cards are still
side by side, so the side-by-side media row was left squeezing the
illustration into a sliver next to the badge while --reason-card-min-h
(a figure LOCKED off the 1440 frame) held the card at its full desktop
height regardless, stranding a wall of empty grey underneath. Stacking
badge-over-illustration - and dropping the fixed min-height - starts at
the same 991 tablet collapse point the rest of the site uses, well
before the two-card grid itself collapses. */
@media screen and (max-width: 991px) {
/* Structural, not just smaller: the real 440 mobile frame (2275-889)
stacks badge above illustration rather than sitting them side by
side - there is no width left for both once the illustration needs
to read at any size below desktop. The exact 440-anchor figures
(padding, toggle size, a tighter gap here) are [LOCKED] and live in
the 479px block below, not here - this block only owns the
[INTERP] structural cut. */
.reason_media-row {
flex-direction: column;
align-items: flex-start;
gap: var(--space-small);
}
.reason_media {
width: 100%;
}
/* The 367px figure is [LOCKED] off the 1440 frame specifically, sized
for that width's badge+illustration row - it does not scale down
with the card, so below desktop it just strands empty grey under a
shrunken illustration regardless of whether a neighbour is also
stretching to match (see .reason_face's own grid-overlap comment for
that mechanism, untouched here). Dropped so each card hugs the
taller of its own two faces instead. */
.reason_card {
min-height: 0;
}
}
/* Below 767, .grid-2 has already collapsed the two cards to one per row
(css/04-layout.css) - each is now the only thing in its row, so
nothing else is stretching to match it the way a side-by-side
neighbour would at every wider tier. That removes the one reason
.reason_face's grid-overlap reserves the TALLER of the closed/open
face's height at all times (see the comment there): with no neighbour
left to protect from an unwanted resize, a stacked card can instead
just hug whichever face is actually showing, closed or open, so the
closed state stops carrying dead space sized for a body paragraph it
isn't displaying. The resulting height CHANGE when a card is toggled
is then animated in js/modules/reason.js, timed to this transition. */
@media screen and (max-width: 767px) {
.reason_card {
overflow: hidden;
transition: height var(--dur-base) var(--ease-inout);
}
.reason_face[hidden] {
display: none;
}
}
/* The 440 mobile anchor frame, 2275-889. Closed state only - no mobile
"open" frame was supplied, so the open face's typography and layout are
untouched here and stay on their desktop values at every width. */
@media screen and (max-width: 479px) {
.reason_section {
padding-top: var(--section-rhythm-mobile);
padding-bottom: var(--section-rhythm-mobile);
}
.reason_heading {
font-size: var(--reason-heading-fs);
line-height: var(--reason-heading-lh);
letter-spacing: var(--reason-heading-ls);
}
.reason_cards {
margin-top: var(--reason-heading-gap);
}
/* Badge sits just above the illustration in 2275-889, overlapping its
top edge by 14 of its own 48px - a page-coordinate detail not worth
reproducing exactly (see DESIGN.md on carrying Figma coordinates into
CSS). A small gap instead of a negative-margin overlap reads the same
at a glance and does not risk the badge's edge and the image's edge
fighting over which one shows on top. */
.reason_media-row {
gap: var(--space-xsmall);
}
/* Family switch off the desktop Nicola Display H5, same two-body-face
split DESIGN.md documents elsewhere on this page - Trust 2A Medium
here, 0 tracking rather than the H5 ladder's own. Colour is
unchanged: --color-text (set on .reason_question at every width) is
already this exact hex. */
.reason_question {
font-family: var(--font-body);
font-size: var(--reason-question-fs);
line-height: var(--reason-question-lh);
font-weight: var(--weight-medium);
letter-spacing: normal;
}
.reason_outro {
max-width: var(--reason-outro-w);
margin-top: var(--reason-outro-gap);
}
}
/* deals dying (3 columns) section css */
/* FIGMA: node-id 2227-221 (content), 2227-220 (paper texture),
2269-20 (mobile content, 440 frame) */
/* Shared backdrop for Deals Dying AND The Reason (2227:220, "image
588256069" in Figma): one texture sampled once over --color-surface,
not two separate copies each cropped/positioned independently - which
is what actually caused the visible seam between the two sections
earlier, not a colour mismatch. This wrapper owns the position/overflow
.dealsdying_section used to carry alone, since the texture div now
lives here instead of inside it. */
.dealsdying-reason_group {
position: relative;
overflow: hidden;
background-color: var(--color-surface); /* #f5f5f5 */
}
.dealsdying_section {
position: relative;
}
/* Torn-paper texture, sampled at 40% opacity in Figma. Absolutely positioned
with a slight overflow rather than the literal Figma bleed coordinates,
same idiom as `.hero_decor` in the section template.
This is the base fold/crease layer only - checked directly against
Figma's own rendered screenshot of this section (2227:221) and against
the isolated layer render of 2227:220 itself, and neither matches a
plain 40%-opacity blend of this file alone. The isolated render shows
a fine speckled grain this file does not have and the two raw image
fills behind the Figma layer (both downloaded and inspected) don't
have either - so that grain is a Figma NOISE EFFECT on the layer, not
part of either image fill, and needs its own overlay: see
.dealsdying_grain below, which reuses --btn-grain (the same
fractalNoise recipe already on the button hover, the process
testimonial card, and the nav logo plate) rather than inventing a
second noise recipe for one more speckled surface. */
.dealsdying_texture {
position: absolute;
inset: -1rem;
background-image: url("/media/texture-paper.webp");
background-size: cover;
background-position: center;
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.dealsdying_grain {
position: absolute;
inset: -1rem;
background-image: var(--btn-grain);
opacity: var(--btn-grain-opacity);
pointer-events: none;
z-index: 0;
}
.dealsdying_content {
position: relative;
z-index: 1;
}
/* Trims .padding-section-medium's shared 96px bottom pad down for this one
boundary specifically, not the class itself (still used for this same
element's own top edge, and potentially elsewhere). Cut a second time
(48 -> 32px) alongside .reason_section's own top pad, now that the two
sections share one backdrop (.dealsdying-reason_group) and read as a
single surface rather than two that need a visible gap between them. */
.dealsdying_content {
padding-bottom: var(--space-medium);
}
/* 607px in the 1440 frame, the exact width Figma wrapped the heading at
("Deals you could've closed are / quietly dying on your website."). Kept
as a literal px->rem conversion, not a `ch` guess, so the two-line break
matches exactly at the desktop anchor. 2227:222 */
.dealsdying_heading {
max-width: 37.9375rem; /* 607px */
}
/* 24px, heading bottom to subheading top. Off-ladder (nearest tiers are 16
and 32), carried as measured per DESIGN.md's rule for off-ladder section
values. 2227:222 / 2227:223 */
.dealsdying_subheading {
margin-top: 1.5rem; /* 24px */
color: var(--color-ink-copy);
/* This instance draws Trust 2A Regular 18/26, not the shared
`.text-size-medium` class's Figtree 18/28 -1.2%. DESIGN.md flag #6:
both body faces are genuinely in use across the site: this section's
own Figma frame is Trust 2A, so it is scoped here rather than
touching the shared class. No tracking utility on the source node,
so 0 rather than the class's -1.2%. 2227:223 */
font-family: var(--font-body);
line-height: 1.625rem; /* 26px */
letter-spacing: normal;
}
/* 72px, subheading bottom to the icon row. Off-ladder (nearest tiers are 64
and 80). 2227:223 / 2227:228 */
.dealsdying_columns {
margin-top: 4.5rem; /* 72px */
}
.dealsdying_item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dealsdying_item-icon {
display: block;
margin-bottom: var(--space-medium); /* 32px, icon bottom to title top. On-ladder, exact match. 2227:228 / 2227:227 */
}
.dealsdying_item-title {
margin-bottom: var(--space-small); /* 16px, title bottom to body top. On-ladder, exact match. 2227:227 / 2227:226 */
}
/* Same Trust 2A 18/26 divergence as .dealsdying_subheading, same source
node type. 2227:226 */
.dealsdying_item-text {
color: var(--color-ink-copy);
font-family: var(--font-body);
line-height: 1.625rem; /* 26px */
letter-spacing: normal;
}
/* 850px wide, NOT centred: left-edge flush with the heading above it.
60px above it (off-ladder), 12px/24px internal padding (both off-ladder).
2227:239 / 2227:240 */
.dealsdying_callout {
margin-top: 3.75rem; /* 60px */
width: 100%;
max-width: 53.125rem; /* 850px */
padding: 0.75rem 1.5rem; /* 12px / 24px */
background-color: var(--color-surface-sunken);
text-align: center;
}
.dealsdying_callout-highlight {
background-image: url("/media/problem-underline.svg");
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 0.1875rem;
padding-bottom: 0.25rem;
}
/* At the 1440 anchor every item title is one line (Figma draws them
`whitespace-nowrap`). "It puts your sales team on the defensive" measures
~406px in Nicola Display 500 at 24px/-1%, a hair over the 405.33px a
3-column 1280 grid with a 32px gap actually gives it, so it wraps without
this. The ~0.7px overflow lands in the empty column gutter, not on the
next item. 2227:232 */
@media screen and (min-width: 1440px) {
.dealsdying_item-title {
white-space: nowrap;
}
}
@media screen and (max-width: 991px) {
.dealsdying_heading {
max-width: 100%;
}
}
/* The 440 frame is left-aligned throughout, not centred, and every gap
below is measured off it - none of them are a simple half of the desktop
value. 2269:20 */
@media screen and (max-width: 767px) {
.dealsdying_subheading {
margin-top: 0.75rem; /* 12px. 2269:22 / 2269:23 */
}
.dealsdying_columns {
margin-top: 2.5rem; /* 40px, off-ladder. 2269:23 / 2269:24 */
}
.dealsdying_item-icon {
/* 60px tall, matching the 440 frame. Width is left to the source PNG's
own aspect ratio rather than a second cropped asset per icon: 60px
tall gives 48px for the funnel and 60px for the other two, exactly
the widths Figma draws. 2269:29 / 2269:35 / 2269:41 */
height: 3.75rem;
width: auto;
margin-bottom: 0.75rem; /* 12px, icon bottom to title top. 2269:29/2269:28 */
}
.dealsdying_item-title {
margin-bottom: 0.375rem; /* 6px, off-ladder. 2269:28 / 2269:27 */
}
.dealsdying_callout {
margin-top: 2.5rem; /* 40px, off-ladder. 2269:39 / 2269:44 */
max-width: 19.5rem; /* 312px: narrower than the content column, not
full-bleed, sized to the wrapped two-line text plus padding. 2269:44 */
padding-left: 0.75rem; /* 12px, half the desktop 24px. 2269:44/2269:46 */
padding-right: 0.75rem;
/* Desktop centres this line (2227:241 carries `text-center`); the 440
frame does not - it's left-aligned like everything else in the
section. 2269:46 */
text-align: left;
/* The 440 frame switches this line to Trust 2A Regular 20/28 -2%, not
the heading-style-h4 face it uses at 1440. Scoped to this component
rather than touching the shared class. 2269:46 */
font-family: var(--font-body);
font-size: 1.25rem; /* 20px */
font-weight: var(--weight-regular);
line-height: 1.75rem; /* 28px */
letter-spacing: -0.02em; /* -0.4px at 20px */
color: #575652; /* this instance only, not the shared ink token. 2269:46 */
}
}
/* --------------------------------------------------------------------------
PROCESS STEPS ("Lend us your buyer understanding")
FIGMA: step 1 (Extraction) node 2227-527, step 2 (Translation) node
2189-1094 / parent frame 2114-130. See the PROCESS STEPS block in
01-tokens.css for every measurement and where it came from.
Two states of ONE component: a step selector (left) drives which card +
lower block shows (right). The heading sits above both, offset to align
with the content column rather than the step column - see .process_intro.
-------------------------------------------------------------------------- */
.process_section {
position: relative;
padding-top: var(--process-section-pad-top);
padding-bottom: var(--process-section-pad-bottom);
background-color: var(--color-process-bg);
box-shadow: var(--process-section-shadow);
}
/* Fixed-width tracks, not fr: the 1020px content block is LEFT-ALIGNED
inside the 1280 container and Figma leaves the remaining 260px of each
row as clear dark ground on the right. fr columns would stretch to fill
that space; px/rem tracks just stop, which is what the frame draws.
The second track is minmax(0, card-w), not a bare card-w, and .process_
panels below carries min-width:0: without both, this is the exact same
auto-minimum trap .case-study_copy already documents for flexbox, just
on grid instead - a grid track's automatic floor is its content's
preferred size, not 0, so a bare fixed card-w track refused to shrink
below 760px at ANY width, and the container-large scaffold already
shrinks below 1020px+the step column well above the 767px mobile
rewrite below, forcing the page into horizontal scroll everywhere from
roughly 767px to 1130px. minmax(0, card-w) still resolves to the full
760px the moment there is room for it (nothing below 1130px-ish changes
on a real desktop), and only actually shrinks in that gap. */
.process_content {
display: grid;
grid-template-columns: var(--process-step-col-w) minmax(0, var(--process-card-w));
column-gap: var(--process-columns-gap-x);
row-gap: var(--process-columns-gap);
}
.process_intro {
grid-column: 2;
color: var(--color-process-heading-ink);
}
.process_heading {
color: inherit;
}
/* Trust 2A Regular 18/26, not .text-size-medium (Figtree 18/28) - same
two-body-face split already flagged elsewhere on this page. Reuses the
case-study copy's own 18/26 tokens rather than inventing a duplicate
pair for one more instance of the same measurement. */
.process_subheading {
margin-top: var(--process-heading-gap);
color: inherit;
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
letter-spacing: normal;
}
/* STICKY, driving the scrollspy in js/modules/process-steps.js: not in
Figma (there's no scroll-driven state in the source frames at all), a
decision same as .nav_component's own sticky call. align-self:start
keeps this column at its own (short) content height rather than the
grid's default stretch-to-row-height, which is what leaves it room to
travel and re-pin as the much taller .process_panels column beside it
(both panels now stacked and visible, see .process_panel+.process_panel
below) scrolls past underneath.
top is the navbar's OWN rendered height plus --process-steps-sticky-gap,
not a made-up figure on its own - the gap keeps the pinned column off
the bar's bottom edge instead of sitting flush against it. nav.css
switches nav height at 992px, one breakpoint away from this component's
own 767px cutover, so top needs the same split - see the 992px override
further down. */
.process_steps {
position: sticky;
top: calc(var(--nav-height-mobile) + var(--process-steps-sticky-gap));
grid-column: 1;
grid-row: 2;
display: flex;
flex-direction: column;
gap: var(--process-step-gap);
align-self: start;
}
/* --------------------------------------------------------------------------
THE STEP PILL
--------------------------------------------------------------------------
Scalloped "postage stamp" edge, with a paper grain over the fill.
Figma's own export for this shape (node 2227:563, "Comet 2026-08-05
16.48.59") came back a fully transparent PNG - a flattened-filter
casualty, the same failure DESIGN.md documents for the nav logo plate
and the accordion card - so there is no cutout to fall back on.
This was reverted once already: an in-Figma screenshot briefly showed a
plain flat rectangle, which read as the real answer overriding this
reconstruction, but a second, sharper screenshot from the same file
(Pratham, 2026-09-04) shows the scalloped edge and the grain clearly,
matching a fresh pull from Figma's own render API - so the FIRST
screenshot was the anomaly (almost certainly an unloaded image fill in
the Figma client), not this one. Scalloping restored.
The edge itself is rebuilt as a TILEABLE SVG mask, one period wide
(media/home/process/step-pill-mask.svg: a single period-width strip with
one circular bite top-centre and one bottom-centre), repeated with
`mask-repeat: repeat-x` and `mask-size: auto 100%` rather than stretched
to fill a fixed box. That is what lets the same file serve the 1440
frame's fixed 209px pills AND the 440 frame's fit-content ones (174px
and 181px for the two different labels, see the MOBILE block below)
without distortion - `auto 100%` scales the tile's width in proportion
to its height, so the bite stays circular at either pill height instead
of stretching into an ellipse. The trade against the source: real
scalloping only runs along the top and bottom edges now, and the left
and right ends are a plain flat cut rather than Figma's own rounded
corner bite - a deliberate simplification, not a further reconstruction
error. Period and radius are read off the rendered screenshot rather
than the (missing) source file.
THE HOLES MUST BE REAL TRANSPARENCY, NOT BLACK PAINT. The first version
drew a white rect with opaque BLACK circles on top, which is how an SVG
`` element (luminance: black = hidden) would read it - but
`mask-image: url("file.svg")` pointing at a bare SVG *document* is not
that: Chromium masks by ALPHA there, not luminance, and a black circle at
full opacity has alpha 1 same as the white rect around it, so nothing was
actually cut - the whole box just rendered as a plain flat rectangle,
which is exactly the false alarm that first read as "Figma must draw this
flat after all". Confirmed by testing the identical markup as a plain
(renders the scallop correctly - proving the file itself was fine)
against the same markup as a mask-image (renders flat - proving the
mode, not the artwork, was the bug). Fixed by punching the circles as
real holes: one tracing the rect and every
circle as sub-paths, so the "hidden" pixels have no paint at all rather
than black paint. The grain reuses --btn-grain, the same fractalNoise
recipe already used on the testimonial card below and the nav logo
plate, rather than a second texture asset for one more speckled surface.
INACTIVE IS OPACITY, NOT A SECOND COLOUR. Figma draws both pills the same
fill and drops the inactive one to 40% over the dark section background
(--process-step-inactive-opacity) - confirmed, not assumed, in
01-tokens.css's comment on --color-process-step-bg. So the state here is
one opacity swap, not a colour swap.
-------------------------------------------------------------------------- */
.process_step {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
width: var(--process-step-w);
height: var(--process-step-h);
padding: 0 var(--space-medium);
border: 0;
background-color: var(--color-process-step-bg);
-webkit-mask-image: url("/media/home/process/step-pill-mask.svg");
mask-image: url("/media/home/process/step-pill-mask.svg");
-webkit-mask-size: auto 100%;
mask-size: auto 100%;
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
font-family: var(--font-body);
font-size: var(--fs-large);
line-height: var(--lh-large);
color: var(--color-process-step-ink);
text-align: center;
white-space: nowrap;
cursor: pointer;
opacity: var(--process-step-inactive-opacity);
transition: opacity var(--dur-base) var(--ease-inout);
}
.process_step::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--btn-grain);
opacity: var(--btn-grain-opacity);
pointer-events: none;
}
.process_step.is-active {
opacity: 1;
cursor: default;
}
/* Purely decorative, and drawn identically in both Figma states - it never
moves to track progress, it just marks the gap between the two pills.
A background-image on an empty span, not an : the mobile frame
draws a genuinely different asset (a long horizontal dash rather than a
short vertical tick, not the same artwork rotated), so the source has to
swap per breakpoint - trivial for a background-image, would otherwise
need two elements toggled by display. */
.process_step-connector {
position: absolute;
left: 0.6875rem; /* 11px */
top: 2.9375rem; /* 47px: 5px above the gap so the art overlaps into both pills, matching the frame */
width: 0.5rem;
height: 2.125rem; /* 34px */
background-image: url("/media/home/process/step-connector.svg");
background-size: 100% 100%;
background-repeat: no-repeat;
pointer-events: none;
}
/* Nav switches from its compact bar to the full 992px+ bar here (see
nav.css's own BREAKPOINT comment) - .process_steps's sticky offset has
to follow the same line or it either pins with a gap under the taller
bar, or tucks a few px under the shorter one. */
@media screen and (min-width: 992px) {
.process_steps {
top: calc(var(--nav-height) + var(--process-steps-sticky-gap));
}
}
/* Both panels stay in the flow and stacked at once from here up - see the
comment on .process_steps above. js/modules/process-steps.js stops
toggling `hidden` per click at this same width and starts a scroll-driven
"which panel is under the sticky nav right now" check instead, so
scrolling this section reads as moving between steps rather than
dropping straight into "Who We Serve" the moment step 1 clears the
viewport. --process-columns-gap is reused rather than a new gap invented
for it - same rhythm as the heading-to-row gap right above it, and nothing
in Figma specifies this distance since the stacked state doesn't exist
there at all. */
@media screen and (min-width: 768px) {
.process_panel + .process_panel {
margin-top: var(--process-columns-gap);
}
}
.process_panels {
grid-column: 2;
grid-row: 2;
min-width: 0; /* lets the minmax(0, card-w) track above actually shrink - see the comment on .process_content */
}
/* --------------------------------------------------------------------------
THE CARD
--------------------------------------------------------------------------
Shared by both states - same torn-paper treatment as the accordion
(#sw-deckle filter on a pseudo-element background, see partials/svg-defs).
Confirmed against the render at 4x zoom: this card's corners are ragged,
the testimonial card below it is not - two different textures, not one
applied inconsistently. See .process_testimonial for the plain-grain one.
-------------------------------------------------------------------------- */
.process_card {
position: relative;
isolation: isolate;
padding: var(--process-card-pad);
}
.process_card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--color-process-card-bg);
filter: url(#sw-deckle);
}
.process_card-title {
margin-bottom: var(--process-card-title-gap);
}
.process_checklist {
display: flex;
flex-direction: column;
gap: var(--process-check-gap);
}
.process_checklist-item {
display: flex;
align-items: center;
gap: var(--process-check-icon-gap);
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
color: var(--color-ink-copy);
}
.process_checklist-icon {
flex-shrink: 0;
width: var(--process-check-icon-size);
height: var(--process-check-icon-size);
object-fit: contain;
}
.process_card-text {
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
color: var(--color-ink-copy);
}
.process_card-text + .process_card-text {
margin-top: var(--process-para-gap);
}
/* Hand-drawn stroke riding under a phrase, same idiom as .hero_heading-mark
and .problem_mark elsewhere on this page - a raster/vector stroke as a
background-image so it survives a reflow instead of a border under a
span. Brand-mark red per the exported asset (#E7412E, already a token).
FLUSH BOTTOM, not the +space-tiny hang those other marks use: this
stroke is only 2px tall, and Figma draws it flush against the line's own
bottom edge (2114:173/174 sit exactly at the line box's foot), not
hanging below it. Reusing the +offset formula here pushed the entire
2px image past the box's bottom edge - background-clip:border-box then
clips 100% of it, not just part, which is invisible rather than merely
off-register. A thicker mark can absorb a few px of offset; this one
cannot. */
.process_mark {
display: inline-block;
background-repeat: no-repeat;
background-position: left bottom;
background-size: 100% 0.125rem;
}
.process_mark.is-long {
background-image: url("/media/home/process/underline-long.svg");
}
.process_mark.is-short {
background-image: url("/media/home/process/underline-short.svg");
}
.process_testimonial,
.process_media {
margin-top: var(--process-block-gap);
}
/* --------------------------------------------------------------------------
TESTIMONIAL (step 1)
--------------------------------------------------------------------------
Straight corners, not torn - confirmed against the render, unlike
.process_card above. The fill is flat #4f4f4f (--color-ink, reused) with
the same fine grain the button hover already carries (--btn-grain),
permanently visible here rather than fading in, so it is its own
pseudo-element rather than reusing the button's fade-in transition.
-------------------------------------------------------------------------- */
.process_testimonial {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: var(--process-testimonial-avatar) 1fr;
column-gap: var(--process-testimonial-gap);
padding: var(--process-testimonial-pad);
}
.process_testimonial::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-color: var(--color-process-testimonial-bg);
}
.process_testimonial::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--btn-grain);
opacity: var(--btn-grain-opacity);
pointer-events: none;
}
.process_testimonial-avatar {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.process_testimonial-quote {
margin: 0;
color: var(--color-process-heading-ink);
font-family: var(--font-body);
font-size: var(--fs-large);
line-height: var(--lh-large);
font-style: normal;
}
.process_testimonial-author {
display: block;
margin-top: var(--process-testimonial-name-gap);
font-style: normal;
}
/* Same face/weight pairing as .case-study_quote-name / -role elsewhere on
this page for an author byline: Trust 2A 700 for the name (a REAL loaded
weight - Figtree only ships 400, so the Figma layer's "Figtree SemiBold"
would synthesise a fake bold here) and Trust 2A Regular for the role. */
.process_testimonial-name {
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
font-weight: var(--weight-bold);
color: var(--color-process-heading-ink);
opacity: 0.9;
}
.process_testimonial-role {
margin-left: 0.25em;
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
font-weight: var(--weight-regular);
color: var(--color-process-heading-ink);
opacity: 0.7;
}
/* --------------------------------------------------------------------------
MEDIA (step 2): backdrop photo + floating browser screenshot.
--------------------------------------------------------------------------
Fluid, not the fixed 760 x 420 the frame draws: max-width caps it at the
real measurement on a wide screen, but width:100% plus aspect-ratio let
it shrink with its column instead of forcing horizontal scroll the
moment .process_panels (above) has less than 760px to give it - the
same reasoning as the minmax() grid track. The screenshot and its
shadow are positioned in PERCENTAGES of this box rather than fixed px
tokens, so they scale down with it instead of spilling past its edges. */
.process_media {
position: relative;
width: 100%;
max-width: var(--process-media-w);
aspect-ratio: 760 / 420; /* [LOCKED] the frame's own box, 2238:4742 */
overflow: hidden;
}
.process_media-backdrop {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.process_media-shadow {
position: absolute;
left: 1.5%; /* 11.4 / 760 [LOCKED, derived] */
top: 19.52%; /* 82 / 420 */
width: 50.1%; /* 380.771 / 760 */
height: 80.9%; /* 339.779 / 420 */
pointer-events: none;
}
.process_media-screenshot {
position: absolute;
left: 9.08%; /* 69 / 760 [LOCKED, derived] */
top: 12.38%; /* 52 / 420 */
width: 81.84%; /* 622 / 760 */
height: 74.29%; /* 312 / 420 */
object-fit: cover;
}
.process_cta {
margin-top: var(--process-media-gap);
}
/* --------------------------------------------------------------------------
PROCESS STEPS :: MOBILE (767px and below)
--------------------------------------------------------------------------
Real anchor: frame 2275-924, 440 wide, Step 1 (Extraction) only - see the
PROCESS STEPS :: MOBILE block in 01-tokens.css for what's measured
[LOCKED] versus extrapolated [INTERP]. One breakpoint, not a 767-then-479
pair: this is a full structural rebuild (single column, step selector
moves below the card, avatar moves above the quote), not a fluid shrink,
so there is no useful middle "tablet" state to hold the 1440 numbers at -
the 440-anchor design is what this section looks like at every width
from 767 down.
-------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
.process_section {
padding-top: var(--process-section-pad-mobile);
padding-bottom: var(--process-section-pad-mobile);
}
.process_content {
grid-template-columns: 1fr;
row-gap: 0;
}
/* min-width:0 on every direct grid item: a grid item's automatic minimum
width is its content's preferred size, not 0, so without this the
.process_heading child's own 376px max-width (below) held the WHOLE
single 1fr column open at 376px regardless of the viewport, pushing
the section past a 375px phone rather than letting the heading wrap
into the space actually available. Same gotcha .case-study_copy
already documents for flex, here on grid instead. */
.process_intro,
.process_panels,
.process_steps {
min-width: 0;
}
.process_intro {
grid-column: 1;
grid-row: 1;
text-align: center;
}
/* 32/40 -1.5%, NOT the shared H2 mobile ladder (24/32 at this tier) - a
real, distinct measurement off 2269:437, not an oversight. Same idiom
as .problem_callout's own mobile face override elsewhere on this page:
scoped here rather than bent into the shared token. */
.process_heading {
max-width: 23.5rem; /* 376px [LOCKED] 2269:437 */
margin-inline: auto;
font-size: 2rem;
line-height: 2.5rem;
letter-spacing: -0.015em;
}
.process_subheading {
max-width: 20rem; /* 320px [LOCKED] 2269:438 */
margin-inline: auto;
margin-top: var(--process-heading-gap-mobile);
color: var(--color-process-subheading-mobile);
/* Trust 2A Regular 16/24 - equals --fs-regular/--lh-regular exactly,
reused rather than repeated as literals. */
font-size: var(--fs-regular);
line-height: var(--lh-regular);
}
.process_panels {
grid-column: 1;
grid-row: 2;
margin-top: var(--process-columns-gap-mobile);
}
/* The step selector drops from a left COLUMN to a ROW below the card -
grid-row alone moves it there, no DOM reorder needed. */
/* Centred as a PAIR with a fixed gap between them, not spread across the
full card width. space-between was tried first because it happens to
reproduce the 440 anchor exactly - at that one width the two pills
plus a 37px gap sum to precisely the card's own 392px, so a fixed gap
and "stretch to fill" are visually identical there. They stop
agreeing at any other width: a phone wider than 392px (or the fluid
desktop layout above 767px, which reuses this same row) stretched the
gap open instead of the pills staying together, exactly what a fixed
gap does not do. */
.process_steps {
/* Undoes the desktop sticky pin: stacked single-column here, the step
row would otherwise stick to the viewport top and float over
whatever scrolls beneath it - the scrollspy this drives is a
desktop-only behaviour (see js/modules/process-steps.js), so the
column needs to go back to sitting in normal flow at this width.
relative, NOT static: .process_step-connector below is positioned
absolute against this element - static would knock it out of that
positioning context entirely and send it looking for the next
positioned ancestor up the tree instead. */
position: relative;
top: auto;
grid-column: 1;
grid-row: 3;
margin-top: var(--process-block-gap);
flex-direction: row;
justify-content: center;
gap: var(--process-step-gap-mobile);
}
/* Fit-content, not the desktop's shared fixed width - Figma draws the two
mobile pills at their own two different widths (174px and 181px), see
01-tokens.css. The tiling mask handles either width without
distortion; see the comment on .process_step above. */
.process_step {
/* min-width:0 + white-space:normal: the 440 anchor fits both labels on
one nowrap line each with room to spare, but a narrower phone (375,
320) cannot - flexbox's default min-width:auto held both pills at
their full nowrap width regardless, pushing "Step 2: Translation"
past the viewport. Letting the label wrap to two lines below the
anchor width is the graceful failure, not a second breakpoint. */
min-width: 0;
width: auto;
height: auto;
min-height: 3rem; /* 48px [LOCKED] */
padding: 0.5rem 1.5rem; /* 24px side [LOCKED]; vertical is new, only needed once wrapping is possible */
white-space: normal;
/* Figtree, not Trust 2A - another instance of the sitewide two-body-face
split (DESIGN.md flag 6), built as drawn per 2269:428. */
font-family: var(--font-para);
font-size: 1rem; /* 16px [LOCKED] */
line-height: 1.5rem; /* 24px [LOCKED] */
}
/* A different asset, not the desktop tick rotated - see the comment on
.process_step-connector above. Centred in the gap between the two
pills rather than the desktop's fixed left/top, because the gap itself
is no longer fixed once the pills are fit-content.
ROTATED, NOT STRETCHED. Figma draws this asset portrait (8 wide x 41
tall, per 2269:433's own pre-rotation box) and rotates the layer -90deg
to lay it flat - the same construction as the desktop tick. The first
version instead set the box to its POST-rotation footprint (41 x 2.35)
directly and stretched the source into it with background-size:100%
100%, which is a ~5x horizontal stretch against a ~17x VERTICAL
squash - enough to crush the little square marker down to nothing.
Keeping the box at the source's own portrait aspect and rotating the
element itself (matching Figma's own layer transform) preserves the
marker instead of destroying it. */
.process_step-connector {
left: 50%;
top: 50%;
width: 0.5rem; /* 8px [LOCKED] pre-rotation, matches the source SVG */
height: 2.5625rem; /* 41px [LOCKED] pre-rotation, 2269:433 */
transform: translate(-50%, -50%) rotate(-90deg);
background-image: url("/media/home/process/step-connector-mobile.svg");
}
.process_card {
padding: var(--process-card-pad-mobile);
}
/* H5 (24/32 -1%), not H4: swaps the size the shared utility class set at
desktop for the one the 440 frame actually draws. --fs-h5 carries no
breakpoint override anywhere in 01-tokens.css, so this is the same
real value at every width, not a second measurement to keep in sync. */
.process_card-title {
margin-bottom: var(--process-card-title-gap-mobile);
font-size: var(--fs-h5);
line-height: var(--lh-h5);
letter-spacing: var(--ls-h5);
}
.process_checklist-item {
gap: var(--process-check-icon-gap-mobile);
/* Trust 2A Regular 16/24 - equals --fs-regular/--lh-regular exactly,
same reuse as the subheading above. */
font-size: var(--fs-regular);
line-height: var(--lh-regular);
}
.process_checklist-icon {
width: var(--process-check-icon-size-mobile);
height: var(--process-check-icon-size-mobile);
}
/* [INTERP] no step-2 mobile frame exists yet (DESIGN.md flag 27) - same
16/24 Trust 2A step as the checklist above, for consistency with it
rather than a second guess. */
.process_card-text {
font-size: var(--fs-regular);
line-height: var(--lh-regular);
}
/* Avatar moves from a left column to ABOVE the quote - flex-direction
alone does it, since both children are already siblings in source
order. */
.process_testimonial {
display: flex;
flex-direction: column;
}
.process_testimonial-avatar {
width: var(--process-testimonial-avatar-mobile);
height: var(--process-testimonial-avatar-mobile);
}
/* Figtree, not Trust 2A, and a third distinct ink colour
(--color-process-quote-mobile) - built as drawn, per 2269:460. */
.process_testimonial-quote {
margin-top: var(--process-testimonial-avatar-gap-mobile);
color: var(--color-process-quote-mobile);
font-family: var(--font-para);
font-size: 1rem; /* 16px [LOCKED] */
line-height: 1.375rem; /* 22px [LOCKED] */
letter-spacing: -0.012em; /* -1.2% [LOCKED] 2269:460 */
}
.process_testimonial-author {
margin-top: var(--process-testimonial-name-gap-mobile);
}
/* Figtree Regular for BOTH, not "SemiBold" for the name: Figtree only
ships weight 400 on this site (00-fonts.css), so asking for 600 here
would synthesise a fake bold, the same trap already documented on the
desktop testimonial name. The name/role distinction rides on opacity
alone (90%/70%, inherited from the desktop rule below) rather than a
weight this build cannot honestly draw. */
.process_testimonial-name,
.process_testimonial-role {
font-family: var(--font-para);
font-size: 1rem; /* 16px [LOCKED] */
line-height: 1.375rem; /* 22px [LOCKED] */
font-weight: var(--weight-regular);
}
/* STEP 2 MEDIA needs no override here: it's already fluid at the base
rule (percentage insets on an aspect-ratio box, not fixed px), which
is what makes it correct at this width too and not just at 1440. No
mobile frame exists for Step 2 (Translation) at all - DESIGN.md flag
27 - so this is this build's own extrapolation of the Step 1
structural pattern onto Step 2's desktop content, not a measurement. */
}
/* case studies + video testimonial section css */
/* FIGMA: node-id 2238-4978, part of the Homepage-updated frame (2315-7821).
README's roadmap table lists this as 2315-8267. Desktop only: no mobile
frame supplied, so nothing here has a breakpoint override yet. */
.case-studies_section {
position: relative;
}
.case-studies_heading {
max-width: var(--case-heading-w);
}
.case-studies_list {
display: flex;
flex-direction: column;
gap: var(--case-row-gap);
margin-top: var(--case-heading-gap);
}
.case-study {
position: relative;
background-image: url("/media/home/case-studies/paper-texture.png");
background-size: cover;
background-position: center bottom;
}
/* Decorative "staple" strip along the row's top edge. One shared SVG (nine
staples, three clusters) rather than eighteen positioned elements per row:
all six rows draw the exact same strip. 2238:4908 onward. */
.case-study_notches {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1.5rem;
pointer-events: none;
}
/* --------------------------------------------------------------------------
THE FLIP (front content <-> testimonial)
--------------------------------------------------------------------------
Every row has two faces stacked in the same spot: the case content
(front, .case-study_face-front) and a testimonial (back,
.case-study_face-back/.is-quote). Only one real testimonial exists so
far - it is reused as a placeholder back face on every row until real
ones are supplied per client, not a bug.
Modelled as a spiral desk calendar, hinged along the top edge to match
.case-study_notches (the staple/binding art already sitting there):
clicking "View Testimonial" lifts the front page up and back over that
hinge, the way a bound calendar page turns, rather than a coin-flip on a
vertical axis.
.is-flipped is a real toggle set by js/modules/case-study-flip.js on
click, not a :hover pseudo-class - a click has no equivalent of "mouse
leaves" to undo it automatically, so something has to hold the state.
The trigger (.case-study_tag) and the thing it moves
(.case-study_flip-inner) are siblings, not ancestor/descendant, hence
toggling the class on their shared parent (.case-study) rather than on
either one directly. The same click also swaps the trigger's own label
between "View Testimonial" and "View Statistics" to match whichever
face is now showing. */
/* perspective-origin MUST match .case-study_flip-inner's transform-origin
(top center, below) - perspective-origin defaults to the box's own
center, and a row this tall (476px) hinged at its TOP instead sweeps
the far (bottom) edge through a wildly different distance from the
camera than a centre-hinged flip would, ballooning it to several times
its own size mid-rotation. Anchoring the vanishing point at the same
point the rotation pivots around keeps the far edge's distance from the
camera sane throughout the turn. */
.case-study_flip {
position: relative;
perspective: 250rem;
perspective-origin: top center;
}
/* Grid, not the flex .case-study_content already uses one level in: both
faces share this one grid area, so the row's height is always whichever
face is taller (the front's 476 vs the back's 420) - same "reserve
space for both states so toggling never resizes the box" technique
already used for the reason cards elsewhere on this page. */
.case-study_flip-inner {
position: relative;
height: var(--case-row-h);
transform-style: preserve-3d;
transform-origin: top center;
transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
/* .case-study_content.case-study_face, not .case-study_face alone: both
classes are always paired in the markup, but .case-study_content's own
position:relative (below) is the same specificity and comes later in
the cascade, so a single-class selector here loses that fight and the
face silently stayed position:relative - stacking the faces top of each
other instead of overlapping, which is what let one face's height push
the other one down rather than both sharing this box. The compound
selector out-specifies it regardless of source order. */
.case-study_content.case-study_face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Pre-rotated 180deg so it lands right-side up once .case-study_flip-inner
itself rotates - the standard "pre-twisted so the net rotation reads
normal" trick every CSS flip card uses.
transform-origin MUST repeat .case-study_flip-inner's (top center, not
this element's own default centre) - without it the parent pivots the
whole 3D space around its top edge while this element's own 180deg
spins around its OWN centre partway down that already-rotated space,
two different pivot points fighting each other. The visible result
wasn't a clean turn, it was the far edge swinging through a completely
different arc and ballooning to several times its size mid-flip.
Matching the origin collapses both rotations back to one consistent
pivot, which is what makes rotateX(parent) + rotateX(180) compose into
the plain single-angle turn the math assumes. */
.case-study_face-back {
transform: rotateX(180deg);
transform-origin: top center;
}
.case-study.is-flipped .case-study_flip-inner {
transform: rotateX(-180deg);
}
/* min-height, not height: the 476px figure is what the padding and the
372px-tall media box add up to at the 1440 anchor, not a hard cap. Below
1440 the copy and media columns are allowed to shrink (see below), so a
wrapped paragraph can need more room than 476px holds - min-height lets
the row grow for that instead of clipping or spilling into the next one.
A fixed height plus percentage-height children would also silently stop
working the moment this became min-height, since an auto-height parent
doesn't give percentage heights anything definite to resolve against;
putting the height concern directly on this element sidesteps that. */
.case-study_content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-large);
min-height: var(--case-row-h);
padding: var(--case-content-pad-top) var(--case-inset-x) var(--case-content-pad-bottom);
}
/* The testimonial row's video panel sits in its own 48/32 top/bottom
inset (2238:4842), not the 64/40 every standard row shares, and the row
itself is shorter (420 vs 476) since that panel is shorter than the
other rows' media box. Same background asset, cropped tighter from the
bottom rather than swapped for a second texture. Scoped to the face
itself now, not an ancestor .is-quote article - every row carries both
faces, so the article can no longer say which one it "is". */
.case-study_content.is-quote {
min-height: var(--case-row-h-quote);
padding-top: 3rem;
padding-bottom: 2rem;
}
/* Text column hugs its own content width and never stretches to fill the
row: the image column is what pins to the row's right edge, so the gap
between them is whatever space-between leaves over. Matches the frame,
where every row draws a different gap because every paragraph is a
different length. 2238:4896 vs 2238:4904 */
.case-study_copy {
display: flex;
flex-direction: column;
/* Without this, flex's default align-items:stretch forces every child to
the column's full 552px width. Block children (h3, p) already look
full-width regardless, so this was invisible everywhere except the one
logo sized by height + auto width (Acorn): stretch overrode that auto
and squashed its aspect ratio flat. */
align-items: flex-start;
/* Shrinkable, not fixed: between the 1440 and 440 anchors (no frame
covers that range) this is what lets the copy column narrow instead
of forcing the row wider than its container. min-width:0 overrides
flexbox's own min-width:auto, which would otherwise refuse to shrink
past the longest word's width - the same gotcha .button documents. */
flex: 1 1 var(--case-copy-max-w);
min-width: 0;
max-width: var(--case-copy-max-w);
}
.case-study_logo {
display: block;
height: var(--case-logo-h);
width: auto;
}
/* Four of the five client marks are drawn in Figma as a solid-ink shape
masked from the client's own (multi-colour) logo file, not as a plain
image: 2238:4954, 4754, 4759 and 4781 all pair a bg-colour div with a
mask-image, discarding the source colours so the row reads as one
uniform grey line-up rather than five different brand palettes. Acorn is
the one exception in the frame (2238:4767, a plain ) because its
source is already a flat grey vector. */
.case-study_logo.is-mask {
background-color: var(--color-ink);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: contain;
mask-size: contain;
}
.case-study_logo.is-reviewwave {
width: 11.5rem; /* 184px [LOCKED] 2238:4956 */
-webkit-mask-image: url("/media/home/case-studies/logo-reviewwave.png");
mask-image: url("/media/home/case-studies/logo-reviewwave.png");
}
.case-study_logo.is-creditrepair {
width: 11.875rem; /* 190px [LOCKED] 2238:4754 */
-webkit-mask-image: url("/media/home/case-studies/logo-creditrepair.png");
mask-image: url("/media/home/case-studies/logo-creditrepair.png");
}
.case-study_logo.is-deardoc {
width: 10.4375rem; /* 167px [LOCKED] 2238:4759 */
-webkit-mask-image: url("/media/home/case-studies/logo-deardoc.png");
mask-image: url("/media/home/case-studies/logo-deardoc.png");
}
.case-study_logo.is-sphinxbio {
width: 11.25rem; /* 180px [LOCKED] 2238:4781 */
-webkit-mask-image: url("/media/home/case-studies/logo-sphinxbio.png");
mask-image: url("/media/home/case-studies/logo-sphinxbio.png");
}
/* The one plain- logo (already a flat grey vector, no mask needed) is
also the one drawn a touch taller than the rest: 44px, not 40. 2238:4767 */
.case-study_logo.is-acorn {
height: 2.75rem;
}
.case-study_title {
margin-top: var(--case-title-gap);
}
.case-study_text {
margin-top: var(--case-text-gap);
font-family: var(--font-body);
font-size: var(--case-text-fs);
line-height: var(--case-text-lh);
color: var(--color-ink-copy);
}
.case-study_text strong {
font-weight: var(--weight-medium);
color: var(--color-ink);
}
/* Shrinkable too, same reasoning as .case-study_copy above: fixed at 548px
this would force the row wider than its container anywhere below the
1440 anchor. object-fit:cover on the means a narrower box just
shows a tighter crop rather than squashing the image. */
.case-study_media {
flex: 1 1 var(--case-media-w);
min-width: 12rem;
height: var(--case-media-h);
overflow: hidden;
}
.case-study_media img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --------------------------------------------------------------------------
THE "VIEW TESTIMONIAL" TAG
--------------------------------------------------------------------------
A torn washi-tape flag. Built as a CSS clip-path rather than the exported
SVG: all three tape instances in the frame share one identical path
(2238:5288, 5289, 5290 all trace "M1 1H235L211 57H25L1 1Z"), so the shape
is a real, reusable component rather than per-row artwork, and the two
colours are the existing brand tokens rather than a second flat asset.
Rest state carries no underline; hover/focus adds one. That pairing is
the only interaction state the frame draws (2238:4950 rest vs 2238:4792
hover, both real Figma instances, not a guess).
-------------------------------------------------------------------------- */
/* A