/* ==========================================================================
HOW WE WORK
Built from the approved copy document. The page is a sequence of five
movements -- philosophy, engagement models, process, controls, evidence --
so each section gets its own visual treatment rather than repeating one
card grid six times.
Structural notes:
- `.wp-block-group__inner-container` is `display: contents` sitewide, so a
block's children are laid out by the grandparent but are NOT its DOM
children. Every rule here uses descendant selectors; `>` fails silently.
- Reveal state is added by js/pages/how-we-work.js as `.is-revealed`. The
`.no-js` and reduced-motion blocks at the bottom resolve everything to
visible, so the page never depends on the script.
========================================================================== */
.page-how-we-work {
--hww-ease: cubic-bezier(0.16, 1, 0.3, 1);
--hww-shadow: 0 24px 60px -28px rgba(var(--ink-rgb), 0.4);
--hww-shadow-lift: 0 38px 80px -30px rgba(var(--ink-rgb), 0.52);
}
/* --------------------------------------------------------------------------
Shared rhythm
-------------------------------------------------------------------------- */
/*
* The page has no .container wrapper of its own, so the sections would run
* edge to edge. The inline padding indents the content to the same 1344px
* column the header and hero use, while the section itself stays full width
* so its divider still spans the viewport.
*
* Because `.wp-block-group__inner-container` is `display: contents`, the
* headings and grids are laid out directly by the section, so padding here
* reaches them without a child selector.
*/
.page-how-we-work .hww-section {
position: relative;
padding-block: clamp(4rem, 8vw, 6.5rem);
padding-inline: max(32px, calc((100% - 1344px) / 2));
border-bottom: 1px solid var(--color-border);
}
.page-how-we-work .hww-section .wp-block-heading {
font-size: clamp(1.85rem, 3.4vw, 2.7rem);
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.03em;
margin: 0 0 1rem;
}
.page-how-we-work .hww-section h3.wp-block-heading {
font-size: 1.12rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.015em;
margin: 0;
}
.page-how-we-work .hww-section-desc {
max-width: 74ch;
margin: 0 0 2.4rem;
font-size: 1.02rem;
line-height: 1.8;
color: var(--color-text-muted);
}
.page-how-we-work .reveal-section,
.page-how-we-work .reveal-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.85s var(--hww-ease), transform 0.85s var(--hww-ease);
}
.page-how-we-work .reveal-section.is-revealed,
.page-how-we-work .reveal-item.is-revealed {
opacity: 1;
transform: none;
}
@keyframes hww-rise {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
@keyframes hww-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(2.5%, -2%, 0) scale(1.07); }
100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}
/* ==========================================================================
HERO
========================================================================== */
.page-how-we-work .hww-hero {
position: relative;
isolation: isolate;
overflow: hidden;
/* inner-pages.css pins .page-hero to height:100vh (not min-height), so both
have to be released or the hero locks to a full viewport. */
height: auto !important;
min-height: min(82vh, 860px) !important;
display: flex;
align-items: center;
padding: clamp(6.5rem, 11vw, 9rem) 0 clamp(3.5rem, 6vw, 5rem);
text-align: center;
}
.page-how-we-work .hww-hero .container { width: 100%; }
.page-how-we-work .hww-hero::before {
content: "";
position: absolute;
inset: -25%;
z-index: -2;
background:
radial-gradient(38% 44% at 24% 28%, rgba(var(--color-accent-rgb), 0.20), transparent 62%),
radial-gradient(34% 40% at 76% 32%, rgba(0, 164, 153, 0.17), transparent 60%);
animation: hww-drift 22s ease-in-out infinite alternate;
pointer-events: none;
}
.page-how-we-work .hww-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(var(--color-accent-rgb), 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--color-accent-rgb), 0.08) 1px, transparent 1px);
background-size: 62px 62px;
-webkit-mask-image: radial-gradient(68% 62% at 50% 42%, #000 30%, transparent 78%);
mask-image: radial-gradient(68% 62% at 50% 42%, #000 30%, transparent 78%);
pointer-events: none;
}
.page-how-we-work .hww-hero .page-hero-inner {
max-width: 980px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.page-how-we-work .hww-hero .section-tag-label {
display: inline-flex;
align-items: center;
gap: 0.7rem;
margin: 0 0 1.6rem;
padding: 0.5rem 1.05rem;
border: 1px solid rgba(var(--color-accent-rgb), 0.32);
border-radius: 100px;
background: rgba(var(--color-accent-rgb), 0.09);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--color-accent-hover);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
}
/* The eyebrow keeps a heavier weight: at 0.74rem with 0.18em tracking a
lighter face reads as washed out. */
.page-how-we-work .hww-hero .section-tag-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--color-accent);
animation: hww-pulse 2.4s ease-out infinite;
}
@keyframes hww-pulse {
0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0.65); }
70% { box-shadow: 0 0 0 9px rgba(var(--color-accent-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-rgb), 0); }
}
.page-how-we-work .hww-hero .page-hero-title {
max-width: 18ch;
margin: 0 auto 1.5rem;
text-align: center;
font-size: clamp(2.5rem, 6vw, 4.4rem);
font-weight: 600;
/* background-clip:text paints only the glyph box, so tight leading clips
descenders. The extra leading and padding give them room. */
line-height: 1.14;
padding-bottom: 0.12em;
letter-spacing: -0.035em;
background: linear-gradient(180deg,
var(--color-text) 0%, var(--color-text) 52%,
rgba(var(--color-accent-rgb), 0.92) 150%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-how-we-work .hww-hero .page-hero-desc {
max-width: 72ch;
margin: 0 auto 1.1rem;
font-size: clamp(1rem, 1.2vw, 1.08rem);
line-height: 1.8;
color: var(--color-text-muted);
}
.page-how-we-work .hww-hero .page-hero-desc:last-of-type { margin-bottom: 2.4rem; }
.page-how-we-work .hww-hero .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.9rem;
justify-content: center;
align-items: center;
}
/*
* .btn-hero is a standalone button component in inner-pages.css, but here it
* is only a class on the core/button WRAPPER -- so the wrapper was painting
* the green gradient pill while the inside it stayed transparent. That is
* why "See Our Process" looked filled and "View Case Studies" (whose wrapper
* class carries no such component) did not. Strip the wrapper back to a plain
* box and let the be the button.
*/
.page-how-we-work .hww-hero .wp-block-button,
.page-how-we-work .hww-evidence-card .wp-block-button {
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
gap: 0 !important;
}
.page-how-we-work .hww-hero .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
height: 56px;
padding: 0 2rem;
border-radius: 100px;
font-size: 0.95rem;
font-weight: 500;
transition: transform 0.45s var(--hww-ease), box-shadow 0.45s var(--hww-ease),
background-color 0.35s var(--hww-ease), border-color 0.35s var(--hww-ease);
}
/*
* Both hero buttons share the outline treatment -- the filled gradient on
* "See Our Process" read as a different component sitting next to "View Case
* Studies". Accent is carried by the hover border instead of a fill.
*/
.page-how-we-work .hww-hero .btn-hero .wp-block-button__link,
.page-how-we-work .hww-hero .btn-hero-ghost .wp-block-button__link {
border: 1px solid var(--color-border);
background: rgba(var(--color-bg-rgb), 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--color-text);
box-shadow: none;
}
.page-how-we-work .hww-hero .btn-hero .wp-block-button__link:hover,
.page-how-we-work .hww-hero .btn-hero-ghost .wp-block-button__link:hover {
transform: translateY(-3px);
border-color: rgba(var(--color-accent-rgb), 0.5);
box-shadow: var(--hww-shadow);
}
/* ---- Journey rail: Understand -> Design -> ... -> Review & Scale ---- */
.page-how-we-work .hww-journey {
position: relative;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.55rem 0.4rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
max-width: 900px;
}
.page-how-we-work .hww-journey-step {
position: relative;
margin: 0 !important;
padding: 0.55rem 1.05rem;
border: 1px solid var(--color-border);
border-radius: 100px;
background: var(--card-bg);
color: var(--color-text);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
white-space: nowrap;
box-shadow: 0 10px 24px -16px rgba(var(--ink-rgb), 0.4);
animation: hww-rise 0.7s var(--hww-ease) both;
animation-delay: calc(0.55s + var(--i, 0) * 110ms);
transition: transform 0.4s var(--hww-ease), border-color 0.4s var(--hww-ease),
color 0.4s var(--hww-ease), box-shadow 0.4s var(--hww-ease);
}
.page-how-we-work .hww-journey-step:hover {
transform: translateY(-4px);
border-color: rgba(var(--color-accent-rgb), 0.55);
color: var(--color-accent-hover);
box-shadow: 0 16px 30px -14px rgba(var(--color-accent-rgb), 0.5);
}
/* Arrow between chips, drawn rather than typed so it never wraps alone. */
.page-how-we-work .hww-journey-step::after {
content: "→";
position: absolute;
right: -0.72rem;
top: 50%;
transform: translateY(-50%);
color: rgba(var(--color-accent-rgb), 0.75);
font-size: 0.8rem;
font-weight: 500;
pointer-events: none;
}
.page-how-we-work .hww-journey-step:last-child::after { content: none; }
/* ---- Hero entrance ---- */
.page-how-we-work .hww-hero .section-tag-label,
.page-how-we-work .hww-hero .page-hero-title,
.page-how-we-work .hww-hero .page-hero-desc,
.page-how-we-work .hww-hero .wp-block-buttons {
animation: hww-rise 0.95s var(--hww-ease) both;
}
.page-how-we-work .hww-hero .section-tag-label { animation-delay: 0.05s; }
.page-how-we-work .hww-hero .page-hero-title { animation-delay: 0.15s; }
.page-how-we-work .hww-hero .page-hero-desc { animation-delay: 0.25s; }
.page-how-we-work .hww-hero .wp-block-buttons { animation-delay: 0.4s; }
/* ==========================================================================
SUPPORT THAT FITS YOUR BUSINESS -- three engagement models
========================================================================== */
.page-how-we-work .hww-model-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.page-how-we-work .hww-model-card {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
padding: 2rem 1.8rem !important;
border: 1px solid var(--color-border);
border-radius: 22px;
background: var(--card-bg);
box-shadow: var(--hww-shadow);
transition: transform 0.55s var(--hww-ease), box-shadow 0.55s var(--hww-ease),
border-color 0.55s var(--hww-ease);
}
.page-how-we-work .hww-model-card:hover {
transform: translateY(-8px);
border-color: rgba(var(--color-accent-rgb), 0.42);
box-shadow: var(--hww-shadow-lift);
}
/* Pointer-tracked spotlight; --mx/--my come from the JS and fall back to the
card centre so the unlit state is still correct without it. */
.page-how-we-work .hww-model-card::before,
.page-how-we-work .hww-pillar::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
rgba(var(--color-accent-rgb), 0.16), transparent 70%);
opacity: 0;
transition: opacity 0.45s var(--hww-ease);
pointer-events: none;
}
.page-how-we-work .hww-model-card:hover::before,
.page-how-we-work .hww-pillar:hover::before { opacity: 1; }
/* Accent edge that draws across on hover. */
.page-how-we-work .hww-model-card::after,
.page-how-we-work .hww-pillar::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 0;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
transition: width 0.55s var(--hww-ease);
}
.page-how-we-work .hww-model-card:hover::after,
.page-how-we-work .hww-pillar:hover::after { width: 100%; }
.page-how-we-work .hww-model-card .card-icon,
.page-how-we-work .hww-pillar .card-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 16px;
border: 1px solid rgba(var(--color-accent-rgb), 0.25);
background: linear-gradient(140deg,
rgba(var(--color-accent-rgb), 0.18), rgba(var(--color-accent-rgb), 0.05));
color: var(--color-accent-hover);
transition: transform 0.55s var(--hww-ease);
}
.page-how-we-work .hww-model-card:hover .card-icon,
.page-how-we-work .hww-pillar:hover .card-icon { transform: scale(1.09) rotate(-4deg); }
.page-how-we-work .hww-model-card .card-icon svg,
.page-how-we-work .hww-pillar .card-icon svg { width: 25px; height: 25px; }
.page-how-we-work .hww-model-card p,
.page-how-we-work .hww-pillar p {
margin: 0 !important;
font-size: 0.96rem;
line-height: 1.75;
color: var(--color-text-muted);
}
/* ==========================================================================
OUR PROCESS -- six steps beside the accompanying visual
========================================================================== */
.page-how-we-work .hww-process-media {
position: relative;
overflow: hidden;
margin: 0 0 clamp(2rem, 4vw, 2.75rem) !important;
border: 1px solid var(--color-border);
border-radius: 24px;
box-shadow: var(--hww-shadow);
transition: transform 0.6s var(--hww-ease), box-shadow 0.6s var(--hww-ease),
border-color 0.6s var(--hww-ease);
}
.page-how-we-work .hww-process-media:hover {
transform: translateY(-6px);
border-color: rgba(var(--color-accent-rgb), 0.4);
box-shadow: var(--hww-shadow-lift);
}
.page-how-we-work .hww-process-media img {
display: block;
width: 100%;
aspect-ratio: 21 / 8;
object-fit: cover;
transition: transform 0.8s var(--hww-ease);
}
.page-how-we-work .hww-process-media:hover img { transform: scale(1.04); }
/* Two-column timeline with a rail that fills as the section reveals. */
.page-how-we-work .hww-steps {
position: relative;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
counter-reset: hww-step;
}
.page-how-we-work .hww-step {
position: relative;
display: flex !important;
flex-direction: column;
gap: 0.55rem;
padding: 1.9rem 1.7rem 1.7rem 4.6rem !important;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--card-bg);
box-shadow: var(--hww-shadow);
counter-increment: hww-step;
transition: transform 0.5s var(--hww-ease), box-shadow 0.5s var(--hww-ease),
border-color 0.5s var(--hww-ease);
animation: none;
opacity: 0;
}
.page-how-we-work .hww-steps.is-revealed .hww-step {
animation: hww-rise 0.8s var(--hww-ease) both;
animation-delay: calc(var(--i, 0) * 90ms);
}
.page-how-we-work .hww-step:hover {
transform: translateY(-6px);
border-color: rgba(var(--color-accent-rgb), 0.42);
box-shadow: var(--hww-shadow-lift);
}
/* The step number is generated from the counter, so reordering the steps in
List View renumbers them automatically. */
.page-how-we-work .hww-step::before {
content: counter(hww-step);
position: absolute;
top: 1.7rem;
left: 1.6rem;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
color: #04120b;
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 10px 24px -10px rgba(var(--color-accent-rgb), 0.7);
transition: transform 0.5s var(--hww-ease);
}
.page-how-we-work .hww-step:hover::before { transform: scale(1.1); }
.page-how-we-work .hww-step-kicker {
margin: 0 !important;
color: var(--color-accent-hover) !important;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: -0.005em;
}
/* The brand teal at 0.9rem measured 3.1:1 on the white step cards, short of
the 4.5:1 body-size text needs. #007f76 is the same hue, darkened to 4.88:1.
Light mode only -- on the dark cards the brand teal already passes at 6:1. */
html:not([data-theme="dark"]) .page-how-we-work .hww-step-kicker {
color: #007f76 !important;
}
.page-how-we-work .hww-step p:not(.hww-step-kicker) {
margin: 0 !important;
font-size: 0.95rem;
line-height: 1.75;
color: var(--color-text-muted);
}
/* ==========================================================================
WHAT UNDERPINS OUR DELIVERY -- six controls
========================================================================== */
.page-how-we-work .hww-pillars {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.page-how-we-work .hww-pillar {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
padding: 1.9rem 1.7rem !important;
border: 1px solid var(--color-border);
border-radius: 20px;
background: var(--card-bg);
box-shadow: var(--hww-shadow);
transition: transform 0.55s var(--hww-ease), box-shadow 0.55s var(--hww-ease),
border-color 0.55s var(--hww-ease);
opacity: 0;
}
.page-how-we-work .hww-pillars.is-revealed .hww-pillar {
animation: hww-rise 0.8s var(--hww-ease) both;
animation-delay: calc(var(--i, 0) * 80ms);
}
.page-how-we-work .hww-pillar:hover {
transform: translateY(-7px);
border-color: rgba(var(--color-accent-rgb), 0.42);
box-shadow: var(--hww-shadow-lift);
}
/* ==========================================================================
EVIDENCE -- case studies and testimonials side by side
========================================================================== */
.page-how-we-work .hww-evidence-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.page-how-we-work .hww-evidence-card {
position: relative;
overflow: hidden;
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
padding: 0 0 2rem !important;
border: 1px solid var(--color-border);
border-radius: 24px;
background: var(--card-bg);
box-shadow: var(--hww-shadow);
transition: transform 0.55s var(--hww-ease), box-shadow 0.55s var(--hww-ease),
border-color 0.55s var(--hww-ease);
}
.page-how-we-work .hww-evidence-card:hover {
transform: translateY(-8px);
border-color: rgba(var(--color-accent-rgb), 0.42);
box-shadow: var(--hww-shadow-lift);
}
.page-how-we-work .hww-evidence-media {
width: 100%;
margin: 0 0 0.6rem !important;
overflow: hidden;
}
.page-how-we-work .hww-evidence-media img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform 0.8s var(--hww-ease);
}
.page-how-we-work .hww-evidence-card:hover .hww-evidence-media img { transform: scale(1.05); }
/* Everything below the photo needs the padding the card itself gives up so
the image can run edge to edge. */
.page-how-we-work .hww-evidence-card .wp-block-heading,
.page-how-we-work .hww-evidence-card p,
.page-how-we-work .hww-evidence-card .wp-block-buttons {
padding-left: 1.8rem;
padding-right: 1.8rem;
width: 100%;
}
.page-how-we-work .hww-evidence-card .wp-block-heading {
font-size: clamp(1.5rem, 2.4vw, 1.95rem) !important;
margin: 0.4rem 0 0 !important;
}
.page-how-we-work .hww-evidence-card p:not(.hww-step-kicker) {
margin: 0 !important;
font-size: 0.96rem;
line-height: 1.75;
color: var(--color-text-muted);
}
.page-how-we-work .hww-evidence-card .wp-block-buttons {
margin-top: auto;
padding-top: 0.6rem;
}
/* Same outline treatment as the hero pair, so every button on the page reads
as one family. */
.page-how-we-work .hww-evidence-card .wp-block-button__link {
display: inline-flex;
align-items: center;
height: 50px;
padding: 0 1.7rem;
border: 1px solid var(--color-border);
border-radius: 100px;
background: rgba(var(--color-bg-rgb), 0.55);
color: var(--color-text);
font-size: 0.9rem;
font-weight: 500;
transition: transform 0.45s var(--hww-ease), box-shadow 0.45s var(--hww-ease),
border-color 0.45s var(--hww-ease);
}
.page-how-we-work .hww-evidence-card .wp-block-button__link:hover {
transform: translateY(-3px);
border-color: rgba(var(--color-accent-rgb), 0.5);
box-shadow: var(--hww-shadow);
}
/* ==========================================================================
CTA
========================================================================== */
.page-how-we-work .inner-cta-box {
position: relative;
overflow: hidden;
border-radius: 26px;
box-shadow: var(--hww-shadow-lift), 0 0 0 1px rgba(var(--color-accent-rgb), 0.18);
transition: box-shadow 0.55s var(--hww-ease);
}
.page-how-we-work .inner-cta-box::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(40% 50% at 20% 30%, rgba(var(--color-accent-rgb), 0.22), transparent 62%);
animation: hww-drift 20s ease-in-out infinite alternate;
pointer-events: none;
}
.page-how-we-work .inner-cta-box:hover {
box-shadow: var(--hww-shadow-lift), 0 0 0 1px rgba(var(--color-accent-rgb), 0.45);
}
.page-how-we-work .inner-cta-box .wp-block-button__link {
transition: transform 0.45s var(--hww-ease), box-shadow 0.45s var(--hww-ease);
}
.page-how-we-work .inner-cta-box .wp-block-button__link:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px -14px rgba(var(--color-accent-rgb), 0.7);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1100px) {
.page-how-we-work .hww-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-how-we-work .hww-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.page-how-we-work .hww-steps { grid-template-columns: minmax(0, 1fr); }
.page-how-we-work .hww-evidence-grid { grid-template-columns: minmax(0, 1fr); }
.page-how-we-work .hww-model-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.page-how-we-work .hww-hero { padding-top: clamp(5.5rem, 18vw, 7rem); }
.page-how-we-work .hww-hero .page-hero-title { max-width: none; }
.page-how-we-work .hww-pillars { grid-template-columns: minmax(0, 1fr); }
.page-how-we-work .hww-process-media img { aspect-ratio: 16 / 9; }
/* The chips wrap onto several rows at this width, where a trailing arrow
at the end of a row points at nothing. */
.page-how-we-work .hww-journey-step::after { content: none; }
.page-how-we-work .hww-journey { gap: 0.5rem; }
}
@media (max-width: 460px) {
.page-how-we-work .hww-hero .wp-block-buttons,
.page-how-we-work .hww-hero .wp-block-button { width: 100%; }
.page-how-we-work .hww-hero .wp-block-button__link {
width: 100%;
justify-content: center;
}
.page-how-we-work .hww-step { padding-left: 1.6rem !important; padding-top: 4.2rem !important; }
.page-how-we-work .hww-step::before { top: 1.5rem; }
}
/* ==========================================================================
No-JS and reduced motion
The reveal classes come from script, so without it everything must still
resolve to visible.
========================================================================== */
.page-how-we-work.no-js .reveal-section,
.page-how-we-work.no-js .reveal-item,
.page-how-we-work.no-js .hww-step,
.page-how-we-work.no-js .hww-pillar {
opacity: 1 !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.page-how-we-work .hww-hero::before,
.page-how-we-work .inner-cta-box::before,
.page-how-we-work .hww-hero .section-tag-label::before {
animation: none !important;
}
.page-how-we-work .hww-hero .section-tag-label,
.page-how-we-work .hww-hero .page-hero-title,
.page-how-we-work .hww-hero .page-hero-desc,
.page-how-we-work .hww-hero .wp-block-buttons,
.page-how-we-work .hww-journey-step,
.page-how-we-work .hww-steps.is-revealed .hww-step,
.page-how-we-work .hww-pillars.is-revealed .hww-pillar {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.page-how-we-work .reveal-section,
.page-how-we-work .reveal-item,
.page-how-we-work .hww-step,
.page-how-we-work .hww-pillar {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.page-how-we-work .hww-model-card:hover,
.page-how-we-work .hww-pillar:hover,
.page-how-we-work .hww-step:hover,
.page-how-we-work .hww-journey-step:hover,
.page-how-we-work .hww-evidence-card:hover,
.page-how-we-work .hww-evidence-card:hover .hww-evidence-media img,
.page-how-we-work .hww-process-media:hover,
.page-how-we-work .hww-process-media:hover img,
.page-how-we-work .hww-hero .wp-block-button__link:hover,
.page-how-we-work .inner-cta-box .wp-block-button__link:hover {
transform: none !important;
}
}
/* ==========================================================================
HERO WITH A PHOTOGRAPH
Appended layer. Everything below is keyed off `:has(.hww-hero-media)`, so it
applies only once an Image block carrying that class is actually in the
hero. Delete the image in List View and the hero returns to the gradient
version above -- nothing here is load-bearing for the text-only design.
========================================================================== */
.page-how-we-work .hww-hero:has(.hww-hero-media) {
/*
* A whole screen. The base rule above already releases inner-pages.css's
* `height: 100vh` with !important, so this has to match on !important or
* it loses to its own base rule.
*
* svh, not vh, so a phone's address bar does not push the first section
* into view underneath it.
*/
min-height: 100vh !important;
min-height: 100svh !important;
padding-block: clamp(7rem, 12vw, 9.5rem) clamp(3rem, 6vw, 5rem);
}
/*
* The photograph, lifted out of flow to cover the section. It is an ordinary
* core/image block in the content -- the client replaces it from List View --
* so the figure's own block margins have to be cleared too.
*/
.page-how-we-work .hww-hero .hww-hero-media {
position: absolute;
inset: 0;
z-index: -3;
margin: 0 !important;
overflow: hidden;
/*
* Leaving for the background.
*
* js/pages/how-we-work.js writes --hw-hero-p, 0 while the hero is at rest
* and rising to 1 as it scrolls away. Every transform and opacity that
* reads it lives here, so the motion can be retuned without touching the
* script -- and if the script never runs the property is absent and each
* var() falls back to 0, leaving the hero as it looks on arrival.
*/
transform: translate3d(0, calc(var(--hw-hero-p, 0) * 12%), 0) scale(calc(1 + var(--hw-hero-p, 0) * 0.14));
will-change: transform;
}
.page-how-we-work .hww-hero .hww-hero-media img {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: 0;
animation: hww-hero-settle 24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes hww-hero-settle {
from { transform: scale(1.09); }
to { transform: scale(1); }
}
/*
* The scrim. Both of the hero's pseudo-elements are already spoken for -- a
* drifting aurora on ::before and a wash on ::after -- so rather than add a
* third, the aurora is retired over a photograph (it only muddies one) and
* ::after is repurposed as the scrim.
*/
.page-how-we-work .hww-hero:has(.hww-hero-media)::before { display: none; }
.page-how-we-work .hww-hero:has(.hww-hero-media)::after {
inset: 0;
z-index: -2;
opacity: calc(0.8 + var(--hw-hero-p, 0) * 0.2);
background:
linear-gradient(to top, rgba(5, 12, 10, 0.9) 0%, rgba(5, 12, 10, 0.55) 46%, rgba(5, 12, 10, 0.42) 82%, rgba(5, 12, 10, 0.62) 100%),
radial-gradient(75% 65% at 50% 45%, rgba(5, 12, 10, 0.55), rgba(5, 12, 10, 0.15) 75%);
/*
* The rule being reused draws a blueprint grid behind a soft radial mask.
* Both have to be cleared here or the scrim inherits them -- the mask in
* particular confined it to a blob in the middle of the hero and left the
* edges of the photograph at full brightness, with the headline sitting on
* whatever the picture happened to be doing there.
*/
-webkit-mask-image: none;
mask-image: none;
background-size: auto;
animation: none;
}
.page-how-we-work .hww-hero:has(.hww-hero-media) .container {
position: relative;
z-index: 1;
/* Multiplied by more than 1 so the type is gone before the hero is, which
is what makes it read as a handover rather than a fade-out. */
opacity: calc(1 - var(--hw-hero-p, 0) * 1.45);
transform: translate3d(0, calc(var(--hw-hero-p, 0) * -56px), 0);
will-change: transform, opacity;
}
/* Left-aligned over the picture, and white in BOTH themes -- the scrim is a
fixed dark gradient, so a theme-aware colour would vanish in light mode. */
/*
* Plain white, matching Our Team's hero title -- no gradient fading the
* second line into green. That gradient (background-clip: text over a
* dark-to-accent stop) is what this used to do; removed for visual parity
* with Team, which was asked for directly. The description right below
* already carries the green (see the rule after this one), so the accent
* colour still appears in the hero, just not inside the heading itself.
*/
.page-how-we-work .hww-hero:has(.hww-hero-media) .page-hero-title {
color: #fff;
background: none;
-webkit-text-fill-color: #fff;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
/* Hero description, in the brand green -- same treatment as the Our Team
hero lede. Was rgba(255,255,255,0.82); the title already fades into this
same green via its gradient (background-clip: text) above, so this
carries that colour the rest of the way into the body copy. */
.page-how-we-work .hww-hero:has(.hww-hero-media) .page-hero-desc { color: var(--color-accent); }
.page-how-we-work .hww-hero:has(.hww-hero-media) .section-tag-label { color: #fff; }
/*
* Both hero buttons are outline buttons -- they were unified earlier at the
* client's request so "See Our Process" matches "View Case Studies" -- and a
* dark outline disappears on a photograph. Both take the light treatment.
*/
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero .wp-block-button__link,
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero-ghost .wp-block-button__link {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
color: #fff;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero .wp-block-button__link:hover,
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero-ghost .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #fff;
color: #fff;
}
/* The header floats over the photograph, so its links must be light while the
bar is still transparent. Same treatment as the articles and About Us. */
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) nav .nav-link,
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .nav-chevron {
color: #fff !important;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .nav-list .nav-item:hover > .nav-link {
color: var(--color-accent) !important;
text-shadow: none !important;
}
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .hamburger .bar {
background-color: #fff !important;
}
/* --------------------------------------------------------------------------
Portrait screens
Same reasoning as the article and About heroes: a full-bleed cover in a tall
window crops a landscape photograph to a vertical sliver. The picture takes
a band of its own and the headline sits below it, still within one screen.
-------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: portrait) {
.page-how-we-work .hww-hero:has(.hww-hero-media) {
display: grid;
grid-template-rows: auto auto;
align-content: center;
row-gap: clamp(1.25rem, 5vw, 2rem);
padding-block: clamp(5rem, 13vw, 6rem) clamp(2rem, 7vw, 3rem);
background: var(--color-bg);
}
.page-how-we-work .hww-hero .hww-hero-media {
position: relative;
inset: auto;
grid-row: 1;
grid-column: 1;
z-index: 0;
aspect-ratio: 4 / 3;
width: 100%;
/* Nothing behind it to sink into once it has a band of its own; the
transform only pushed it out of its own frame. */
transform: none;
}
.page-how-we-work .hww-hero .hww-hero-media img { height: 100%; }
.page-how-we-work .hww-hero:has(.hww-hero-media)::after {
grid-row: 1;
grid-column: 1;
position: relative;
inset: auto;
z-index: 1;
opacity: 1;
/* Only a top vignette now: it keeps the white nav legible over the
picture, it is not darkening type that has moved off it. */
background: linear-gradient(to bottom, rgba(5, 12, 10, 0.5) 0%, rgba(5, 12, 10, 0) 42%);
}
.page-how-we-work .hww-hero:has(.hww-hero-media) .container {
grid-row: 2;
grid-column: 1;
z-index: 2;
transform: none;
opacity: 1;
}
/* The type is on the page background again, so it takes the page colours.
Plain, same reasoning as the desktop rule above -- no gradient split. */
.page-how-we-work .hww-hero:has(.hww-hero-media) .page-hero-title {
color: var(--color-text);
background: none;
-webkit-text-fill-color: var(--color-text);
text-shadow: none;
}
.page-how-we-work .hww-hero:has(.hww-hero-media) .page-hero-desc { color: var(--color-accent); }
.page-how-we-work .hww-hero:has(.hww-hero-media) .section-tag-label { color: var(--color-text-muted); }
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero .wp-block-button__link,
.page-how-we-work .hww-hero:has(.hww-hero-media) .btn-hero-ghost .wp-block-button__link {
border-color: var(--color-border);
background: transparent;
color: var(--color-text);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* The bar is over the page background here, not the photograph. */
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) nav .nav-link,
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .nav-chevron {
color: var(--color-text) !important;
text-shadow: none !important;
}
.page-how-we-work:has(.hww-hero-media) .site-header:not(.scrolled-solid) .hamburger .bar {
background-color: var(--color-text) !important;
}
}
/* ==========================================================================
SECTION POLISH
========================================================================== */
/* Alternating grounds, so the four sections read as a sequence rather than one
continuous scroll of the same colour. */
.page-how-we-work .hww-process,
.page-how-we-work .hww-evidence {
background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
border-block: 1px solid var(--color-border);
}
/* -------------------------------------------------- model + pillar cards */
.page-how-we-work .hww-model-card,
.page-how-we-work .hww-pillar,
.page-how-we-work .hww-evidence-card {
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-how-we-work .hww-model-card:hover,
.page-how-we-work .hww-pillar:hover,
.page-how-we-work .hww-evidence-card:hover {
transform: translateY(-5px);
border-color: rgba(var(--color-accent-rgb), 0.45);
box-shadow: 0 30px 66px -32px rgba(var(--ink-rgb), 0.5);
}
/* -------------------------------------------------- process steps */
/*
* The numeral becomes the graphic. It sits behind the step's own text at low
* opacity and lifts on hover, which gives the six steps a sense of sequence
* without adding a rail -- a rail here was removed earlier at the client's
* request and should not come back.
*/
.page-how-we-work .hww-step {
position: relative;
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-how-we-work .hww-step:hover {
transform: translateY(-4px);
border-color: rgba(var(--color-accent-rgb), 0.45);
box-shadow: 0 26px 58px -30px rgba(var(--ink-rgb), 0.48);
}
.page-how-we-work .hww-step-kicker {
transition: color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-how-we-work .hww-step:hover .hww-step-kicker {
color: var(--color-accent-hover);
transform: translateX(2px);
}
/* -------------------------------------------------- pictures in the body */
.page-how-we-work .hww-process-media img,
.page-how-we-work .hww-evidence-media img {
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-how-we-work .hww-process-media,
.page-how-we-work .hww-evidence-media {
overflow: hidden;
border-radius: 18px;
}
.page-how-we-work .hww-process-media:hover img,
.page-how-we-work .hww-evidence-media:hover img { transform: scale(1.04); }
/* -------------------------------------------------- staggered arrival */
/*
* js/pages/how-we-work.js already marks each section .is-visible on scroll;
* this only re-times what happens then. The children stagger off the parent's
* state rather than needing observers of their own, and nothing new can hide
* the page.
*/
.page-how-we-work .reveal-section .hww-model-card,
.page-how-we-work .reveal-section .hww-pillar,
.page-how-we-work .reveal-section .hww-step,
.page-how-we-work .reveal-section .hww-evidence-card {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-how-we-work .reveal-section.is-visible .hww-model-card,
.page-how-we-work .reveal-section.is-visible .hww-pillar,
.page-how-we-work .reveal-section.is-visible .hww-step,
.page-how-we-work .reveal-section.is-visible .hww-evidence-card {
opacity: 1;
transform: none;
}
.page-how-we-work .reveal-section.is-visible .hww-model-card:nth-child(2),
.page-how-we-work .reveal-section.is-visible .hww-pillar:nth-child(2),
.page-how-we-work .reveal-section.is-visible .hww-step:nth-child(2),
.page-how-we-work .reveal-section.is-visible .hww-evidence-card:nth-child(2) { transition-delay: 80ms; }
.page-how-we-work .reveal-section.is-visible .hww-model-card:nth-child(3),
.page-how-we-work .reveal-section.is-visible .hww-pillar:nth-child(3),
.page-how-we-work .reveal-section.is-visible .hww-step:nth-child(3),
.page-how-we-work .reveal-section.is-visible .hww-evidence-card:nth-child(3) { transition-delay: 160ms; }
.page-how-we-work .reveal-section.is-visible .hww-pillar:nth-child(4),
.page-how-we-work .reveal-section.is-visible .hww-step:nth-child(4) { transition-delay: 240ms; }
.page-how-we-work .reveal-section.is-visible .hww-pillar:nth-child(5),
.page-how-we-work .reveal-section.is-visible .hww-step:nth-child(5) { transition-delay: 320ms; }
.page-how-we-work .reveal-section.is-visible .hww-pillar:nth-child(6),
.page-how-we-work .reveal-section.is-visible .hww-step:nth-child(6) { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) {
.page-how-we-work .hww-hero .hww-hero-media,
.page-how-we-work .hww-hero:has(.hww-hero-media) .container {
transform: none !important;
opacity: 1 !important;
}
.page-how-we-work .hww-hero .hww-hero-media img { animation: none; }
.page-how-we-work .reveal-section .hww-model-card,
.page-how-we-work .reveal-section .hww-pillar,
.page-how-we-work .reveal-section .hww-step,
.page-how-we-work .reveal-section .hww-evidence-card {
opacity: 1;
transform: none;
transition: none;
}
.page-how-we-work .hww-model-card:hover,
.page-how-we-work .hww-pillar:hover,
.page-how-we-work .hww-evidence-card:hover,
.page-how-we-work .hww-step:hover { transform: none; }
.page-how-we-work .hww-process-media:hover img,
.page-how-we-work .hww-evidence-media:hover img { transform: none; }
}
/* ==========================================================================
WE INTEGRATE. YOU KEEP CONTROL.
The About Us integration block, placed between the delivery models and
the process. On this page it becomes a dark panel on the same 1344px
column as the cards around it: the copy on the left, and on the right the
four commitments strung on a rail. A signal walks down the rail, drawing
and filling each check as it arrives, and rests on "No permanent headcount
growth" before going round again (js/pages/how-we-work.js sets --int-fill
and the item classes). Without the script every check is simply filled.
========================================================================== */
@property --int-fill { syntax: ""; inherits: true; initial-value: 0px; }
@property --int-angle { syntax: ""; inherits: false; initial-value: 0deg; }
.page-how-we-work .wwa-integration {
--int-node: 32px;
--int-gap: 3.25rem;
padding-block: clamp(4rem, 8vw, 6.5rem);
padding-inline: max(32px, calc((100% - 1344px) / 2));
background: none;
}
.page-how-we-work .wwa-integration .container {
max-width: none;
margin: 0;
padding: 0;
}
/* ---------------------------------------------------------------- panel */
.page-how-we-work .integration-split {
position: relative;
isolation: isolate;
overflow: hidden;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2.5rem, 5vw, 5rem);
padding: clamp(2.25rem, 5vw, 4.5rem);
border: 1px solid transparent;
border-radius: 28px;
/* top layer: the cursor glow; bottom layer: the edge, a faint ring with a
bright arc that travels round it while the panel is on screen */
background:
radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(38, 208, 124, 0.11), transparent 60%) padding-box,
radial-gradient(circle at 0% 0%, rgba(38, 208, 124, 0.22), transparent 50%) padding-box,
radial-gradient(circle at 100% 100%, rgba(0, 164, 153, 0.2), transparent 52%) padding-box,
linear-gradient(150deg, #17262b 0%, #0e181b 100%) padding-box,
conic-gradient(from var(--int-angle), rgba(255, 255, 255, 0.08) 0deg 240deg, rgba(38, 208, 124, 0.9) 300deg, rgba(255, 255, 255, 0.08) 360deg) border-box;
box-shadow: var(--hww-shadow-lift);
animation: int-edge 10s linear infinite paused;
}
.page-how-we-work .integration-split.is-inview { animation-play-state: running; }
@keyframes int-edge { to { --int-angle: 360deg; } }
/* blueprint dot grid, strongest behind the copy and round the cursor */
.page-how-we-work .integration-split::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px);
background-size: 24px 24px;
-webkit-mask-image:
radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%),
radial-gradient(ellipse 60% 75% at 22% 45%, rgba(0, 0, 0, 0.7), transparent 75%);
mask-image:
radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 75%),
radial-gradient(ellipse 60% 75% at 22% 45%, rgba(0, 0, 0, 0.7), transparent 75%);
}
/* a slow drifting glow */
.page-how-we-work .integration-split::after {
content: "";
position: absolute;
z-index: -1;
left: -15%;
bottom: -45%;
width: 55%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(38, 208, 124, 0.2), transparent 65%);
animation: int-drift 16s ease-in-out infinite alternate;
}
@keyframes int-drift { to { transform: translate(40%, -50%); } }
/* ----------------------------------------------------------------- copy */
.page-how-we-work .integration-copy h2 {
margin: 0 0 1.35rem;
color: #fff;
font-size: clamp(2rem, 3.6vw, 2.9rem);
line-height: 1.1;
}
/* "You Keep Control." moves to its own line as a whole rather than breaking
after "You", and is underlined once the copy is in view */
.page-how-we-work .integration-copy h2 .accent {
display: inline-block;
color: #26d07c;
padding-bottom: 0.06em;
background: linear-gradient(90deg, #26d07c, #00a499) no-repeat 0 100% / 0% 3px;
transition: background-size 1.1s var(--hww-ease) 0.55s;
}
.page-how-we-work .integration-copy.is-revealed h2 .accent { background-size: 100% 3px; }
.page-how-we-work .integration-copy p {
color: rgba(255, 255, 255, 0.72);
font-size: 1.02rem;
line-height: 1.8;
}
/* ----------------------------------------------------------------- rail */
.page-how-we-work .integration-list {
position: relative;
gap: 0.85rem;
padding-left: var(--int-gap);
transition: opacity 0.85s var(--hww-ease), transform 0.85s var(--hww-ease), --int-fill 0.9s var(--hww-ease);
}
/* the track, with the fill growing down it to the current item; the
script measures the first and last checks, the fallbacks are close */
.page-how-we-work .integration-list::before {
content: "";
position: absolute;
left: calc(var(--int-node) / 2 - 1px);
top: var(--rail-top, 2.6rem);
height: var(--rail-len, calc(100% - 5.2rem));
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, #26d07c, #00a499) no-repeat 0 0 / 100% 100%, rgba(255, 255, 255, 0.12);
transform: scaleY(0);
transform-origin: top;
transition: transform 1.2s var(--hww-ease) 0.25s;
}
.page-how-we-work .integration-list.is-live::before { background-size: 100% var(--int-fill); }
.page-how-we-work .integration-list.is-revealed::before { transform: none; }
/* the signal: it travels in the open and disappears under each check */
.page-how-we-work .integration-list::after {
content: "";
position: absolute;
z-index: 1;
left: calc(var(--int-node) / 2 - 6px);
top: calc(var(--rail-top, 2.6rem) - 6px);
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 4px rgba(38, 208, 124, 0.35), 0 0 18px 5px rgba(38, 208, 124, 0.75);
transform: translateY(var(--int-fill));
opacity: 0;
transition: opacity 0.4s ease;
}
.page-how-we-work .integration-list.is-live.is-revealed::after { opacity: 1; }
/* ---------------------------------------------------------------- items */
.page-how-we-work .integration-list .int-item {
position: relative;
z-index: 2;
align-items: center;
padding: 1.2rem 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
background:
radial-gradient(260px circle at var(--tx, -999px) var(--ty, -999px), rgba(38, 208, 124, 0.12), transparent 65%),
rgba(255, 255, 255, 0.04);
box-shadow: none;
transition: transform 0.55s var(--hww-ease), border-color 0.55s var(--hww-ease),
background-color 0.55s var(--hww-ease), box-shadow 0.55s var(--hww-ease);
}
.page-how-we-work .integration-list .int-item:hover,
.page-how-we-work .integration-list .int-item.is-current {
transform: translateX(6px);
border-color: rgba(38, 208, 124, 0.45);
background-color: rgba(38, 208, 124, 0.09);
box-shadow: 0 18px 40px -22px rgba(38, 208, 124, 0.6);
}
/* edge light that follows the pointer: a 1px ring cut out of a glow */
.page-how-we-work .integration-list .int-item::before {
content: "";
position: absolute;
inset: -1px;
padding: 1px;
border-radius: inherit;
background: radial-gradient(170px circle at var(--tx, -999px) var(--ty, -999px), rgba(38, 208, 124, 0.95), transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
/* the closing commitment carries a standing tint */
.page-how-we-work .integration-list .int-item--accent {
border-color: rgba(38, 208, 124, 0.32);
background:
radial-gradient(260px circle at var(--tx, -999px) var(--ty, -999px), rgba(38, 208, 124, 0.12), transparent 65%),
linear-gradient(90deg, rgba(38, 208, 124, 0.14), rgba(38, 208, 124, 0.02) 75%),
rgba(255, 255, 255, 0.04);
}
.page-how-we-work .integration-list .int-item strong {
color: #fff;
font-size: 1rem;
}
.page-how-we-work .integration-list .int-item div span {
color: rgba(255, 255, 255, 0.64);
font-size: 0.9rem;
}
/* check: a node on the rail -- filled once the signal has reached it */
.page-how-we-work .integration-list .int-check {
position: absolute;
left: calc(-1 * var(--int-gap));
top: 50%;
width: var(--int-node);
height: var(--int-node);
margin: calc(var(--int-node) / -2) 0 0;
border: 1.5px solid transparent;
background: linear-gradient(135deg, #26d07c, #00a499) padding-box;
box-shadow: 0 8px 20px -8px rgba(38, 208, 124, 0.8);
color: #04120b;
transition: background 0.5s var(--hww-ease), border-color 0.5s var(--hww-ease),
color 0.5s var(--hww-ease), box-shadow 0.5s var(--hww-ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-how-we-work .integration-list .int-check svg {
width: 14px;
height: 14px;
stroke-dasharray: 24;
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.6s var(--hww-ease) 0.15s;
}
.page-how-we-work .integration-list.is-live .int-item:not(.is-on) .int-check {
border-color: rgba(38, 208, 124, 0.4);
background: #0f1b1f;
box-shadow: none;
color: #26d07c;
}
.page-how-we-work .integration-list.is-live .int-item:not(.is-on) .int-check svg { stroke-dashoffset: 24; }
.page-how-we-work .integration-list .int-item.is-current .int-check {
transform: scale(1.12);
animation: int-ping 1.6s ease-out;
}
@keyframes int-ping {
from { box-shadow: 0 8px 20px -8px rgba(38, 208, 124, 0.8), 0 0 0 0 rgba(38, 208, 124, 0.55); }
to { box-shadow: 0 8px 20px -8px rgba(38, 208, 124, 0.8), 0 0 0 16px rgba(38, 208, 124, 0); }
}
/* items arrive one after another, from the rail side */
.page-how-we-work .integration-list.is-revealed .int-item { animation: int-in 0.8s var(--hww-ease) 0.3s backwards; }
.page-how-we-work .integration-list.is-revealed .int-item:nth-child(2) { animation-delay: 0.42s; }
.page-how-we-work .integration-list.is-revealed .int-item:nth-child(3) { animation-delay: 0.54s; }
.page-how-we-work .integration-list.is-revealed .int-item:nth-child(4) { animation-delay: 0.66s; }
.page-how-we-work .integration-list.is-revealed .int-item:nth-child(5) { animation-delay: 0.78s; }
@keyframes int-in { from { opacity: 0; transform: translateX(28px); filter: blur(4px); } }
@media (max-width: 900px) {
.page-how-we-work .integration-split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.page-how-we-work .wwa-integration { --int-node: 28px; --int-gap: 2.6rem; padding-inline: 16px; }
.page-how-we-work .integration-split { padding: 2rem 1.35rem; border-radius: 22px; }
.page-how-we-work .integration-list .int-item { padding: 1rem 1.1rem; }
.page-how-we-work .integration-list .int-item:hover,
.page-how-we-work .integration-list .int-item.is-current { transform: none; }
}
.page-how-we-work.no-js .integration-list::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
.page-how-we-work .integration-split,
.page-how-we-work .integration-split::after,
.page-how-we-work .integration-list .int-item,
.page-how-we-work .integration-list .int-check { animation: none !important; }
.page-how-we-work .integration-list::before { transform: none; transition: none; }
.page-how-we-work .integration-copy h2 .accent { background-size: 100% 3px; transition: none; }
.page-how-we-work .integration-list .int-item:hover { transform: none; }
}