/* Generated by site/build.py from site/css/. Do not edit. */
/* --- 00-tokens.css --- */
/* ==========================================================================
SuperUltra design tokens
Source: Figma file Xeks8QTJYHe4DAYLDHQ6FV variables + text styles (Oct 2026).
One file, used by every page. Change a value here, not in a page.
========================================================================== */
:root {
/* ---- Colour / background ---- */
--color-background-page: #fcfbfa;
--color-background-subtle: #eaecee;
--color-background-surface: #ffffff;
--color-background-inverse: #07080a;
--color-background-inverse-raised: #1a1b1f;
--color-background-inverse-sunken: #1d1f24;
--color-background-tile-dark: #0d0d11;
--color-background-accent: #4a45fb;
--color-background-alert: #f90b3d;
--color-background-chip-on-dark: #ffffff1c;
/* ---- Colour / text ---- */
--color-text-on-light-primary: #121518;
--color-text-on-light-secondary: #121518b2;
--color-text-on-light-tertiary: #12151880;
--color-text-on-light-link: #4a45fb;
--color-text-on-dark-primary: #f4f4f5;
--color-text-on-dark-secondary: #f4f4f5b2;
--color-text-on-dark-tertiary: #f4f4f580;
--color-text-on-dark-title: #7587ff;
--color-text-muted: #8b8f98;
--color-text-button-default: #2d3648;
--color-text-button-on-fill: #ffffff;
/* ---- Colour / buttons, dots, borders ---- */
--color-background-button-primary: #07080a;
--color-background-button-inverse: #ffffff;
--color-background-button-accent-on-dark: #d9003a;
--color-border-button-secondary: #1215184d;
--color-dot-alert: #f90b3d;
--color-dot-accent: #4a45fb;
--color-dot-inactive: #30323a;
--color-dot-grid-on-dark: #8b8f9880;
--color-border: rgba(45, 54, 72, 0.12);
--color-border-on-dark: rgba(255, 255, 255, 0.1);
/* ---- Webinar (PwC co-branding) ---- */
--webinar-orange: #fd5108;
--webinar-muted: #868e9f;
/* ---- Type families ----
As the design team specified: SF Pro (the font the design is drawn in) on Apple devices, Inter everywhere else.
SF Pro can't be licensed as a web font, so it comes from the device (-apple-system / BlinkMacSystemFont pick the
right Text/Display cut automatically); Inter loads from Google Fonts and is only used where SF Pro isn't there. */
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
--font-serif: "Newsreader", Georgia, serif;
--font-mono: "Roboto Mono", ui-monospace, "SF Mono", monospace;
--font-webinar-title: Georgia, "Times New Roman", serif;
/* ---- Type scale (Figma text styles) ----
Each heading scales down fluidly between 375px and 1440px viewports. */
--text-display: clamp(64px, 5vw + 48px, 140px); /* Display/Stat medium 140 */
--text-h1: clamp(36px, 1.9vw + 29px, 56px); /* H1 56 / 100% / light */
--text-h3: clamp(30px, 0.95vw + 26.5px, 40px); /* H3 40 / 120% / -2% */
--text-h4: clamp(24px, 0.75vw + 21px, 32px); /* H4 32 / 136% */
--text-h5: clamp(20px, 0.38vw + 18.6px, 24px); /* H5 24 / 140% / +1% */
--text-h6: 20px; /* H6 20 / 140% */
--text-body: 16px; /* Body 16 / 145% */
--text-body-2: 14px; /* Body 2 14 / 140% */
--text-overline: 12px; /* Overline mono 12 / 100% / +8% */
/* ---- Layout ---- */
/* Content is capped at 1200px and centres on wide screens, as most blocks on the team's site do. Sections the team
stretches edge to edge (fixed 120px side margin, --gutter) opt out with .container--wide (10-base.css). */
--page-max: 1440px;
--content-max: 1200px;
--gutter: clamp(20px, 8.33vw, 120px); /* 120px at 1440 */
--section-y: clamp(72px, 6.9vw, 140px); /* vertical section padding, 140 at 1440 */
--section-y-sm: clamp(56px, 5vw, 96px);
/* ---- Radii ---- */
--radius-edge: 40px;
--radius-section: 32px;
--radius-card: 24px;
--radius-tile: 20px;
--radius-stage: 16px;
--radius-nav: 12px;
--radius-webinar-button: 6px;
--radius-pill: 999px;
/* ---- Buttons ---- */
--button-gap: 8px;
--button-padding-x: 20px;
--button-large-height: 52px;
/* ---- Shadows ---- */
--shadow-card: 0 30px 60px 0 rgba(223, 223, 223, 0.6);
--shadow-pill: 0 3px 10px 0 rgba(0, 0, 0, 0.13);
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-rise: cubic-bezier(0.2, 0.7, 0.2, 1); /* the team's reveal curve (main.js data-r / rise) */
}
/* ---- Added during the rebuild (promoted from page groups) ---- */
:root {
/* Header heights at the top of the page (inset + bar). Constant: the header never changes height on scroll. */
--back-nav-h: 108px; /* 36 + 72 */
/* Fixed compositions (e.g. the Home selected-work slide, whose art is drawn for this width) don't stretch on wide
screens; they stay this wide and centre, as on the team's site. */
--composition-max: 1200px;
/* Figma "Background-dark-raised": glass panels over dark art */
--gradient-dark-raised: linear-gradient(180deg, color-mix(in srgb, var(--color-background-inverse-raised) 80%, transparent), color-mix(in srgb, var(--color-background-inverse) 80%, transparent));
--color-line-on-dark: #3a3c42; /* opaque grid line on dark, so crossings don't darken */
}
@media (max-width: 1023px) { :root { --back-nav-h: 72px; } } /* 12 + 60 */
/* --- 10-base.css --- */
/* ==========================================================================
Base: reset, type, layout primitives
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
html, body { overflow-x: clip; }
body {
margin: 0;
background: var(--color-background-page);
color: var(--color-text-on-light-primary);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: 1.45;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-text-on-light-link); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: #fff; box-shadow: var(--shadow-pill); }
.skip-link:focus { top: 16px; }
/* ---- Layout ---- */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Sections the team's site stretches edge to edge: no 1200px cap, just the side margin (--gutter, 120px from 1440) */
.container--wide { max-width: none; }
/* Pages the team built as a 1440 canvas scaled to the window (What we do, Who we are): the side margin keeps its
1440 proportion (120/1440 of the width) on wide screens instead of stopping at 120px. Set on . */
.fluid-margins { --gutter: max(20px, 8.333vw); }
.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--subtle { background: var(--color-background-subtle); }
.section--surface { background: var(--color-background-surface); }
.section--dark { background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); }
.section--raised { background: var(--color-background-inverse-sunken); color: var(--color-text-on-dark-primary); }
/* Rounded panels that sit on the page edge (Figma "edge" radius) */
.section--panel { border-radius: var(--radius-edge); }
.section--panel-top { border-radius: var(--radius-edge) var(--radius-edge) 0 0; }
.stack > * + * { margin-top: var(--stack, 24px); }
.center { text-align: center; margin-inline: auto; }
.measure { max-width: 640px; }
.measure-wide { max-width: 800px; }
/* ---- Type (Figma text styles) ---- */
.t-display { font-size: var(--text-display); font-weight: 300; line-height: 1; letter-spacing: -0.06em; }
.t-h1 { font-size: var(--text-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.t-h3 { font-size: var(--text-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.t-h4 { font-size: var(--text-h4); font-weight: 300; line-height: 1.36; }
.t-h5 { font-size: var(--text-h5); font-weight: 300; line-height: 1.4; letter-spacing: 0.01em; }
.t-h6 { font-size: var(--text-h6); font-weight: 400; line-height: 1.4; }
.t-h6-strong { font-size: var(--text-h6); font-weight: 600; line-height: 1.4; }
.t-body { font-size: var(--text-body); line-height: 1.45; }
.t-body-strong { font-size: var(--text-body); font-weight: 600; line-height: 1.6; }
.t-body-2 { font-size: var(--text-body-2); line-height: 1.4; }
.t-body-2-italic { font-size: var(--text-body-2); font-style: italic; line-height: 1.5; }
.t-overline { font-family: var(--font-mono); font-size: var(--text-overline); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.t-label { font-family: var(--font-mono); font-size: 16px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
/* Serif accent word inside a heading: "We commercialise good ideas." */
.t-serif { font-family: var(--font-serif); font-style: italic; font-weight: 700; letter-spacing: -0.01em; }
.t-secondary { color: var(--color-text-on-light-secondary); }
.t-tertiary { color: var(--color-text-on-light-tertiary); }
.t-muted { color: var(--color-text-muted); }
.t-link { color: var(--color-text-on-light-link); }
.on-dark .t-secondary, .section--dark .t-secondary, .section--raised .t-secondary { color: var(--color-text-on-dark-secondary); }
.on-dark .t-tertiary, .section--dark .t-tertiary, .section--raised .t-tertiary { color: var(--color-text-on-dark-tertiary); }
.t-dim { color: var(--color-text-on-dark-secondary); }
/* Long-form text (articles, legal pages) */
.prose { font-size: 18px; line-height: 1.65; color: var(--color-text-on-light-secondary); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: var(--text-h4); font-weight: 300; line-height: 1.3; color: var(--color-text-on-light-primary); }
.prose h3 { margin-top: 1.6em; font-size: var(--text-h6); font-weight: 600; line-height: 1.4; color: var(--color-text-on-light-primary); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose ol { padding-left: 1.2em; list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose a { color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--color-text-on-light-primary); font-weight: 600; }
.prose blockquote { padding-left: 24px; border-left: 2px solid var(--color-dot-alert); font-family: var(--font-serif); font-style: italic; font-size: var(--text-h5); line-height: 1.4; color: var(--color-text-on-light-primary); }
/* ---- Reveal on scroll ([data-reveal], toggled by site.js) ---- */
/* The team's reveal: text rises 24px, headings 32px, over about a second; elements that enter together cascade in DOM
order, 100ms apart (00-core.js). A page can add a fixed offset with --reveal-delay. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-rise), transform 1.1s var(--ease-rise); transition-delay: var(--reveal-delay, 0ms); }
.js :is(h1, h2, h3)[data-reveal] { transform: translateY(32px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Items of a numbered group that don't bring their own entrance get the standard one */
.js [data-seq-item]:not([data-own-motion]) { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-seq-item]:not([data-own-motion]).is-in { opacity: 1; transform: none; }
/* --- 20-components.css --- */
/* ==========================================================================
Shared components. Every page uses these; none redefine them.
Figma components: Webinar-CTA 4053:4785, Top nav 3594:3749, Footer 3637:37237,
Button 3603:7418, Section tags 3611:32159.
========================================================================== */
/* ---------- Webinar bar (Webinar-CTA) ---------- */
.webinar-bar { background: var(--color-background-inverse); border-bottom: 1px solid rgba(134, 142, 159, 0.4); color: #fff; }
.webinar-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 60px 24px 76px; }
.webinar-bar__copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.webinar-bar__eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 15px; letter-spacing: 2px; color: var(--webinar-orange); }
.webinar-bar__eyebrow img { width: 6px; height: 6px; }
.webinar-bar__title { font-family: var(--font-webinar-title); font-size: 24px; line-height: 26px; }
.webinar-bar__desc { margin-top: 1px; font-size: 14px; line-height: 20px; color: var(--webinar-muted); }
.webinar-bar__actions { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.webinar-bar__date { font-family: var(--font-mono); font-weight: 600; font-size: 14px; line-height: 15px; letter-spacing: 2px; color: var(--webinar-orange); white-space: nowrap; }
.webinar-bar__date span { color: #fff; }
.webinar-bar__button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 24px; border-radius: var(--radius-webinar-button); background: var(--webinar-orange); font-weight: 600; font-size: 14px; letter-spacing: 1.12px; text-transform: uppercase; white-space: nowrap; transition: filter .2s ease; }
.webinar-bar__button:hover { filter: brightness(1.08); }
.webinar-bar__button span { transition: transform .25s var(--ease-out); }
.webinar-bar__button:hover span { transform: translateX(3px); }
/* ---------- Site navigation (Top nav) ---------- */
/* The nav bar sticks to the top of the window. Its 36px top inset (Figma) tucks to 0 once scrolled. */
/* Sticky with a negative top: the 36px inset above the bar scrolls away and the bar sits flush at the top, without the
header ever changing height (so nothing on the page shifts, and pages can rely on --nav-h / --back-nav-h). */
.site-nav { position: sticky; top: -36px; z-index: 100; padding: 36px 36px 0; background: transparent; }
.site-nav__shell { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-inline: auto; padding: 24px 24px 24px 40px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-nav); transition: border-radius .5s var(--ease-standard); }
.site-nav.is-scrolled .site-nav__shell { border-top-color: transparent; border-radius: 0 0 var(--radius-nav) var(--radius-nav); box-shadow: 0 8px 24px -12px rgba(18, 21, 24, .18); }
.brand { position: relative; display: block; flex-shrink: 0; width: 134px; height: 44px; }
.brand__symbol { position: absolute; left: 0; top: 2.5px; width: 28.15px; height: 38.57px; }
.brand__wordmark { position: absolute; left: 43.27px; top: 2.5px; width: 90.17px; height: 38.57px; }
/* Links sit in the true centre of the bar, independent of the logo and button widths. */
.site-nav__links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; gap: 36px; } /* baseline: the larger serif selected item sits on the same line as the rest */
.nav-item { display: inline-grid; align-items: baseline; justify-items: center; font-size: 16px; line-height: 24px; color: var(--color-text-muted); white-space: nowrap; transition: color .2s ease; }
.nav-item > span, .nav-item::after { grid-area: 1 / 1; }
/* Invisible copy in the selected style: every item is as wide as its selected state, so nothing moves. */
.nav-item::after { content: attr(data-label); visibility: hidden; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 20px; pointer-events: none; }
.nav-item:hover { color: var(--color-text-on-light-primary); }
.nav-item[aria-current="page"] { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 20px; color: var(--color-text-on-light-primary); }
.site-nav__menu-contact { display: none; }
.site-nav__toggle { display: none; }
@media (max-width: 1023px) {
.site-nav { top: -12px; padding: 12px 12px 0; }
.site-nav__shell { padding: 14px 16px 14px 20px; }
.site-nav .site-nav__contact { display: none; } /* beats .button { display } */
.site-nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; border-radius: 8px; }
.site-nav__toggle-bars, .site-nav__toggle-bars::before, .site-nav__toggle-bars::after { display: block; width: 20px; height: 1.5px; background: var(--color-text-on-light-primary); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s; }
.site-nav__toggle-bars { position: relative; }
.site-nav__toggle-bars::before, .site-nav__toggle-bars::after { content: ""; position: absolute; left: 0; }
.site-nav__toggle-bars::before { top: -6px; }
.site-nav__toggle-bars::after { top: 6px; }
.site-nav.is-open .site-nav__toggle-bars { background: transparent; }
.site-nav.is-open .site-nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav.is-open .site-nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
.site-nav__links { position: absolute; left: -1px; right: -1px; top: calc(100% - 8px); transform: none; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; background: #fff; border: 1px solid var(--color-border); border-top: 0; border-radius: 0 0 var(--radius-nav) var(--radius-nav); box-shadow: 0 16px 32px -16px rgba(18, 21, 24, .25); }
.site-nav.is-open .site-nav__links { display: flex; }
.site-nav.is-open .site-nav__shell { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.site-nav__links li { border-top: 1px solid var(--color-border); }
.nav-item { display: flex; justify-content: flex-start; height: auto; padding: 16px 0; font-size: 18px; }
.nav-item::after { display: none; }
.nav-item[aria-current="page"] { font-size: 22px; }
.site-nav__menu-contact { display: block; padding-top: 16px; }
.site-nav__menu-contact .button { width: 100%; }
}
/* ---------- Buttons (Button 3603:7418) ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap); min-width: 96px; padding: 10px var(--button-padding-x); border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 500; font-size: 14px; line-height: 20px; white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.button .icon-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .25s var(--ease-out); }
.button:hover .icon-arrow { transform: translateX(3px); }
.button--large { height: var(--button-large-height); min-width: 128px; padding-block: 0; font-weight: 600; font-size: 16px; line-height: 24px; }
.button--large .icon-arrow { width: 20px; height: 20px; }
.button--primary { background: var(--color-background-button-primary); color: var(--color-text-button-on-fill); }
.button--primary:hover { background: #24272d; }
.button--secondary { border-color: var(--color-border-button-secondary); color: var(--color-text-button-default); }
.button--secondary:hover, .button--secondary[aria-current="page"] { border-color: var(--color-text-on-light-primary); color: var(--color-text-on-light-primary); }
.button--inverse { background: var(--color-background-button-inverse); color: var(--color-text-button-default); }
.button--inverse:hover { background: #e9eaec; }
.button--ghost-dark { border-color: rgba(255, 255, 255, .3); color: var(--color-text-on-dark-primary); }
.button--ghost-dark:hover { border-color: #fff; }
.button--accent { background: var(--color-background-button-accent-on-dark); color: var(--color-text-button-on-fill); }
.button--accent:hover { background: #ec0a45; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* Text link with arrow ("Explore →", "Read more →") */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--color-text-on-light-link); }
.link-arrow .icon-arrow { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.link-arrow:hover .icon-arrow, a:hover > .link-arrow .icon-arrow { transform: translateX(3px); }
/* ---------- Section tag (Section tags 3611:32159) ---------- */
.tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-on-light-secondary); }
.tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-dot-alert); flex-shrink: 0; }
.tag--chip { padding: 12px 16px; border-radius: 8px; background: var(--color-background-subtle); }
.tag--large { font-size: 16px; letter-spacing: 0.08em; }
.tag--plain::before { display: none; }
.tag--accent::before { background: var(--color-dot-accent); }
.on-dark .tag, .section--dark .tag, .section--raised .tag { color: var(--color-text-on-dark-secondary); }
.on-dark .tag--chip, .section--dark .tag--chip, .section--raised .tag--chip { background: var(--color-background-inverse-raised); }
/* ---------- Section heading block ---------- */
.section-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: clamp(40px, 4.4vw, 64px); }
.section-head--center { align-items: center; text-align: center; }
.section-head__intro { max-width: 640px; color: var(--color-text-on-light-secondary); }
.section--dark .section-head__intro, .section--raised .section-head__intro { color: var(--color-text-on-dark-secondary); }
/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(56px, 6.7vw, 96px) clamp(64px, 8vw, 120px); }
.page-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.page-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.page-hero__title { font-size: var(--text-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.page-hero__lede { max-width: 520px; font-size: var(--text-h6); line-height: 1.45; color: var(--color-text-on-light-secondary); }
.page-hero--dark { background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); margin-top: calc(-1 * var(--nav-overlap, 0px)); }
.page-hero--dark .page-hero__lede { color: var(--color-text-on-dark-secondary); }
.page-hero__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-light-tertiary); }
@media (max-width: 899px) {
.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Cards ---------- */
.card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--color-background-surface); border: 1px solid var(--color-border); border-radius: var(--radius-tile); transition: border-color .2s ease, box-shadow .3s ease, transform .3s var(--ease-out); }
a.card:hover, .card--link:hover { border-color: rgba(45, 54, 72, .28); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card__index { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--color-text-on-light-tertiary); }
.card__media { margin: -8px -8px 8px; border-radius: var(--radius-stage); overflow: hidden; }
.card__title { font-size: var(--text-body); font-weight: 600; line-height: 1.4; }
.card__text { font-size: var(--text-body-2); line-height: 1.5; color: var(--color-text-on-light-secondary); }
.card__note { font-size: var(--text-body-2); font-style: italic; line-height: 1.5; color: var(--color-text-on-light-tertiary); }
.card__foot { margin-top: auto; padding-top: 12px; }
.card--dark { background: var(--color-background-tile-dark); border-color: var(--color-border-on-dark); color: var(--color-text-on-dark-primary); }
.card--dark .card__text { color: var(--color-text-on-dark-secondary); }
.card--dark .card__index, .card--dark .card__note { color: var(--color-text-on-dark-tertiary); }
/* Dotted grid background used on illustration cards */
.dot-grid { background-image: radial-gradient(circle, rgba(18, 21, 24, .14) 1px, transparent 1.2px); background-size: 16px 16px; }
.section--dark .dot-grid, .card--dark .dot-grid { background-image: radial-gradient(circle, rgba(139, 143, 152, .35) 1px, transparent 1.2px); }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Accordion (FAQ) ---------- */
.accordion { border-top: 1px solid var(--color-border); }
.accordion details { border-bottom: 1px solid var(--color-border); }
.accordion summary { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 24px; align-items: start; padding: 28px 0; cursor: pointer; list-style: none; font-size: var(--text-h6); line-height: 1.4; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .accordion__num { font-family: var(--font-mono); font-size: 14px; line-height: 28px; color: var(--color-text-on-light-tertiary); }
.accordion summary::after { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon-plus) center / 16px no-repeat; mask: var(--icon-plus) center / 16px no-repeat; }
.accordion details[open] summary::after { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); }
.accordion__answer { padding: 0 48px 28px; color: var(--color-text-on-light-secondary); }
.accordion__answer > * + * { margin-top: .8em; }
:root {
--icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h12' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 639px) {
.accordion summary { grid-template-columns: 22px minmax(0, 1fr) 24px; gap: 14px; font-size: 18px; }
.accordion summary .accordion__num { font-size: 13px; line-height: 25px; }
.accordion__answer { padding: 0 0 24px; }
}
/* ---------- Closing CTA band ("Start with one opportunity.") ---------- */
.cta-band { position: relative; overflow: hidden; padding-block: clamp(80px, 8.3vw, 140px); background: var(--color-background-inverse-sunken); color: var(--color-text-on-dark-primary); text-align: center; border-radius: var(--radius-edge) var(--radius-edge) 0 0; }
.cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cta-band__title { font-size: var(--text-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; }
.cta-band__text { max-width: 420px; color: var(--color-text-on-dark-secondary); }
.cta-band::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background-image: radial-gradient(circle, rgba(139, 143, 152, .35) 1px, transparent 1.2px); background-size: 12px 12px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%); pointer-events: none; }
/* The team's dot field fades in as the band's heading appears */
.js .cta-band::after { opacity: 0; transition: opacity 1.4s ease .15s; }
.js .cta-band:has(.is-in)::after { opacity: 1; }
.cta-band + .site-footer .site-footer__line { display: none; }
/* ---------- Footer (Footer 3611:31726) ---------- */
.site-footer { background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); }
.site-footer__line { width: min(1057px, 80%); height: 1px; margin-inline: auto; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); }
.site-footer__inner { padding: clamp(64px, 7vw, 100px) var(--gutter) clamp(40px, 5.5vw, 80px); display: flex; flex-direction: column; gap: clamp(64px, 11.7vw, 169px); }
.site-footer__main { display: flex; justify-content: space-between; gap: 48px 80px; flex-wrap: wrap; }
.site-footer__brand { display: flex; flex-direction: column; gap: clamp(40px, 4.7vw, 67px); }
.site-footer__logo { display: flex; align-items: center; gap: 12px; }
.site-footer__logo img:first-child { width: 22.13px; height: 30.33px; }
.site-footer__logo img:last-child { width: 70.91px; height: 30.33px; }
.site-footer__tagline { font-size: clamp(36px, 3.9vw, 56px); font-weight: 300; line-height: 1.15; color: var(--color-text-on-dark-primary); }
.site-footer__tagline .t-dim { color: var(--color-text-on-dark-secondary); }
.site-footer__links { display: flex; gap: 78px; }
/* From 1280px the link columns sit at a fixed distance from the brand block (536px + 200px), as on the team's site,
instead of running to the right edge on wide screens. */
@media (min-width: 1280px) {
.site-footer__main { justify-content: flex-start; column-gap: 200px; }
.site-footer__brand { width: 536px; }
}
.site-footer__column { display: flex; flex-direction: column; gap: 16px; }
.footer-item { font-size: 16px; line-height: 16px; color: var(--color-text-on-dark-tertiary); transition: color .2s ease; }
a.footer-item:hover { color: var(--color-text-on-dark-primary); }
.footer-item--selected { color: var(--color-text-on-dark-primary); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 25px; border-top: 1px solid var(--color-dot-grid-on-dark); flex-wrap: wrap; }
.site-footer__legal { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__legal p { color: var(--color-text-on-dark-tertiary); }
.site-footer__legal a, .site-footer__legal button { color: var(--color-text-on-dark-primary); text-decoration: underline; text-underline-offset: 3px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.site-footer__legal a:hover, .site-footer__legal button:hover { color: #fff; text-decoration-thickness: 2px; }
@media (max-width: 767px) {
.site-footer__links { gap: 48px; }
.site-footer__legal p { flex-basis: 100%; }
}
/* ---------- Responsive webinar bar ---------- */
@media (max-width: 1100px) {
.webinar-bar__inner { padding: 20px var(--gutter); }
.webinar-bar__desc { display: none; }
}
@media (max-width: 767px) {
.webinar-bar__inner { padding: 14px 20px; gap: 16px; }
.webinar-bar__title { font-size: 18px; line-height: 22px; }
.webinar-bar__date { display: none; }
.webinar-bar__button { height: 36px; padding: 0 14px; font-size: 12px; letter-spacing: .8px; }
}
/* ---------- Back nav (detail pages; Figma "Back" 6044:33999) ---------- */
.back-nav { position: sticky; top: -36px; z-index: 100; padding: 36px 36px 0; }
.back-nav__shell { display: flex; align-items: center; gap: 24px; height: 72px; margin-inline: auto; padding: 20px 24px; background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-nav); transition: border-radius .5s var(--ease-standard); }
.back-nav--capped .back-nav__shell { max-width: calc(var(--page-max) - 72px); } /* 1368px, as on the team's articles */
.back-nav.is-scrolled .back-nav__shell { border-top-color: transparent; border-radius: 0 0 var(--radius-nav) var(--radius-nav); box-shadow: 0 8px 24px -12px rgba(18, 21, 24, .18); }
.back-nav__button { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-text-on-light-primary); color: #fff; transition: transform .25s var(--ease-out); }
.back-nav__button svg { width: 16px; height: 16px; }
.back-nav__button:hover { transform: translateX(-2px); }
.back-nav__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-light-primary); }
.back-nav__crumbs li + li::before { content: "|"; margin-right: 12px; font-weight: 400; }
.back-nav__crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.back-nav__crumbs a:hover { text-decoration-thickness: 2px; }
.back-nav__crumbs [aria-current] { font-weight: 700; }
@media (max-width: 1023px) {
.back-nav { top: -12px; padding: 12px 12px 0; }
.back-nav__shell { height: 60px; padding: 14px 16px; gap: 16px; }
}
/* ---------- Compact footer (Figma Footer "collapsed" 3637:37238) ---------- */
.site-footer__compact { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-inline: auto; padding: 64px var(--gutter); }
/* Capped variant (articles, whose content stays 1200px wide): layout.page(..., shell='capped') */
.site-footer--capped .site-footer__compact { max-width: calc(var(--content-max) + 2 * var(--gutter)); }
.site-footer__compact-brand { display: flex; align-items: center; gap: 24px; }
.site-footer__compact-brand img { width: 22.13px; height: 30.33px; }
.site-footer__compact-tagline { font-size: 24px; font-weight: 300; line-height: 1.4; letter-spacing: .01em; color: var(--color-text-on-dark-primary); }
.site-footer__compact-tagline .t-serif { font-size: 26px; }
.site-footer__compact-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.site-footer__compact-meta > p:first-child { font-size: 16px; line-height: 16px; color: var(--color-text-on-dark-secondary); }
.site-footer__compact-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; font-size: 12px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__compact-legal a, .site-footer__compact-legal button { color: var(--color-text-on-dark-tertiary); text-decoration: underline; text-underline-offset: 3px; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.site-footer__compact-legal a:hover, .site-footer__compact-legal button:hover { color: var(--color-text-on-dark-primary); }
@media (max-width: 767px) {
.site-footer__compact { padding-block: 48px; }
.site-footer__compact-meta { align-items: flex-start; text-align: left; }
.site-footer__compact-legal { justify-content: flex-start; }
}
/* Phones: breadcrumb stays on one line; the page title truncates */
@media (max-width: 639px) {
.back-nav__crumbs { flex-wrap: nowrap; }
.back-nav__crumbs li { white-space: nowrap; }
.back-nav__crumbs li[aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* "View case study" links while case studies are off on phones (components.CASE_STUDIES_OFF_ON_PHONES) */
@media (max-width: 767px) { .is-case-link-off { display: none !important; } }
/* --- 25-blocks.css --- */
/* ==========================================================================
Shared page blocks (promoted from page groups so every page uses ONE version)
.closing Closing CTA: art + glass card (Figma ClosingCta; Home, What we do, Who we are, articles)
.halftone Gradient halftone divider (Figma "Divider / Gradient halftone" 6004:21135)
.index-list Indexed link rows (Figma "Nav card / Indexed row" 6071:2283 / 6084:6392)
========================================================================== */
/* ---------- Closing CTA ---------- */
.closing { position: relative; overflow: clip; background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); border-radius: var(--radius-edge) var(--radius-edge) 0 0; }
.closing__art { position: absolute; left: 50%; top: 0; width: max(100%, 960px); max-width: none; height: auto; translate: -50% 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); pointer-events: none; animation: closing-breathe 14s ease-in-out infinite alternate; }
/* The team's closing art breathes slowly (Our work, Who we are, service pages, articles) */
/* Only `scale` animates: the centring stays in the static `translate` property, so it follows window resizes (Safari keeps a
percentage translate inside a running animation at the size it started with, which pushed the art off-centre). */
.is-resizing .closing__art { animation: none; }
.is-resizing .closing__card { -webkit-backdrop-filter: none; backdrop-filter: none; }
@keyframes closing-breathe { from { scale: 1; opacity: .92; } to { scale: 1.025; opacity: 1; } }
/* --closing-offset: how far down the art the card starts (depends on the art's proportions) */
.closing__frame { position: relative; max-width: calc(var(--page-max) - 76px); margin-inline: auto; padding: max(var(--closing-offset, 36.3vw), 220px) 38px 0; box-sizing: content-box; } /* card: 38px in from the edges, at most 1364px */
@media (max-width: 767px) { .closing__frame { padding-inline: 12px; } }
.closing__card { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: clamp(64px, 9.7vw, 140px) clamp(20px, 8.33vw, 120px) clamp(72px, 11.1vw, 160px); text-align: center; background: var(--gradient-dark-raised); border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-section); -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px); }
.closing__title { max-width: 780px; font-size: var(--text-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-on-dark-secondary); }
.closing__title .t-serif { color: var(--color-text-on-dark-primary); font-size: 1.05em; }
.closing__text { max-width: 560px; font-size: var(--text-h6); line-height: 1.4; color: var(--color-text-on-dark-secondary); }
.closing__text p + p { margin-top: 1.4em; }
.closing__text strong { font-weight: 600; color: var(--color-text-on-dark-primary); }
.closing__kicker { max-width: 640px; margin-top: 20px; font-size: var(--text-h6); font-style: italic; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-on-dark-tertiary); }
.closing__card .button { margin-top: 20px; }
/* The team's closing card rises 80px, more slowly than ordinary text */
.js .closing__card[data-reveal] { transform: translateY(80px); transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.js .closing__card[data-reveal].is-in { transform: none; }
.closing__kicker + .button { margin-top: 0; }
/* No artwork: the card starts a section's padding below the panel's top edge (Our work) */
.closing--no-art .closing__frame { padding-top: var(--section-y); }
/* Width variants (components.closing(width=...)): 'wide' runs the card gutter to gutter from 1280px (service pages,
Our work); 'fluid' keeps the 1440 inset (38/1440 of the width) at every size (Who we are, a scaled page) */
@media (min-width: 1280px) { .closing--wide .closing__frame { max-width: none; padding-inline: var(--gutter); } }
.closing--fluid .closing__frame { max-width: none; padding-inline: max(12px, 2.64vw); }
/* Flush: the card runs straight into the full footer (Home) */
.closing--flush .closing__card { border-bottom: 0; border-radius: var(--radius-section) var(--radius-section) 0 0; padding-bottom: clamp(88px, 13.9vw, 200px); }
.closing + .site-footer .site-footer__line { display: none; }
/* ---------- Gradient halftone divider ---------- */
.halftone { position: relative; overflow: clip; aspect-ratio: 1440 / 539; min-height: 0; margin-top: -1px; background: linear-gradient(var(--color-background-inverse) 30%, var(--color-background-page) 70%); }
.halftone img { position: absolute; left: 0; top: -32px; width: 100%; height: calc(100% + 64px); margin: 0; object-fit: cover; transform: translateY(var(--parallax-y, 0px)) scaleY(var(--parallax-s, 1)); transform-origin: 50% 0; }
.halftone--dark { background: var(--color-background-inverse); }
/* ---------- Indexed link rows ---------- */
.index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 68px; width: 100%; }
.index-list--narrow { grid-template-columns: repeat(2, minmax(0, 520px)); justify-content: center; column-gap: 80px; }
.index-list__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 117px; padding-block: 24px; border-top: 1px solid var(--color-border); font-size: var(--text-h5); font-weight: 300; line-height: 1.4; color: var(--color-text-on-light-secondary); transition: color .2s ease; }
.index-list__go { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; transition: background-color .25s ease; }
.index-list__go .icon-arrow { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.index-list__row:hover, .index-list__row:focus-visible { color: var(--color-text-on-light-primary); }
.index-list__row:hover .index-list__go, .index-list__row:focus-visible .index-list__go { background: var(--color-background-subtle); }
.index-list__row:hover .icon-arrow, .index-list__row:focus-visible .icon-arrow { transform: translateX(3px); }
.on-dark .index-list__row, .section--dark .index-list__row, .section--raised .index-list__row { border-top-color: var(--color-dot-grid-on-dark); color: var(--color-text-on-dark-secondary); }
.on-dark .index-list__row:hover, .on-dark .index-list__row:focus-visible, .section--dark .index-list__row:hover, .section--dark .index-list__row:focus-visible, .section--raised .index-list__row:hover, .section--raised .index-list__row:focus-visible { color: var(--color-text-on-dark-primary); }
.on-dark .index-list__row:hover .index-list__go, .section--dark .index-list__row:hover .index-list__go, .section--raised .index-list__row:hover .index-list__go, .on-dark .index-list__row:focus-visible .index-list__go, .section--dark .index-list__row:focus-visible .index-list__go, .section--raised .index-list__row:focus-visible .index-list__go { background: var(--color-background-chip-on-dark); }
@media (max-width: 1023px) { .index-list { column-gap: 40px; } }
@media (max-width: 767px) { .index-list { grid-template-columns: minmax(0, 1fr); } .index-list__row { min-height: 88px; } }
/* --- 30-home.css --- */
/* ==========================================================================
Home (/). Figma HomePage 6004:861. Every selector is .page-home or .home-*.
Behaviour: site/js/30-home.js. Markup: site/pages/home.py.
========================================================================== */
/* Serif accent words are drawn 2px larger than the sans text around them (34 on 32, 50 on 48, 26 on 24). */
.page-home .home-em { font-size: 1.0625em; }
.page-home .home-dim { color: var(--color-text-on-light-secondary); }
.page-home .section--dark .home-dim { color: var(--color-text-on-dark-secondary); }
/* ---------- Hero (HeroSection 6004:863) ----------
At every width the hero stays put while the dark services panel slides up over it (the coded site's behaviour). */
.home-top { position: relative; }
.home-hero { position: relative; overflow: clip; background: var(--color-background-page); }
/* --hero-top (JS) = min(0, viewport height - hero height): a hero taller than the window sticks by its bottom edge,
so nothing in it is ever hidden under the panel. */
.home-hero { position: sticky; top: var(--hero-top, 0px); }
.home-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(56px, 7.8vw, 112px); padding-block: clamp(48px, 6.7vw, 96px); }
.home-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(32px, 3.9vw, 56px); }
/* Figma: 48px light (the H1 token is 56; this is 6/7 of it at every width). */
.home-hero__title { max-width: 846px; font-size: calc(var(--text-h1) * 6 / 7); font-weight: 300; line-height: 1.2; letter-spacing: -0.01em; }
.home-hero__line { display: inline; }
@media (min-width: 1024px) {
.home-hero__title { max-width: none; }
.home-hero__line { display: block; width: fit-content; }
}
.home-hero__sub { max-width: 720px; }
.home-hero__actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-hero__scroll { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--color-border-button-secondary); border-radius: 50%; color: var(--color-dot-alert); transition: border-color .2s ease; }
.home-hero__scroll:hover { border-color: var(--color-dot-alert); }
.home-hero__scroll svg { animation: home-nudge 2.4s var(--ease-standard) 4s infinite; }
@keyframes home-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(4px); } }
@media (max-width: 767px) { .home-hero__scroll { display: none; } }
/* The hero shows straight away (as on the team's site, no fade-up); the first visit of a session on a desktop plays
the intro instead (JS, below). */
/* ---------- Services (ServicesSection 6004:880) ---------- */
.home-dark { position: relative; z-index: 1; }
.home-services { padding-top: clamp(80px, 11.1vw, 160px); padding-bottom: clamp(72px, 8.3vw, 120px); }
.home-services__intro { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.home-services__title { max-width: 554px; }
.home-services__desc { max-width: 640px; color: var(--color-text-on-dark-secondary); }
.home-services__desc strong { font-weight: 700; color: var(--color-text-on-dark-primary); }
.home-services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(64px, 10vw, 144px); }
.home-services__closing { max-width: 557px; margin: clamp(64px, 7.8vw, 112px) auto 0; text-align: center; color: var(--color-text-on-dark-secondary); }
.home-services__closing .home-em { color: var(--color-text-on-dark-primary); }
/* Service tile (ServiceTile 6004:887). The whole tile is the link target; "Explore" carries the accessible name. */
.home-tile {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding-top: 200px; overflow: clip;
background-color: var(--color-background-tile-dark);
background-image: radial-gradient(circle, rgba(139, 143, 152, .3) 1px, transparent 1.3px);
background-size: 14px 14px; background-position: 6px 6px;
border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-tile);
transition: border-color .3s ease, box-shadow .3s ease;
}
.home-tile--wide { grid-column: span 2; padding-top: 0; }
.home-tile:hover, .home-tile:focus-within { border-color: rgba(117, 135, 255, .35); box-shadow: 0 18px 50px -24px rgba(74, 69, 251, .45); }
.home-tile__num { position: absolute; left: 23px; top: 21px; color: var(--color-text-on-dark-secondary); }
.home-tile__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.home-tile--wide .home-tile__text { max-width: 446px; }
.home-tile__title { color: var(--color-text-on-dark-primary); }
.home-tile__body { color: var(--color-text-on-dark-secondary); }
.home-tile__aside { color: var(--color-text-on-dark-tertiary); }
.home-tile__link { margin-top: 14px; font-weight: 600; font-size: 16px; line-height: 16px; color: var(--color-text-on-dark-title); }
.home-tile__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole tile is clickable */
.home-tile__link:focus-visible { outline-color: #fff; }
.home-tile__arrow { display: inline-block; transition: transform .25s var(--ease-out); }
.home-tile:hover .home-tile__arrow, .home-tile:focus-within .home-tile__arrow { transform: translateX(4px); }
/* Illustration box (Figma tile-illustration): 230 x 180 centred at the top; 320 x 250 on the right of wide tiles. */
.home-tile__art { position: absolute; top: 23px; left: 50%; width: 230px; height: 180px; transform: translateX(-50%); pointer-events: none; }
.home-tile__art svg { position: absolute; left: 50%; top: var(--art-top, 0px); transform: translateX(-50%); max-width: none; overflow: visible; }
.home-tile--wide .home-tile__art { top: 64px; left: calc(50% + 211px); width: 320px; height: 250px; }
.home-illo--01 { --art-top: 29.6px; }
.home-illo--03 { --art-top: 18.7px; }
.home-illo--04 { --art-top: 10.5px; }
.home-illo--05 { --art-top: 20.9px; }
.home-illo--06 { --art-top: 22.5px; }
.home-illo--07 { --art-top: 20.1px; }
@media (max-width: 1023px) {
.home-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-tile--01 { grid-column: auto; padding-top: 270px; }
.home-tile--01 .home-tile__art { left: 50%; top: 16px; }
.home-tile--01 .home-tile__text { max-width: none; }
}
@media (max-width: 639px) {
.home-services__grid { grid-template-columns: minmax(0, 1fr); }
.home-tile { min-height: 0; }
.home-tile--wide { grid-column: auto; padding-top: 270px; }
.home-tile--wide .home-tile__art { left: 50%; top: 16px; }
.home-tile--wide .home-tile__text { max-width: none; }
}
/* Tile entrance (once) and illustration motion. Ported from the coded site: the entrance runs when the tile gets
.is-in (numbered-order reveal, [data-reveal-seq] in 00-core.js, so 01 → 07 in turn); the inner text and illustration
delays count from the tile's own reveal. The ambient loops only run while the tile is on screen (.is-live). */
.js .home-tile { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), border-color .3s ease, box-shadow .3s ease; }
.js .home-tile.is-in { opacity: 1; transform: none; }
.js .home-tile :is(.home-tile__num, .home-tile__title, .home-tile__body, .home-tile__aside, .home-tile__link) { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
/* the link only fades: a transform on it would shrink its whole-tile ::after hit area while animating */
.js .home-tile .home-tile__link { transform: none; }
.js .home-tile.is-in :is(.home-tile__num, .home-tile__title, .home-tile__body, .home-tile__aside, .home-tile__link) { opacity: 1; transform: none; }
.js .home-tile.is-in .home-tile__num { transition-delay: 150ms; }
.js .home-tile.is-in .home-tile__title { transition-delay: 300ms; }
.js .home-tile.is-in .home-tile__body { transition-delay: 380ms; }
.js .home-tile.is-in .home-tile__aside { transition-delay: 460ms; }
.js .home-tile.is-in .home-tile__link { transition-delay: 540ms; }
.home-illo svg :is(path, g, ellipse) { transform-box: fill-box; }
@keyframes home-march-2_49 { to { stroke-dashoffset: -4.98; } }
@keyframes home-march-3_71 { to { stroke-dashoffset: -7.42; } }
@keyframes home-march-1_79 { to { stroke-dashoffset: -3.58; } }
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes home-float-lg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes home-lift { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-9px); } }
@keyframes home-glide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes home-ring { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.js .home-illo [data-anim] { transition-property: transform, opacity, stroke-dashoffset; transition-timing-function: var(--ease-out); transition-duration: .9s; transition-delay: var(--d, 0ms); }
/* 01 Adoption architecture: solid block drops into the dashed frame */
.js .home-illo--01 [data-anim="ghost"] { opacity: 0; }
.js .home-illo--01 [data-anim="block"] { opacity: 0; transform: translateY(-46px); transition-duration: 1.1s; --d: 350ms; }
.home-tile.is-in .home-illo--01 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-in .home-illo--01 [data-anim="block"] { opacity: .48; }
.home-tile.is-in .home-illo--01 [data-anim="block"][data-solid] { opacity: 1; }
.home-tile.is-live .home-illo--01 [data-anim="ghost"] { animation: home-march-2_49 1.2s linear infinite; }
.home-tile.is-live .home-illo--01 .illo-float { animation: home-float 3.6s ease-in-out 1.6s infinite; }
/* 02 Service design: layers expand out of one stack */
.js .home-illo--02 [data-anim] { transition-duration: 1.1s, .6s; }
.js .home-illo--02 [data-anim="base"] { opacity: 0; transform: translateY(-30px); --d: 250ms; }
.js .home-illo--02 [data-anim="upper"] { opacity: 0; transform: translateY(31px); --d: 250ms; }
.js .home-illo--02 [data-anim="cap"] { opacity: 0; transform: translateY(50px); --d: 400ms; }
.js .home-illo--02 :is([data-anim="dash-l"], [data-anim="dash-r"]) { opacity: 0; --d: 1100ms; }
.home-tile.is-in .home-illo--02 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-live .home-illo--02 [data-anim="core"] { animation: home-glide 4s ease-in-out 1.6s infinite; }
.home-tile.is-live .home-illo--02 [data-anim="cap"] { animation: home-float 3.2s ease-in-out 1.8s infinite; }
/* 03 Legacy modernisation: tiles settle, the new one lifts out */
.js .home-illo--03 [data-anim="base"] { opacity: 0; transform: translateY(10px); }
.js .home-illo--03 [data-anim="tile"] { opacity: 0; transform: translateY(-14px); transition-duration: .6s; }
.js .home-illo--03 [data-anim="new"] { opacity: 0; transform: translateY(-30px); transition-duration: .8s; --d: 900ms; }
.home-tile.is-in .home-illo--03 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-live .home-illo--03 .illo-lift { animation: home-lift 3.2s ease-in-out 1.9s infinite; }
/* 04 Culture: silos rise, then the line connects them */
.js .home-illo--04 [data-anim="silo"] { opacity: 0; transform: translateY(18px); }
.js .home-illo--04 [data-anim="cap"] { opacity: 0; transform: translateY(-8px); transition-duration: .5s; }
.js .home-illo--04 [data-anim="line"] { stroke-dasharray: 1; stroke-dashoffset: 1; transition-duration: 1s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); --d: 800ms; }
.js .home-illo--04 [data-anim="end"] { opacity: 0; transform: scale(.4); transform-origin: 50% 50%; transition-duration: .5s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); --d: 1700ms; }
.home-tile.is-in .home-illo--04 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-in .home-illo--04 [data-anim="line"] { stroke-dashoffset: 0; }
.home-tile.is-live .home-illo--04 [data-anim="end"][data-dashed] { animation: home-march-2_49 1s linear 2.2s infinite; }
/* 05 Digital product: the interface layer lifts off the product */
.js .home-illo--05 [data-anim="ghost"] { opacity: 0; transition-duration: .8s; }
.js .home-illo--05 [data-anim="product"] { opacity: 0; transform: translateY(-16px); --d: 200ms; }
.js .home-illo--05 [data-anim="ui"] { opacity: 0; transform: translateY(26px); transition-duration: 1.1s; --d: 600ms; }
.home-tile.is-in .home-illo--05 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-live .home-illo--05 .illo-float { animation: home-float 3.4s ease-in-out 1.8s infinite; }
.home-tile.is-live .home-illo--05 [data-anim="ghost"] { animation: home-march-1_79 1s linear infinite; }
/* 06 Brand & positioning: the position rises, rings ripple out */
.js .home-illo--06 [data-anim="ring"] { opacity: 0; transform: scale(.6); transform-origin: 50% 50%; transition-duration: 1s; }
.js .home-illo--06 [data-anim="pillar"] { opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; --d: 450ms; }
.js .home-illo--06 [data-anim="pillar-top"] { opacity: 0; transform: translateY(58px); --d: 450ms; }
.home-tile.is-in .home-illo--06 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-in .home-illo--06 [data-anim="pillar"] { opacity: .48; }
.home-tile.is-live .home-illo--06 [data-anim="ring"] { animation: home-ring 3s ease-in-out infinite; animation-delay: calc(1.4s + var(--r, 0) * .25s); }
/* 07 Propositions: options appear, the right one comes forward */
.js .home-illo--07 [data-anim="option"] { opacity: 0; transition-duration: .7s; }
.js .home-illo--07 [data-anim="pick"] { opacity: 0; transform: translateY(-40px); transition-duration: 1.1s; --d: 900ms; }
.home-tile.is-in .home-illo--07 [data-anim] { opacity: 1; transform: none; }
.home-tile.is-in .home-illo--07 [data-anim="pick"]:not([data-solid]) { opacity: .48; }
.home-tile.is-live .home-illo--07 [data-anim="option"] { animation: home-march-3_71 1.4s linear infinite; }
.home-tile.is-live .home-illo--07 .illo-float { animation: home-float-lg 4s ease-in-out 2s infinite; }
/* ---------- Selected work (SelectedWorkSection 6004:1082, Work Carousel 6004:14638) ---------- */
.home-work { margin-top: clamp(112px, 15vw, 216px); }
.home-work__title { padding-inline: var(--gutter); text-align: center; color: var(--color-text-on-dark-primary); }
.home-work__carousel { margin-top: clamp(40px, 3.9vw, 56px); }
.home-work__viewport { display: grid; overflow: clip; touch-action: pan-y; }
.home-work__slide { grid-area: 1 / 1; display: flex; min-width: 0; padding-inline: var(--gutter); transform: translateX(calc(var(--pos, 0) * (100% + 51px))); transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s ease; }
.home-work__slide:not(.is-active) { opacity: .65; }
.home-work__slide.is-jump { transition: none; }
/* Stage: copy on the left, mockup art on the right. The two flex items wrap onto two rows by themselves when the
stage is narrower than 1100px (tablets, small laptops), so the mockups never run under the copy. */
.home-work__stage {
position: relative; display: flex; flex-wrap: wrap; width: 100%; max-width: min(var(--content-max), var(--composition-max)); min-height: 620px; margin-inline: auto; overflow: clip;
border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-stage);
background: radial-gradient(circle, rgba(139, 143, 152, .22) 1px, transparent 1.3px) 0 0 / 14px 14px, linear-gradient(180deg, rgba(26, 27, 31, .9), rgba(7, 8, 10, .9)), var(--color-background-inverse);
}
.home-work__copy { position: relative; z-index: 1; flex: 1 1 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(40px, 5.6vw, 80px) clamp(24px, 5.6vw, 80px) 48px; }
/* The art image is the whole Figma stage (its copy area is transparent), anchored to the right edge. */
.home-work__media { position: relative; flex: 1 1 540px; min-height: clamp(280px, 62vw, 560px); }
.home-work__art { position: absolute; top: -2px; right: -2px; width: auto; height: calc(100% + 4px); max-width: none; }
/* Stacked (JS sets .is-stacked when the stage is under 1100px): fade out the art's empty copy area on the left and its top edge. */
.home-work__carousel.is-stacked .home-work__art { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px), linear-gradient(to right, transparent 36%, #000 50%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 40px), linear-gradient(to right, transparent 36%, #000 50%); mask-composite: intersect; }
.home-work__client { display: flex; align-items: center; gap: 16px; font-size: var(--text-h6); line-height: 1.4; color: var(--color-text-on-dark-secondary); }
.home-work__client::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--client); flex-shrink: 0; }
.home-work__heading { font-size: var(--text-h4); font-weight: 300; line-height: 1.36; color: var(--color-text-on-dark-primary); }
.home-work__body { max-width: 400px; line-height: 1.45; color: var(--color-text-on-dark-tertiary); }
.home-work__cta { margin-top: 24px; }
/* Entrance (team's site): the carousel rises 60px when it first comes into view (.is-in, 30-home.js); the active
slide's copy and art wait for it. Then, on every slide change, the copy settles in line by line and the incoming
mockup rises 96px; the outgoing one stays put while it slides away and is reset unseen. */
.js .home-work__carousel { opacity: 0; transform: translateY(60px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .home-work__carousel.is-in { opacity: 1; transform: none; }
.js .home-work__slide .home-work__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .home-work__slide .home-work__art { opacity: 0; transform: translateY(96px); transition: transform 0s linear 1s, opacity 0s linear 1s; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__copy > * { opacity: 1; transform: none; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__art { opacity: 1; transform: none; transition: transform 2.4s cubic-bezier(.16, 1, .3, 1) .25s, opacity 1.4s ease .25s; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__copy > :nth-child(1) { transition-delay: .25s; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__copy > :nth-child(2) { transition-delay: .33s; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__copy > :nth-child(3) { transition-delay: .41s; }
.js .home-work__carousel.is-in .home-work__slide.is-active .home-work__copy > :nth-child(4) { transition-delay: .52s; }
.home-work__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; padding-inline: var(--gutter); }
.home-work__arrow { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.home-work__arrow--prev { border: 1px solid rgba(221, 224, 229, .2); color: var(--color-text-on-dark-primary); transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .2s ease; }
.home-work__arrow--prev:hover { border-color: rgba(221, 224, 229, .5); }
/* filled like the next arrow once there is a previous project (JS) */
.home-work__arrow--prev.is-on { background: var(--color-background-subtle); border-color: transparent; color: var(--color-dot-inactive); }
.home-work__arrow--prev.is-on:hover { background: #fff; }
.home-work__arrow--next { background: var(--color-background-subtle); color: var(--color-dot-inactive); }
.home-work__arrow--next:hover { background: #fff; }
.home-work__arrow:active { transform: scale(.94); }
.home-work__arrow:focus-visible { outline-color: #fff; }
.home-work__tabs { position: relative; display: flex; align-items: center; min-width: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-pill); background: #070507; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 16px rgba(0, 0, 0, .45); overflow-x: auto; scrollbar-width: none; }
.home-work__tabs::-webkit-scrollbar { display: none; }
.home-work__indicator { position: absolute; top: 4px; left: 0; width: var(--w, 0px); height: 44px; transform: translateX(var(--x, 0px)); border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); background: linear-gradient(to bottom, #404042, #212124); box-shadow: 0 -4px 14px rgba(255, 255, 255, .35), 0 4px 12px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 255, 255, .12); transition: transform .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
.home-work__tab { position: relative; flex-shrink: 0; height: 44px; padding: 0 20px; border-radius: var(--radius-pill); font-size: 16px; line-height: 1.4; color: var(--color-text-on-dark-tertiary); white-space: nowrap; transition: color .3s ease; }
.home-work__tab:hover, .home-work__tab[aria-selected="true"] { color: #fff; }
.home-work__tab:focus-visible { outline-color: #fff; outline-offset: -3px; }
@media (max-width: 767px) {
.home-work__nav { flex-wrap: wrap; row-gap: 16px; }
.home-work__tabs { order: -1; flex-basis: 100%; }
}
/* ---------- Client stats (ClientStatsSection 6004:5912) ---------- */
.home-stats { padding-bottom: clamp(88px, 10.3vw, 148px); background: var(--color-background-page); }
.home-stats__head { margin-bottom: clamp(56px, 8.3vw, 120px); gap: 40px; }
.home-stats__title { color: var(--color-text-on-light-primary); }
.home-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 16px; }
/* From 1280px: four 324px columns (not stretched across wide screens), centred under the heading (the team's code
hung them off the left margin, which looked off-centre on big screens; 15 Oct 2026), bars 16px short of the next
column except the last */
@media (min-width: 1280px) {
.home-stats__grid { width: min(1296px, 100%); margin-inline: auto; column-gap: 0; }
.home-stat:not(:last-child) .home-stat__bar { width: calc(100% - 16px); }
}
.home-stat { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.home-stat__bar { width: 100%; height: 4px; margin-bottom: 19px; background: var(--bar); transform-origin: 0 50%; }
.home-stat__index { font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .06em; color: var(--color-text-on-light-tertiary); }
.home-stat__number { margin: 8px 0 0 -0.05em; font-variant-numeric: tabular-nums; }
.home-stat__client { margin-top: clamp(28px, 3.3vw, 48px); }
.home-stat__label { margin-top: 7px; color: var(--color-text-on-light-tertiary); }
@media (max-width: 1023px) { .home-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* bars draw, numbers count up (JS), captions rise: each card in number order ([data-reveal-seq]) */
.js .home-stat__bar { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.65, 0, .35, 1); }
.js .home-stat :is(.home-stat__index, .home-stat__number, .home-stat__client, .home-stat__label) { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: 300ms; }
.js .home-stat.is-in .home-stat__bar { transform: none; }
.js .home-stat.is-in :is(.home-stat__index, .home-stat__number, .home-stat__client, .home-stat__label) { opacity: 1; transform: none; }
.js .home-stat.is-in .home-stat__number { transition-delay: 380ms; }
.js .home-stat.is-in .home-stat__client { transition-delay: 520ms; }
.js .home-stat.is-in .home-stat__label { transition-delay: 600ms; }
/* ---------- Testimonials (TestimonialsSection 6030:22043) ---------- */
.home-quotes { position: relative; padding-block: clamp(72px, 8.3vw, 120px); overflow: clip; background: var(--color-background-page); }
.home-quotes__title { text-align: center; color: var(--color-text-on-light-primary); }
.home-quotes__carousel { position: relative; margin-top: clamp(48px, 6.7vw, 96px); }
.home-quotes__viewport { display: grid; touch-action: pan-y; }
.home-quote {
--card-w: min(860px, calc(100vw - 2 * var(--gutter)));
grid-area: 1 / 1; justify-self: center; display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
width: var(--card-w); min-height: clamp(320px, 29.7vw, 427px); padding: clamp(28px, 3.9vw, 56px);
background: var(--color-background-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
transform: translateX(calc(var(--pos, 0) * (var(--card-w) + clamp(24px, 8.3vw, 120px)))); transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.home-quote.is-jump { transition: none; }
/* entrance (team's site): the carousel rises 40px as it comes into view (.is-in, 30-home.js) */
.js .home-quotes__carousel { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.js .home-quotes__carousel.is-in { opacity: 1; transform: none; }
.home-quote:not(.is-active) { cursor: pointer; }
.home-quote__mark { height: 43px; font-weight: 800; font-size: 72px; line-height: .6; color: var(--color-text-on-light-link); }
.home-quote__body { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
.home-quote__text { max-width: 748px; font-size: var(--text-h6); line-height: 1.4; color: var(--color-text-on-light-secondary); }
/* Phones: body-size quote text, as on the team's site, so the equal-height cards don't leave a tall gap under the mark */
@media (max-width: 639px) { .home-quote__text { font-size: var(--text-body); line-height: 1.6; } }
.home-quote__author { display: flex; align-items: center; gap: 14px; }
.home-quote__avatar { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #eef1fd; font-weight: 700; font-size: 16px; color: var(--color-text-on-light-link); }
.home-quote__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-quote__name { font-weight: 500; line-height: 1.6; color: var(--color-text-on-light-primary); }
.home-quote__role { font-size: var(--text-body-2); line-height: 1.4; color: var(--color-text-on-light-tertiary); }
.js .home-quote :is(.home-quote__mark, .home-quote__body) { transition: opacity .6s ease .35s, transform .8s var(--ease-out) .35s; }
.js .home-quote:not(.is-active) .home-quote__mark { opacity: .4; transform: translateY(-6px); }
.js .home-quote:not(.is-active) .home-quote__body { opacity: .55; transform: translateY(10px); }
.home-quotes__fade { position: absolute; top: -26px; bottom: -26px; width: calc((100% - min(860px, 100% - 2 * var(--gutter))) / 2); pointer-events: none; background: linear-gradient(to right, var(--color-background-page) 0%, rgba(252, 251, 250, .85) 40%, rgba(252, 251, 250, 0)); }
.home-quotes__fade--left { left: 0; }
.home-quotes__fade--right { right: 0; transform: scaleX(-1); }
.home-quotes__arrow { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-text-on-light-primary); box-shadow: 0 4px 16px rgba(18, 21, 24, .06); transition: border-color .2s ease, transform .2s ease; }
.home-quotes__arrow:hover { border-color: rgba(45, 54, 72, .3); }
.home-quotes__arrow:active { transform: scale(.94); }
.home-quotes__arrow--prev { left: max(8px, calc(50% - 430px - 80px)); }
.home-quotes__arrow--next { right: max(8px, calc(50% - 430px - 80px)); }
.home-dots { display: flex; justify-content: center; margin-top: 46px; }
.home-dots__dot { display: grid; place-items: center; width: 24px; height: 44px; transition: width .5s var(--ease-out); }
.home-dots__dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #dfe1e4; transition: width .5s var(--ease-out), background-color .3s ease; }
.home-dots__dot[aria-current="true"] { width: 40px; }
.home-dots__dot[aria-current="true"]::before { width: 24px; background: var(--color-background-accent); }
.home-dots__dot:hover:not([aria-current="true"])::before { background: #c4c8cd; }
@media (max-width: 1023px) {
/* arrows move below the card, either side of the dots */
.home-quotes__arrow { top: auto; bottom: -84px; margin-top: 0; }
.home-quotes__arrow--prev { left: calc(50% - 132px); }
.home-quotes__arrow--next { right: calc(50% - 132px); }
.home-quotes__fade { display: none; }
.home-dots { margin-top: 36px; }
}
/* ---------- "Building the wrong thing" (6105:36826; Start 6084:36803 -> End 6084:36824) ----------
As on the team's site: on arrival all the red dots pop in (the five, plus thirteen extra: wrong things built
fast). The board pins while you scroll: the extras clear, the five red dots turn into purple ticks and the
statement swaps to "We help you back the right things"; then the closing CTA slides over the held board. */
.home-wrong { --sx: clamp(34px, 4.36vw, 62.8px); --sy: calc(var(--sx) * 1.026); position: relative; background: var(--color-background-page); }
.home-wrong__pin { position: relative; display: grid; place-items: center; min-height: 100vh; overflow: clip; padding: 64px var(--gutter); }
.js .home-wrong { height: calc(100vh + 210vh); }
.js .home-wrong__pin { position: sticky; top: 0; height: 100vh; padding: 0 var(--gutter); }
.home-wrong__board { position: absolute; left: 50%; top: 50%; width: calc(20 * var(--sx)); height: calc(10 * var(--sy)); transform: translate(-50%, -50%); background-image: radial-gradient(circle, #e8e8ea 0 4px, transparent 4.6px); background-size: var(--sx) var(--sy); }
.home-wrong__dot { position: absolute; left: calc((var(--c) + .5) * var(--sx)); top: calc((var(--r) + .5) * var(--sy)); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.home-wrong__start, .home-wrong__end { position: absolute; inset: 0; border-radius: 50%; }
.home-wrong__start { background: var(--color-dot-alert); box-shadow: 0 0 17px rgba(249, 11, 61, .55); opacity: calc(1 - var(--pk, 0)); transform: scale(calc(1 - var(--pk, 0) * .6)); }
.home-wrong__end { display: grid; place-items: center; background: var(--color-dot-accent); box-shadow: 0 0 17px rgba(74, 69, 251, .5); opacity: var(--pk, 0); transform: scale(calc(.4 + var(--pk, 0) * .6)) rotate(calc((1 - var(--pk, 0)) * -90deg)); }
.home-wrong__end svg { width: 8px; height: 8px; }
.home-wrong__dot--extra .home-wrong__start { opacity: calc(1 - var(--pe, 0)); transform: scale(calc(1 - var(--pe, 0) * .8)); }
.home-wrong__text { position: relative; display: grid; max-width: 530px; text-align: center; background: var(--color-background-page); box-shadow: 0 0 0 28px var(--color-background-page); }
.home-wrong__state { grid-area: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.home-wrong__state + .home-wrong__state { margin-top: 48px; }
.js .home-wrong__state { grid-area: 1 / 1; }
.js .home-wrong__state + .home-wrong__state { margin-top: 0; }
.home-wrong__title { color: var(--color-text-on-light-primary); }
.home-wrong__body { max-width: 482px; color: var(--color-text-on-light-tertiary); }
.js .home-wrong__state--start { opacity: 1; visibility: visible; transition: opacity .35s ease .25s, visibility 0s; }
.js .home-wrong__state--end { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.js .home-wrong.is-swapped .home-wrong__state--start { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.js .home-wrong.is-swapped .home-wrong__state--end { opacity: 1; visibility: visible; transition: opacity .35s ease .25s, visibility 0s; }
/* first view: grid fades up, the five red dots pop in one by one */
.js .home-wrong__board { opacity: 0; transition: opacity 1.4s ease; }
.js .home-wrong.is-in .home-wrong__board { opacity: 1; }
.js .home-wrong__dot:not(.home-wrong__dot--extra) { opacity: 0; transform: scale(.2); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(700ms + var(--k) * 300ms); }
.js .home-wrong__dot--extra { opacity: 0; transform: scale(.2); transition: opacity .5s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(850ms + var(--k) * 90ms); }
.js .home-wrong.is-in .home-wrong__dot { opacity: 1; transform: none; }
@keyframes home-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
.home-wrong.is-live.is-calm .home-wrong__dot:not(.home-wrong__dot--extra) .home-wrong__start { animation: home-breathe 3.2s ease-in-out infinite; animation-delay: calc(2s + var(--k) * 300ms); }
@media (max-width: 767px) {
.home-wrong { --sx: 34px; --sy: 58px; }
.home-wrong__text { box-shadow: 0 0 0 16px var(--color-background-page); }
.home-wrong__title br { display: none; }
.home-wrong__board { opacity: .6; }
.js .home-wrong.is-in .home-wrong__board { opacity: .6; }
.home-wrong__board { background-image: radial-gradient(circle, #e8e8ea 0 3px, transparent 3.6px); }
}
/* ---------- Closing CTA (ClosingCtaSection 6035:23253; DiagnosticCard 6035:23277) ---------- */
/* With JS the CTA slides up over the pinned "wrong thing" board for its last screen of scroll. */
.page-home .closing { z-index: 2; }
.js .home-wrong + .closing { margin-top: -100vh; }
/* Touch screens size the pinned board by the small viewport (browser bars shown). Desktop keeps plain vh: Safari can
leave svh at the window's old height after a resize, which left the board and the closing CTA out of step. */
@media (pointer: coarse) {
.home-wrong__pin { min-height: 100svh; }
.js .home-wrong { height: calc(100svh + 210vh); }
.js .home-wrong__pin { height: 100svh; }
.js .home-wrong + .closing { margin-top: -100svh; }
}
.home-cta__list { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 24px; width: calc(100% + 2 * var(--gutter) - 80px); }
.home-cta__item { display: flex; text-wrap: balance; flex-direction: column; align-items: center; gap: 24px; text-align: center; line-height: 1.45; color: var(--color-text-on-dark-secondary); }
.home-cta__check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--color-background-accent); }
@media (max-width: 1023px) {
.home-cta__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; width: 100%; }
}
@media (max-width: 767px) {
}
@media (max-width: 639px) {
.home-cta__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.home-cta__item { gap: 12px; }
}
/* card rises in; checklist items appear in order ([data-reveal-seq]), each tick drawing after its item */
.js .home-cta__item { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.js .home-cta__check { transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: 250ms; }
.js .home-cta__check svg { clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease-out); transition-delay: 500ms; }
.js .home-cta__item.is-in { opacity: 1; transform: none; }
.js .home-cta__item.is-in .home-cta__check { transform: none; }
.js .home-cta__item.is-in .home-cta__check svg { clip-path: inset(0); }
/* Heading groups enter in turn (the team's sibling stagger; [data-reveal] honours --reveal-delay, 10-base.css) */
.page-home .home-services__title { --reveal-delay: 250ms; }
.page-home .home-services__desc { --reveal-delay: 450ms; }
.page-home .home-stats__title { --reveal-delay: 200ms; }
.page-home .home-wrong__state--start .home-wrong__body { --reveal-delay: 200ms; }
/* ---------- Hero intro (site/js/30-home.js heroIntro) ----------
The layer (black stage, video, a copy of the headline) is fixed full-screen UNDER the page (z-index -1) while the
hero is see-through and everything else on screen is hidden, so the header, tag, sub-line and buttons can fade in
over the playing video, as on the team's site. */
.home-hero__intro { display: none; }
.home-intro-layer { position: fixed; inset: 0; z-index: -1; background: var(--color-background-inverse); pointer-events: none; }
.home-intro-layer__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.home-intro-layer.is-playing .home-intro-layer__video { opacity: 1; }
.home-intro-layer__head { position: fixed; margin: 0; color: #fff; opacity: 0; transform: translateY(var(--dy, 0px)); transition: opacity 4.2s var(--ease-standard); }
.home-intro-layer__head .home-hero__line { transform: translateX(var(--dx, 0px)); }
.home-intro-layer.is-text-in .home-intro-layer__head { opacity: 1; }
/* Glide: 1.6s into the video both lines spring from the centre onto the real headline */
.home-intro-layer.is-gliding .home-intro-layer__head { transform: none; transition: opacity 4.2s var(--ease-standard), transform 1.9s cubic-bezier(.3, 1.25, .45, 1); }
.home-intro-layer.is-gliding .home-intro-layer__head .home-hero__line { transform: none; transition: transform 1.9s cubic-bezier(.3, 1.25, .45, 1); }
.home-intro-layer.is-gliding .home-intro-layer__head .home-hero__line:first-child { transition-delay: .14s; }
/* End: the black stage and the video leave as one, the finished page is already on top */
.home-intro-layer.is-ending { opacity: 0; transition: opacity .6s ease; }
/* No video: the black lifts over the finished page */
.home-intro-layer.is-skip { z-index: 1000; opacity: 0; transition: opacity .35s ease; }
/* While the intro runs: the hero is see-through, the real headline waits hidden (the copy lands on it), the rest
fades in over the video; the dark panel edge sits 90px low and rises as the UI appears */
html.home-intro .page-home .home-hero { background: transparent; }
html.home-intro:not(.home-intro--head) .page-home [data-intro-head] { visibility: hidden; }
html.home-intro .page-home [data-intro-rest], html.home-intro .page-home .webinar-bar, html.home-intro .page-home .site-nav { opacity: 0; }
html.home-intro.home-intro--ui .page-home [data-intro-rest], html.home-intro.home-intro--ui .page-home .webinar-bar, html.home-intro.home-intro--ui .page-home .site-nav { opacity: 1; transition: opacity 1.6s var(--ease-standard); }
html.home-intro .page-home .home-dark { translate: 0 90px; }
html.home-intro.home-intro--ui .page-home .home-dark { translate: 0 0; transition: translate 1.6s var(--ease-standard); }
/* Set in before first paint (see INTRO_GATE in site/pages/home.py): black until the intro layer takes over.
Failsafe: if site.js never takes over, the black lifts by itself after 4s (heroIntro() won't start once it has). */
html.home-intro-pending::after { content: ""; position: fixed; inset: 0; z-index: 999; background: var(--color-background-inverse); animation: home-pending-out .4s ease 4s forwards; }
@keyframes home-pending-out { to { opacity: 0; visibility: hidden; } }
html.home-intro-lock, html.home-intro-lock body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
/* --- 40-services.css --- */
/* ==========================================================================
What we do (/what-we-do) + the seven service pages (/what-we-do/)
Figma: landing 6044:26060; service template 6064:973 (and 6064:6061, 11170, 16448, 21643, 26779, 31859).
Every selector starts with .page-services or an svc- block. Shared classes are used, never restyled.
========================================================================== */
.page-services {
/* Group palette (Figma spectrum + illustration colours; candidates for the shared tokens) */
--svc-spec-1: linear-gradient(90deg, #f97316, #f8332d);
--svc-spec-2: linear-gradient(90deg, rgba(250, 45, 49, .9), rgba(228, 20, 114, .9));
--svc-spec-3: linear-gradient(90deg, #e0177f, #ab2bda);
--svc-spec-4: linear-gradient(90deg, #a02ede, #4c44fa);
--svc-spec-5: linear-gradient(90deg, #6461fb, #d8defb);
--svc-ink-1: #d03e10; --svc-ink-2: #c80f55; --svc-ink-3: #a3168f; --svc-ink-4: #6f28c8; --svc-ink-5: var(--color-text-on-light-link);
--svc-stat-line: linear-gradient(90deg, #ff6a3d, #7a2bd6);
--svc-rule: rgba(234, 236, 238, .3);
--svc-gap-xl: clamp(96px, 13.9vw, 200px); /* 200 at 1440: Figma section bottoms */
--svc-gap-l: clamp(64px, 8.3vw, 120px); /* 120 at 1440: heading block to content */
/* The pages open on a dark hero that runs behind the floating nav: the page canvas is dark. Every
section below sets its own background. */
background: var(--color-background-inverse);
}
/* ---------- Section heading (Figma H4 32/light at 70%, Newsreader accent 34/bold italic at 100%) ---------- */
.page-services .svc-h { color: var(--color-text-on-light-secondary); }
.svc-problem__inner > .svc-h, .svc-approach .svc-h, .svc-problems__title { text-wrap: balance; }
.page-services .svc-h em { font-size: 1.0625em; line-height: 1; color: var(--color-text-on-light-primary); }
.page-services .on-dark .svc-h { color: var(--color-text-on-dark-secondary); }
.page-services .on-dark .svc-h em { color: var(--color-text-on-dark-primary); }
.svc-head { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.svc-head__text { display: flex; flex-direction: column; gap: 32px; max-width: 748px; }
.svc-head__body { max-width: 560px; }
/* Red-dot italic claim (hero line; also the closing note under a deliver section) */
.svc-claim { display: flex; align-items: baseline; gap: 16px; max-width: 560px; font-size: var(--text-h5); font-style: italic; line-height: 1.4; color: var(--color-text-on-dark-tertiary); }
.svc-claim::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-dot-alert); transform: translateY(-.12em); }
.svc-claim--note { margin-top: var(--svc-gap-l); max-width: none; }
/* ==========================================================================
Service page template
========================================================================== */
/* ---------- Hero (Figma hero-heading 6064:976) ---------- */
.svc-hero { padding-block: clamp(48px, 8.3vw, 120px); color: var(--color-text-on-dark-primary); }
.svc-hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.svc-hero__title { max-width: 960px; text-wrap: balance; }
.svc-hero__lede { max-width: 580px; color: var(--color-text-on-dark-secondary); }
/* Hero entrance (team's [data-h] rise): a keyframe animation from page load, not the scroll reveal's transition, so the
first painted frame is already at opacity 0 (Safari runs most of a transition before its first paint). The
transition-delay only marks the element as timed by this page, so the shared reveal does not cascade it again.
Reduced motion: 10-base.css drops the animation and the shared reveal shows the text at once. */
@keyframes svc-rise { 0% { opacity: 0; transform: translateY(32px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.page-services .svc-hero [data-reveal], .page-services .svc-lhero__copy > [data-reveal] { animation: svc-rise 1.1s var(--ease-rise) var(--d, 0s) both; transition: none 0s var(--d, .01s); }
.page-services .svc-hero__title { --d: .15s; }
.page-services .svc-hero__lede { --d: .3s; }
.page-services .svc-hero .svc-claim { --d: .45s; }
.page-services .svc-lhero__copy > .tag { --d: .05s; }
.page-services .svc-lhero__title { --d: .15s; }
.page-services .svc-lhero__lede { --d: .3s; }
/* ---------- The problem: raised panel, then the halftone into the light section ---------- */
.svc-problem__panel { margin-inline: clamp(8px, 2.64vw, 38px); border: 1px solid var(--color-border-on-dark); border-bottom: 0; border-radius: var(--radius-section) var(--radius-section) 0 0; background: linear-gradient(180deg, rgba(26, 27, 31, .7), rgba(7, 8, 10, .7)); color: var(--color-text-on-dark-primary); }
.svc-problem__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: clamp(64px, 10vw, 144px) clamp(16px, 5.7vw, 82px); text-align: center; }
.svc-problem__inner > .svc-h { max-width: 860px; }
.svc-problem__body, .svc-problem__close { max-width: 640px; color: var(--color-text-on-dark-secondary); }
.svc-problem__close { color: var(--color-text-on-dark-tertiary); }
/* Diagram: four columns (Digital product) */
.svc-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-block: 40px; text-align: left; }
.svc-cols__item { display: flex; flex-direction: column; gap: 10px; padding: 4px 24px; }
.svc-cols__item + .svc-cols__item { border-left: 1px solid var(--color-border-on-dark); }
.svc-cols__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--color-dot-alert); }
.svc-cols__key { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-dark-tertiary); }
.svc-cols__value { font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-dark-primary); }
/* Diagram: four reasons (Adoption) */
.svc-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; width: 100%; margin-top: 64px; text-align: left; }
.svc-blocks__item { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid rgba(217, 0, 58, .7); }
.svc-blocks__label { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-dark-tertiary); }
.svc-blocks__label span { font-size: 14px; color: var(--color-dot-alert); }
.svc-blocks__title { margin-top: 12px; font-size: var(--text-h5); font-weight: 600; line-height: 1.4; color: var(--color-text-on-dark-primary); }
.svc-blocks__text { font-size: var(--text-body-2); line-height: 1.5; color: var(--color-text-on-dark-secondary); }
/* Diagram: official system vs where the work lives (Legacy) */
.svc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin-top: 64px; text-align: left; }
.svc-compare__col { padding: 32px 40px 40px; border: 1px solid var(--color-border-on-dark); border-radius: var(--radius-tile); }
.svc-compare__col--now { border-color: rgba(249, 11, 61, .8); background: rgba(255, 255, 255, .03); }
.svc-compare__label { padding-bottom: 20px; font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-on-dark-secondary); }
.svc-compare__col--now .svc-compare__label { color: var(--color-dot-alert); }
.svc-compare li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--color-border-on-dark); font-size: var(--text-body-2); line-height: 1.4; color: var(--color-text-on-dark-secondary); }
.svc-compare li::before { content: ""; flex-shrink: 0; width: 8px; height: 1px; background: currentColor; opacity: .6; }
.svc-compare__col--now li { color: var(--color-text-on-dark-primary); }
.svc-compare__col--now li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--color-dot-alert); opacity: 1; }
/* Diagram: the support loop (Service design). A ring of steps from 1024px up; an ordered list below. */
.svc-cycle { position: relative; width: 100%; margin-top: 24px; }
.svc-cycle__loop { display: none; }
.svc-cycle__list { display: flex; flex-direction: column; align-items: center; gap: 28px; counter-reset: none; }
.svc-cycle__node { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--color-background-inverse-raised); border: 1px solid rgba(255, 255, 255, .06); font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-dark-tertiary); text-align: left; }
.svc-cycle__node + .svc-cycle__node::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 1px; height: 16px; background: linear-gradient(rgba(249, 11, 61, 0), rgba(249, 11, 61, .9)); }
.svc-cycle__num { font-family: var(--font-mono); font-size: 11px; color: var(--color-dot-alert); }
.svc-cycle__node--last { background: rgba(217, 0, 58, .3); border-color: transparent; font-weight: 500; color: var(--color-text-on-dark-primary); }
.svc-cycle__node--last .svc-cycle__num { color: var(--color-text-on-dark-primary); }
.svc-cycle__centre { margin-top: 32px; font-size: var(--text-h5); font-style: italic; line-height: 1.4; color: var(--color-text-on-dark-tertiary); }
@media (min-width: 1024px) {
.svc-cycle { aspect-ratio: 1000 / 640; max-width: 1000px; margin-top: 8px; }
.svc-cycle__loop { display: block; position: absolute; inset: 12% 12%; width: 76%; height: 75%; overflow: visible; }
.svc-cycle__loop { inset: 0; width: 100%; height: 100%; }
.svc-cycle__list { position: absolute; inset: 0; display: block; }
.svc-cycle__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); white-space: nowrap; }
.svc-cycle__node + .svc-cycle__node::before { display: none; }
.svc-cycle__centre { position: absolute; left: 50%; top: 50%; width: 34%; margin: 0; transform: translate(-50%, -50%); }
.js .svc-cycle .svc-cycle__node { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.94); transition: opacity .4s ease, transform .5s var(--ease-out); transition-delay: calc(.1s + var(--i) * .08s); }
.js .svc-cycle.is-in .svc-cycle__node { opacity: 1; transform: translate(-50%, -50%); }
.svc-cycle.is-live .svc-cycle__node { animation: svc-lit 4.4s ease-in-out infinite; animation-delay: calc(1.3s + var(--i) * .55s); }
/* The loop, its arrows and the centre line build with the nodes (team: ellipse fades, arrows pop in turn, centre rises),
then each arrow pulses as the highlight passes it. */
.js .svc-cycle .svc-cycle__loop ellipse { opacity: 0; transition: opacity .6s ease; }
.js .svc-cycle .svc-cycle__arrow { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.16s + var(--i) * .08s); }
.js .svc-cycle .svc-cycle__centre { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); transition: opacity .6s ease .75s, transform .8s var(--ease-out) .75s; }
.js .svc-cycle.is-in .svc-cycle__loop ellipse, .js .svc-cycle.is-in .svc-cycle__arrow { opacity: 1; transform: none; }
.js .svc-cycle.is-in .svc-cycle__centre { opacity: 1; transform: translate(-50%, -50%); }
.svc-cycle.is-in.is-live .svc-cycle__arrow { animation: svc-arrlit 4.4s ease-in-out infinite; animation-delay: calc(1.58s + var(--i) * .55s); }
}
@keyframes svc-lit { 0%, 18%, 100% { filter: none; } 7% { filter: brightness(1.75); } }
@keyframes svc-arrlit { 0%, 18%, 100% { transform: none; } 7% { transform: scale(1.45); } }
/* ---------- How we work (light) ---------- */
.svc-how { padding-bottom: var(--svc-gap-xl); background: var(--color-background-page); color: var(--color-text-on-light-primary); }
.svc-how__body { margin-top: var(--svc-gap-l); }
.svc-how__split { display: grid; grid-template-columns: minmax(0, 454fr) minmax(0, 600fr); gap: 48px clamp(40px, 10vw, 146px); align-items: start; }
.svc-how__split--chart { align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 452px); }
/* Steps with a spectrum bar (Figma "project-stats-auto-layout"; also Legacy, Culture, Service design, Adoption) */
.svc-steps { display: grid; grid-template-columns: repeat(var(--svc-cols, 4), minmax(0, 1fr)); gap: 48px 16px; }
.svc-steps--2 { --svc-cols: 2; }
.svc-steps--4 { --svc-cols: 4; }
.svc-steps--5 { --svc-cols: 5; }
.svc-step { --bar: var(--svc-spec-1); --ink: var(--svc-ink-1); display: flex; flex-direction: column; gap: 19px; }
.svc-step::before { content: ""; height: 4px; background: var(--bar); }
.svc-step:nth-child(2) { --bar: var(--svc-spec-2); --ink: var(--svc-ink-2); }
.svc-step:nth-child(3) { --bar: var(--svc-spec-3); --ink: var(--svc-ink-3); }
.svc-step:nth-child(4) { --bar: var(--svc-spec-4); --ink: var(--svc-ink-4); }
.svc-step:nth-child(5) { --bar: var(--svc-spec-5); --ink: var(--svc-ink-5); }
.svc-steps--2 .svc-step:nth-child(2) { --bar: var(--svc-spec-4); --ink: var(--svc-ink-4); }
.svc-step__label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.svc-step__text { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.svc-step__title { font-size: var(--text-h6); font-weight: 400; line-height: 1.4; color: var(--color-text-on-light-primary); }
.svc-step__desc { max-width: 420px; font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-light-tertiary); }
.on-dark .svc-step { --svc-ink-1: #ff8a5c; --svc-ink-2: #ff5c8a; --svc-ink-3: #e86ad6; --svc-ink-4: #b48cff; --svc-ink-5: #9994ff; }
.on-dark .svc-step__title { color: var(--color-text-on-dark-primary); }
.on-dark .svc-step__desc { color: var(--color-text-on-dark-secondary); }
/* Timeline (Propositions, Digital product): the steps light up one at a time as you scroll. Where the block fits the
window it pins under the stuck nav (40-services.js sets .is-pinned, --svc-pin-top and the spacer heights): the whole
row from 1024px, the timeline alone below. */
.svc-tl__spacer { height: 0; }
.svc-tl__spacer--a { display: none; }
.svc-how__split.is-pinned, .svc-tl.is-pinned { position: sticky; top: var(--svc-pin-top, 0px); }
@media (max-width: 1023px) {
/* One column; flex so the spacer's negative margin cancels the gap above it exactly (a grid track cannot go below 0) */
.svc-how__split--tl { display: flex; flex-direction: column; gap: 48px; }
.svc-tl__spacer--a { display: block; margin-top: -48px; }
}
.svc-tl { position: relative; display: flex; flex-direction: column; gap: 56px; padding-top: 2px; }
.svc-tl::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: -40px; width: 1px; background: rgba(18, 21, 24, .12); }
.svc-tl__step { position: relative; display: flex; flex-direction: column; gap: 9px; padding-left: 52px; transition: opacity .45s var(--ease-standard); }
.svc-tl__step::before { content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(18, 21, 24, .3); background: var(--color-background-page); transition: border-color .45s, box-shadow .45s; }
.svc-tl__step::after { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-on-light-link); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.svc-tl__label { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: rgba(18, 21, 24, .55); transition: color .45s; }
.svc-tl__title { font-size: var(--text-h6); font-weight: 600; line-height: 1.4; }
.svc-tl__text { max-width: 520px; font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-light-tertiary); }
/* Steps appear in order ([data-reveal-seq] + own motion, so the active-step dimming below still applies once in) */
.js .svc-tl__step { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .svc-tl__step.is-in { opacity: 1; transform: none; }
.js .svc-tl__step.is-in:not(.is-active) { opacity: .5; }
.js .svc-tl__step.is-active::before, .svc-tl__step.is-active::before { border-color: var(--color-text-on-light-link); box-shadow: 0 0 0 9px rgba(74, 69, 251, .12), 0 0 0 18px rgba(74, 69, 251, .06); }
.svc-tl__step.is-active::after { opacity: 1; transform: none; }
.svc-tl__step.is-active .svc-tl__label { color: var(--color-text-on-light-link); }
/* Propositions: the rail draws down when the timeline comes into view (team: 1.6s, .1s in) */
.js .svc-tl--draw::before { transform: scaleY(0); transform-origin: 50% 0; }
.js .svc-tl--draw.is-drawn::before { transform: none; transition: transform 1.6s var(--ease-out) .1s; }
/* Adoption chart card */
.svc-chart { width: 100%; max-width: 452px; justify-self: end; border-radius: var(--radius-card); border: 1px solid rgba(24, 24, 24, .1); background: rgba(255, 255, 255, .7); box-shadow: var(--shadow-card); overflow: hidden; }
.js .page-services .svc-chart[data-reveal] { transform: translateY(32px); transition: opacity 1.1s var(--ease-rise), transform 1.1s var(--ease-rise); }
.js .page-services .svc-chart[data-reveal].is-in { transform: none; }
/* ---------- Feature card: half on the light section, half on the dark one ---------- */
.svc-feature { position: relative; padding-inline: var(--gutter); background: var(--color-background-page); }
.svc-feature::before { content: ""; position: absolute; inset: 50% 0 0; background: var(--color-background-inverse-sunken); border-radius: var(--radius-edge) var(--radius-edge) 0 0; }
.svc-feature__card { position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 452px); justify-content: space-between; align-items: center; gap: 40px; min-height: 480px; padding: clamp(20px, 3.1vw, 44px) clamp(20px, 3.2vw, 46px) clamp(20px, 3.1vw, 44px) clamp(20px, 6.2vw, 90px); border-radius: var(--radius-edge); background: var(--color-background-inverse); box-shadow: 0 33px 66px rgba(0, 0, 0, .4); overflow: hidden; color: var(--color-text-on-dark-primary); }
.svc-feature__rays { position: absolute; z-index: -2; right: 0; bottom: -160px; width: 1237px; max-width: none; height: 887px; transform: scaleX(-1); pointer-events: none; }
.svc-feature__shade { position: absolute; z-index: -1; right: 11px; bottom: 82px; width: 1206px; height: 518px; background: var(--color-background-inverse); transform: rotate(-31.27deg); pointer-events: none; }
.svc-feature__corner { position: absolute; z-index: 1; right: -20px; bottom: -128px; width: 464px; max-width: none; height: 372px; object-fit: cover; object-position: 0 50%; transform: scaleX(-1); pointer-events: none; }
.svc-feature__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 32px; }
.svc-feature__copy > .t-secondary { max-width: 440px; }
.svc-feature__lead { max-width: 440px; font-size: var(--text-h6); font-style: italic; line-height: 1.4; color: var(--color-text-on-dark-primary); }
.svc-checks { display: flex; flex-direction: column; gap: 10px; }
.svc-checks li { display: flex; align-items: center; gap: 14px; font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-dark-secondary); }
.svc-checks li::before { content: ""; flex-shrink: 0; width: 12px; height: 7px; margin-top: -4px; border-left: 1.5px solid var(--color-text-on-dark-primary); border-bottom: 1.5px solid var(--color-text-on-dark-primary); transform: rotate(-45deg); }
/* Widget panel (glass card on the feature) */
.svc-widget { position: relative; z-index: 2; width: 100%; max-width: 452px; justify-self: end; border-radius: var(--radius-card); border: 1px solid rgba(255, 255, 255, .4); background: rgba(26, 27, 31, .6); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 27px 54px -9px rgba(0, 0, 0, .7); overflow: hidden; }
/* Propositions and Brand: the panel slides up from 120px (team .widget, 1.3s; Brand fades over .7s) */
.js .page-services :is(.svc-widget--journey, .svc-widget--ripple)[data-reveal] { transform: translateY(120px); transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out); }
.js .page-services .svc-widget--ripple[data-reveal] { transition-property: opacity, transform; transition-duration: .7s, 1.3s; }
.js .page-services :is(.svc-widget--journey, .svc-widget--ripple)[data-reveal].is-in { transform: none; }
.svc-w__svg { width: 100%; height: auto; overflow: hidden; font-family: var(--font-mono); }
.svc-w__label { font-size: 10px; letter-spacing: .06em; }
.svc-w__label--lg { font-size: 12px; }
.svc-chart .svc-w__label { font-size: 10px; }
.svc-w__svg g, .svc-w__svg circle, .svc-w__svg path { transform-box: fill-box; transform-origin: 50% 50%; }
/* Build once in view (.is-in), then a quiet loop while on screen (.is-live). Without JS everything shows. */
.js .svc-anim .svc-w__glow, .js .svc-anim .svc-w__core, .js .svc-anim .svc-w__pt, .js .svc-anim .svc-w__ring, .js .svc-anim .svc-w__end, .js .svc-anim .svc-w__dot, .js .svc-anim .svc-w__ystart { opacity: 0; transform: scale(.5); }
.js .svc-anim .svc-w__draw, .js .svc-anim .svc-w__track, .js .svc-anim .svc-w__built, .js .svc-anim .svc-w__yline { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
.js .svc-anim .svc-w__draw { opacity: 1; transform: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .svc-anim .svc-w__olds, .js .svc-anim .svc-w__spec-row, .js .svc-anim .svc-w__cust, .js .svc-anim .svc-w__label, .js .svc-anim .svc-w__fix, .js .svc-anim .svc-w__hand { opacity: 0; }
.svc-anim.is-in :is(.svc-w__glow, .svc-w__core, .svc-w__pt, .svc-w__ring, .svc-w__end, .svc-w__dot, .svc-w__ystart, .svc-w__track, .svc-w__built, .svc-w__yline, .svc-w__olds, .svc-w__spec-row, .svc-w__cust, .svc-w__label, .svc-w__fix, .svc-w__hand) { opacity: 1; transform: none; }
.svc-anim.is-in .svc-w__draw { stroke-dashoffset: 0; }
.svc-anim.is-in .svc-w__glow { transition: opacity 1.2s ease 1.1s, transform 1.4s var(--ease-out) 1.1s; }
.svc-anim.is-in .svc-w__core { transition: opacity .35s ease .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1) .5s; }
.svc-anim.is-in .svc-w__ring { transition: opacity .8s ease, transform 1s var(--ease-out); transition-delay: calc(.6s + var(--k) * .16s); }
.svc-anim.is-in .svc-w__pt { transition: opacity .4s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.85s + var(--k) * .2s); }
.svc-anim.is-in .svc-w__label, .svc-anim.is-in .svc-w__row text, .svc-anim.is-in .svc-w__olds { transition: opacity .7s ease; transition-delay: calc(.4s + var(--r, var(--k, 0)) * .09s); }
.svc-anim.is-in .svc-w__draw { transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) .8s; }
.svc-anim.is-in .svc-w__track, .svc-anim.is-in .svc-w__built { transition: opacity .2s ease, transform 1.1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(.45s + var(--r, 0) * .12s); }
.svc-anim.is-in .svc-w__end { transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.4s + var(--r, 0) * .12s); }
.svc-anim.is-in .svc-w__yline { transition: opacity .2s ease 1.9s, transform 1s cubic-bezier(.65, 0, .35, 1) 1.9s; }
.svc-anim.is-in .svc-w__ystart { transition: opacity .35s ease 1.75s, transform .5s cubic-bezier(.34, 1.56, .64, 1) 1.75s; }
.svc-anim.is-in .svc-w__cust { transition: opacity .6s ease 2.2s; }
.svc-anim.is-in .svc-w__hand, .svc-anim.is-in .svc-w__fix { transition: opacity .6s ease 1.4s; }
.svc-anim.is-in .svc-w__spec-row { transition: opacity .6s ease; transition-delay: calc(1.8s + var(--k) * .15s); }
.svc-anim.is-in .svc-w__dot { transition: opacity .45s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--dl); }
.svc-w__wave { opacity: 0; transform: scale(.055); fill: none; }
.svc-anim.is-live .svc-w__wave { animation: svc-wave 4.8s linear 2.4s infinite; }
.svc-anim.is-live .svc-w__glow { animation: svc-breathe 4.8s ease-in-out 2.4s infinite; }
.svc-anim.is-live .svc-w__pt .svc-w__halo { animation: svc-hit 4.8s ease-out infinite; animation-delay: calc(2.6s + var(--k) * .6s); }
.svc-anim.is-live .svc-w__end--prog .svc-w__halo { animation: svc-pulse 2.6s ease-in-out 2.6s infinite; }
.svc-anim.is-live .svc-w__cust { animation: svc-twinkle 3.6s ease-in-out infinite; animation-delay: calc(3.2s + var(--t)); }
.svc-anim.is-live .svc-w__road, .svc-anim.is-live .svc-w__hand, .svc-anim.is-live .svc-w__fix { animation: svc-dash6 1.8s linear infinite; }
.svc-anim.is-live .svc-w__ystart { animation: svc-pulse 2.4s ease-in-out 2.8s infinite; }
/* Service design journeys: only the in-progress ends and "yours" pulse (team: 4 loops) */
.svc-widget--journeys.is-live .svc-w__glow, .svc-widget--journeys.is-live .svc-w__pt .svc-w__halo { animation: none; }
@keyframes svc-wave { 0% { opacity: 0; transform: scale(.055); } 4% { opacity: .9; } 48% { opacity: .35; } 58% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes svc-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 12% { transform: scale(1.08); } 40% { opacity: .85; transform: scale(1); } }
@keyframes svc-hit { 0% { transform: scale(1); } 6% { transform: scale(1.7); } 22%, 100% { transform: scale(1); } }
@keyframes svc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.5); } }
@keyframes svc-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes svc-dash6 { to { stroke-dashoffset: -6; } }
/* ---------- Dark main: what we deliver + proof ---------- */
.svc-main { position: relative; background: var(--color-background-inverse-sunken); color: var(--color-text-on-dark-primary); }
.svc-main--round { border-radius: var(--radius-edge) var(--radius-edge) 0 0; }
.svc-main--round::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: var(--radius-edge); background: var(--color-background-page); }
.svc-deliver { padding-top: clamp(80px, 10.3vw, 148px); }
.svc-deliver .svc-head__text { max-width: 726px; }
/* Iso cards between full-bleed rules (Figma section-what-good-looks-like-iso) */
.svc-iso { --line: var(--color-border-on-dark); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--svc-gap-l) 9px 0; }
.svc-iso--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-iso::before, .svc-iso::after { content: ""; position: absolute; left: 50%; width: 100vw; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); }
.svc-iso::before { top: 0; }
.svc-iso::after { bottom: 0; }
.svc-iso__card { position: relative; display: flex; flex-direction: column; padding: 35px 0 24px; }
.svc-iso__card::before, .svc-iso__card:last-child::after { content: ""; position: absolute; top: -44px; bottom: -44px; left: 0; width: 1px; background: linear-gradient(transparent, var(--line) 44px, var(--line) calc(100% - 44px), transparent); }
.svc-iso__card:last-child::after { left: auto; right: 0; }
.svc-iso__label { padding-inline: 35px; font-family: var(--font-mono); font-size: 14px; line-height: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-dark-title); }
.svc-iso__label--num { font-size: 20px; font-weight: 700; letter-spacing: .06em; }
.svc-iso__ill { position: relative; width: min(336px, calc(100% - 40px)); aspect-ratio: 336 / 250; margin: 8px auto 0; }
.svc-iso__grid { position: absolute; left: -23.5%; top: -7.1%; width: 147%; max-width: none; height: 114.3%; -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 46% 42% at 50% 50%, #000 55%, transparent 100%); pointer-events: none; }
.svc-iso__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svc-iso__copy { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.svc-iso__title { font-size: var(--text-h6); font-weight: 400; line-height: 1.4; color: var(--color-text-on-dark-primary); }
.svc-iso__text { font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-dark-secondary); }
.svc-iso__list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-dark-secondary); }
.svc-iso__list li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); }
.svc-iso__card:last-child .svc-iso__list li { color: var(--color-text-on-dark-primary); }
.svc-iso__card:last-child .svc-iso__list li::before { background: #7587ff; }
.svc-deliver__list { margin-top: var(--svc-gap-l); }
.svc-deliver__list-label { margin-bottom: 40px; font-size: var(--text-body); line-height: 1.45; text-transform: uppercase; color: var(--color-text-on-dark-primary); }
/* Iso illustration build (ported from the team's coded version: build once in view, quiet loop while visible) */
.svc-iso__art g, .svc-iso__art path, .svc-iso__art circle, .svc-tile__art g, .svc-tile__art path, .svc-tile__art ellipse { transform-box: fill-box; }
.js .svc-iso__card .svc-iso__grid { opacity: 0; transition: opacity 1s ease; }
.svc-iso__card.is-in .svc-iso__grid { opacity: 1; }
.js .svc-iso__art [data-a] { transition-property: transform, opacity; transition-timing-function: var(--ease-out); transition-duration: .9s; transition-delay: var(--d, 0ms); }
.js .svc-iso__art [data-a="base"] { opacity: 0; transform: translateY(10px); }
.js .svc-iso__art [data-a="cap"] { opacity: 0; transform: translateY(var(--cap, 82.3px)); }
.js .svc-iso__art [data-a="down"] { transform: scaleY(0); transform-origin: 50% 0; transition-duration: .6s; }
.js .svc-iso__art [data-a="drop"] { opacity: 0; transform: translateY(-46px); transition-duration: 1.1s; }
.js .svc-iso__art [data-a="fade"], .js .svc-iso__art [data-a="ghost"] { opacity: 0; transition-duration: .8s; }
.js .svc-iso__art [data-a="grow"] { opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; }
.js .svc-iso__art [data-a="line"] { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; transition-duration: .8s; }
.js .svc-iso__art [data-a="ping"] { opacity: 0; transform: scale(.3); transform-origin: 50% 50%; transition-duration: .5s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.js .svc-iso__art [data-a="pop"] { opacity: 0; transform: scale(.6); transform-origin: 50% 50%; transition-duration: .5s; transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.js .svc-iso__art [data-a="rise"] { opacity: 0; transform: translateY(14px); transition-duration: 1s; }
.js .svc-iso__art [data-a="tile"] { opacity: 0; transform: translateY(-14px); transition-duration: .6s; }
.js .svc-iso__art [data-a="wire"] { transform: scale(0); transform-origin: var(--o); transition-duration: .8s; }
.js .svc-iso__art .drawm { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms); }
.svc-iso__card.is-in .svc-iso__art [data-a] { opacity: 1; transform: none; }
.svc-iso__card.is-in .svc-iso__art .drawm { stroke-dashoffset: 0; }
.svc-iso__art .pt { transform-origin: 50% 50%; }
.svc-iso__card.is-live .fl { animation: svc-float 3.6s ease-in-out 2s infinite; }
/* Marching dashes: each loop moves exactly one dash period, so the restart is seamless (team: one keyframe per period) */
.svc-iso__card.is-live .mz4 { animation: svc-m4 1.2s linear infinite; }
.svc-iso__card.is-live .mz44 { animation: svc-m444 1.2s linear infinite; }
.svc-iso__card.is-live .mz5 { animation: svc-m5 1.4s linear infinite; }
.svc-iso__card.is-live .mz6 { animation: svc-m6 1.4s linear infinite; }
.svc-iso__card.is-live .mz66 { animation: svc-m66 1.6s linear infinite; }
.svc-iso__card.is-live .mz668 { animation: svc-m668 1.6s linear infinite; }
.svc-iso__card.is-live .mz7 { animation: svc-m7 1.6s linear infinite; }
.svc-iso__card.is-live .pt { animation: svc-pt 3.6s ease-in-out infinite; animation-delay: calc(2.4s + var(--pd, 0s)); }
@keyframes svc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes svc-m4 { to { stroke-dashoffset: -4; } }
@keyframes svc-m444 { to { stroke-dashoffset: -4.44; } }
@keyframes svc-m5 { to { stroke-dashoffset: -5; } }
@keyframes svc-m6 { to { stroke-dashoffset: -6; } }
@keyframes svc-m66 { to { stroke-dashoffset: -6.6; } }
@keyframes svc-m668 { to { stroke-dashoffset: -6.68; } }
@keyframes svc-m7 { to { stroke-dashoffset: -7; } }
@keyframes svc-pt { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.5); } }
/* ---------- Proof in practice ---------- */
.svc-proof { padding-block: var(--svc-gap-xl); }
.svc-proof__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px 64px; }
.svc-proof__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; max-width: 680px; }
.svc-proof__copy .button { margin-top: 16px; }
.svc-proof__body strong { font-weight: 700; color: var(--color-text-on-dark-primary); }
.svc-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; width: min(353px, 100%); flex-shrink: 0; text-align: right; }
.svc-stat__value { white-space: nowrap; color: var(--color-text-on-dark-primary); }
.svc-stat__label { width: 100%; padding-top: 19px; border-top: 3px solid transparent; border-image: var(--svc-stat-line) 1; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-dark-secondary); }
/* ---------- Other problems we solve (Figma Nav card / Indexed row 6071:2283) ---------- */
.svc-others { position: relative; padding-top: clamp(80px, 11.1vw, 160px); background: var(--color-background-inverse); border-radius: var(--radius-edge) var(--radius-edge) 0 0; color: var(--color-text-on-dark-primary); }
.svc-others::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: var(--radius-edge); background: var(--color-background-inverse-sunken); }
.svc-others__list { margin-top: clamp(48px, 6.7vw, 96px); }
/* ---------- Closing CTA card ---------- */
/* ==========================================================================
What we do landing
========================================================================== */
.svc-lhero { position: relative; z-index: 0; overflow: hidden; padding-block: clamp(56px, 8.3vw, 120px) clamp(48px, 5.3vw, 77px); color: var(--color-text-on-dark-primary); }
.svc-lhero::before { content: ""; position: absolute; inset: -40px 0 0 40%; background-image: radial-gradient(circle, rgba(139, 143, 152, .32) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 70% at 70% 45%, #000 30%, transparent 100%); pointer-events: none; }
.svc-lhero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 604px) minmax(0, 1fr); align-items: end; gap: 24px; }
.svc-lhero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding-bottom: clamp(24px, 8vw, 120px); }
.svc-lhero__title { position: relative; z-index: 1; width: max-content; max-width: min(780px, calc(100vw - 2 * var(--gutter))); margin-top: 8px; }
.svc-lhero__lede { max-width: 342px; color: var(--color-text-on-dark-secondary); }
.svc-lhero__graph { margin-right: calc(-1 * var(--gutter)); min-width: 0; }
/* Two columns: the graph is 692px at 1440 and keeps that proportion on wide screens (the team's page scales) */
@media (min-width: 1024px) { .svc-lhero__graph { justify-self: end; width: calc(100% + var(--gutter)); max-width: 48.06vw; } }
.svc-hg { width: 100%; height: auto; overflow: visible; font-family: var(--font-mono); }
.svc-hg__label { font-size: 11px; letter-spacing: .08em; }
.svc-hg__node, .svc-hg__halo, .svc-hg__drop, .svc-hg__label { transform-box: fill-box; transform-origin: 50% 50%; }
.svc-hg__drop { transform-origin: 50% 0; }
.svc-hg__halo { fill: none; }
.svc-hg__axis, .svc-hg__line { stroke-dasharray: 1; }
.svc-hg__axis { animation: svc-hg-draw .65s var(--ease-out) 80ms both; }
.svc-hg__early { animation: svc-hg-fade .55s ease 260ms both; }
.svc-hg__line { animation: svc-hg-draw .8s cubic-bezier(.37, 0, .63, 1) 790ms both; }
.svc-hg__node { animation: svc-hg-pop .3s var(--ease-out) var(--d) both; }
.svc-hg__drop { animation: svc-hg-grow .36s var(--ease-out) var(--d) both; }
.svc-hg__label { animation: svc-hg-label .34s var(--ease-out) var(--d) both; }
.svc-hg__halo { animation: svc-hg-pop .35s var(--ease-out) var(--d) both, svc-hg-pulse 2.4s var(--ease-out) 2.6s infinite; }
@keyframes svc-hg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes svc-hg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes svc-hg-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes svc-hg-grow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } }
@keyframes svc-hg-label { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes svc-hg-pulse { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
/* The hero stays put while the page scrolls over it (team's coded version). Desktop only: on smaller
screens the hero can be taller than the window. */
@media (min-width: 1024px) {
.svc-page--landing .svc-lhero { position: sticky; top: var(--svc-nav-bottom, 94px); } /* right under the stuck nav (measured by 40-services.js) */
}
.svc-lmain { position: relative; z-index: 1; }
.svc-approach { padding-block: clamp(96px, 11.1vw, 160px); border-radius: var(--radius-section) var(--radius-section) 0 0; background: var(--color-background-subtle); color: var(--color-text-on-light-primary); }
.svc-approach__inner { display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.svc-approach__text { max-width: 820px; color: var(--color-text-on-light-tertiary); }
.svc-approach__text--narrow { max-width: 640px; }
.svc-approach__statement { margin-top: 40px; font-size: var(--text-h5); font-style: italic; line-height: 1.4; color: var(--color-text-on-light-primary); text-wrap: balance; }
.svc-problems { padding-block: clamp(96px, 11.1vw, 160px); background: var(--color-background-page); color: var(--color-text-on-light-primary); }
.svc-problems__title { text-align: center; }
.svc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 5.6vw, 80px); }
.svc-tiles__item--wide { grid-column: span 2; }
/* Problem tile (Figma servicetile-*): the whole tile is the link */
.svc-tile { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 380px; padding: 23px 24px 24px; overflow: hidden; background: var(--color-background-surface); border: 1px solid rgba(18, 21, 24, .12); border-radius: var(--radius-tile); color: var(--color-text-on-light-primary); transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease-out); }
.svc-tile:hover, .svc-tile:focus-visible { border-color: rgba(74, 69, 251, .28); box-shadow: 0 18px 40px -24px rgba(18, 21, 24, .25); }
.svc-tile__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(18, 21, 24, .12) 1px, transparent 1.3px); background-size: 16px 16px; background-position: 7px 7px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); pointer-events: none; }
.svc-tile__num { position: absolute; left: 23px; top: 21px; font-family: var(--font-mono); font-size: 16px; line-height: 1.3; letter-spacing: .08em; color: var(--color-text-on-light-secondary); }
.svc-tile__ill { position: relative; flex-shrink: 0; width: 230.4px; max-width: 100%; height: 180px; margin: 0 auto 16px; pointer-events: none; }
.svc-tile__art { width: 100%; height: 100%; overflow: visible; }
.svc-tile__body { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-top: auto; }
.svc-tile__title { font-size: var(--text-body); font-weight: 700; line-height: 1.6; }
.svc-tile__text { font-size: var(--text-body-2); line-height: 1.4; color: var(--color-text-on-light-secondary); }
.svc-tile__aside { font-size: var(--text-body-2); font-style: italic; line-height: 1.5; color: var(--color-text-on-light-tertiary); }
.svc-tile__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 16px; font-weight: 600; line-height: 16px; color: var(--color-text-on-light-link); }
.svc-tile__more .icon-arrow { transition: transform .25s var(--ease-out); }
.svc-tile:hover .svc-tile__more .icon-arrow, .svc-tile:focus-visible .svc-tile__more .icon-arrow { transform: translateX(4px); }
.svc-tiles__item--wide .svc-tile { justify-content: flex-end; }
.svc-tiles__item--wide .svc-tile__ill { position: absolute; left: 75%; top: 64px; width: 320px; height: 250px; margin: 0; transform: translateX(-50%); }
.svc-tiles__item--wide .svc-tile__body { max-width: min(420px, 50%); }
/* Tile entrance + ambient loops (team's coded version; illustrations from Figma) */
.js .svc-tile { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), border-color .3s ease, box-shadow .3s ease; }
.js .svc-tile.is-in { opacity: 1; transform: none; }
/* Inside each tile the text follows the tile in (team: 12px over .7s, 150/300/380/460/540ms after the tile) */
.js .svc-tile :is(.svc-tile__num, .svc-tile__title, .svc-tile__text, .svc-tile__aside, .svc-tile__more) { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .svc-tile.is-in :is(.svc-tile__num, .svc-tile__title, .svc-tile__text, .svc-tile__aside, .svc-tile__more) { opacity: 1; transform: none; }
.js .svc-tile.is-in .svc-tile__num { transition-delay: 150ms; }
.js .svc-tile.is-in .svc-tile__title { transition-delay: 300ms; }
.js .svc-tile.is-in .svc-tile__text { transition-delay: 380ms; }
.js .svc-tile.is-in .svc-tile__aside { transition-delay: 460ms; }
.js .svc-tile.is-in .svc-tile__more { transition-delay: 540ms; }
.js .svc-tile [data-anim] { transition-property: transform, opacity, stroke-dashoffset; transition-timing-function: var(--ease-out); transition-duration: .9s; transition-delay: var(--d, 0ms); }
.js .svc-tile--01 [data-anim="ghost"] { opacity: 0; }
.js .svc-tile--01 [data-anim="block"] { opacity: 0; transform: translateY(-46px); transition-duration: 1.1s; --d: 350ms; }
.js .svc-tile--02 .g-base, .js .svc-tile--02 .g-upper, .js .svc-tile--02 .g-cap, .js .svc-tile--02 .g-dash { transition: transform 1.1s var(--ease-out), opacity .6s ease; transition-delay: 250ms; }
.js .svc-tile--02 .g-base { opacity: 0; transform: translateY(-30px); }
.js .svc-tile--02 .g-upper { opacity: 0; transform: translateY(31px); }
.js .svc-tile--02 .g-cap { opacity: 0; transform: translateY(50px); transition-delay: 400ms; }
.js .svc-tile--02 .g-dash { opacity: 0; transition-delay: 1100ms; }
.js .svc-tile--03 [data-anim="base"] { opacity: 0; transform: translateY(10px); }
.js .svc-tile--03 [data-anim="tile"] { opacity: 0; transform: translateY(-14px); transition-duration: .6s; }
.js .svc-tile--03 [data-anim="new"] { opacity: 0; transform: translateY(-30px); transition-duration: .8s; --d: 900ms; }
.js .svc-tile--04 [data-anim="silo"] { opacity: 0; transform: translateY(18px); }
.js .svc-tile--04 [data-anim="cap"] { opacity: 0; transform: translateY(-8px); transition-duration: .5s; }
.js .svc-tile--04 [data-anim="line"] { stroke-dasharray: 1; stroke-dashoffset: 1; transition-duration: 1s; --d: 800ms; }
.js .svc-tile--04 [data-anim="end"] { opacity: 0; transform: scale(.4); transform-origin: 50% 50%; transition-duration: .5s; --d: 1700ms; }
.js .svc-tile--05 [data-anim="ghost"] { opacity: 0; transition-duration: .8s; }
.js .svc-tile--05 [data-anim="product"] { opacity: 0; transform: translateY(-16px); --d: 200ms; }
.js .svc-tile--05 [data-anim="ui"] { opacity: 0; transform: translateY(26px); transition-duration: 1.1s; --d: 600ms; }
.js .svc-tile--06 [data-anim="ring"] { opacity: 0; transform: scale(.6); transform-origin: 50% 50%; transition-duration: 1s; }
.js .svc-tile--06 [data-anim="pillar"] { opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; --d: 450ms; }
.js .svc-tile--06 [data-anim="pillar-top"] { opacity: 0; transform: translateY(58px); --d: 450ms; }
.js .svc-tile--07 [data-anim="option"] { opacity: 0; transition-duration: .7s; }
.js .svc-tile--07 [data-anim="pick"] { opacity: 0; transform: translateY(-40px); transition-duration: 1.1s; --d: 900ms; }
.svc-tile.is-in [data-anim], .svc-tile.is-in .g-base, .svc-tile.is-in .g-upper, .svc-tile.is-in .g-cap, .svc-tile.is-in .g-dash { opacity: 1; transform: none; }
.svc-tile.is-in [data-anim="line"] { stroke-dashoffset: 0; }
.svc-tile--01.is-in [data-anim="block"], .svc-tile--06.is-in [data-anim="pillar"], .svc-tile--07.is-in [data-anim="pick"]:not([data-solid]) { opacity: .48; }
.svc-tile--01.is-in [data-anim="block"][data-solid] { opacity: 1; }
.svc-tile--01.is-live [data-anim="ghost"] { animation: svc-m498 1.2s linear infinite; }
.svc-tile--04.is-live [data-anim="end"][data-dashed] { animation: svc-m462 1s linear 2.2s infinite; }
.svc-tile--05.is-live [data-anim="ghost"] { animation: svc-m358 1s linear infinite; }
.svc-tile--07.is-live [data-anim="option"] { animation: svc-m742 1.4s linear infinite; }
.svc-tile.is-live .illo-float { animation: svc-float 3.6s ease-in-out 1.6s infinite; }
.svc-tile.is-live .illo-lift { animation: svc-lift 3.2s ease-in-out 1.9s infinite; }
.svc-tile.is-live .g-core { animation: svc-float 4s ease-in-out 1.6s infinite; }
.svc-tile.is-live .g-cap { animation: svc-float 3.2s ease-in-out 1.8s infinite; }
.svc-tile.is-live [data-anim="ring"] { animation: svc-ring 3s ease-in-out 1.4s infinite; }
@keyframes svc-m358 { to { stroke-dashoffset: -3.58; } }
@keyframes svc-m462 { to { stroke-dashoffset: -4.62; } }
@keyframes svc-m498 { to { stroke-dashoffset: -4.98; } }
@keyframes svc-m742 { to { stroke-dashoffset: -7.42; } }
@keyframes svc-lift { 0%, 100% { transform: translateY(0); } 45%, 60% { transform: translateY(-9px); } }
@keyframes svc-ring { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
/* Closing CTA: the shared band, on the page colour so its rounded corners sit on light */
.svc-lcta { background: var(--color-background-page); }
/* ==========================================================================
Responsive (shared breakpoints only: 1023 / 767 / 639)
========================================================================== */
@media (max-width: 1023px) {
.svc-steps--4, .svc-steps--5 { --svc-cols: 2; }
.svc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
.svc-cols__item:nth-child(3) { border-left: 0; }
.svc-how__split, .svc-how__split--chart { grid-template-columns: minmax(0, 1fr); }
.svc-chart { justify-self: start; }
.svc-feature__card { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; padding: 48px clamp(16px, 4vw, 40px) 32px; }
.svc-widget { justify-self: center; }
.svc-feature__corner { bottom: -200px; }
.svc-iso, .svc-iso--2 { grid-template-columns: minmax(0, 1fr); margin-inline: 0; }
.svc-iso__card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; column-gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); }
.svc-iso__card:first-child { border-top: 0; }
.svc-iso__card::before, .svc-iso__card:last-child::after { display: none; }
.svc-iso__label { grid-column: 1 / -1; padding-inline: 0; }
.svc-iso__ill { width: 100%; margin-top: 16px; }
.svc-iso__copy { padding: 16px 0 0; }
.svc-proof__grid { flex-direction: column; align-items: flex-start; }
.svc-stat { align-items: flex-start; text-align: left; }
.svc-lhero__inner { grid-template-columns: minmax(0, 1fr); }
.svc-lhero__copy { padding-bottom: 0; }
.svc-lhero__graph { margin-left: calc(-1 * var(--gutter)); }
.svc-lhero::before { inset: 35% 0 0 0; }
.svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-tiles__item--wide:last-child { grid-column: span 1; }
.svc-tiles__item--wide:last-child .svc-tile__ill { position: relative; left: auto; top: auto; width: 230.4px; height: 180px; margin: 0 auto 16px; transform: none; }
.svc-tiles__item--wide:last-child .svc-tile__body { max-width: 420px; }
}
@media (max-width: 767px) {
.svc-hero__inner, .svc-lhero__copy { gap: 24px; }
.svc-compare { grid-template-columns: minmax(0, 1fr); }
.svc-compare__col { padding: 24px; }
.svc-blocks { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.svc-w__label { font-size: 13px; }
.svc-chart .svc-w__label { font-size: 12px; }
}
@media (max-width: 639px) {
.svc-steps, .svc-steps--2, .svc-steps--4, .svc-steps--5 { --svc-cols: 1; }
.svc-cols { grid-template-columns: minmax(0, 1fr); }
.svc-cols__item, .svc-cols__item + .svc-cols__item { padding: 0 0 0 16px; border-left: 1px solid var(--color-border-on-dark); }
.svc-iso__card { display: flex; align-items: stretch; }
.svc-iso__ill { max-width: 336px; margin-inline: auto; }
.svc-tiles { grid-template-columns: minmax(0, 1fr); }
.svc-tiles__item--wide { grid-column: auto; }
.svc-tile { min-height: 400px; }
.svc-tiles__item--wide .svc-tile__ill { position: relative; left: auto; top: auto; width: 256px; height: 200px; margin: 0 auto 16px; transform: none; }
.svc-tiles__item--wide .svc-tile__body { max-width: none; }
.svc-cycle__node { font-size: var(--text-body-2); }
}
/* --- 50-work.css --- */
/* ==========================================================================
Our work (/our-work, Figma 6085:4216) and the case-study shell (/our-work/).
Every selector starts with .page-work or a .work- block. Case-study CONTENT styles are page-specific and
live in /assets/site/work//case.css (loaded only on that page, scoped to .work-case).
========================================================================== */
/* ---------- Hero (Figma Header 6085:4218) ----------
The hero holds under the nav while the dark logo panel and everything after it (.work-over) slide up over it, at
every width (team's site). --hero-top (50-work.js) = min(nav bottom, window height - hero height): a hero taller
than the window sticks by its bottom edge, so nothing in it is hidden under the panel. */
.page-work .work-hero { position: sticky; top: var(--hero-top, 0px); z-index: 1; overflow: clip; background: var(--color-background-page); }
.page-work .work-over { position: relative; z-index: 2; background: var(--color-background-page); }
/* Copy arrives as on the team's site: eyebrow, title, lede rise 32px, .05/.15/.3s apart. A keyframe animation (not
the scroll reveal) so it starts at opacity 0 on the very first frame in Safari and only rises. */
@media (prefers-reduced-motion: no-preference) {
.page-work .work-hero__tag, .page-work .work-hero .page-hero__title, .page-work .work-hero .page-hero__lede { animation: work-rise 1.1s cubic-bezier(.2, .7, .2, 1) .05s both; }
.page-work .work-hero .page-hero__title { animation-delay: .15s; }
.page-work .work-hero .page-hero__lede { animation-delay: .3s; }
}
@keyframes work-rise { from { opacity: 0; transform: translateY(32px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.page-work .work-hero__tag::before { width: 6px; height: 6px; }
.page-work .work-hero__graphic { position: relative; width: min(644px, 100%); aspect-ratio: 644 / 400; justify-self: end; }
.page-work .work-hero .page-hero__inner { grid-template-columns: max-content minmax(0, 1fr); }
/* Dot field behind the curve: the shared .dot-grid, faded out radially (Figma "Dot grid" with its elliptical mask) */
.page-work .work-hero__grid { position: absolute; left: -19.88%; top: -24.5%; width: 150.62%; height: 150%; opacity: 0; transition: opacity 1.6s ease; -webkit-mask-image: radial-gradient(closest-side, #000 20%, rgba(0, 0, 0, .35) 60%, transparent); mask-image: radial-gradient(closest-side, #000 20%, rgba(0, 0, 0, .35) 60%, transparent); }
.page-work .work-hero__path { position: absolute; left: 10.4%; top: 37.69%; width: 83.7%; height: auto; overflow: visible; }
.page-work .work-hero__badge { position: absolute; left: 87.73%; top: 28%; width: 12.27%; height: auto; overflow: visible; opacity: 0; transform: scale(.7); transition: opacity .35s ease, transform .6s cubic-bezier(.2, 1.2, .3, 1); }
.page-work .work-hero__curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.page-work .work-hero__pt { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); }
.page-work .work-hero__halo { transform-box: fill-box; transform-origin: center; }
.page-work .is-drawn .work-hero__grid { opacity: 1; }
.page-work .is-drawn .work-hero__curve { animation: work-draw 1.8s cubic-bezier(.45, 0, .2, 1) .35s forwards; }
.page-work .is-drawn .work-hero__pt { animation: work-pop .5s cubic-bezier(.2, 1.3, .3, 1) forwards; }
.page-work .is-drawn .work-hero__pt:nth-of-type(1) { animation-delay: .35s; }
.page-work .is-drawn .work-hero__pt:nth-of-type(2) { animation-delay: .85s; }
.page-work .is-drawn .work-hero__pt:nth-of-type(3) { animation-delay: 1.03s; }
.page-work .is-drawn .work-hero__pt:nth-of-type(4) { animation-delay: 1.21s; }
.page-work .is-drawn .work-hero__badge { opacity: 1; transform: none; transition-delay: 1.6s; }
.page-work .is-drawn .work-hero__halo { animation: work-breathe 3.6s ease-in-out 2.4s infinite; }
@keyframes work-draw { to { stroke-dashoffset: 0; } }
@keyframes work-pop { to { opacity: 1; transform: scale(1); } }
@keyframes work-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .75; } }
@media (prefers-reduced-motion: reduce) {
.page-work .work-hero__grid, .page-work .work-hero__badge, .page-work .work-hero__pt { opacity: 1; transform: none; }
.page-work .work-hero__curve { stroke-dashoffset: 0; }
}
@media (max-width: 1023px) {
.page-work .work-hero .page-hero__inner { grid-template-columns: minmax(0, 1fr); }
.page-work .work-hero__graphic { justify-self: center; }
}
/* ---------- Client logos (Figma Logos 6085:4240, Toggle 6085:1949, Logo marquee 4214:5937) ---------- */
.page-work .work-logos { --logo-k: 1; padding-inline: 8px; }
.page-work .work-logos__panel-wrap { padding-block: 120px 80px; background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); border-radius: var(--radius-section) var(--radius-section) 0 0; overflow: hidden; }
.page-work .work-logos__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 112px; padding-inline: calc(var(--gutter) - 8px); }
.page-work .work-toggle { position: relative; display: flex; flex: none; max-width: 100%; padding: 4px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius-pill); background: linear-gradient(180deg, rgba(255, 255, 255, .01), rgba(255, 255, 255, 0)); isolation: isolate; }
.page-work .work-toggle__item { position: relative; z-index: 1; min-height: 44px; padding: 11px 21px; border-radius: var(--radius-pill); font-size: 15px; line-height: 20px; white-space: nowrap; color: var(--color-text-on-dark-tertiary); transition: color .4s cubic-bezier(.3, .8, .25, 1); }
.page-work .work-toggle__item:hover, .page-work .work-toggle__item[aria-selected="true"] { color: #fff; }
.page-work .work-toggle__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.page-work .work-toggle__thumb { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; visibility: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 14px rgba(255, 255, 255, .14); pointer-events: none; transition: transform .4s cubic-bezier(.3, .8, .25, 1), width .4s cubic-bezier(.3, .8, .25, 1); }
.page-work .work-logos__pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 593px; transition: opacity .4s, visibility 0s 0s; }
.page-work .work-logos__head.is-other .work-logos__pills { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.page-work .work-logos__pill { position: relative; display: flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--color-text-on-dark-tertiary); transition: color .5s, border-color .5s; }
.page-work .work-logos__pill::after { content: ""; position: absolute; inset: -6px -4px; } /* 44px touch target */
.page-work .work-logos__pill:hover { color: var(--color-text-on-dark-secondary); }
.page-work .work-logos__pill[aria-pressed="true"] { color: var(--color-text-on-dark-primary); border-color: rgba(244, 244, 245, .4); }
.page-work .work-logos__pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The three lists share one grid cell and cross-fade (team: .strip.off) */
.page-work .work-logos__panels { display: grid; }
.page-work .work-logos__panel { grid-area: 1 / 1; min-width: 0; transition: opacity .35s, visibility 0s 0s; }
.page-work .work-logos__panel.is-off { opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.page-work .work-logos__marquee { position: relative; height: calc(174px * var(--logo-k)); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 160px, #000 calc(100% - 160px), transparent 100%); }
.page-work .work-logos__track { display: flex; width: max-content; height: 100%; will-change: transform; }
.page-work .work-logos__cell { display: flex; flex: none; align-items: center; justify-content: center; width: calc(350px * var(--logo-k)); }
.page-work .work-logos__cell img { width: calc(var(--w) * var(--logo-k)); height: calc(var(--h) * var(--logo-k)); max-width: none; object-fit: contain; }
.page-work [data-marquee="clients"] .work-logos__cell img { opacity: .4; transition: opacity .6s; }
.page-work [data-marquee="clients"] .work-logos__cell.is-active img { opacity: 1; }
/* No motion: the strip becomes a plain horizontal scroller */
.page-work .work-logos__marquee.is-static { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
.page-work .work-logos__marquee.is-static::-webkit-scrollbar { display: none; }
.page-work .work-logos__halftone { width: 100%; height: auto; margin-top: -1px; }
@media (max-width: 1023px) {
.page-work .work-logos { --logo-k: .75; }
.page-work .work-logos__panel-wrap { padding-block: 96px 64px; }
.page-work .work-logos__head { flex-direction: column; min-height: 0; margin-bottom: 48px; }
.page-work .work-logos__pills { justify-content: flex-start; max-width: none; }
}
@media (max-width: 639px) {
.page-work .work-logos { --logo-k: .6; padding-inline: 0; }
.page-work .work-logos__panel-wrap { padding-block: 72px 48px; }
.page-work .work-toggle { overflow-x: auto; scrollbar-width: none; }
.page-work .work-toggle::-webkit-scrollbar { display: none; }
.page-work .work-toggle__item { padding: 11px 14px; font-size: 14px; }
.page-work .work-logos__marquee { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
}
/* ---------- Selected work (Figma "Selected work" 6098:9512) ---------- */
.page-work .work-selected { --k: 1; padding: 80px 8px 100px; scroll-margin-top: 60px; }
.page-work .work-selected__frame { position: relative; max-width: 1424px; margin-inline: auto; padding-top: 40px; overflow: hidden; }
.page-work .work-selected__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.page-work .work-selected__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.page-work .work-selected__title { font-size: clamp(28px, 0.75vw + 23px, 34px); line-height: 1.3; }
.page-work .work-arrows { display: flex; gap: 6px; margin-right: -4px; }
.page-work .work-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.page-work .work-arrow svg { box-sizing: content-box; width: 14px; height: 14px; padding: 11px; border-radius: 50%; background: var(--color-background-button-primary); color: #fff; transition: transform .25s var(--ease-out), background-color .2s; }
.page-work .work-arrow:hover svg { background: #24272d; }
.page-work .work-arrow[data-step="-1"]:hover svg { transform: translateX(-2px); }
.page-work .work-arrow[data-step="1"]:hover svg { transform: translateX(2px); }
.page-work .work-stage { position: relative; margin-top: calc(var(--k) * 114px); touch-action: pan-y; }
.page-work .work-rail { position: relative; height: calc(var(--k) * 339px); }
.page-work .work-rail__item { position: absolute; left: 0; top: 0; transition: left .6s cubic-bezier(.65, 0, .35, 1), top .6s cubic-bezier(.65, 0, .35, 1), width .6s cubic-bezier(.65, 0, .35, 1), height .6s cubic-bezier(.65, 0, .35, 1); }
.page-work .work-rail__item.is-instant, .page-work .work-rail__item.is-instant img { transition: none; }
.page-work .work-rail__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transition: opacity .6s; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.page-work .work-rail__img--active, .page-work .work-rail__item.is-active .work-rail__img--default { opacity: 0; }
.page-work .work-rail__item.is-active .work-rail__img--active { opacity: 1; }
.page-work .work-rail__item--phone.is-active, .page-work .work-rail__item--desk.is-active { filter: drop-shadow(11px 15px 25px rgba(18, 21, 24, .08)) drop-shadow(0 4px 20px rgba(18, 21, 24, .04)); }
.page-work .work-stage__glow { position: absolute; left: var(--glow-x, 50%); top: calc(var(--k) * 177px); width: calc(var(--k) * 760px * var(--glow-s, 1)); height: calc(var(--k) * 520px * var(--glow-s, 1)); border-radius: 50%; background: var(--glow-c, transparent); opacity: calc(.06 * var(--glow-o, 1)); filter: blur(70px); transform: translate(-50%, -50%); pointer-events: none; transition: left .6s cubic-bezier(.65, 0, .35, 1), background-color .6s, opacity .6s, width .6s, height .6s; }
.page-work .work-stage__glow--floor { top: calc(var(--k) * 329px); width: calc(var(--k) * 608px * var(--glow-s, 1)); height: calc(var(--k) * 43px * var(--glow-s, 1)); opacity: calc(.1 * var(--glow-o, 1)); filter: blur(50px); }
.page-work .work-stage__floor { height: 1px; margin-top: calc(var(--k) * 79px); background: linear-gradient(90deg, rgba(98, 111, 125, 0) 0%, rgba(98, 111, 125, .2) 20%, rgba(98, 111, 125, .2) 80%, rgba(98, 111, 125, 0) 100%); }
.page-work .work-ticks { position: relative; height: 44px; }
.page-work .work-ticks li { position: absolute; top: -4px; left: calc(var(--i) / 7 * 100%); transform: translateX(-50%); }
.page-work .work-tick { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: nowrap; color: var(--color-text-on-light-tertiary); transition: color .4s; }
.page-work .work-tick::before { content: ""; width: 1px; height: 6px; background: #dddee0; transition: background .4s, transform .4s cubic-bezier(.65, 0, .35, 1); }
.page-work .work-tick:hover, .page-work .work-tick[aria-current="true"] { color: var(--color-text-on-light-primary); }
.page-work .work-tick[aria-current="true"]::before { background: var(--color-background-button-primary); transform: translateY(-2.5px); }
.page-work .work-selected__info { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 64px; margin-top: 62px; padding-top: 48px; border-top: 1px solid #e4e3df; }
.page-work .work-selected__name { flex: 0 1 425px; }
.page-work .work-selected__client { font-size: var(--text-h5); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; }
.page-work .work-selected__head { margin-top: 2px; font-size: var(--text-h5); font-weight: 300; line-height: 1.5; letter-spacing: -.01em; }
.page-work .work-selected__more { flex: 0 1 540px; }
.page-work .work-selected__desc { margin-bottom: 28px; color: var(--color-text-on-light-tertiary); }
.page-work .work-selected__info.is-highlight { animation: work-flash 1.6s var(--ease-out); }
@keyframes work-flash { 0% { opacity: .2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@media (max-width: 1023px) {
.page-work .work-selected { --k: .8; padding-block: 64px 80px; }
.page-work .work-ticks { display: flex; gap: 8px; height: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.page-work .work-ticks::-webkit-scrollbar { display: none; }
.page-work .work-ticks li { position: static; flex: none; transform: none; scroll-snap-align: center; }
}
@media (max-width: 639px) {
.page-work .work-selected { --k: .5; padding: 48px 0 64px; }
.page-work .work-selected__info { flex-direction: column; align-items: flex-start; margin-top: 32px; padding-top: 32px; }
.page-work .work-selected__name, .page-work .work-selected__more { flex-basis: auto; }
}
/* ---------- A few more things we've made (Figma Carousel 6085:4167) ---------- */
.page-work .work-stories { --story-gap: clamp(16px, 2.8vw, 40px); overflow: hidden; background: color-mix(in srgb, var(--color-background-subtle) 45%, var(--color-background-surface)); text-align: center; }
.page-work .work-stories__title { font-size: var(--text-h4); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; color: var(--color-text-on-light-secondary); }
.page-work .work-stories__title .t-serif { font-size: 1.06em; color: var(--color-text-on-light-primary); }
.page-work .work-stories__viewport { margin-top: 20px; container-type: inline-size; }
.page-work .work-stories__track { position: relative; --card-w: min(860px, 100cqw - 2 * var(--gutter)); display: flex; gap: var(--story-gap); padding: 40px calc((100cqw - var(--card-w)) / 2) 64px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; text-align: left; }
.page-work .work-stories__track::-webkit-scrollbar { display: none; }
.page-work .work-stories__track:focus-visible { outline-offset: -4px; }
.page-work .work-story { display: flex; flex: 0 0 var(--card-w); flex-direction: column; gap: 20px; padding: clamp(28px, 3.9vw, 56px); background: var(--color-background-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); scroll-snap-align: center; opacity: .45; transform: scale(.8125); transition: transform .9s cubic-bezier(.45, 0, .2, 1), opacity .9s cubic-bezier(.45, 0, .2, 1); }
.page-work .work-story.is-active { opacity: 1; transform: none; }
/* Wrapping 4→1 / 1→4 lands on a clone, then jumps to the real card: that jump must not animate */
.page-work .work-stories__track.is-instant .work-story { transition: none; }
.page-work .work-story__logo { width: var(--w); height: var(--h); max-width: 100%; margin-bottom: 20px; object-fit: contain; object-position: left center; }
.page-work .work-story__title { font-size: var(--text-h5); font-weight: 600; line-height: 1.4; letter-spacing: -.008em; color: var(--color-text-on-light-primary); }
.page-work .work-story__text { font-size: clamp(17px, 0.47vw + 15.2px, 22px); line-height: 1.5; letter-spacing: -.012em; color: var(--color-text-on-light-tertiary); }
.page-work .work-pager { display: flex; align-items: center; justify-content: center; gap: 8px; }
.page-work .work-pager__arrow { display: grid; place-items: center; width: 44px; height: 44px; color: var(--color-text-muted); transition: color .25s; }
.page-work .work-pager__arrow:hover { color: var(--color-text-on-light-primary); }
.page-work .work-pager__arrow svg { width: 20px; height: 20px; }
.page-work .work-dots { display: flex; align-items: center; }
.page-work .work-dots__dot { display: grid; place-items: center; width: 24px; height: 44px; }
.page-work .work-dots__dot::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: #d5d9e0; transition: width .5s cubic-bezier(.45, 0, .2, 1), background-color .5s; }
.page-work .work-dots__dot[aria-current="true"] { width: 40px; }
.page-work .work-dots__dot[aria-current="true"]::before { width: 24px; background: var(--color-dot-accent); }
@media (prefers-reduced-motion: reduce) {
.page-work .work-story { transition: none; }
}
/* ---------- Closing CTA (Figma Closing CTA 6085:8998) ----------
The card is the shared .closing__card; Our work's panel has no artwork, so the card starts one section-pad down. */
.page-work .closing { z-index: 1; margin-top: calc(-1 * var(--radius-section)); }
/* Our work's card rises further and faster than the shared one (team: 140px, .7s / .9s), then its title, text and
button rise 32px in turn (.3 / .4 / .55s). */
.js .page-work .closing__card[data-reveal] { transform: translateY(140px); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); }
.js .page-work .closing__card[data-reveal].is-in { transform: none; }
@media (prefers-reduced-motion: no-preference) {
.js .page-work .closing__card[data-reveal] > :is(.closing__title, .closing__text, .button) { opacity: 0; }
.js .page-work .closing__card[data-reveal].is-in > :is(.closing__title, .closing__text, .button) { animation: work-rise .8s cubic-bezier(.2, .7, .2, 1) .3s both; }
.js .page-work .closing__card[data-reveal].is-in > .closing__text { animation-delay: .4s; }
.js .page-work .closing__card[data-reveal].is-in > .button { animation-delay: .55s; }
}
/* ---------- Case studies: the team's page inside the shell ---------- */
/* No smooth page scrolling on case studies: the team's pages have none (their GSAP pins and Lenis drive the scroll).
(html is above the body class, hence :has.) */
html:has(body.page-case) { scroll-behavior: auto; }
/* The case content starts under the floating Back nav (the team's own header floated over it too). */
.page-case .work-case { margin-top: calc(-1 * var(--back-nav-h)); }
/* Same breathing room before the footer on every case study (some team layouts end flush) */
.page-case .work-case { padding-bottom: var(--section-y-sm); } /* content runs up under the floating Back bar */
/* ---------- Case studies switched off on phones (components.CASE_STUDIES_OFF_ON_PHONES) ---------- */
.work-phone-note { display: none; }
html.case-off .work-phone-note { display: block; min-height: calc(100svh - 300px); padding-block: 48px var(--section-y-sm); }
html.case-off .page-case .work-case { display: none; }
.work-phone-note__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.work-phone-note__title { font-size: var(--text-h4); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-on-light-primary); }
.work-phone-note__desc { color: var(--color-text-on-light-secondary); }
.work-phone-note__aside { padding: 16px 20px; border-radius: var(--radius-card); background: var(--color-background-subtle); color: var(--color-text-on-light-secondary); font-size: var(--text-body-2); line-height: 1.5; }
.work-phone-note__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* --- 60-insights.css --- */
/* ==========================================================================
Insights: listing (/insights) and articles (/insights/)
Figma: listing 6084:6403, articles 6084:7485 / 12350 / 17203 / 22067 / 26904.
Every selector starts with .page-insights or an .ins- block.
========================================================================== */
.page-insights {
/* Height of the sticky nav (36px inset + 93px bar) that the dark listing hero runs underneath. */
--ins-nav-h: 129px;
/* Grid lines are opaque so overlapping line segments never darken (rgba(0,0,0,.2) on the page colour). */
--ins-line: color-mix(in srgb, var(--color-text-on-light-primary) 20%, var(--color-background-page));
/* Two display sizes with no token yet (promote): stat 260px (Display/Stat Extra large), chapter number 96px mono (Display/Stat small). */
--ins-text-stat: clamp(112px, 14.6vw + 50px, 260px);
--ins-text-number: clamp(56px, 2.8vw + 56px, 96px);
--ins-raised: linear-gradient(180deg, color-mix(in srgb, var(--color-background-inverse-raised) 90%, transparent), color-mix(in srgb, var(--color-background-inverse) 90%, transparent));
}
/* Content panels slide over the (sticky) hero on wide screens. */
.ins-panel { position: relative; z-index: 1; }
.page-insights--article .ins-panel { background: var(--color-background-page); }
/* ---------- Listing hero (Figma hero-heading 6084:6406) ---------- */
.ins-hero {
position: relative;
overflow: clip;
margin-top: calc(-1 * var(--ins-nav-h));
padding: calc(var(--ins-nav-h) + clamp(56px, 8.3vw, 120px)) 0 clamp(96px, 8.3vw + 40px, 160px);
background: var(--color-background-inverse);
color: var(--color-text-on-dark-primary);
}
.ins-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.ins-hero__title { max-width: 430px; margin-top: 44px; font-size: var(--text-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.ins-hero__lede { max-width: 520px; margin-top: 36px; font-size: var(--text-h5); font-weight: 300; line-height: 1.4; letter-spacing: .01em; color: var(--color-text-on-dark-secondary); }
/* Hero copy rises in on load, block after block (team: .8em, opacity .8s / transform .9s, from .15s, +.14s per block).
A keyframe animation, not a transition, so Safari paints the starting state on the first frame. */
.js .ins-hero__inner > * { animation: ins-fade-in .8s var(--ease-out) both, ins-rise-em .9s var(--ease-out) both; animation-delay: .15s; }
.js .ins-hero__inner > :nth-child(2) { animation-delay: .29s; }
.js .ins-hero__inner > :nth-child(3) { animation-delay: .43s; }
.js .ins-hero__inner > :nth-child(4) { animation-delay: .57s; }
@keyframes ins-fade-in { from { opacity: 0; } }
@keyframes ins-rise-em { from { transform: translateY(.8em); } }
/* Dot grid backdrop and the converging threads, anchored to the right as in Figma. */
.ins-hero__art { position: absolute; inset: 0; pointer-events: none; }
.ins-hero__art::before {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(circle, #c9cbd3 1.4px, transparent 1.6px);
background-size: 26.83px 26.83px;
background-position: right 9px top 4px;
opacity: .43;
transition: opacity 1.4s var(--ease-out);
-webkit-mask-image: radial-gradient(ellipse 658px 543px at calc(100% - 463px) 61%, #000, rgba(0, 0, 0, .5) 55%, transparent);
mask-image: radial-gradient(ellipse 658px 543px at calc(100% - 463px) 61%, #000, rgba(0, 0, 0, .5) 55%, transparent);
}
.js .ins-hero__art:not(.is-played)::before { opacity: 0; }
.ins-threads { position: absolute; right: clamp(0px, calc(50% - 658px), 62px); top: calc(var(--ins-nav-h) + 185px); width: min(820px, 57vw); height: auto; overflow: visible; }
/* Threads draw in on load (site JS adds .is-played), then the insight keeps a quiet pulse. */
.js .ins-threads__lines { clip-path: inset(-4px 100% -4px 0); }
.js .ins-threads__nodes circle, .js .ins-threads__ghosts circle, .js .ins-threads__core, .js .ins-threads__halo { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.js .ins-threads__curves path, .js .ins-threads__out { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ins-threads__pill { opacity: 0; transform: translateX(-14px); }
.ins-threads.is-played .ins-threads__lines { clip-path: inset(-4px 0 -4px 0); transition: clip-path 1s var(--ease-standard) .2s; }
.ins-threads.is-played .ins-threads__nodes circle,
.ins-threads.is-played .ins-threads__ghosts circle { opacity: 1; transform: none; transition: opacity .4s var(--ease-out), transform .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(.45s + var(--i) * 90ms); }
.ins-threads.is-played .ins-threads__curves path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease-standard); transition-delay: calc(1.1s + var(--i) * 80ms); }
.ins-threads.is-played .ins-threads__out { stroke-dashoffset: 0; transition: stroke-dashoffset .35s linear 2.15s; }
.ins-threads.is-played .ins-threads__core,
.ins-threads.is-played .ins-threads__halo { opacity: 1; transform: none; transition: opacity .3s ease 1.95s, transform .6s cubic-bezier(.34, 1.56, .64, 1) 1.95s; }
.ins-threads.is-played .ins-threads__pill { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) 2.2s, transform .7s var(--ease-out) 2.2s; }
.ins-threads__pill rect { filter: drop-shadow(0 0 7px rgba(150, 147, 255, .5)); }
.ins-threads.is-looping .ins-threads__halo { animation: ins-halo 2.8s var(--ease-standard) infinite; }
.ins-threads.is-looping .ins-threads__pill rect { animation: ins-pill-glow 2.8s ease-in-out infinite; }
@keyframes ins-pill-glow { 50% { filter: drop-shadow(0 0 11px rgba(150, 147, 255, .65)); } }
@keyframes ins-halo { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .55; } }
/* ---------- Listing: "Trends we keep seeing" (Figma article-header 6084:6436) ---------- */
.ins-list { margin-top: calc(-1 * var(--radius-edge)); padding-top: clamp(80px, 10.3vw, 148px); background: var(--color-background-page); border-radius: var(--radius-edge) var(--radius-edge) 0 0; overflow: clip; }
.ins-list__title { padding-inline: var(--gutter); font-size: var(--text-h4); font-weight: 300; line-height: 1.36; text-align: center; color: var(--color-text-on-light-secondary); }
.ins-list__title em { color: var(--color-text-on-light-primary); }
/* Grid lines (as the team's stack-perspective): row lines run to the page edges and fade out over the outer 10%;
column lines sit on the column edges (cards are at most 394px, centred, so the right edge line follows the last
column, not the page margin) and overshoot each row by 70px. */
.ins-grid-bleed {
padding-block: 70px 30px; margin-top: 24px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - 30px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - 30px), transparent);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.ins-grid { --ins-cols: 3; position: relative; display: grid; grid-template-columns: repeat(var(--ins-cols), minmax(0, 394px)); justify-content: center; padding-inline: var(--gutter); }
.ins-grid::before, .ins-grid::after, .ins-grid__cell::before, .ins-grid__cell::after { content: ""; position: absolute; background: var(--ins-line); pointer-events: none; }
.ins-grid::before { top: -70px; bottom: -70px; right: max(var(--gutter), calc(50% - var(--ins-cols) * 197px)); width: 1px; } /* right edge of the last column */
.ins-grid::after { left: -100vw; right: -100vw; bottom: 0; height: 1px; } /* bottom edge */
.ins-grid__cell { position: relative; display: flex; min-width: 0; }
.ins-grid__cell::before { left: -100vw; right: -100vw; top: 0; height: 1px; } /* row line */
.ins-grid__cell::after { left: 0; top: -70px; bottom: -70px; width: 1px; } /* column line */
.js .ins-grid-bleed .ins-grid::before, .js .ins-grid-bleed .ins-grid__cell::after { clip-path: inset(0 0 100% 0); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1); }
.js .ins-grid-bleed .ins-grid::after, .js .ins-grid-bleed .ins-grid__cell::before { clip-path: inset(0 50%); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1); }
.ins-grid-bleed.is-in .ins-grid::before, .ins-grid-bleed.is-in .ins-grid::after,
.ins-grid-bleed.is-in .ins-grid__cell::before, .ins-grid-bleed.is-in .ins-grid__cell::after { clip-path: inset(0); }
/* ---------- Insight card (Figma card-01..05) ---------- */
.ins-card { display: flex; flex-direction: column; width: 100%; padding-top: 35px; }
.ins-card__number { display: flex; align-items: baseline; gap: 11px; padding-inline: 35px; font-family: var(--font-mono); line-height: 1.3; white-space: nowrap; }
.ins-card__index { font-weight: 600; font-size: 20px; letter-spacing: .06em; color: var(--color-text-on-light-link); }
.ins-card__topic { font-size: 14px; text-transform: uppercase; color: var(--color-text-on-light-secondary); white-space: normal; }
.ins-card__media { flex: 1 0 auto; display: flex; justify-content: center; align-items: center; margin-top: 8px; padding-inline: 14px; } /* fills spare height so every title in a row starts on one line */
.ins-card__art { width: 100%; max-width: 364px; height: auto; overflow: hidden; }
.ins-card__copy { display: flex; flex-direction: column; gap: 16px; min-height: 175px; padding: 24px 32px 32px; }
.ins-card__title { font-size: var(--text-body); font-weight: 700; line-height: 1.6; color: var(--color-text-on-light-primary); }
.ins-card__text { font-size: var(--text-body); line-height: 1.45; color: var(--color-text-on-light-tertiary); }
.ins-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding: 20px 32px; border-top: 1px solid var(--color-border); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-light-primary); }
.ins-card__go { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--color-background-subtle); transition: background-color .25s ease; }
.ins-card__go .ins-arrow { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
/* Hover disc #dfe1e4 (team): the subtle background darkened by 5% of the text colour, no token of its own. */
.ins-card:hover .ins-card__go, .ins-card:focus-visible .ins-card__go { background: color-mix(in srgb, var(--color-text-on-light-primary) 5%, var(--color-background-subtle)); }
.ins-card:hover .ins-arrow, .ins-card:focus-visible .ins-arrow { transform: translateX(1px); }
.ins-card:focus-visible { outline-offset: -4px; }
/* Cards appear in number order and their illustrations play once on entry (.is-in from the numbered-order reveal,
[data-reveal-seq] in 00-core.js); the key element lifts on hover/focus. */
.ins-card__art g { transform-box: view-box; transform-origin: 50% 50%; }
.ins-card__art [class*="ins-ill__"] { transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(250ms + var(--s, 0) * 110ms); }
.ins-card__art .ins-ill__grid { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: 0s; }
.ins-card__art .ins-ill__hero { transition: opacity .35s ease 1.05s, transform .9s cubic-bezier(.34, 1.4, .64, 1) 1.05s; }
.js .ins-card:not(.is-in) [class*="ins-ill__"] { opacity: 0; transform: translateY(-8px); }
.js .ins-card:not(.is-in) .ins-ill__grid { transform: scale(.94); }
.js .ins-card:not(.is-in) .ins-ill__base { transform: none; }
.js .ins-card:not(.is-in) .ins-ill__hero { transform: translateY(-40px); }
.js .ins-card:not(.is-in) .ins-card__art--fair .ins-ill__hero { transform: translateY(24px); }
.js .ins-card:not(.is-in) .ins-ill__bar { transform: translateY(24px); }
.js .ins-card:not(.is-in) .ins-ill__layer-1 { transform: translateY(-34px); }
.js .ins-card:not(.is-in) .ins-ill__layer-2 { transform: none; }
.js .ins-card:not(.is-in) .ins-ill__layer-3 { transform: translateY(34px); }
.js .ins-card:not(.is-in) .ins-ill__art-operating { transform: translateY(22px); }
.js .ins-card:not(.is-in) .ins-ill__art-onboarding { transform: translate(-26px, -15px); }
/* 02 Fair: the marked bar rises with the others (no drop); the trend line wipes in once the bars stand */
.ins-card__art--fair .ins-ill__hero { transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(250ms + var(--s, 0) * 110ms); }
.ins-card__art--fair .ins-ill__line { clip-path: inset(-4px); transition: opacity .3s ease 1.15s, clip-path .9s var(--ease-standard) 1.15s; }
.js .ins-card:not(.is-in) .ins-ill__line { transform: none; clip-path: inset(-4px 100% -4px -4px); }
/* 03 Strategy: three layers separate out of one stack, the bottom layer first */
.ins-card__art [class*="ins-ill__layer-"] { transition-duration: .6s, 1.1s; }
.ins-card__art .ins-ill__layer-1 { transition-delay: 300ms; }
.ins-card__art .ins-ill__layer-2 { transition-delay: 200ms; }
.ins-card__art .ins-ill__layer-3 { transition-delay: 100ms; }
/* While a card is on screen (.is-live, 60-insights.js) its key element breathes; strategy holds still */
.ins-card.is-in.is-live :is(.ins-card__art--promises, .ins-card__art--fair) .ins-ill__hero { animation: ins-pulse 3.4s ease-in-out 1.8s infinite; }
.ins-card.is-in.is-live :is(.ins-ill__art-operating, .ins-ill__art-onboarding) { animation: ins-pulse-soft 3.4s ease-in-out 1.8s infinite; }
@keyframes ins-pulse { 50% { opacity: .7; } }
@keyframes ins-pulse-soft { 50% { opacity: .82; } }
.ins-card.is-in:is(:hover, :focus-visible) [class*="ins-ill__"] { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.ins-card.is-in:is(:hover, :focus-visible) .ins-ill__hero { transform: translateY(-8px); }
.ins-card.is-in:is(:hover, :focus-visible) .ins-ill__layer-3 { transform: translateY(-10px); }
.ins-card.is-in:is(:hover, :focus-visible) .ins-ill__layer-1 { transform: translateY(6px); }
.ins-card.is-in:is(:hover, :focus-visible) :is(.ins-ill__art-operating, .ins-ill__art-onboarding) { transform: translateY(-6px); }
/* ---------- Listing closing CTA "Make it real." (Figma section-cta 6084:6780) ---------- */
.ins-cta { padding: clamp(80px, 10.3vw, 148px) 24px 0; background: var(--color-background-page); }
.ins-cta__card { position: relative; overflow: clip; padding: clamp(80px, 10.3vw, 149px) var(--gutter) clamp(120px, 12vw, 185px); background: var(--color-background-subtle); border-radius: var(--radius-section) var(--radius-section) 0 0; }
.ins-cta__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 36px; max-width: 586px; margin-inline: auto; text-align: center; }
.ins-cta__title { font-size: var(--text-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-on-light-secondary); }
.ins-cta__title em { color: var(--color-text-on-light-primary); }
.ins-cta__lede { max-width: 480px; font-size: var(--text-h6); line-height: 1.4; color: var(--color-text-on-light-secondary); }
.ins-cta__text { color: var(--color-text-on-light-secondary); }
.ins-cta__copy .ins-action { margin-top: 28px; }
.ins-cta__dots { position: absolute; left: 50%; bottom: 0; width: clamp(900px, 121vw, 1745px); max-width: none; height: auto; transform: translateX(-50%); }
/* Dots pop in from the middle out: each circle's --d (60-insights.js) grows with its distance from the centre */
.js .ins-cta__dots circle { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease-out), transform .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0ms); }
.ins-cta__dots.is-in circle { opacity: 1; transform: none; }
/* ---------- Article hero (Figma hero-heading 6084:7489) ---------- */
.ins-article-hero { padding-block: clamp(48px, 8.3vw, 120px); background: var(--color-background-page); }
.ins-article-hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.ins-article-hero__title { max-width: 720px; margin-top: 40px; font-size: var(--text-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.ins-article-hero__lede { max-width: 900px; margin-top: 36px; font-size: var(--text-h5); font-weight: 300; line-height: 1.4; letter-spacing: .01em; color: var(--color-text-on-light-secondary); }
.ins-article-hero__lede strong { font-weight: 600; color: var(--color-text-on-light-primary); }
/* Entrance (all five articles): tag, title and lede rise 32px and fade in, .12s apart. A keyframe animation so Safari
shows the starting state from the first frame. */
.js .ins-article-hero__inner > * { animation: ins-hero-in 1s var(--ease-rise) both; }
.js .ins-article-hero__inner > :nth-child(2) { animation-delay: .12s; }
.js .ins-article-hero__inner > :nth-child(3) { animation-delay: .24s; }
@keyframes ins-hero-in { from { opacity: 0; transform: translateY(32px); } }
/* ---------- Article intro on dark (Figma article-header) ---------- */
.ins-intro { padding: clamp(96px, 11.1vw, 160px) 0 clamp(80px, 8.3vw, 120px); background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); border-radius: var(--radius-section) var(--radius-section) 0 0; }
.ins-intro__stack { display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.ins-intro__lead { max-width: 940px; font-size: var(--text-h4); font-weight: 300; line-height: 1.36; color: var(--color-text-on-dark-secondary); }
.ins-intro__lead em { color: var(--color-text-on-dark-primary); }
.ins-intro__text { max-width: 708px; font-size: var(--text-body); line-height: 1.4; color: var(--color-text-on-dark-secondary); }
.ins-intro__text--lg { max-width: 800px; font-size: var(--text-h6); color: var(--color-text-on-dark-tertiary); }
.ins-intro__text strong { font-weight: 400; color: var(--color-text-on-dark-primary); }
.ins-intro__panel { align-self: stretch; margin: clamp(40px, 7.5vw, 112px) calc(48px - var(--gutter)) calc(-1 * clamp(80px, 8.3vw, 120px)); padding: clamp(72px, 9.7vw, 140px) clamp(20px, 8.6vw, 124px) clamp(72px, 8.3vw, 120px); background: var(--ins-raised); border-radius: var(--radius-section) var(--radius-section) 0 0; }
/* Stat row: "70% of corporate transformations fail." */
.ins-stat { display: flex; align-items: center; justify-content: center; gap: 24px 48px; text-align: left; }
.ins-stat__number { font-size: var(--ins-text-stat); font-weight: 300; line-height: 1; letter-spacing: -0.06em; color: var(--color-text-on-dark-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-stat__caption { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.ins-stat__caption::before { content: ""; width: 40px; height: 3px; background: var(--color-background-alert); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; }
.js .ins-stat:not(.is-in) .ins-stat__caption::before { transform: scaleX(0); }
.ins-stat__label { font-size: var(--text-h4); font-weight: 300; line-height: 1.36; }
.ins-stat__source { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; color: var(--color-text-on-dark-tertiary); }
/* Long captions (68%) sit in a smaller size, as in Figma 6084:26918 */
.ins-stat__label--long { font-size: var(--text-h6); font-weight: 400; line-height: 1.4; }
/* Pull quote: in chapters (left) and in the dark intro (centred) */
.ins-quote { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px 0 24px; }
.ins-quote__mark { width: 44px; height: 29px; }
.page-insights .ins-quote blockquote { padding: 0; border: 0; font-family: var(--font-sans); font-style: italic; font-size: var(--text-h5); font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-on-light-primary); }
.ins-quote figcaption { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--color-text-on-light-tertiary); }
.ins-quote--center { align-items: center; gap: 24px; max-width: 640px; margin-top: 28px; text-align: center; }
.page-insights .ins-quote--center blockquote { font-size: var(--text-h4); color: var(--color-text-on-dark-primary); }
.ins-quote--center figcaption { margin-top: 16px; color: var(--color-text-on-dark-tertiary); }
/* Halftone divider: dark intro fades into the light page (Figma divider-gradient-halftone, 1440 x 539) */
/* ---------- Chapters (Figma chapters 6084:12244) ---------- */
.ins-chapters { padding-top: clamp(24px, 4vw, 64px); padding-bottom: clamp(96px, 11.1vw, 160px); }
.ins-chapter { position: relative; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 720px); gap: 32px clamp(32px, 5.5vw, 80px); padding: 48px 0 96px; }
.ins-chapter:first-child { padding-top: 0; }
/* Chapter and Sources dividers draw in from the left on entry ([data-ins-in], 60-insights.js) */
:is(.ins-chapter:not(:first-child), .ins-sources)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ins-line); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.js :is(.ins-chapter, .ins-sources):not(.is-in)::before { transform: scaleX(0); }
.ins-chapter__number { font-family: var(--font-mono); font-weight: 300; font-size: var(--ins-text-number); line-height: 1; letter-spacing: -0.04em; color: var(--color-dot-alert); }
.ins-chapter__main { display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.ins-chapter__title { font-size: var(--text-h4); font-weight: 300; line-height: 1.36; letter-spacing: -0.02em; color: var(--color-text-on-light-secondary); }
.ins-chapter__title em { color: var(--color-text-on-light-primary); }
.ins-chapter__body { max-width: 700px; }
/* Numbered steps inside .prose (Figma rows: red mono index + text) */
.page-insights .ins-steps { padding-left: 0; list-style: none; }
.page-insights .ins-steps li { display: flex; gap: 20px; margin: 0; padding-block: 8px; }
.ins-steps__n { flex-shrink: 0; width: 20px; padding-top: .25em; font-family: var(--font-mono); font-size: 14px; line-height: 1.4; color: var(--color-dot-alert); }
/* Callout line: red dot + italic (Figma row-saying-no-to) */
.ins-callout { display: flex; align-items: baseline; gap: 16px; padding-block: 16px; font-style: italic; font-size: var(--text-h5); line-height: 1.4; letter-spacing: -0.01em; color: var(--color-text-on-light-primary); }
.ins-callout::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--color-dot-alert); transform: translateY(-.15em); }
.ins-sources { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 72px; text-align: center; }
.ins-sources__label { font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-light-primary); }
.ins-sources__list { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: .06em; color: var(--color-text-on-light-tertiary); }
/* ---------- Article closing: CTA over the article's art + related reads (Figma closing-cta-footer) ---------- */
/* Related reads (one component on all five articles; Figma "Nav card / Indexed row" 6084:6392) */
.ins-related { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(48px, 6.7vw, 96px); padding: clamp(80px, 9.7vw, 140px) var(--gutter) clamp(96px, 11.1vw, 160px); border: 1px solid var(--color-border-on-dark); border-bottom: 0; border-radius: var(--radius-section) var(--radius-section) 0 0; }
.ins-related__title { font-size: var(--text-h3); font-weight: 300; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-on-dark-secondary); }
.ins-related__title em { color: var(--color-text-on-dark-primary); }
/* ---------- Heroes hold while the content scrolls over them (coded-version behaviour), at every width ----------
The listing hero runs under the nav from the top of the page; a hero taller than the window scrolls until its
bottom shows, then holds (--ins-hero-top, set by 60-insights.js). The article hero holds where it starts, right
under the Back nav, so it never travels before the content covers it. */
.ins-hero { position: sticky; top: var(--ins-hero-top, 0px); }
.ins-article-hero { position: sticky; top: var(--back-nav-h); }
/* ---------- Tablet (≤1023): nav collapses; 3 columns → 2 ---------- */
@media (max-width: 1023px) {
.page-insights { --ins-nav-h: 86px; }
.ins-threads { position: relative; right: auto; top: auto; display: block; width: 100%; margin: 24px 0 -24px auto; }
.ins-hero__art { position: static; }
.ins-hero__art::before { -webkit-mask-image: radial-gradient(ellipse 100% 40% at 70% 88%, #000, transparent); mask-image: radial-gradient(ellipse 100% 40% at 70% 88%, #000, transparent); }
.ins-hero { display: flex; flex-direction: column-reverse; }
.ins-grid { --ins-cols: 2; }
.ins-chapter { grid-template-columns: minmax(0, 1fr); padding-bottom: 72px; }
}
/* ---------- Small tablets and phones (≤767): spacing tweaks ---------- */
@media (max-width: 767px) {
.ins-article-hero__title br { display: none; }
.ins-stat { flex-direction: column; text-align: center; }
.ins-stat__caption { align-items: center; }
.ins-intro__panel { margin-inline: calc(12px - var(--gutter)); }
}
/* ---------- Phones (≤639): one column ---------- */
@media (max-width: 639px) {
.ins-grid { --ins-cols: 1; grid-template-columns: minmax(0, 1fr); }
.ins-grid::before { right: var(--gutter); }
.ins-grid__cell--blank { display: none; }
.ins-card { padding-top: 28px; }
.ins-card__number { padding-inline: 24px; }
.ins-card__copy { min-height: 0; padding: 20px 24px 28px; }
.ins-card__foot { padding-inline: 24px; }
.ins-threads { width: 130%; margin-right: 0; margin-left: -30%; }
.ins-chapter { padding: 40px 0 56px; }
.ins-cta { padding-inline: 12px; }
}
/* Related reads sit on dark below the shared closing CTA */
.ins-after { background: var(--color-background-inverse); color: var(--color-text-on-dark-primary); }
/* --- 70-about.css --- */
/* ==========================================================================
Who we are (/who-we-are). Figma 6018:936.
Every selector is scoped to .page-about or an .about- block.
========================================================================== */
.page-about {
--about-chip: color-mix(in srgb, var(--color-background-inverse) 5%, transparent);
--about-line: color-mix(in srgb, var(--color-text-on-light-primary) 10%, var(--color-background-page));
--about-dot: color-mix(in srgb, var(--color-text-muted) 45%, transparent);
}
/* ---------- Hero (6018:938) ---------- */
.about-hero { position: relative; overflow: hidden; }
.about-hero__inner { position: relative; z-index: 1; }
.about-hero__copy { max-width: min(720px, 58vw); gap: 28px; }
.about-hero__lede { max-width: 720px; font-size: var(--text-h5); font-weight: 300; line-height: 1.4; letter-spacing: .01em; }
.about-hero__lede strong { font-weight: 500; }
/* Dot field + landed mark sit to the right of the copy and bleed off the page edge, as in Figma. */
.about-hero__art { position: absolute; top: 25px; right: -4px; width: 822px; height: 470px; pointer-events: none; }
.about-hero__dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--about-dot) 1.5px, transparent 1.7px); background-size: 14.1px 14.1px; -webkit-mask-image: radial-gradient(ellipse 55% 60% at 60% 55%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 55% 60% at 60% 55%, #000 25%, transparent 100%); }
.about-mark { position: absolute; left: 122px; top: 70px; width: 700px; height: 400px; max-width: none; overflow: visible; }
.about-mark * { transform-box: fill-box; transform-origin: 50% 50%; }
/* Copy entrance (team's coded version): tag, title and lede rise in turn, each by its own distance. Only the hidden
state is restyled (:not(.is-in)); the revealed state is the shared one. */
.js .about-hero__copy > [data-reveal] { transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .about-hero__copy > .tag[data-reveal]:not(.is-in) { transform: translateY(14px); }
.js .about-hero__title[data-reveal]:not(.is-in) { transform: translateY(56px); }
.js .about-hero__title[data-reveal] { transition-delay: 140ms; }
.js .about-hero__lede[data-reveal]:not(.is-in) { transform: translateY(20px); }
.js .about-hero__lede[data-reveal] { transition-delay: 280ms; }
/* The drop (plays once on load), then the glow breathes. */
.about-hero__dots { animation: about-fade .6s var(--ease-out) both; }
.about-mark__horizon { animation: about-horizon .7s var(--ease-standard) .15s both; }
.about-mark__ball { animation: about-drop .9s cubic-bezier(.55, 0, 1, .45) .6s both; }
.about-mark__trail { animation: about-fade .25s var(--ease-out) both; }
.about-mark__trail--4 { animation-delay: .6s; }
.about-mark__trail--3 { animation-delay: .98s; }
.about-mark__trail--2 { animation-delay: 1.18s; }
.about-mark__trail--1 { animation-delay: 1.38s; }
.about-mark__ground { animation: about-ground .45s var(--ease-out) 1.5s both; }
.about-mark__glow { animation: about-glow .5s var(--ease-out) 1.5s both, about-breathe 2.8s ease-in-out 2s infinite; }
@keyframes about-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes about-horizon { from { transform: scaleX(0); } to { transform: none; } }
@keyframes about-drop { from { opacity: 0; transform: translateY(-125px); } 15% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes about-ground { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes about-glow { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes about-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.1); } }
/* ---------- Our story (6018:964) ---------- */
.about-story { position: relative; padding-top: clamp(96px, 11.1vw, 160px); padding-bottom: 0; border-radius: var(--radius-edge) var(--radius-edge) 0 0; background: var(--color-background-inverse) url("/assets/site/about/story-grid.webp") top center / max(100%, 1100px) auto no-repeat; overflow: hidden; }
.about-story__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(56px, 5.5vw, 79px); text-align: center; }
.about-story__block { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 720px; }
.about-story__title { letter-spacing: -.02em; }
.about-story__title .t-serif { font-size: 1.06em; }
.about-story__text { max-width: 715px; font-size: var(--text-body); line-height: 1.4; color: var(--color-text-on-dark-secondary); }
/* Each block (in order, [data-reveal-seq]): heading rises 28px, its paragraph 14px, 140ms later. */
.js .about-story__block > * { opacity: 0; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .about-story__title { transform: translateY(28px); }
.js .about-story__text { transform: translateY(14px); }
.js .about-story__block.is-in > * { opacity: 1; transform: none; }
.js .about-story__block.is-in > .about-story__text { transition-delay: 140ms; }
/* Proof card: raised panel with a coral glow, a 72px dot grid and the coral scan line between the words. */
.about-proof { position: relative; display: grid; place-items: center; min-height: clamp(320px, 33vw, 474px); margin: clamp(80px, 10.2vw, 147px) max(12px, 3.33vw) 0; padding: 48px var(--gutter); border-radius: var(--radius-section) var(--radius-section) 0 0; overflow: hidden;
background:
radial-gradient(ellipse 30% 55% at 28% 50%, color-mix(in srgb, var(--color-dot-alert) 16%, transparent), transparent 100%),
linear-gradient(to bottom, var(--color-background-inverse-raised), var(--color-background-inverse)); }
.about-proof::before { content: ""; position: absolute; inset: 22px; background-image: radial-gradient(circle, color-mix(in srgb, var(--color-text-muted) 30%, transparent) 4px, transparent 4.5px); background-size: 72px 72px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 30% 20% at 50% 48%, transparent 60%, #000 100%); mask-image: radial-gradient(ellipse 30% 20% at 50% 48%, transparent 60%, #000 100%); pointer-events: none; }
.about-proof::after { content: ""; position: absolute; inset: 22px; background-image: radial-gradient(circle, color-mix(in srgb, var(--color-dot-alert) 35%, transparent) 4px, transparent 4.5px); background-size: 72px 72px; background-position: center; -webkit-mask-image: radial-gradient(ellipse 22% 40% at 25% 45%, #000, transparent 100%); mask-image: radial-gradient(ellipse 22% 40% at 25% 45%, #000, transparent 100%); pointer-events: none; }
/* The dot grids fade in once the proof line is revealed. */
.js .about-proof::before, .js .about-proof::after { opacity: 0; transition: opacity 1.4s ease .15s; }
.js .about-proof:has(.about-proof__text.is-in)::before, .js .about-proof:has(.about-proof__text.is-in)::after { opacity: 1; }
.about-proof__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--text-h4); font-weight: 300; line-height: 1.18; letter-spacing: -.01em; text-align: center; color: var(--color-text-on-dark-primary); }
.about-proof__line { display: block; }
/* Proof lines rise 28px, line by line (90ms apart). The text block itself stays put. */
.js .about-proof__text[data-reveal] { opacity: 1; transform: none; }
.js .about-proof__line { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .about-proof__text.is-in .about-proof__line { opacity: 1; transform: none; }
.js .about-proof__text.is-in .about-proof__line + .about-proof__line { transition-delay: 90ms; }
.about-proof__dim { color: color-mix(in srgb, var(--color-text-on-dark-primary) 55%, transparent); }
.about-proof__lit { text-shadow: 0 0 32px color-mix(in srgb, var(--color-dot-alert) 55%, transparent); }
.about-proof__scan { display: inline-block; width: 2px; height: 1.3em; margin: 0 .5em -.3em; background: var(--color-dot-alert); border-radius: 2px; box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-dot-alert) 60%, transparent); }
/* ---------- Gradient halftone (6018:13444): dark story fades into the light people section ---------- */
/* ---------- People (6172:3847) ---------- */
.about-people { --cols: 3; padding-top: clamp(64px, 6.9vw, 100px); overflow: hidden; }
.about-people__head { gap: 16px; }
.about-people__title { color: var(--color-text-on-light-secondary); letter-spacing: -.01em; }
.about-people__title .t-serif { font-weight: 600; color: var(--color-text-on-light-primary); }
.about-people__intro { color: var(--color-text-muted); }
/* Heading rises 28px, the intro 14px, 140ms later; the header block itself stays put. */
.js .about-people__head[data-reveal] { opacity: 1; transform: none; }
.js .about-people__head > * { opacity: 0; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js .about-people__title { transform: translateY(28px); }
.js .about-people__intro { transform: translateY(14px); }
.js .about-people__head.is-in > * { opacity: 1; transform: none; }
.js .about-people__head.is-in > .about-people__intro { transition-delay: 140ms; }
.about-people__grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.about-person { position: relative; display: flex; flex-direction: column; gap: 36px; padding: 40px; min-height: 290px; }
/* Grid lines (Figma "Lines (fading)"; motion from the team's coded version, "cell trace"): each card draws its own
cell as it arrives: the top edge left to right, then the right edge downwards. Cards in the first column also draw
the grid's left edge and a stub out to the page edge; the last column a stub to the right page edge; the first row
64px stubs above the grid; the last cards the bottom edge, and the last row 64px stubs below. Stubs fade out.
Plays once (keyed off the card's .is-in from [data-reveal-seq]). Which card is first/last is set per column count
further down. */
.about-person__trace { position: absolute; inset: 0; pointer-events: none; }
.about-person__trace::before, .about-person__trace::after, .about-person__edge::before, .about-person__edge::after {
content: ""; position: absolute; display: none; background: var(--about-line); transition: transform .9s var(--ease-out); }
/* horizontal pieces */
.about-person__trace::before, .about-person__edge--side::after, .about-person__edge--end::before, .about-person__edge--end::after,
.about-person__edge--base::before, .about-person__edge--base::after { height: 1px; transform-origin: 0 0; }
/* vertical pieces */
.about-person__trace::after, .about-person__edge--side::before, .about-person__edge--cap::before, .about-person__edge--cap::after,
.about-person__edge--foot::before, .about-person__edge--foot::after { width: 1px; transform-origin: 0 0; }
.js .about-person__trace::before, .js .about-person__edge--side::after, .js .about-person__edge--end::before, .js .about-person__edge--end::after,
.js .about-person__edge--base::before, .js .about-person__edge--base::after { transform: scaleX(0); }
.js .about-person__trace::after, .js .about-person__edge--side::before, .js .about-person__edge--cap::before, .js .about-person__edge--cap::after,
.js .about-person__edge--foot::before, .js .about-person__edge--foot::after { transform: scaleY(0); }
.about-person__trace::before { display: block; left: 0; right: 0; top: 0; } /* top edge */
.about-person__trace::after { display: block; left: 100%; top: 0; bottom: -1px; } /* right edge */
.about-person__edge--side::before { left: 0; top: 0; bottom: -1px; } /* left edge of the grid */
.about-person__edge--side::after { right: 100%; top: 0; width: var(--gutter); transform-origin: 100% 0; background: linear-gradient(to left, var(--about-line), transparent); } /* left stub */
.about-person__edge--cap::before, .about-person__edge--cap::after { bottom: 100%; height: 64px; transform-origin: 0 100%; background: linear-gradient(to top, var(--about-line), transparent); }
.about-person__edge--cap::before { left: 0; } /* stub above the left edge */
.about-person__edge--cap::after { left: 100%; } /* stub above the right edge */
.about-person__edge--end::before { left: 100%; top: 0; width: var(--gutter); background: linear-gradient(to right, var(--about-line), transparent); } /* right stub */
.about-person__edge--end::after { left: 0; right: 0; top: 100%; } /* bottom edge */
.about-person__edge--foot::before, .about-person__edge--foot::after { top: 100%; height: 64px; background: linear-gradient(to bottom, var(--about-line), transparent); }
.about-person__edge--foot::before { left: 0; } /* stub below the left edge */
.about-person__edge--foot::after { left: 100%; } /* stub below the right edge */
.about-person__edge--base::before { right: 100%; top: 100%; width: var(--gutter); transform-origin: 100% 0; background: linear-gradient(to left, var(--about-line), transparent); } /* bottom-left stub */
.about-person__edge--base::after { left: 100%; top: 100%; width: var(--gutter); background: linear-gradient(to right, var(--about-line), transparent); } /* bottom-right stub */
/* Timing after the card's reveal: top edges and outer stubs +150ms, side edges +645ms, right stub +600ms,
bottom edge and stubs below +1095ms, bottom-right stub +1320ms. */
.about-person.is-in .about-person__trace::before, .about-person.is-in .about-person__trace::after,
.about-person.is-in .about-person__edge::before, .about-person.is-in .about-person__edge::after { transform: none; }
.about-person__trace::before, .about-person__edge--side::after, .about-person__edge--cap::before, .about-person__edge--cap::after { transition-delay: 150ms; }
.about-person__trace::after, .about-person__edge--side::before { transition-delay: 645ms; }
.about-person__edge--end::before { transition-delay: 600ms; }
.about-person__edge--end::after, .about-person__edge--foot::before, .about-person__edge--foot::after, .about-person__edge--base::before { transition-delay: 1095ms; }
.about-person__edge--base::after { transition-delay: 1320ms; }
/* Which cards draw the outer pieces depends on the column count. */
@media (min-width: 1024px) {
.about-person:nth-child(3n+1) .about-person__edge--side::before, .about-person:nth-child(3n+1) .about-person__edge--side::after,
.about-person:nth-child(3n) .about-person__edge--end::before,
.about-person:nth-child(-n+3) .about-person__edge--cap::after, .about-person:first-child .about-person__edge--cap::before,
.about-person:nth-last-child(-n+3) .about-person__edge--end::after,
.about-person:nth-child(3n+1):nth-last-child(-n+3) .about-person__edge--foot::after, .about-person:nth-child(3n+1):nth-last-child(-n+3) ~ * .about-person__edge--foot::after,
.about-person:nth-child(3n+1):nth-last-child(-n+3) .about-person__edge--foot::before, .about-person:nth-child(3n+1):nth-last-child(-n+3) .about-person__edge--base::before,
.about-person:nth-child(3n):nth-last-child(-n+3) .about-person__edge--base::after { display: block; }
}
/* Dot texture with two coral spots per card (Figma "Coral spot": coral at the centre melting into grey dots).
Spot centres come from --ax/--ay/--bx/--by. Grey dots on .about-person__dots, coral dots on ::after. */
.about-person__dots, .about-person::after { position: absolute; inset: 16px; pointer-events: none; background-size: 15px 15px; background-position: 4px 4px; }
.about-person__dots { z-index: 0; background-image: radial-gradient(circle, var(--about-dot) 1.4px, transparent 1.6px);
-webkit-mask-image: radial-gradient(circle 95px at calc(var(--ax) - 16px) calc(var(--ay) - 16px), rgba(0,0,0,.6), transparent), radial-gradient(circle 95px at calc(var(--bx) - 16px) calc(var(--by) - 16px), rgba(0,0,0,.6), transparent);
mask-image: radial-gradient(circle 95px at calc(var(--ax) - 16px) calc(var(--ay) - 16px), rgba(0,0,0,.6), transparent), radial-gradient(circle 95px at calc(var(--bx) - 16px) calc(var(--by) - 16px), rgba(0,0,0,.6), transparent); }
.about-person::after { content: ""; background-image: radial-gradient(circle, var(--color-dot-alert) 1.4px, transparent 1.6px);
-webkit-mask-image: radial-gradient(circle 40px at calc(var(--ax) - 16px) calc(var(--ay) - 16px), rgba(0,0,0,.5), transparent), radial-gradient(circle 32px at calc(var(--bx) - 16px) calc(var(--by) - 16px), rgba(0,0,0,.35), transparent);
mask-image: radial-gradient(circle 40px at calc(var(--ax) - 16px) calc(var(--ay) - 16px), rgba(0,0,0,.5), transparent), radial-gradient(circle 32px at calc(var(--bx) - 16px) calc(var(--by) - 16px), rgba(0,0,0,.35), transparent); }
.about-person__initials, .about-person__info { position: relative; z-index: 1; }
.about-person__initials { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--about-chip); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-family: var(--font-mono); font-size: 13px; line-height: 1; letter-spacing: .06em; color: var(--color-background-inverse); }
.about-person__info { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.about-person__name { font-size: var(--text-body); font-weight: 500; line-height: 24px; color: var(--color-background-inverse); }
.about-person__role { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px; border-radius: 4px; background: var(--about-chip); -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-on-light-secondary); }
.about-person__role::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--color-dot-alert); }
.about-person__desc { font-size: var(--text-body-2); line-height: 24px; color: var(--color-text-on-light-secondary); }
/* Tile entrance: cards appear in DOM order ([data-reveal-seq], standard entrance from 10-base.css), then their
contents follow each card's own reveal (team's coded version): initials +150ms, name +300, role +380, text +460;
the dot texture fades in over 1.4s. */
.js .about-person__initials, .js .about-person__name, .js .about-person__role, .js .about-person__desc { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .about-person.is-in .about-person__initials, .js .about-person.is-in .about-person__name, .js .about-person.is-in .about-person__role, .js .about-person.is-in .about-person__desc { opacity: 1; transform: none; }
.js .about-person.is-in .about-person__initials { transition-delay: 150ms; }
.js .about-person.is-in .about-person__name { transition-delay: 300ms; }
.js .about-person.is-in .about-person__role { transition-delay: 380ms; }
.js .about-person.is-in .about-person__desc { transition-delay: 460ms; }
.js .about-person__dots, .js .about-person::after { opacity: 0; transition: opacity 1.4s ease .15s; }
.js .about-person.is-in .about-person__dots, .js .about-person.is-in::after { opacity: 1; }
/* Wide screens: the hero holds right under the stuck nav bar (130px header minus the 36px inset that tucks away,
20-components.css) while the dark story slides over it, as on the team's site. .about-pin ends the hold. */
@media (min-width: 1024px) {
.about-hero { position: sticky; top: 94px; z-index: 0; }
.about-story { z-index: 1; }
}
/* ---------- Closing CTA (6018:13128) ---------- */
/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
.about-people { --cols: 2; }
/* The graphic moves under the copy; the ball stays centred. */
.about-hero__inner { padding-bottom: 240px; }
.about-hero__copy { max-width: 720px; }
.about-hero__art { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 280px; }
.about-hero__dots { -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 55%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 50% 60% at 50% 55%, #000 20%, transparent 100%); }
.about-mark { left: calc(50% - 487px); top: -100px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
.about-person:nth-child(2n+1) .about-person__edge--side::before, .about-person:nth-child(2n+1) .about-person__edge--side::after,
.about-person:nth-child(2n) .about-person__edge--end::before,
.about-person:nth-child(-n+2) .about-person__edge--cap::after, .about-person:first-child .about-person__edge--cap::before,
.about-person:nth-last-child(-n+2) .about-person__edge--end::after,
.about-person:nth-child(2n+1):nth-last-child(-n+2) .about-person__edge--foot::after, .about-person:nth-child(2n+1):nth-last-child(-n+2) ~ * .about-person__edge--foot::after,
.about-person:nth-child(2n+1):nth-last-child(-n+2) .about-person__edge--foot::before, .about-person:nth-child(2n+1):nth-last-child(-n+2) .about-person__edge--base::before,
.about-person:nth-child(2n):nth-last-child(-n+2) .about-person__edge--base::after { display: block; }
}
@media (max-width: 767px) {
.about-proof__text { font-size: var(--text-h5); }
.about-proof__scan { margin-inline: .35em; }
.about-proof__rest { display: block; }
}
@media (max-width: 639px) {
.about-people { --cols: 1; }
.about-person .about-person__edge--side::before, .about-person .about-person__edge--side::after,
.about-person .about-person__edge--end::before,
.about-person:first-child .about-person__edge--cap::before, .about-person:first-child .about-person__edge--cap::after,
.about-person:last-child .about-person__edge--end::after,
.about-person:last-child .about-person__edge--foot::before, .about-person:last-child .about-person__edge--foot::after,
.about-person:last-child .about-person__edge--base::before, .about-person:last-child .about-person__edge--base::after { display: block; }
.about-person { padding: 32px 24px; gap: 28px; min-height: 0; }
}
/* Reduced motion: everything is in place at once (no delays either). */
@media (prefers-reduced-motion: reduce) {
.page-about *, .page-about *::before, .page-about *::after { transition-delay: 0s !important; }
}
/* --- 80-contact.css --- */
/* ==========================================================================
Contact (/contact). Figma 6018:483 (Mave open) / 6018:610 (Mave closed).
Every selector is scoped to .page-contact or a .contact- block.
========================================================================== */
/* The dark hero runs up behind the floating nav, as in Figma (nav = 36px inset + 94px bar). */
.page-contact { --nav-overlap: 130px; }
/* ---------- Hero (6018:485) ---------- */
.contact-hero { position: relative; overflow: hidden; padding-top: calc(var(--nav-overlap) + clamp(48px, 6.7vw, 96px)); padding-bottom: clamp(56px, 6.7vw, 96px);
background:
radial-gradient(ellipse 380px 520px at 0% 52%, color-mix(in srgb, var(--color-text-on-dark-primary) 13%, transparent), transparent 100%),
var(--color-background-inverse); }
.contact-hero__inner { grid-template-columns: minmax(0, 1fr) 484px; align-items: start; gap: clamp(32px, 5vw, 80px); }
.contact-hero__copy { gap: 0; }
.contact-hero__lede { margin-top: 36px; color: var(--color-text-on-dark-secondary); }
/* Load entrance (team's coded version): tag, each heading word and the lede rise 40px in turn. The words rise from
under the heading's clip edge; the padding (offset by the negative margin) keeps descenders and the italic
overhang inside the clip. */
.contact-hero__title { overflow: clip; padding: .1em 0 .18em; margin-top: calc(44px - .1em); margin-bottom: -.18em; }
.contact-hero__word { display: inline-block; }
.contact-hero__tag, .contact-hero__word, .contact-hero__lede { animation: contact-rise .9s var(--ease-out) both; }
.contact-hero__tag { animation-delay: .1s; }
.contact-hero__word:nth-child(1) { animation-delay: .22s; }
.contact-hero__word:nth-child(2) { animation-delay: .32s; }
.contact-hero__lede { animation-delay: .46s; }
@keyframes contact-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* Mave panel (6018:495): 484 x 704, 12px radius, "Let's Talk" top bar. In embedded mode the Stubber webchat draws
only the messages and the input bar (no header), so the panel keeps Figma's top bar and frame and the widget
fills the body. The two greys are the widget's own surfaces (Figma uses the same values), so the frame and the
widget read as one panel. The fallback sits under the widget until it has rendered (80-contact.js). */
.page-contact { --contact-chat-surface: #f7f7f7; --contact-chat-bar: #ededed; }
.contact-chat { position: relative; display: flex; flex-direction: column; width: 100%; height: 704px; border-radius: var(--radius-nav); overflow: hidden; background: var(--contact-chat-surface); box-shadow: 8px 0 8px rgba(0, 0, 0, .15), -8px 0 8px rgba(0, 0, 0, .15), 0 -8px 8px rgba(0, 0, 0, .15); color: var(--color-text-on-light-primary); }
.contact-chat__bar { position: relative; z-index: 2; flex-shrink: 0; display: flex; align-items: center; height: 56px; padding: 0 20px; background: var(--contact-chat-bar); box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .15); font-size: 20px; font-weight: 600; line-height: 28px; color: var(--color-text-on-light-primary); }
.contact-chat__body { position: relative; flex: 1; min-height: 0; }
.contact-chat stubber-webchat { position: relative; z-index: 1; display: block; width: 100%; height: 100%; visibility: hidden; }
.contact-chat.is-ready stubber-webchat { visibility: visible; }
.contact-chat__fallback { position: absolute; inset: 0 0 56px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 32px; text-align: center; transition: opacity .3s ease; }
.contact-chat.is-ready .contact-chat__fallback { opacity: 0; visibility: hidden; }
.contact-chat__status { font-size: var(--text-body); color: var(--color-text-on-light-secondary); }
.contact-chat__note { font-size: var(--text-body-2); color: var(--color-text-on-light-tertiary); }
.contact-chat__note a { color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- FAQ split accordion (6018:525) ---------- */
.contact-faq { padding-bottom: clamp(80px, 11.1vw, 160px); }
.contact-faq__split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: start; }
.contact-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact-faq__title { color: var(--color-text-on-light-secondary); }
.contact-faq__title .t-serif { font-size: 1.06em; color: var(--color-text-on-light-primary); }
.contact-faq__list a { color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }
/* Open / close motion (team's coded version). 80-contact.js animates the answer's height and sets .is-shut while an
item is open but drawn closed (the frame before it opens, and while it closes). Without JS, [open] alone applies. */
.page-contact .accordion summary::after { content: none; }
.page-contact .accordion__num { transition: color .35s ease; }
.contact-faq__q { transition: transform .45s var(--ease-out); }
.page-contact .accordion summary:hover .contact-faq__q,
.page-contact .accordion summary:focus-visible .contact-faq__q { transform: translateX(4px); }
.contact-faq__icon { position: relative; width: 24px; height: 24px; }
.contact-faq__icon::before, .contact-faq__icon::after { content: ""; position: absolute; background: var(--color-text-on-light-primary); transition: background-color .35s ease, transform .5s var(--ease-out); }
.contact-faq__icon::before { left: 6px; top: 11.25px; width: 12px; height: 1.5px; }
.contact-faq__icon::after { left: 11.25px; top: 6px; width: 1.5px; height: 12px; }
.page-contact .accordion details[open]:not(.is-shut) .accordion__num { color: var(--color-dot-alert); }
.page-contact .accordion details[open]:not(.is-shut) .contact-faq__icon::before,
.page-contact .accordion details[open]:not(.is-shut) .contact-faq__icon::after { background: var(--color-dot-alert); }
.page-contact .accordion details[open]:not(.is-shut) .contact-faq__icon::after { transform: scaleY(0); }
.page-contact .accordion__answer > p { opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .45s var(--ease-out); }
.page-contact .accordion details[open]:not(.is-shut) .accordion__answer > p { opacity: 1; transform: none; transition-delay: .12s; }
/* ---------- Responsive ---------- */
/* Wide screens: the whole panel, input included, sits above the fold once the webinar bar has scrolled away
(team: compact header 90 + hero top padding 96 + 24px breathing room = 210px). */
@media (min-width: 1024px) {
.contact-chat { height: min(704px, calc(100vh - 210px)); height: min(704px, calc(100svh - 210px)); min-height: 420px; }
}
@media (max-width: 1023px) {
.page-contact { --nav-overlap: 86px; }
.contact-hero__inner { grid-template-columns: minmax(0, 1fr); }
.contact-chat { max-width: 640px; }
.contact-faq__split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 639px) {
.contact-hero__title { margin-top: calc(28px - .1em); }
.contact-hero__lede { margin-top: 24px; }
.contact-chat { height: min(640px, calc(100svh - 120px)); min-height: 480px; }
}
/* --- 90-legal.css --- */
/* ==========================================================================
Privacy (/privacy) and Cookies (/cookies). Not in Figma: long-form pages on .page-hero + .prose.
Every selector is scoped to .page-legal or a .legal- block.
========================================================================== */
.legal-hero { padding-bottom: clamp(32px, 4.4vw, 64px); border-bottom: 1px solid var(--color-border); }
.legal-hero__copy { max-width: 760px; margin-inline: auto; } /* one centred reading column with the text below */
.legal-hero__meta { font-family: var(--font-mono); font-size: var(--text-overline); line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-on-light-tertiary); }
.legal-hero__meta a { color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }
.legal-body { padding-top: clamp(48px, 5.5vw, 80px); }
.legal-prose { max-width: 760px; margin-inline: auto; }
.legal-prose > h2:first-child { margin-top: 0; }
/* "Manage cookie preferences" is a button (site.js reopens Cookiebot); it reads as a link in running text. */
.page-legal .legal-prose .manage-consent { display: inline; color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }
.page-legal .legal-prose .manage-consent:hover { text-decoration-thickness: 2px; }
/* Cookiebot's declaration (cd.js) injects its own markup into #cookie-declaration-wrapper.
Keep it in the page's type and let its wide tables scroll inside the column instead of the page. */
.legal-declaration { margin-top: 2em; overflow-x: auto; font-size: var(--text-body-2); line-height: 1.5; color: var(--color-text-on-light-secondary); }
.legal-declaration table { width: 100%; border-collapse: collapse; margin-block: 12px 24px; }
.legal-declaration th, .legal-declaration td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.legal-declaration th { font-weight: 600; color: var(--color-text-on-light-primary); }
.legal-declaration a { color: var(--color-text-on-light-link); text-decoration: underline; text-underline-offset: 3px; }