:root {
--bg: #09090b;
--bg-alt: #0d0d10;
--bg-nav: rgba(9, 9, 11, 0.72);
--surface: #111113;
--surface-2: #18181b;
--border: rgba(255, 255, 255, 0.06);
--border-strong: rgba(255, 255, 255, 0.12);
--rule: rgba(255, 255, 255, 0.08);
--text: #fdfdfd;
--text-muted: #a1a1aa;
--text-dim: #71717a;
/* Section titles use this in place of --text. Gradient/shimmer spans
inside (.shimmer-text) keep their own gradient because they paint via
background-clip:text + color:transparent, which isn't overridden by
this fill. */
/* --title-fill: #27272A; */
--title-fill: #A6A6A6;
--subtitle-fill: #A1A1AA;
--accent-from: #fa6c00;
--accent-to: #eb5173;
--accent: #fa6c00;
--accent-gradient: linear-gradient(90deg, var(--accent-from) 0%, var(--accent-to) 100%);
--font-sans: "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
--font-display: "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
--max-w: 90%;
--max-w-tight: 1280px;
--pad-x: 10px;
--nav-pad-x: clamp(24px, 5vw, 88px);
--pad-section: clamp(56px, 9vw, 140px);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
-webkit-font-smoothing: antialiased;
background: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-feature-settings: "ss01", "ss02", "cv11";
font-size: 15px;
line-height: 1.55;
overflow-x: clip;
text-rendering: optimizeLegibility;
}
img, svg, video {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
button {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
padding: 0;
}
::selection {
background: var(--accent-from);
color: #09090b;
}
/* Paper grain — one shared SVG noise layer, applied as a subtle overlay. */
body::before {
background-image: url("data:image/svg+xml;utf8,");
background-size: 200px 200px;
content: "";
inset: 0;
mix-blend-mode: overlay;
opacity: 0.035;
pointer-events: none;
position: fixed;
z-index: 1000;
}
.shimmer-text, .results__title-line--gradient, .services__title-line--accent, .meet-play__title-word--accent {
-webkit-background-clip: text;
animation: none !important;
background: linear-gradient(90deg, var(--accent-from) 0%, var(--accent-to) 100%);
background-clip: text;
background-size: 100% 100% !important;
color: transparent;
display: inline-block;
margin: -0.35em -0.15em -0.4em;
padding: 0.35em 0.15em 0.4em;
}
.platform-performance__title-line--accent {
-webkit-background-clip: text;
animation: none !important;
background: linear-gradient(90deg, var(--accent-from) 0%, var(--accent-to) 100%);
background-clip: text;
background-size: 100% 100% !important;
color: transparent;
display: inline-block;
margin: -0.1em;
padding: 0.2em;
}
/* Same treatment for non-gradient display text so g/p/y descenders don't
get visually clipped by the next line's content at line-height 1. */
.hero__title, .meet-play__title, .results__title, .services__title, .cta-banner__title {
padding-bottom: 0.12em;
}
.orangespan {
color: var(--accent-from);
}
/* ---------- Buttons ---------- */
.btn {
align-items: center;
border-radius: var(--radius-sm);
display: inline-flex;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
gap: 10px;
height: 40px;
justify-content: center;
letter-spacing: 0.01em;
line-height: 1;
padding: 0 20px;
position: relative;
transition: transform 160ms var(--ease), filter 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
white-space: nowrap;
}
.btn:active {
transform: translateY(1px);
}
.btn--primary {
background: var(--accent-gradient);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 24px -12px rgba(250, 108, 0, 0.45);
color: #fff;
}
.btn--primary:hover {
filter: brightness(1.08) saturate(1.05);
transform: translateY(-1px);
}
.btn--ghost {
background: transparent;
border: 1px solid var(--border-strong);
color: var(--text);
font-family: var(--font-sans);
font-weight: 500;
letter-spacing: 0.02em;
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.22);
}
/* Editorial "link", underline that tracks on hover. align-self lets it sit
left-aligned inside flex/grid parents (e.g. .results__copy); harmless
elsewhere since the property is ignored on non flex/grid children. */
.link-arrow {
align-items: center;
align-self: flex-start;
border-bottom: 1px solid var(--accent-from);
color: var(--text);
display: inline-flex;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
gap: 8px;
letter-spacing: 0.02em;
padding-bottom: 2px;
transition: color 160ms var(--ease), border-color 160ms var(--ease), gap 160ms var(--ease);
}
.link-arrow:hover {
color: var(--accent-from);
gap: 12px;
}
.link-arrow span[aria-hidden] {
font-weight: 400;
}
/* ---------- Nav ---------- */
.nav {
-webkit-backdrop-filter: saturate(140%) blur(14px);
align-items: center;
backdrop-filter: saturate(140%) blur(14px);
background: var(--bg-nav);
border-bottom: 1px solid var(--rule);
display: flex;
height: 72px;
justify-content: space-between;
padding-inline: var(--nav-pad-x);
position: sticky;
top: 0;
z-index: 50;
}
.nav__logo {
align-items: center;
display: inline-flex;
height: 42px;
}
.nav__logo img {
height: 21px;
width: auto;
}
.nav__right {
align-items: center;
display: flex;
gap: 14px;
}
.nav__links {
align-items: center;
display: flex;
gap: 36px;
list-style: none;
margin: 0;
padding: 0;
}
.nav__link {
color: #fff;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
line-height: 1;
text-decoration: none;
transition: color 160ms var(--ease);
}
.nav__link:hover {
color: var(--accent-from);
}
.nav__divider {
background: #262626;
display: inline-block;
height: 24px;
width: 1px;
}
/* Sign-in pill is the .btn .btn--ghost shape with a tighter height/gap and
a coloured "+" suffix in the trailing span. */
.nav__signin {
gap: 6px;
height: 33px;
letter-spacing: 0.01em;
padding: 0 17px;
}
.nav .btn--primary {
font-size: 13px;
height: 33px;
padding: 0 20px;
}
.nav__menu {
font-size: 13px;
font-weight: 500;
gap: 6px;
height: 40px;
letter-spacing: 0.08em;
padding: 0 16px;
text-transform: uppercase;
}
/* Desktop: hide the mobile MENU+ button. */
@media (min-width: 721px) {
.nav__menu {
display: none;
}
}
/* Mobile: hide inline links, divider, sign-in. MENU+ takes their place. */
@media (max-width: 720px) {
.nav__links, .nav__divider, .nav__signin {
display: none;
}
}
/* ---------- Eyebrows ---------- */
.eyebrow {
color: var(--text-dim);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
margin: 0;
text-transform: uppercase;
}
.eyebrow--accent {
color: var(--accent-from);
}
.eyebrow::before {
background: currentColor;
content: "";
display: inline-block;
height: 1px;
margin-bottom: 2px;
margin-right: 12px;
opacity: 0.6;
vertical-align: middle;
width: 22px;
}
/* ========================================================= */
/* HERO — editorial spread */
/* ========================================================= */
.hero {
isolation: isolate;
overflow: visible;
padding: clamp(28px, 4vw, 56px) 0 0;
position: relative;
}
.hero::before {
/* directional scrim replacing aurora — kept inside the section now that
overflow is visible, so the blur doesn't bleed into the next section. */
content: "";
position: absolute;
inset: 0 0 0 40%;
background: radial-gradient(60% 60% at 80% 10%, rgba(250, 108, 0, 0.18) 0%, rgba(250, 108, 0, 0) 60%),
radial-gradient(60% 60% at 90% 90%, rgba(235, 81, 115, 0.14) 0%, rgba(235, 81, 115, 0) 60%);
filter: blur(40px);
z-index: -1;
pointer-events: none;
}
.hero::after {
/* subtle vignette */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
pointer-events: none;
z-index: -1;
}
.hero__inner {
position: relative;
width: 95%;
max-width: 1920px;
margin: 0 auto;
padding-inline: var(--pad-x);
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(16px, 2vw, 32px);
row-gap: 0;
/* Fill the visible viewport below the sticky nav and the section's top
padding. The stats + logo strip live below the fold as a sibling. */
min-height: calc(100svh - 72px - clamp(28px, 4vw, 56px));
align-content: center;
}
.hero__inner>.eyebrow {
align-self: start;
grid-column: 1 / 7;
grid-row: 1;
margin-bottom: 12px;
}
/* The logo wordmark is demoted — design system stays but visual weight shifts. */
.hero__title {
font-family: var(--font-display);
font-weight: 900;
grid-column: 1 / 7;
grid-row: 2;
letter-spacing: -0.045em;
line-height: 0.92;
margin: 6px 0 clamp(4px, 0.6vw, 10px);
padding-top: 0.04em;
text-wrap: balance;
}
.hero__title-line {
display: block;
letter-spacing: -0.051em;
line-height: 0.92;
}
.hero__title-line--ghost {
color: var(--title-fill);
font-size: clamp(44px, 5vw, 72px);
}
.hero__title-line--gradient {
-webkit-background-clip: text;
background: linear-gradient(90deg, #fa6c00 0%, #eb5173 51.4%, #8912a0 100%);
background-clip: text;
color: transparent;
display: inline-block;
font-size: clamp(64px, 7.3vw, 105px);
margin: -0.08em -0.04em -0.18em 0;
padding: 0.08em 0.04em 0.18em 0;
}
.hero__lede {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: clamp(16px, 1.25vw, 19px);
grid-column: 1 / 7;
grid-row: 3;
line-height: 1.55;
margin: 0 0 clamp(16px, 2vw, 24px);
max-width: 48ch;
}
/* Wraps the demo-panel + prompt as a single, attached unit on the right
side of the hero. The panel sits on top, the prompt becomes its input
bar — they share borders so they read as one tool. */
.hero__panel {
grid-column: 7 / 13;
grid-row: 1 / -1;
align-self: center;
justify-self: stretch;
position: relative;
width: 95%;
/* max-width: 720px; */
margin-left: auto;
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
/* Same 3D + glare trick as the phone cards down-page. JS drives the
CSS variables on pointermove. */
transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: transform 220ms var(--ease);
will-change: transform;
}
.hero__panel::before {
background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0) 60%);
border-radius: inherit;
content: "";
inset: 0;
mix-blend-mode: overlay;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateZ(8px);
transition: opacity 280ms var(--ease);
z-index: 5;
}
.hero__panel[data-tilted="true"]::before {
opacity: 1;
}
.hero__panel-img {
border-radius: inherit;
box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.6);
display: block;
height: auto;
transform: translateZ(6px);
width: 100%;
}
/* ============================================================
Hero cables — node-editor wires from "Build with AI." → demo-panel
============================================================ */
.hero-cables {
height: 100%;
inset: 0;
overflow: visible;
pointer-events: none;
position: absolute;
width: 100%;
z-index: -3;
}
.hero-cables__path {
fill: none;
stroke: url(#hero-cable-grad);
stroke-width: 2;
stroke-linecap: round;
filter: url(#hero-cable-glow);
opacity: 0;
/* Hold invisible until 1500ms — covers the hero entrance animation
(title 140ms+900ms, panel 360ms+900ms = ~1260ms) so cables only
appear once their endpoints have settled at their final positions. */
animation: hero-cable-fade 700ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) 1500ms forwards;
}
.hero-cables__path--bot {
animation-delay: 1620ms;
}
@keyframes hero-cable-fade {
to {
opacity: 0.9;
}
}
.hero-cables__node {
animation: hero-cable-node-pop 380ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1)) 1800ms forwards;
fill: #0e0e11;
opacity: 0;
stroke: #fa6c00;
stroke-width: 2;
transform-box: fill-box;
transform-origin: center;
}
.hero-cables__node--dst {
animation-delay: 1900ms;
stroke: #eb5173;
}
@keyframes hero-cable-node-pop {
from {
opacity: 0;
transform: scale(0.4);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-cables__path, .hero-cables__node {
animation: none;
opacity: 1;
transform: none;
}
.hero-cables__path {
opacity: 0.9;
}
}
/* Hide cables on stacked layouts — title sits above panel, the spatial
metaphor breaks down. */
@media (max-width: 960px) {
.hero-cables {
display: none;
}
}
/* ============================================================
Services cables — same node-editor language as the hero, this
time wiring the section title to the showreel video. JS draws
the bezier paths from element rects; opacity is set on each
frame by the balance-driver IIFE so the cables fade in lockstep
with the reel's --reel-show dissolve.
============================================================ */
.services-cables {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Below the reel (z:3) and above the balance lines (z:1). */
z-index: 2;
overflow: visible;
/* Opacity set by JS each frame; resting value used until first paint. */
opacity: 0.9;
}
.services-cables__path {
fill: none;
filter: url(#services-cable-glow);
stroke: url(#services-cable-grad);
stroke-linecap: round;
stroke-width: 2;
}
.services-cables__node {
fill: #0e0e11;
stroke: #eb5173;
stroke-width: 2;
}
@media (max-width: 960px) {
.services-cables {
display: none;
}
}
/* Phone card screens: real ad creative (image or playable iframe) fills the
frame; the synthetic notch and gradient CTA pill below are placeholders
shown only when no media is injected. */
.phone-card__media {
border-radius: 18px;
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
z-index: 1;
}
iframe.phone-card__media {
background: #000;
border: 0;
pointer-events: none;
}
.phone-card.is-focused iframe.phone-card__media {
pointer-events: auto;
}
.phone-card__screen:has(.phone-card__media) .phone-card__notch, .phone-card__screen:has(.phone-card__media) .phone-card__cta {
display: none;
}
/* Loader overlay shown over the phone screen until the iframe fires `load`.
Spinner is a conic-gradient ring (orange → pink → purple) with a radial
mask to carve the donut and a rotation animation. Pure CSS, no SVG. */
.phone-card__loader {
background: #1c1c20;
border-radius: 18px;
display: grid;
inset: 0;
place-items: center;
pointer-events: none;
position: absolute;
transition: opacity 280ms var(--ease);
z-index: 2;
}
.phone-card__loader[data-state="done"] {
opacity: 0;
}
.phone-card__spinner {
-webkit-mask: radial-gradient(circle, transparent 56%, #000 59%);
animation: phone-card-spin 1s linear infinite;
aspect-ratio: 1 / 1;
background: conic-gradient(
from 0deg,
rgb(250, 108, 0) 0%,
rgb(235, 81, 115) 36%,
rgb(137, 18, 160) 72%,
transparent 74%,
transparent 100%
);
border-radius: 50%;
display: block;
mask: radial-gradient(circle, transparent 56%, #000 59%);
width: 38%;
}
@keyframes phone-card-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.phone-card__spinner {
animation: none;
}
}
/* Stats + logo marquee — sits below the fold as a continuation of the
hero. Runs edge-to-edge: the stats and logos band must hit the
viewport sides with no horizontal inset, matching the maquette. */
.hero__meta {
display: flex;
flex-direction: column;
gap: clamp(28px, 4vw, 48px);
padding-block: clamp(40px, 6vw, 80px) clamp(16px, 2vw, 28px);
padding-inline: 0;
width: 100%;
}
.hero__stats {
align-content: space-around;
border-top: 1px solid var(--rule);
color: var(--text-dim);
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-family: var(--font-sans);
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
gap: clamp(20px, 3vw, 48px);
justify-content: space-evenly;
letter-spacing: 0.1em;
list-style: none;
margin: 0;
padding: 2.5rem 0 1rem;
text-transform: uppercase;
}
.hero__stats span {
display: block;
text-align: center;
}
.hero__stats span b {
color: var(--accent-from);
font-size: 2rem;
font-weight: 600;
}
/* Page-load choreography */
@media (prefers-reduced-motion: no-preference) {
.hero__inner>* {
animation: hero-in 900ms var(--ease-out-quart) forwards;
opacity: 0;
transform: translateY(24px);
}
.hero__inner>.eyebrow {
animation-delay: 0ms;
}
.hero__title {
animation-delay: 140ms;
}
.hero__lede {
animation-delay: 280ms;
}
.hero__panel {
animation-delay: 360ms;
margin: 1rem -1.5rem;
max-width: 100%;
}
.hero__meta {
animation-delay: 520ms;
}
@keyframes hero-in {
to {
opacity: 1;
transform: translateY(0);
}
}
}
@media (max-width: 960px) {
.hero__inner {
align-content: start;
grid-template-columns: 1fr;
}
.hero__inner>.eyebrow, .hero__title, .hero__lede, .hero__panel, .hero__meta {
grid-column: 1 / -1;
grid-row: auto;
}
.hero__title {
margin-top: 20px;
}
.hero__panel {
animation-delay: 360ms;
margin: 1rem -1.5rem;
max-width: 100%;
}
.hero__meta {
margin-top: 32px;
}
}
/* ---------- Our Partners section wrapper ---------- */
.partners {
border-top: 1px solid var(--rule);
padding-block: 0 clamp(40px, 4vw, 64px);
position: relative;
}
/* ---------- Brand marquee (two rows, opposite directions) ---------- */
.brand-marquee {
display: flex;
flex-direction: column;
gap: clamp(8px, 1.4vw, 24px);
margin-top: 1.5rem;
padding-block: clamp(20px, 3vw, 40px) 0;
position: relative;
width: 100%;
}
.brand-marquee__caption {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: clamp(15px, 1.32vw, 19px);
line-height: 1.55;
margin: 0 0 clamp(12px, 1.5vw, 20px);
text-align: center;
}
.brand-marquee__viewport {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
overflow: hidden;
position: relative;
width: 100%;
}
.brand-marquee__track {
display: flex;
width: max-content;
will-change: transform;
}
.brand-marquee__track--ltr {
animation: brand-marquee-ltr 60s linear infinite;
}
.brand-marquee__track--rtl {
animation: brand-marquee-rtl 60s linear infinite;
}
.brand-marquee__row {
align-items: center;
display: flex;
gap: clamp(48px, 6vw, 84px);
height: clamp(72px, 9vw, 128px);
list-style: none;
margin: 0;
padding: 0;
padding-inline: clamp(24px, 3vw, 42px);
}
.brand-marquee__row img {
display: block;
max-height: clamp(34px, 3.6vw, 54px);
object-fit: contain;
opacity: 0.78;
transition: opacity 200ms var(--ease);
width: auto;
}
.brand-marquee__row img:hover {
opacity: 1;
}
.brand-marquee__sr {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
list-style: none;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
@keyframes brand-marquee-ltr {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes brand-marquee-rtl {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.brand-marquee__track--ltr, .brand-marquee__track--rtl {
animation: none;
transform: translateX(-25%);
}
}
.demo-panel {
aspect-ratio: 16 / 11;
grid-column: 7 / 13;
overflow: hidden;
position: relative;
width: 100%;
}
.demo-panel::before {
background: repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(255, 255, 255, 0.02) 40px, rgba(255, 255, 255, 0.02) 41px),
repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255, 255, 255, 0.02) 40px, rgba(255, 255, 255, 0.02) 41px);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.demo-panel__bar {
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
gap: 6px;
height: 36px;
padding-inline: 14px;
position: relative;
z-index: 1;
}
.demo-panel__dot {
background: rgba(255, 255, 255, 0.14);
border-radius: 50%;
height: 7px;
width: 7px;
}
@media (max-width: 960px) {
.demo-panel {
aspect-ratio: 4/3;
grid-column: 1 / -1;
}
}
/* ========================================================= */
/* GALLERY V2 — sticky landing + showcase wall rises on scroll */
/* ========================================================= */
.gallery-v2 {
position: relative;
/* Tall enough that the pinned wall stays visible across a long scroll
range; phones rise in the first portion, then drift via parallax. */
height: 340vh;
background: var(--bg);
border-top: 1px solid var(--rule);
}
.gallery-v2__sticky {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
overflow: hidden;
position: sticky;
top: 0;
}
/* Black fade at the bottom — softens the last row of phones into the BG. */
.gallery-v2__sticky::after {
background: linear-gradient(to bottom, rgba(9, 9, 11, 0) 0%, var(--bg) 75%);
content: "";
height: 28vh;
inset: auto 0 0 0;
pointer-events: none;
position: absolute;
z-index: 3;
}
/* Soft warm glow centred behind everything — keeps the lighting from the
previous gallery scrim. */
.gallery-v2__glow {
background: radial-gradient(50% 45% at 50% 55%, rgba(250, 108, 0, 0.22) 0%, rgba(250, 108, 0, 0) 60%),
radial-gradient(40% 35% at 65% 45%, rgba(235, 81, 115, 0.16) 0%, rgba(235, 81, 115, 0) 65%);
filter: blur(40px);
inset: -10% -10%;
pointer-events: none;
position: absolute;
z-index: 0;
}
.gallery-v2__header {
position: absolute;
left: 0;
right: 0;
top: 50%;
padding-inline: var(--pad-x);
text-align: center;
transform: translate3d(0, -50%, 0);
pointer-events: none;
/* Sits behind the phones so they rise in front of it. */
z-index: 1;
/* As the phones finish rising the title gets blurred + faded so it
stops competing with the wall. JS writes --phones-progress (0..1). */
filter: blur(calc(var(--phones-progress, 0) * 14px));
opacity: calc(1 - var(--phones-progress, 0) * 0.78);
transition: opacity 240ms var(--ease), filter 240ms var(--ease);
will-change: filter, opacity;
}
.gallery-v2__title {
color: var(--text);
font-family: var(--font-display);
font-size: 84px;
font-weight: 800;
letter-spacing: 0em;
line-height: 1;
margin: 0 0 14px;
}
.gallery-v2__lede {
color: var(--text-muted);
font-size: 16px;
margin: 0;
}
.gallery-v2__stage {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
/* Column-major flow so adjacent cards form vertical columns; even columns
get pushed down via --col-offset for the décalé pattern. */
grid-auto-flow: column;
gap: 12px;
align-items: center;
justify-items: center;
/* Vertical padding stops the top row of phones being clipped by the
viewport edge once the décalé offset and natural card height combine. */
padding: clamp(48px, 7vh, 90px) 12px;
/* Above the title so phones occlude it as they rise into view. */
z-index: 2;
}
.gallery-v2__stage .phone-card {
width: clamp(140px, 12vw, 220px);
/* Cap the height to roughly the available row height so on shorter
viewports the cards still fit without overflowing the sticky stage. */
max-height: 44vh;
height: auto;
aspect-ratio: 9 / 18;
/* Compose: scroll-driven rise + column décalé + per-column parallax drift,
then tilt rotation. perspective is inside the transform list so rotateX/Y
after it gain the 3D depth. Tilt vars (--tilt-x/--tilt-y) are written by
the tilt JS; --rise/--parallax are written by the rise driver. */
transform: translate3d(0, calc(var(--rise, 110vh) + var(--col-offset, 0px) + var(--parallax, 0px)), 0) perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transition: transform 120ms linear, opacity 320ms var(--ease), filter 320ms var(--ease);
will-change: transform;
cursor: url("assets/click-to-play.svg") 6 58, pointer;
}
/* Décalé: every even column (cards 3–4, 7–8, 11–12) shifted down. */
.gallery-v2__stage .phone-card:nth-child(n
/**/
+3):nth-child(-n
/**/
+4), .gallery-v2__stage .phone-card:nth-child(n
/**/
+7):nth-child(-n
/**/
+8), .gallery-v2__stage .phone-card:nth-child(n
/**/
+11):nth-child(-n
/**/
+12) {
--col-offset: 80px;
}
/* Dim scrim that fades in when a phone is focused — pulls everything back
so the active playable reads as the only thing on the stage. The scrim
lives INSIDE the stage so it shares the stage's stacking context. That
way the focused phone (z-index 10) can sit above the scrim (z-index 1)
while non-focused siblings (z-index auto) sit below it. */
.gallery-v2__stage::before {
background: rgba(9, 9, 11, 0.62);
content: "";
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 360ms var(--ease);
z-index: 1;
}
.gallery-v2__stage[data-focused]::before {
opacity: 1;
}
/* When a phone is focused, lift the stage above .gallery-v2__sticky::after
(the bottom-fade gradient at z-index 3) so it stops dimming the centred
card. Children stack inside the stage as before — focused phone z-index
1000 stays above the scrim z-index 1. */
.gallery-v2__stage[data-focused] {
z-index: 5;
}
.gallery-v2__stage[data-focused] .phone-card:not(.is-focused) {
filter: brightness(0.18) saturate(0.5);
pointer-events: none;
}
.gallery-v2__stage .phone-card.is-focused {
cursor: normal !important;
transform: translate3d(0, calc(var(--rise, 0px) + var(--col-offset, 0px) + var(--parallax, 0px)), 0) translate(var(--focus-tx, 0px), var(--focus-ty, 0px)) scale(var(--focus-scale, 1.5));
z-index: 10;
}
.is-focused {
opacity: 1 !important;
transition: opacity 320ms var(--ease) !important;
z-index: 1000 !important;
}
.gallery-v2__stage .phone-card.is-focused, .gallery-v2__stage .phone-card.is-releasing {
transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 320ms var(--ease),
filter 320ms var(--ease);
}
@media (max-width: 900px) {
.gallery-v2 {
height: 180vh;
}
.gallery-v2__title {
font-size: 48px;
}
.gallery-v2__stage {
gap: 8px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 8px;
}
.gallery-v2__stage .phone-card {
width: clamp(80px, 16vw, 140px);
}
.gallery-v2__stage .phone-card:nth-child(n
/**/
+3):nth-child(-n
/**/
+4), .gallery-v2__stage .phone-card:nth-child(n
/**/
+7):nth-child(-n
/**/
+8), .gallery-v2__stage .phone-card:nth-child(n
/**/
+11):nth-child(-n
/**/
+12) {
--col-offset: 60px;
}
}
@media (prefers-reduced-motion: reduce) {
.gallery-v2__stage .phone-card {
transform: translate3d(0, var(--col-offset, 0px), 0);
}
}
/* Scroll-position indicator under the mobile carousel — hidden on desktop
where the gallery is a pinned wall instead of a swipe list. */
.gallery-v2__scrollbar {
display: none;
}
/* Under tablet: switch the rising wall to a single-card horizontal scroll-snap
carousel. Native swipe drives navigation; the gradient scrollbar below
shows the user's position in the list. */
@media (max-width: 720px) {
.gallery-v2 {
border-top: 1px solid var(--rule);
height: auto;
min-height: 0;
}
.gallery-v2__sticky {
align-items: stretch;
flex-direction: column;
gap: 20px;
height: auto;
justify-content: flex-start;
overflow: visible;
padding-block: 32px 48px;
position: relative;
top: auto;
}
.gallery-v2__sticky::after {
display: none;
}
.gallery-v2__glow {
inset: 0;
pointer-events: none;
position: absolute;
}
.gallery-v2__header {
filter: none;
inset: auto;
left: 0;
opacity: 1;
padding-inline: var(--pad-x);
position: relative;
right: 0;
text-align: center;
top: auto;
transform: none;
z-index: 2;
}
.gallery-v2__title {
font-size: clamp(32px, 9vw, 44px);
}
.gallery-v2__stage {
-webkit-overflow-scrolling: touch;
display: flex;
flex-direction: row;
gap: 0;
grid-auto-flow: row;
grid-template-columns: none;
grid-template-rows: none;
height: auto;
inset: auto;
/* Native horizontal swipe drives the carousel. Cards underneath are
inert (pointer-events:none) so iframe content can't capture the
gesture — the touch falls through to the stage, which scrolls. */
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding-block: 12px 16px;
padding-inline: calc(50% - min(72vw, 280px) / 2);
position: relative;
scroll-snap-type: x mandatory;
scrollbar-width: none;
touch-action: pan-x;
width: 100%;
z-index: 2;
}
.gallery-v2__stage::-webkit-scrollbar {
display: none;
}
.gallery-v2__stage .phone-card, .gallery-v2__stage .phone-card:nth-child(n
/**/
+3):nth-child(-n
/**/
+4), .gallery-v2__stage .phone-card:nth-child(n
/**/
+7):nth-child(-n
/**/
+8), .gallery-v2__stage .phone-card:nth-child(n
/**/
+11):nth-child(-n
/**/
+12) {
--col-offset: 0;
aspect-ratio: 9 / 16;
flex: 0 0 min(72vw, 280px);
height: auto;
max-height: none;
scroll-snap-align: center;
scroll-snap-stop: always;
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transition: transform 200ms var(--ease);
width: min(72vw, 280px);
}
/* Focus mode (tap-to-zoom) is disabled on mobile — the carousel already
shows one card at full readable size and the JS click handler bails out
on this breakpoint. Clear the dim scrim so visited carts feel normal. */
.gallery-v2__stage::before {
display: none;
}
/* Drop the second sentence of the lede on small screens — keeps the
intro to one tidy line above the carousel. */
.gallery-v2__lede-extra {
display: none;
}
/* Cards stay visible but inert — taps fall through to the stage so the
iframe content (links, playables) can't capture the swipe gesture, but
native scroll on the stage still drives the carousel. */
.gallery-v2__stage .phone-card {
cursor: default;
pointer-events: none;
}
/* Trim the wall to a half-dozen examples on mobile: lighter network
load, less scrolling distance, plays nicer with the snap carousel. */
.gallery-v2__stage .phone-card:nth-child(n+7) {
display: none;
}
/* The scrollbar is the lone interactive surface. Tap or drag it to scrub
the carousel; the thumb mirrors the stage's scrollLeft. */
.gallery-v2__scrollbar {
background: linear-gradient(to right, var(--accent-from), var(--accent-to));
border-radius: 999px;
cursor: pointer;
display: block;
height: 6px;
margin: 20px auto 8px;
position: relative;
touch-action: none;
width: min(72vw, 280px);
}
/* Invisible padding zone — gives the thin bar a finger-friendly hit area
without bulking up its visual weight. */
.gallery-v2__scrollbar::before {
content: '';
inset: -22px -12px;
position: absolute;
}
.gallery-v2__scrollbar-thumb {
background: #ffffff;
border-radius: 999px;
cursor: grab;
height: 20px;
left: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width: 20px;
}
.gallery-v2__scrollbar[data-dragging="1"] {
cursor: grabbing;
}
}
/* ---------- Phone card ---------- */
.phone-card {
flex: none;
position: relative;
width: 220px;
height: 440px;
background: #1c1c20;
border: 1.5px solid #37373c;
border-radius: 26px;
padding: 9.5px;
box-sizing: border-box;
/* 3D tilt on hover/move (JS drives --tilt-x / --tilt-y / --mx / --my) */
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: border-color 200ms var(--ease);
will-change: transform;
}
.phone-card:hover {
border-color: rgba(250, 108, 0, 0.3);
}
/* The screen is pushed forward so the bezel reads as depth on tilt. */
.phone-card__screen {
transform: translateZ(6px);
}
/* Glass glare — radial highlight that tracks the cursor. */
.phone-card::before {
background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0) 60%);
border-radius: inherit;
content: "";
inset: 0;
mix-blend-mode: overlay;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateZ(8px);
transition: opacity 280ms var(--ease);
z-index: 5;
}
.phone-card[data-tilted="true"]::before {
opacity: 1;
}
.phone-card__screen {
background: #090909;
border-radius: 18px;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.phone-card__notch {
background: #1c1c20;
border-radius: 7px;
height: 13px;
left: 50%;
position: absolute;
top: 4px;
transform: translateX(-50%);
width: 66px;
z-index: 2;
}
.phone-card__cta {
background: var(--accent-gradient);
border-radius: 22px;
bottom: 18px;
height: 22px;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 99px;
z-index: 2;
}
/* ========================================================= */
/* UNMATCHED CREATIVE INTELLIGENCE */
/* Bento grid: two columns, asymmetric heights. */
/* ========================================================= */
.creative-intel {
border-top: 1px solid var(--rule);
overflow: hidden;
padding-block: var(--pad-section);
position: relative;
}
.creative-intel__header {
margin: 0 auto clamp(48px, 6vw, 88px);
max-width: var(--max-w);
padding-inline: var(--pad-x);
position: relative;
z-index: 1;
}
.creative-intel__title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: 0em;
line-height: 1.1;
margin: 0 0 22px;
padding-top: 0.04em;
text-wrap: balance;
}
.creative-intel__title-word {
display: inline;
}
.creative-intel__title-word--ghost {
color: var(--title-fill);
font-weight: 900;
}
.creative-intel__title-word--gradient {
-webkit-background-clip: text;
background: linear-gradient(90deg, #fa6c00 0%, #eb5173 50.5%, #94199a 100%);
background-clip: text;
color: transparent;
font-weight: 900;
}
.creative-intel__lede {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
margin: 0;
max-width: 25rem;
}
.creative-intel__bento {
display: grid;
gap: clamp(16px, 1.6vw, 24px);
grid-template-columns: 1fr 1fr;
margin: 0 auto;
max-width: var(--max-w);
position: relative;
width: calc(100% - calc(var(--pad-x) * 2));
z-index: 1;
}
.creative-intel__col {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6vw, 24px);
height: 100%;
min-width: 0;
}
.creative-intel__card {
border: 1px solid var(--border-strong);
border-radius: 18px;
display: flex;
flex-direction: column;
isolation: isolate;
overflow: hidden;
padding: clamp(24px, 2.4vw, 40px);
position: relative;
transition: border-color 240ms var(--ease), transform 240ms var(--ease);
}
.creative-intel__card-image {
height: auto;
margin: 0 auto;
margin-top: 1rem;
object-fit: fill;
transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: transform 200ms var(--ease);
width: 100%;
will-change: transform;
}
.creative-intel__card:hover {
border-color: rgba(255, 255, 255, 0.18);
}
.creative-intel__card--builder {
min-height: clamp(340px, 30vw, 480px);
}
.creative-intel__card--strategy {
min-height: clamp(210px, 18vw, 260px);
}
.creative-intel__card--missing {
flex: 1 1 auto;
min-height: clamp(210px, 18vw, 260px);
}
.creative-intel__card--analytics {
flex: 1 1 auto;
min-height: clamp(290px, 22vw, 340px);
}
.creative-intel__card-head {
position: relative;
z-index: 2;
}
.creative-intel__card-title {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(22px, 1.9vw, 30px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 12px;
}
.creative-intel__card-title--soft {
color: rgba(255, 255, 255, 0.78);
}
.creative-intel__card-text {
color: var(--text-muted);
font-size: 13px;
line-height: 1.6;
margin: 0;
max-width: 42ch;
}
.creative-intel__card-media {
height: 60%;
inset: auto 0 0 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
.creative-intel__reel {
border: 1px solid var(--border-strong);
border-radius: 18px;
grid-column: 1 / -1;
isolation: isolate;
overflow: hidden;
transition: border-color 240ms var(--ease);
}
.creative-intel__reel:hover {
border-color: rgba(255, 255, 255, 0.18);
}
.creative-intel__reel video {
display: block;
height: auto;
width: 100%;
}
@media (max-width: 720px) {
.creative-intel__bento {
grid-template-columns: 1fr;
}
.creative-intel__card--builder, .creative-intel__card--missing, .creative-intel__card--strategy, .creative-intel__card--analytics {
min-height: 280px;
}
}
/* ========================================================= */
/* RIVE WAY INFOGRAPHIC — Rive artboard fitted to the */
/* section's content box, scales with --max-w on resize. */
/* ========================================================= */
.rive-way {
background: var(--bg);
border-top: 1px solid var(--rule);
padding-block: var(--pad-section);
position: relative;
}
.rive-way__inner {
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.rive-way__head {
margin: 0 0 clamp(36px, 4vw, 56px);
text-align: left;
}
.rive-way__title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: 0em;
line-height: 1.02;
margin: 0;
padding-top: 0.04em;
text-wrap: balance;
}
.rive-way__title-word {
color: var(--title-fill);
display: block;
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0em;
}
.rive-way__title-word--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-weight: 900;
width: fit-content;
}
/* Stage owns the aspect ratio AND the cap. The canvas inside fills the
stage 100%/100% so nothing fights for layout. Cap at --max-w-tight so
wide viewports stop pushing the artboard past a comfortable size. */
.rive-way__stage {
aspect-ratio: 975 / 923;
margin: 0 auto;
max-width: var(--max-w-tight);
width: 100%;
}
/* Generic fill rule for any Rive canvas wired through the bootstrap. The
parent (a `.*__stage` aspect-ratio wrapper) drives the size; the canvas
stretches to fill it. Covers the original canvas AND the one rive.js
recreates after auto-detecting the state machine, since both carry
`data-rive-src`. */
canvas[data-rive-src] {
display: block;
height: 100%;
width: 100%;
}
/* ========================================================= */
/* PLATFORM BUILT-FOR four-card row. */
/* Each card frames a problem the visitor recognises, with */
/* an orange icon, a two-line heading, supporting copy and */
/* a ghost CTA. A thin accent gradient bar at the bottom */
/* of each card peeks out to the right as a visual signature. */
/* ========================================================= */
.built-for {
background: var(--bg);
border-top: 1px solid var(--rule);
padding-block: var(--pad-section);
position: relative;
}
.built-for__inner {
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.built-for__grid {
display: grid;
gap: clamp(16px, 1.6vw, 28px);
grid-template-columns: repeat(4, minmax(0, 1fr));
list-style: none;
margin: 0;
margin-top: clamp(36px, 4vw, 56px);
padding: 0;
}
.built-for__card {
background: transparent;
border-radius: clamp(16px, 1.4vw, 24px);
display: flex;
flex-direction: column;
gap: clamp(14px, 1.4vw, 24px);
isolation: isolate;
padding: clamp(20px, 1.8vw, 32px);
position: relative;
transition: transform 320ms var(--ease);
}
.built-for__card:hover {
transform: translateY(-2px);
}
.built-for__card:hover::before {
border-color: var(--border-strong);
}
/* Opaque surface of the card, rendered as a pseudo-element so the gradient
layer below it stays hidden in the centre and only shows where it's offset
past the card edges (bottom + right). */
.built-for__card::before {
background: var(--surface);
border: 1px solid var(--border);
border-radius: inherit;
content: "";
inset: 0;
position: absolute;
transition: border-color 320ms var(--ease);
z-index: -1;
}
/* "Gradient box-shadow": one layer behind the card, same shape and radius,
offset down-right. The opaque ::before hides the centre, so only the bottom
+ right edges of this layer show, forming an L with a naturally rounded
corner. The diagonal gradient (pink bottom-left → orange top-right) reads as
one continuous run around the corner. A vertical mask fades the top of the
right bar to transparent so the L tapers off near the top edge. */
.built-for__card::after {
-webkit-mask: linear-gradient(180deg, transparent 0%, transparent 10%, #000 55%, #000 100%);
background: linear-gradient(45deg, var(--accent-to) 0%, var(--accent-from) 100%);
border-radius: inherit;
content: "";
inset: 0;
mask: linear-gradient(180deg, transparent 0%, transparent 10%, #000 55%, #000 100%);
pointer-events: none;
position: absolute;
transform: translate(11px, 11px);
z-index: -2;
}
.built-for__card-icon {
align-items: center;
display: inline-flex;
height: clamp(30px, 2.4vw, 40px);
justify-content: center;
width: clamp(30px, 2.4vw, 40px);
}
.built-for__card-icon svg, .built-for__card-icon img {
height: 100%;
object-fit: contain;
width: 100%;
}
.built-for__card-heading {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 24px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
max-width: 12ch;
text-wrap: balance;
}
.built-for__card-heading::after {
background: rgba(255, 255, 255, 0.18);
content: "";
display: block;
height: 1px;
margin-top: clamp(10px, 0.9vw, 16px);
width: clamp(36px, 3.6vw, 56px);
}
.built-for__card-lede {
color: var(--text-dim);
flex: 1;
font-size: clamp(13px, 0.9vw, 14px);
line-height: 1.45;
margin: 0;
}
.built-for__card-cta {
align-self: stretch;
font-size: clamp(12px, 0.85vw, 14px);
font-weight: 600;
gap: 0.6em;
height: auto;
justify-content: center;
margin-top: clamp(4px, 0.5vw, 10px);
padding: clamp(9px, 0.8vw, 13px) clamp(14px, 1.2vw, 20px);
}
.built-for__card-arrow {
display: inline-block;
transition: transform 240ms var(--ease);
}
.built-for__card-cta:hover .built-for__card-arrow {
transform: translateX(3px);
}
@media (max-width: 980px) {
.built-for__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.built-for__grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* ========================================================= */
/* CRAFTSMAN+ wheel comparison story. */
/* Intro block sits above the pinned wheel: big two-line */
/* title + static "Classic" timeline rebuilt as HTML from */
/* the white graphic inside `rive_way_infographic.riv`. */
/* Then a 200vh track + 100vh sticky pin parks the SVG */
/* wheel while the page scrolls past; JS only writes */
/* stroke-dashoffset and per-point `data-active`. */
/* ========================================================= */
.craftsman-wheel {
background: var(--bg);
border-top: 1px solid var(--rule);
position: relative;
}
/* Intro block follows the SAME layout tokens as `.rive-way` so the
title + classic timeline render at the same scale as the original
Rive section (which renders the title as HTML inside `.rive-way__inner`
and the timeline inside the .riv canvas). Tokens reused:
- padding-block: var(--pad-section)
- max-width: var(--max-w)
- padding-inline: var(--pad-x)
- head margin: clamp(36px, 4vw, 56px)
- title font-size: clamp(40px, 5.4vw, 80px)
Timeline sizing scaled up so the white graphic feels comparable in
weight to the surrounding hero typography. */
.craftsman-wheel__intro {
box-sizing: border-box;
margin: 0 auto;
max-width: var(--max-w);
padding-block: var(--pad-section) clamp(48px, 6vw, 96px);
padding-inline: var(--pad-x);
position: relative;
}
.craftsman-wheel__intro-head {
margin: 0 0 clamp(36px, 4vw, 56px);
text-align: left;
}
.craftsman-wheel__intro-title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: 0em;
line-height: 1.02;
margin: 0;
padding-top: 0.04em;
text-wrap: balance;
}
.craftsman-wheel__intro-title-line {
color: var(--title-fill);
display: block;
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0em;
}
.craftsman-wheel__intro-title-line--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-weight: 900;
width: fit-content;
}
.craftsman-wheel__classic {
margin: 0 auto;
width: 100%;
}
.craftsman-wheel__classic-heading {
color: var(--subtitle-fill);
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 50px);
font-weight: 700;
letter-spacing: -0.005em;
margin: 0 auto clamp(32px, 4vw, 64px);
}
/* Eight-step horizontal timeline. Each step is a column with the label
on top, a dot in the middle and the time at the bottom; a thin rule
sits at the dot's vertical centre and runs from the first dot to the
last. Grid keeps the steps evenly spaced regardless of label width. */
.craftsman-wheel__timeline {
align-items: stretch;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.craftsman-wheel__timeline::after {
content: "";
position: absolute;
/* Line sits at the dot row's vertical centre. With the bigger labels
the dot row is roughly at 50 percent of the step's intrinsic
height; explicit alignment via the dot's gap keeps it locked. */
top: 50%;
left: calc(100% / 16);
/* `--line-progress` is 0..1, driven by JS. The line spans from dot
#1 centre to dot #N centre, which is 7 of the 8 equal columns =
87.5 percent of the timeline width. */
width: calc(var(--line-progress, 1) * 87.5%);
height: 1px;
background: var(--text);
transform: translateY(-0.5px);
z-index: 0;
/* transition: width 1100ms cubic-bezier(0.76, 0, 0.24, 1); */
transition: width 450ms cubic-bezier(0.76, 0, 0.24, 1);
}
.craftsman-wheel__step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 1.4vw, 22px);
min-width: 0;
/* Slower fade + upward drift = softer reveal than a hard opacity flip.
The opacity curve is a stronger ease-in-out (quart) so each element
creeps in quietly before resolving, instead of jumping mid-fade.
transform stays on an ease-out-expo so the element settles into
position a beat after the fade lands. */
transition: opacity 1100ms cubic-bezier(0.76, 0, 0.24, 1),
transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}
.craftsman-wheel__step[data-visible="0"] {
opacity: 0;
transform: translateY(10px);
}
.craftsman-wheel__step-label {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 500;
text-align: center;
white-space: nowrap;
}
/* Last step ("1 concept") gets an animated underline: a ::after pseudo
replaces `text-decoration` so its width can transition from 0 to
100 percent as the step's `data-visible` flips to "1". Width animates
over 1 second with the same ease-in-out-quart used on the step fade,
so the underline draws itself across the word in sync with the
element's appearance. */
.craftsman-wheel__step:last-child .craftsman-wheel__step-label {
color: var(--text);
position: relative;
}
.craftsman-wheel__step:last-child .craftsman-wheel__step-label::after {
background: currentColor;
bottom: -0.2em;
content: "";
height: 1px;
left: 0;
position: absolute;
transition: width 1000ms cubic-bezier(0.76, 0, 0.24, 1);
width: 0;
}
.craftsman-wheel__step:last-child[data-visible="1"] .craftsman-wheel__step-label::after {
width: 100%;
}
.craftsman-wheel__step-dot {
background: var(--text);
border-radius: 50%;
flex-shrink: 0;
height: 1.8rem;
width: 1.8rem;
}
.craftsman-wheel__step-time {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(12px, 1vw, 16px);
font-weight: 500;
text-align: center;
white-space: nowrap;
}
.craftsman-wheel__classic-caption {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 30px);
font-weight: 600;
margin: clamp(40px, 4.5vw, 72px) 0 0;
text-align: center;
}
@media (max-width: 720px) {
.craftsman-wheel__timeline {
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 28px;
}
.craftsman-wheel__timeline::after {
/* Two rows of four; remove the single horizontal rule and let the
dots stand on their own at this width. */
display: none;
}
}
.craftsman-wheel__track {
min-height: 200vh;
position: relative;
}
.craftsman-wheel__pin {
align-items: center;
display: flex;
height: 100vh;
position: sticky;
top: 0;
}
.craftsman-wheel__inner {
box-sizing: border-box;
display: grid;
gap: clamp(20px, 3vw, 40px);
grid-template-rows: auto 1fr;
height: 100%;
margin: 0 auto;
max-width: var(--max-w);
padding-block: clamp(40px, 6vh, 96px);
padding-inline: var(--pad-x);
width: 100%;
}
.craftsman-wheel__head {
margin: 0 auto;
text-align: start;
width: 100%;
}
.craftsman-wheel__title {
font-family: var(--font-display);
font-size: clamp(36px, 5vw, 72px);
font-weight: 900;
letter-spacing: 0em;
line-height: 1.02;
margin: 0;
padding-top: 0.04em;
}
.vertical-carousel__stage {
margin: -3rem -1.75rem;
max-width: min(520px, 72vh);
}
/* Gradient lives on an inline-block span so its background traverses
only the glyph run, not the full h2 width. Mirrors the convention
used by `.platform-performance__title-line--accent` elsewhere on the
site. Padding + negative margin add breathing room for descenders
without changing the visual position. */
.craftsman-wheel__title-word--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
background-size: 100% 100%;
color: transparent;
display: inline-block;
font-size: clamp(30px, 3vw, 50px);
margin: -0.1em;
}
.craftsman-wheel__stage {
display: grid;
min-height: 0;
place-items: center;
position: relative;
}
.craftsman-wheel__ring {
aspect-ratio: 1;
display: block;
width: min(620px, 60vh, 92%);
}
.craftsman-wheel__fill {
fill: none;
}
.craftsman-wheel__points {
aspect-ratio: 1;
inset: 0;
margin: auto;
pointer-events: none;
position: absolute;
width: min(620px, 60vh, 92%);
}
.craftsman-wheel__point {
height: 0;
left: var(--x);
position: absolute;
top: var(--y);
width: 0;
}
.craftsman-wheel__dot {
background: #27272A;
border-radius: 999px;
color: #71717A;
display: grid;
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
height: 56px;
left: -28px;
letter-spacing: 0.01em;
place-items: center;
position: absolute;
top: -28px;
transition: color 320ms var(--ease);
width: 56px;
}
/* When the fill arc crosses a point's threshold, JS flips `data-active`
from "0" to "1" and the keyframe pulse runs: the dot grows to a peak
of 1.18 at mid-animation, then settles back to 1.10 (not all the way
to its resting size). `forwards` retains the final keyframe so the
dot holds its slightly-bigger state for as long as the step stays
active. Scrolling back below the threshold drops `data-active` to
"0", the rule no longer matches, and the dot snaps back to scale 1. */
.craftsman-wheel__point[data-active="1"] .craftsman-wheel__dot {
animation: cw-pulse 1s ease-in-out forwards;
color: #FA6C00;
}
@keyframes cw-pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1.10);
}
}
.craftsman-wheel__label {
color: #E0E0E0;
font-size: 1rem;
font-weight: 500;
margin: 0;
max-width: min(38vw, 280px);
position: absolute;
text-align: center;
transition: color 320ms var(--ease);
width: max-content;
}
.craftsman-wheel__point[data-side="top"] .craftsman-wheel__label {
bottom: 36px;
left: 50%;
transform: translateX(-50%);
}
.craftsman-wheel__point[data-side="bottom"] .craftsman-wheel__label {
left: 50%;
top: 36px;
transform: translateX(-50%);
}
.craftsman-wheel__point[data-side="right"] .craftsman-wheel__label {
left: 36px;
text-align: left;
top: 50%;
transform: translateY(-50%);
}
.craftsman-wheel__point[data-side="left"] .craftsman-wheel__label {
right: 36px;
text-align: right;
top: 50%;
transform: translateY(-50%);
}
.craftsman-wheel__point[data-active="1"] .craftsman-wheel__label {
color: #E0E0E0;
}
.craftsman-wheel__sr {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Tablet + portrait-tablet: the dots near the horizontal edges sit too
close to the viewport sides for "left"/"right" labels to fit outside
the donut, so collapse them onto a centred-above-dot layout and shrink
the donut a touch to give the top/bottom labels room. */
@media (max-width: 1100px) {
.craftsman-wheel__ring, .craftsman-wheel__points {
width: min(540px, 60vh, 78vw);
}
.craftsman-wheel__label {
max-width: min(28vw, 220px);
}
.craftsman-wheel__point[data-side="right"] .craftsman-wheel__label,
.craftsman-wheel__point[data-side="left"] .craftsman-wheel__label {
bottom: 36px;
left: 50%;
right: auto;
text-align: center;
top: auto;
transform: translateX(-50%);
}
}
@media (max-width: 720px) {
.craftsman-wheel__ring, .craftsman-wheel__points {
width: min(66vw, 60vh);
}
.craftsman-wheel__dot {
font-size: 15px;
height: 44px;
left: -22px;
top: -22px;
width: 44px;
}
.craftsman-wheel__label {
font-size: 12px;
max-width: min(32vw, 160px);
}
.craftsman-wheel__point[data-side="top"] .craftsman-wheel__label,
.craftsman-wheel__point[data-side="right"] .craftsman-wheel__label,
.craftsman-wheel__point[data-side="left"] .craftsman-wheel__label {
bottom: 28px;
}
.craftsman-wheel__point[data-side="bottom"] .craftsman-wheel__label {
top: 28px;
}
}
@media (prefers-reduced-motion: reduce) {
.craftsman-wheel__track {
min-height: 0;
}
.craftsman-wheel__pin {
height: auto;
position: static;
}
.craftsman-wheel__inner {
padding-block: var(--pad-section);
}
.craftsman-wheel__fill {
stroke-dashoffset: 0;
}
.craftsman-wheel__point {
--active: 1;
}
.craftsman-wheel__point .craftsman-wheel__dot {
animation: none;
color: #FA6C00;
transform: scale(1.10);
transition: none;
}
.craftsman-wheel__point .craftsman-wheel__label {
color: var(--text);
}
}
/* ========================================================= */
/* VERTICAL CAROUSEL — pinned scrollytelling section. */
/* 500vh outer track + 100vh sticky pin. Left column holds */
/* the active slide copy + segmented progress bar. Right */
/* column is a stage clipping a vertical reel of frames. */
/* The reel is laid out in REVERSED slide order with */
/* sentinels at both ends so the top peek shows the next */
/* slide and the bottom peek shows the previous (cyclic). */
/* ========================================================= */
.vertical-carousel {
background: var(--bg);
border-top: 1px solid var(--rule);
position: relative;
}
.vertical-carousel__track {
min-height: 500vh;
position: relative;
}
.vertical-carousel__pin {
align-items: center;
display: flex;
height: 100vh;
position: sticky;
top: 0;
}
.vertical-carousel__inner {
box-sizing: border-box;
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
margin: 0 auto;
max-width: var(--max-w);
overflow: hidden;
padding-block: clamp(32px, 5vh, 72px);
padding-inline: var(--pad-x);
width: 100%;
}
.vertical-carousel__head {
text-align: left;
}
.vertical-carousel__title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
font-weight: 900;
letter-spacing: 0em;
line-height: 1.02;
margin: 2.5rem 0;
padding-top: 0.04em;
}
.vertical-carousel__title-line {
color: var(--title-fill);
display: block;
}
.vertical-carousel__title-line--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
background-size: 100% 100%;
color: transparent;
display: inline-block;
margin: -0.05em 0 -0.05em -0.05em;
padding: 0.05em 0.2em 0.05em 0;
}
.vertical-carousel__body {
align-items: center;
display: grid;
gap: clamp(40px, 6vw, 96px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
min-height: 0;
}
/* Left column: slides + progress bar pinned to the bottom. */
.vertical-carousel__copy {
display: grid;
gap: clamp(32px, 4vh, 64px);
grid-template-rows: 1fr auto;
height: 100%;
min-height: 0;
}
/* The slides wrapper holds N absolutely-positioned articles. Only the
one with data-active="1" shows. The wrapper reserves its tallest
slide's height via the relative-grid trick. */
.vertical-carousel__slides {
min-height: 0;
position: relative;
}
.vertical-carousel__slide {
display: flex;
flex-direction: column;
gap: clamp(16px, 2vh, 28px);
inset: 0;
justify-content: center;
opacity: 0;
position: absolute;
transform: translateY(8px);
transition: opacity 320ms var(--ease),
transform 360ms var(--ease),
visibility 0s linear 320ms;
visibility: hidden;
}
.vertical-carousel__slide[data-active="1"] {
opacity: 1;
transform: translateY(0);
transition: opacity 320ms var(--ease),
transform 360ms var(--ease),
visibility 0s linear 0s;
visibility: visible;
}
.vertical-carousel__eyebrow {
align-items: baseline;
color: var(--text);
display: inline-flex;
font-family: var(--font-display);
font-size: clamp(16px, 1.3vw, 20px);
font-weight: 500;
gap: 0.8em;
letter-spacing: 0.26em;
margin: 0;
text-transform: uppercase;
}
.vertical-carousel__num {
color: var(--accent);
font-size: 1.4em;
font-weight: 800;
letter-spacing: 0;
}
.vertical-carousel__heading {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(28px, 3vw, 48px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0;
text-wrap: balance;
}
.vertical-carousel__lede {
color: var(--text);
font-size: clamp(14px, 1vw, 17px);
line-height: 1.6;
margin: 0;
max-width: 32em;
}
/* Segmented progress bar at the bottom of the left column. */
.vertical-carousel__progress {
align-self: end;
display: grid;
gap: clamp(10px, 1.2vw, 18px);
grid-auto-columns: 1fr;
grid-auto-flow: column;
margin-bottom: 3rem;
margin-top: auto;
transform: translateY(clamp(-80px, -7vh, -40px));
}
.vertical-carousel__progress-seg {
background: #D9D9D9;
border-radius: 2px;
height: 3px;
overflow: hidden;
}
.vertical-carousel__progress-fill {
background: var(--accent-gradient);
border-radius: inherit;
height: 100%;
transition: width 80ms linear;
width: var(--fill, 0%);
}
/* Right column: layered stack of frames. Both the active and background
slides sit near the centre of the stage with a SUBTLE offset: the
active is the larger frame slightly down and to the right; the next
slide sits a touch up and to the left, scaled to ~80 percent and
dimmed. Stage is capped by both width AND viewport height so the
section never pushes past 100vh on shorter screens. Frames share a
base size and transition via transform for cheap GPU compositing. */
.vertical-carousel__stage {
aspect-ratio: 1 / 1;
margin: -3rem auto;
max-width: min(660px, 72vh);
position: relative;
transform: translateY(-8rem);
width: 100%;
}
.vertical-carousel__frame {
aspect-ratio: 16 / 10;
border-radius: var(--radius-md);
left: 0;
overflow: hidden;
position: absolute;
top: 0;
transform-origin: top left;
transition: transform 520ms var(--ease),
opacity 320ms var(--ease),
filter 320ms var(--ease),
box-shadow 320ms var(--ease);
width: 110%;
will-change: transform, opacity;
}
.vertical-carousel__frame img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
/* Three visible layers centred horizontally on the stage:
- active in the middle (full base size, scale 1)
- background (next slide) at the top, scaled down + dimmed
- previous slide at the bottom, scaled down + dimmed, cyclic so
slide 1 shows slide N as its `previous`
Stage is 1:1. Frame base is 92% wide, 57.5% tall (16:10). Active is
vertically centred so it overlaps both peeks symmetrically. */
.vertical-carousel__frame[data-role="active"] {
z-index: 3;
opacity: 1;
filter: none;
/* translateX 4.35% of frame width = 4% of stage → centres the 92% wide frame.
translateY 36.96% of frame height = 21.25% of stage → centres vertically. */
transform: translate3d(4.35%, 36.96%, 0) scale(1);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.vertical-carousel__frame[data-role="background"] {
z-index: 1;
opacity: 0.55;
filter: brightness(0.65) saturate(0.85);
/* Scaled to 76% (visible width 70% of stage), centred horizontally, top. */
/* transform: translate3d(16.3%, 0, 0) scale(0.76); FRED */
transform: translate3d(16.3%, 97.91%, 0) scale(0.76);
box-shadow: none;
}
.vertical-carousel__frame[data-role="previous"] {
z-index: 1;
opacity: 0.55;
filter: brightness(0.65) saturate(0.85);
/* Same horizontal + scale as background. translateY 97.91% of frame
height = 56.3% of stage → puts the scaled frame at the bottom. */
/* transform: translate3d(16.3%, 97.91%, 0) scale(0.76); FRED */
transform: translate3d(16.3%, 0, 0) scale(0.76);
box-shadow: none;
}
.vertical-carousel__frame[data-role="hidden"] {
box-shadow: none;
filter: brightness(0.65) saturate(0.85);
opacity: 0;
pointer-events: none;
transform: translate3d(16.3%, 0, 0) scale(0.76);
z-index: 0;
}
@media (max-width: 980px) {
.vertical-carousel__body {
gap: 32px;
grid-template-columns: 1fr;
}
.vertical-carousel__stage {
aspect-ratio: 1 / 1;
margin: -3rem -1.75rem;
max-width: min(520px, 72vh);
position: relative;
transform: translateY(-8rem);
width: 100%;
}
}
@media (max-width: 720px) {
.vertical-carousel__track {
min-height: 400vh;
}
.vertical-carousel__heading {
font-size: clamp(22px, 5vw, 32px);
}
.vertical-carousel__lede {
font-size: 14px;
}
.vertical-carousel__progress {
align-self: end;
display: grid;
gap: clamp(10px, 1.2vw, 18px);
grid-auto-columns: 1fr;
grid-auto-flow: column;
margin-top: 6rem;
transform: translateY(clamp(-80px, -7vh, -40px));
}
.vertical-carousel__pin {
align-items: center;
display: flex;
height: 120vh;
position: sticky;
top: 0rem;
}
}
@media (prefers-reduced-motion: reduce) {
.vertical-carousel__track {
min-height: 0;
}
.vertical-carousel__pin {
height: auto;
position: static;
}
.vertical-carousel__inner {
padding-block: var(--pad-section);
}
.vertical-carousel__slides {
display: grid;
gap: 48px;
}
.vertical-carousel__slide {
opacity: 1;
position: static;
transform: none;
transition: none;
visibility: visible;
}
.vertical-carousel__progress-fill {
transition: none;
width: 100%;
}
.vertical-carousel__stage {
aspect-ratio: 1 / 1;
margin: -3rem -1.75rem;
max-width: min(520px, 72vh);
position: relative;
transform: translateY(-8rem);
width: 100%;
}
.vertical-carousel__frame {
filter: none;
opacity: 1;
position: relative;
transform: none;
width: 100%;
}
}
/* ========================================================= */
/* OUR CLIENTS — alternating quote + screenshot cards row */
/* ========================================================= */
.our-clients {
background: #09090b;
border-top: 1px solid var(--rule);
padding-block: var(--pad-section);
position: relative;
}
.our-clients__inner {
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.our-clients__head {
align-items: end;
display: grid;
gap: 24px;
grid-template-columns: 1fr auto;
margin-bottom: clamp(36px, 4vw, 56px);
}
/* One slide of the our-clients carousel: a horizontal pair (article left, media right)
shaped like [[][]]. The pair sizes to its content so each child .client-card
keeps its natural width and aspect-ratio. */
.our-clients__pair {
align-items: stretch;
background: var(--surface-2);
border: var(--border-strong) 1px solid;
border-radius: 18px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
gap: clamp(8px, 0.8vw, 14px);
padding: 4px;
scroll-snap-align: start;
}
.our-clients__title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
grid-column: 1;
letter-spacing: 0em;
line-height: 1.02;
margin: 0;
padding-top: 0.04em;
}
.our-clients__title-word {
color: var(--title-fill);
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0em;
}
.our-clients__title-word--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-weight: 900;
}
.our-clients__lede {
color: var(--text-muted);
font-size: 16px;
grid-column: 1;
line-height: 1.6;
margin: clamp(8px, 1vw, 16px) 0 0;
max-width: 38ch;
}
/* See-All pill is the .btn .btn--ghost shape with grid placement, uppercase
tracking, and a coloured ">" suffix in the trailing span. */
.our-clients__seeall {
align-self: start;
gap: 4px;
grid-column: 2;
grid-row: 1 / span 2;
letter-spacing: 0.08em;
padding: 0 17px;
text-transform: uppercase;
}
.our-clients__carousel {
position: relative;
}
.our-clients__track {
display: flex;
gap: clamp(12px, 1.4vw, 22px);
overflow-x: auto;
/* `proximity` instead of `mandatory`: with only ~207px of scroll headroom
and the next pair-start snap point well past max, mandatory was forcing
scrollLeft back to 0 every time the user advanced. Proximity snaps only
when the scroll position is close to a snap point. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding-block: 6px;
/* Edge fade so the track doesn't slam against the section padding. */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.our-clients__track::-webkit-scrollbar {
display: none;
}
.our-clients__nav {
-webkit-backdrop-filter: blur(8px);
align-items: center;
backdrop-filter: blur(8px);
background: rgba(9, 9, 11, 0.82);
border: 1px solid var(--border-strong);
border-radius: 999px;
color: #fff;
cursor: pointer;
display: inline-flex;
height: 44px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: background 160ms var(--ease), border-color 160ms var(--ease), opacity 160ms var(--ease), transform 160ms var(--ease);
width: 44px;
z-index: 2;
}
.our-clients__nav:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.28);
}
.our-clients__nav:active {
transform: translateY(-50%) scale(0.96);
}
.our-clients__nav[disabled] {
cursor: default;
opacity: 0.35;
pointer-events: none;
}
.our-clients__nav--prev {
left: -18px;
}
.our-clients__nav--next {
right: -18px;
}
.client-card {
aspect-ratio: 9 / 16;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: var(--radius-lg);
flex: 0 0 clamp(180px, 16vw, 240px);
overflow: hidden;
position: relative;
scroll-snap-align: start;
transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.client-card:hover {
border-color: rgba(250, 108, 0, 0.32);
box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
transform: translateY(-3px);
}
.client-card--quote {
display: flex;
flex-direction: column;
font-weight: 700;
padding: clamp(16px, 1.4vw, 22px);
}
.client-card__logo {
display: block;
height: 26px;
margin-bottom: clamp(14px, 1.4vw, 20px);
max-width: 100%;
object-fit: contain;
object-position: left center;
opacity: 0.92;
width: auto;
}
.client-card__quote {
color: var(--text);
flex: 1;
font-family: var(--font-sans);
font-size: large;
font-weight: 700;
line-height: 1;
margin: 0 0 clamp(14px, 1.4vw, 20px);
}
.client-card__mark {
color: var(--text-muted);
font-family: var(--font-display);
font-size: 1em;
font-style: italic;
}
.client-card__cta {
align-items: center;
align-self: stretch;
border-radius: var(--radius-sm);
display: inline-flex;
font-size: 13px;
font-weight: 500;
height: 36px;
justify-content: center;
text-decoration: none;
}
.client-card--media {
background: #0e0e11;
border-color: transparent;
display: block;
text-decoration: none;
}
.client-card--media img {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
@media (max-width: 720px) {
.our-clients__head {
grid-template-columns: 1fr;
}
.our-clients__seeall {
grid-column: 1;
grid-row: auto;
justify-self: start;
}
.our-clients__nav {
display: none;
}
/* Under tablet: each pair becomes a single full-width slide with the
testimony stacked above the visual. !important defeats the inline
`scroll-snap-type: none` set by the carousel JS, which is needed for
the desktop button-driven nearest-snap but kills native touch snap. */
.our-clients__track {
-webkit-mask-image: none;
gap: 14px;
mask-image: none;
scroll-padding-inline: 0;
scroll-snap-type: x mandatory !important;
}
.our-clients__pair {
align-items: stretch;
box-sizing: border-box;
flex: 0 0 100%;
flex-direction: column;
scroll-snap-align: start;
scroll-snap-stop: always;
width: 100%;
}
.our-clients__pair>.client-card {
aspect-ratio: auto;
flex: 0 0 auto;
width: 100%;
}
.our-clients__pair>.client-card--quote {
min-height: clamp(220px, 32vh, 280px);
}
.our-clients__pair>.client-card--media {
aspect-ratio: 16 / 10;
height: auto;
width: 100%;
}
.our-clients__pair>.client-card--media img {
aspect-ratio: 16 / 10;
height: auto;
}
}
/* ========================================================= */
/* ENGAGEMENT FULLY VISUALIZED — copy left, stacked images */
/* ========================================================= */
.engagement {
background: var(--bg);
border-top: 1px solid var(--rule);
overflow: hidden;
padding-block: var(--pad-section);
position: relative;
}
.engagement__inner {
align-items: center;
display: grid;
gap: clamp(24px, 4vw, 48px);
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.engagement__copy {
display: flex;
flex-direction: column;
grid-column: 1 / 6;
}
.engagement__copy .eyebrow {
margin: 0 0 16px;
}
.engagement__title {
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
letter-spacing: 0em;
line-height: 1.02;
margin: 0 0 22px;
padding-top: 0.04em;
text-wrap: balance;
}
.engagement__title-word {
color: var(--title-fill);
display: block;
font-family: var(--font-display);
font-weight: 800;
letter-spacing: 0em;
line-height: 1.1;
}
.engagement__title-word--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-weight: 900;
}
.engagement__lede {
color: var(--text-muted);
font-size: 16px;
line-height: 1.6;
margin: 0;
max-width: 42ch;
}
.engagement__media {
display: block;
grid-column: 6 / 13;
perspective: 1400px;
position: relative;
}
.engagement__card {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
padding: clamp(14px, 1.4vw, 24px);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%),
#0e0e11;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
transform-style: preserve-3d;
/* --rotz is the resting Z-axis tilt (set per card below). Pointer tilt
(rotateX/Y) layers on top. */
transform: translate3d(0, var(--parallax-y, 0px), 0) perspective(1100px) rotateZ(var(--rotz, 0deg)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transition: transform 200ms var(--ease);
will-change: transform;
}
.engagement__card--scene {
--rotz: -2.4deg;
}
.engagement__card--chart {
--rotz: 3.2deg;
}
/* Cursor-tracked highlight, same recipe as the phone cards + hero panel. */
.engagement__card::before {
background: radial-gradient(55% 55% at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.12),
rgba(255, 255, 255, 0) 65%);
border-radius: inherit;
content: "";
inset: 0;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 280ms var(--ease);
z-index: 5;
}
.engagement__card[data-tilted="true"]::before {
opacity: 1;
}
/* Chart card overlaps the bottom-left of the scene, like the Figma. */
.engagement__card--chart {
border-radius: 18px;
margin: -28% auto 0 8%;
width: 72%;
z-index: 1;
}
.engagement__media-scene, .engagement__media-chart {
background: transparent;
border-radius: var(--radius-md);
display: block;
height: auto;
width: 100%;
}
@media (max-width: 960px) {
.engagement__copy, .engagement__media {
grid-column: 1 / -1;
}
.engagement__card--chart {
margin: -12% auto 0;
width: 92%;
}
}
/* ========================================================= */
/* MEET PLAY — full-bleed wordmark */
/* ========================================================= */
.meet-play {
border-top: 1px solid var(--rule);
overflow: hidden;
padding-block: var(--pad-section);
position: relative;
}
.meet-play__header {
align-items: end;
display: grid;
gap: 24px;
grid-template-columns: repeat(12, 1fr);
margin: 0 auto clamp(48px, 6vw, 88px);
max-width: var(--max-w);
padding-inline: var(--pad-x);
position: relative;
z-index: 1;
}
.meet-play__header .eyebrow {
grid-column: 1 / 4;
margin: 0 0 16px;
}
.meet-play__title {
color: var(--text);
font-family: var(--font-display);
font-size: clamp(40px, 5.4vw, 80px);
font-weight: 800;
grid-column: 1 / 13;
letter-spacing: 0em;
line-height: 1.02;
margin: 0;
padding-top: 0.04em;
}
.meet-play__title-word {
font-family: var(--font-display);
font-weight: 900;
letter-spacing: 0em;
}
.meet-play__title-word--accent {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-weight: 900;
margin-left: 0;
}
.meet-play__lede {
color: var(--text-muted);
font-size: 16px;
grid-column: 1 / 8;
line-height: 1.6;
margin: clamp(16px, 1.6vw, 24px) 0 0;
max-width: 42ch;
}
/* "Your Interactive Workspace" variant: title stacks on two lines, lede
floats to the right column instead of sitting below. */
.meet-play--workspace .meet-play__header {
align-items: start;
row-gap: 8px;
}
.meet-play--workspace .meet-play__header .eyebrow {
grid-column: 1 / 13;
margin: 0;
}
.meet-play--workspace .meet-play__title {
grid-column: 1 / 9;
grid-row: 2;
}
.meet-play--workspace .meet-play__title-word {
display: block;
line-height: 1.1;
}
.meet-play--workspace .meet-play__lede {
align-self: end;
grid-column: 9 / 13;
grid-row: 2;
margin: clamp(8px, 1.2vw, 22px) 0 0;
max-width: 38ch;
}
@media (max-width: 960px) {
.meet-play--workspace .meet-play__title, .meet-play--workspace .meet-play__lede {
grid-column: 1 / -1;
grid-row: auto;
}
.meet-play--workspace .meet-play__lede {
margin-top: 20px;
}
}
/* Platform hero — Figma layout: left-aligned title stack, ghost CTA on its
own row below, then the perspective-tilted screenshot that lifts up to
bleed behind the title block. Tilt is baked into the PNG. */
.platform-hero {
padding-block: clamp(80px, 11vw, 160px) 0;
}
.platform-hero__header {
align-items: start;
margin-bottom: 0;
row-gap: clamp(24px, 3vw, 40px);
z-index: 3;
}
.platform-hero .meet-play__title {
font-size: clamp(44px, 6.4vw, 96px);
grid-column: 1 / 10;
grid-row: 1;
letter-spacing: -0.01em;
line-height: 1.02;
}
.platform-hero .platform-hero__cta {
grid-column: 1 / 4;
grid-row: 2;
height: 38px;
justify-self: start;
letter-spacing: 0.04em;
padding: 0 18px;
}
.platform-hero .demo-panel--plain {
aspect-ratio: 1309 / 712;
margin-top: calc(-1 * clamp(40px, 5vw, 80px));
z-index: 0;
}
@media (max-width: 960px) {
.platform-hero .meet-play__title, .platform-hero .platform-hero__cta {
grid-column: 1 / -1;
}
.platform-hero .demo-panel--plain {
margin-top: clamp(24px, 4vw, 48px);
}
}
.demo-panel--plain {
aspect-ratio: 16 / 10;
grid-column: unset;
margin: 0 auto;
max-width: var(--max-w);
position: relative;
width: calc(100% - calc(var(--pad-x) * 2));
z-index: 1;
}
.demo-panel--plain:after, .demo-panel--plain .demo-panel__media::after {
background: linear-gradient(to bottom, rgba(9, 9, 11, 0) 0%, var(--bg) 75%);
content: "";
height: 32vh;
inset: auto 0 0 0;
pointer-events: none;
position: absolute;
z-index: 1000;
}
.demo-panel--plain .demo-panel__bar {
display: none;
}
.demo-panel__media {
display: block;
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
z-index: 1;
}
.demo-platform__media {
display: block;
height: 100%;
inset: 0;
position: absolute;
width: 100%;
z-index: 1;
}
@media (max-width: 960px) {
.meet-play__header .eyebrow, .meet-play__title, .meet-play__lede {
grid-column: 1 / -1;
}
.meet-play__lede {
margin-top: 20px;
}
}
/* ========================================================= */
/* RESULTS — pinned scrollytelling, ghost numbers */
/* Tall track + sticky pin keeps the inner stage on-screen */
/* while the page scrolls through N slots, one per stat. */
/* ========================================================= */
.results {
background: var(--bg);
border-top: 1px solid var(--rule);
position: relative;
}
.results__track {
min-height: 400vh;
position: relative;
}
.results__pin {
align-items: center;
display: flex;
height: 100vh;
overflow: hidden;
position: sticky;
top: 0;
}
.results__inner {
align-items: stretch;
box-sizing: border-box;
display: grid;
gap: clamp(40px, 5vw, 96px);
grid-template-columns: minmax(320px, 1.15fr) 1.85fr;
height: 100%;
margin: 0 auto;
max-width: var(--max-w);
padding-bottom: clamp(32px, 5vh, 72px);
padding-inline: var(--pad-x);
padding-top: calc(72px + clamp(24px, 4vh, 56px));
position: relative;
width: 100%;
}
.results__inner::before {
background: var(--border-strong);
bottom: 0;
content: "";
left: clamp(400px, 40%, 520px);
pointer-events: none;
position: absolute;
top: 0;
width: 1px;
}
.results__copy {
align-self: center;
display: flex;
flex-direction: column;
gap: 18px;
}
.results__copy .eyebrow {
margin: 0;
}
.results__title {
color: var(--title-fill);
display: flex;
flex-direction: column;
font-family: var(--font-display);
font-size: clamp(36px, 4vw, 62px);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.02;
margin: 6px 0 0;
padding-top: 0.04em;
}
.results__title-line {
white-space: nowrap;
}
/* .results__title-line--gradient handled by shared rule */
.results__lede {
color: var(--text);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
line-height: 1.55;
margin: 0;
max-width: 32ch;
}
.results__cta {
align-self: flex-start;
margin-top: 8px;
}
/* ---------- Right panel: tabs + stage ---------- */
.results__panel {
--panel-inset: clamp(36px, 4.2vw, 84px);
display: grid;
gap: clamp(28px, 3vh, 48px);
grid-template-rows: auto 1fr;
height: 100%;
min-height: 0;
min-width: 0;
padding-left: var(--panel-inset);
}
.results__tabs {
display: grid;
gap: clamp(16px, 2vw, 32px);
grid-template-columns: repeat(4, 1fr);
padding-right: clamp(40px, 5vw, 96px);
}
.results__tab {
align-items: center;
background: transparent;
border: 0;
cursor: pointer;
display: flex;
padding: 16px 0 0;
text-align: left;
}
.results__tab-bar {
background: var(--border-strong);
display: block;
height: 1px;
position: relative;
transition: background 200ms var(--ease);
width: 100%;
}
.results__tab-fill {
display: none;
}
.results__tab.is-active .results__tab-bar {
background: var(--accent-gradient);
height: 2px;
}
.results__tab:hover .results__tab-bar {
background: rgba(255, 255, 255, 0.22);
}
.results__tab.is-active:hover .results__tab-bar {
background: var(--accent-gradient);
}
/* ---------- Stage: stacked slides, only one visible ---------- */
.results__stage {
min-height: 0;
position: relative;
}
.results__slide {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 36px);
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
visibility: hidden;
}
.results__slide.is-active {
opacity: 1;
pointer-events: auto;
visibility: visible;
}
.results__rank {
align-items: baseline;
color: var(--text);
display: flex;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
gap: 14px;
letter-spacing: 0.22em;
margin: 0;
text-transform: uppercase;
}
.results__rank-num {
-webkit-background-clip: text;
background: var(--accent-gradient);
background-clip: text;
color: transparent;
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 800;
letter-spacing: 0;
}
.results__big {
align-items: center;
align-self: flex-start;
color: var(--title-fill);
display: flex;
font-family: var(--font-display);
font-size: clamp(140px, 32vh, 340px);
font-variant-numeric: tabular-nums;
font-weight: 800;
justify-content: flex-start;
letter-spacing: -0.04em;
line-height: 0.9;
margin: 0;
margin-left: calc(-1 * var(--panel-inset) + clamp(16px, 2vw, 40px));
margin-top: auto;
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
user-select: none;
will-change: transform, opacity;
}
.results__slide.is-active .results__big {
opacity: 1;
transform: translateY(0);
}
.results__big-prefix, .results__big-num, .results__big-suffix {
display: inline-block;
}
.results__case-link {
align-self: flex-start;
border-bottom: 1px solid var(--accent-from);
color: var(--accent-from);
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
margin-bottom: auto;
margin-top: clamp(12px, 2.5vh, 24px);
padding-bottom: 6px;
text-transform: uppercase;
transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.results__case-link:hover {
border-bottom-color: var(--accent-to);
color: var(--accent-to);
}
@media (max-width: 960px) {
.results__track {
min-height: 360vh;
}
.results__inner {
gap: 32px;
grid-template-columns: 1fr;
padding-bottom: clamp(24px, 4vh, 56px);
padding-top: calc(72px + clamp(16px, 3vh, 40px));
}
.results__inner::before {
display: none;
}
.results__big {
font-size: clamp(80px, 18vh, 180px);
}
}
@media (max-width: 520px) {
.results__tabs {
gap: 10px;
}
.results__big {
font-size: clamp(72px, 14vh, 140px);
}
}
/* ========================================================= */
/* RESULTS — row variant: simple stat strip */
/* Overrides are scoped under .results--row so the */
/* scrollytelling version above stays untouched. */
/* ========================================================= */
.results--row {
padding-block: clamp(36px, 3.5vw, 56px);
}
.results--row .results__inner {
align-items: center;
gap: clamp(32px, 4vw, 64px);
grid-template-columns: minmax(260px, 1fr) 2.6fr;
height: auto;
padding-bottom: 0;
padding-top: 0;
}
.results--row .results__inner::before {
display: none;
}
.results--row .results__copy {
align-self: auto;
gap: 10px;
}
.results--row .results__title {
color: var(--text);
font-size: clamp(28px, 3vw, 44px);
letter-spacing: 0em;
line-height: 1.04;
margin: 0;
}
.results--row .results__lede {
color: var(--text-muted);
font-size: 15px;
font-weight: 400;
max-width: 38ch;
}
.stat-strip {
display: grid;
gap: clamp(20px, 2.5vw, 40px);
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.stat-strip__item {
border-left: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: clamp(8px, 0.8vw, 14px);
padding-left: clamp(20px, 2vw, 36px);
}
.stat-strip__item:first-child {
border-left: 0;
padding-left: 0;
}
.stat-strip__value {
align-items: baseline;
color: var(--text);
display: inline-flex;
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 44px);
font-variant-numeric: tabular-nums;
font-weight: 700;
letter-spacing: 0em;
line-height: 1;
}
.stat-strip__num, .stat-strip__prefix, .stat-strip__suffix {
display: inline-block;
}
.stat-strip__label {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.45;
}
@media (max-width: 960px) {
.results--row .results__inner {
gap: 32px;
grid-template-columns: 1fr;
}
.stat-strip {
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
.stat-strip__item:nth-child(3) {
border-left: 0;
border-top: 1px solid var(--rule);
padding-left: 0;
padding-top: 24px;
}
}
@media (max-width: 520px) {
.stat-strip {
grid-template-columns: 1fr;
}
.stat-strip__item {
border-left: 0;
border-top: 1px solid var(--rule);
padding-left: 0;
padding-top: 20px;
}
.stat-strip__item:first-child {
border-top: 0;
padding-top: 0;
}
}
/* ========================================================= */
/* SERVICES — numbered editorial list */
/* ========================================================= */
.services {
position: relative;
background: var(--bg);
padding-block: 0;
border-top: 1px solid var(--rule);
/* No overflow constraint here — sticky inside breaks if the section
establishes any scrolling context. The diagram clips its own overflow. */
}
/* Section header sits inside the sticky pin, on the centre-left of the
balance. The spread of the spokes (±38° outer, ±13° inner) leaves enough
vertical room for the full eyebrow + title + lede + CTA. The inner
active line still crosses through the title; z-index keeps text on top. */
.services__header--inline {
display: flex;
flex-direction: column;
gap: clamp(14px, 1.2vw, 22px);
left: var(--pad-x) !important;
left: 5% !important;
pointer-events: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: clamp(280px, 32vw, 520px);
z-index: 3;
}
.services__header--inline .eyebrow {
margin: 0;
}
.services__title {
color: var(--text);
display: flex;
flex-direction: column;
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 75px);
font-weight: 800;
letter-spacing: -2px;
line-height: 1;
margin: 0;
}
.services__lede {
color: var(--text-muted);
font-size: clamp(14px, 1vw, 16px);
line-height: 1.55;
margin: 0;
max-width: 38ch;
}
.services__cta {
align-self: start;
margin-top: 4px;
}
/* ---------- Services balance (off-screen-left hub, scroll-rotated spokes) ---------- */
/* Tall scroll track. Its height is the total scroll distance over which the
balance rotates from first to last service. Bigger = slower, more deliberate. */
.services__track {
height: 320vh;
margin-top: clamp(56px, 8vw, 120px);
position: relative;
}
.services__sticky {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
position: sticky;
top: 0;
}
.services-diagram {
bottom: -10rem;
height: 100%;
isolation: isolate;
overflow: hidden;
position: relative;
top: -10rem;
width: 100%;
}
.services-balance {
/* Reveal phase: --reveal goes 0 → 1 once we cross into phase B. JS sets it. */
--reveal: 0;
/* Anchor for the active-spoke line + dot. Bumped 80px right of the original
clamp so the line clears the inline header on wide screens. Tweak these
two values to nudge the X start and Y position of the orange bar+dot. */
--accent-anchor-x: clamp(520px, calc(34vw + 100px), 660px);
--accent-anchor-y: -45px;
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
/* The balance rises into place: shifts up from +120px to 0 as --reveal
goes 0 → 1, then settles. */
transform: translate3d(0, calc((1 - var(--reveal)) * 120px), 0);
opacity: var(--reveal);
will-change: transform, opacity;
}
.services-balance__spoke {
/* JS sets --slide per frame: 0 = centred/active, ±1 = one slot away,
beyond ±1 = off-stage. The display element reads --slide for its
translate + rotate transform; the line/dot only react to .is-active. */
--slide: 0;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 0;
transform-style: preserve-3d;
}
/* Stable horizontal track. Starts past the inline header on the left and
runs to the right edge of the diagram. All spokes overlap, so visually
you only ever see one line — the active spoke's. */
.services-balance__line {
background: rgba(255, 255, 255, 0.10);
height: 1px;
left: var(--accent-anchor-x);
opacity: 0;
position: absolute;
right: 0;
top: var(--accent-anchor-y);
transition: background 360ms var(--ease), opacity 320ms var(--ease), filter 360ms var(--ease);
}
.services-balance__spoke.is-active .services-balance__line {
background: rgba(250, 108, 0, 0.55);
filter: drop-shadow(0 0 8px rgba(250, 108, 0, 0.45));
opacity: 1;
}
.services-balance__dot {
background: rgba(255, 255, 255, 0.22);
border-radius: 50%;
height: 14px;
left: var(--accent-anchor-x);
margin-left: -7px;
margin-top: -7px;
opacity: 0;
position: absolute;
top: var(--accent-anchor-y);
transition: background 320ms var(--ease), box-shadow 320ms var(--ease), transform 320ms var(--ease), opacity 320ms var(--ease);
width: 14px;
}
.services-balance__spoke.is-active .services-balance__dot {
background: var(--accent-from);
box-shadow: 0 0 0 6px rgba(250, 108, 0, 0.18), 0 0 22px rgba(250, 108, 0, 0.78);
opacity: 1;
transform: scale(1.25);
}
/* Hidden on desktop; shown on mobile as a stacked list. */
.services-diagram__list {
display: none;
}
/* Showreel card: dominant right-side panel during phase A. As the section
scrolls it scales down and fades out so the balance can take over.
--reel-show (0..1): JS sets this. 1 = fully visible, 0 = hidden.
--tilt-x / --tilt-y / --mx / --my: pointer-driven 3D + glare. */
.services__reel {
position: absolute;
top: 50%;
right: clamp(24px, 4vw, 80px);
width: clamp(440px, 52vw, 820px);
aspect-ratio: 16 / 10;
--reel-show: 1;
--reel-rotz: -2deg;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(180deg, rgba(250, 108, 0, 0.05), rgba(235, 81, 115, 0.02) 50%, transparent), #0e0e11;
box-shadow: 0 60px 120px -36px rgba(0, 0, 0, 0.75);
transform-style: preserve-3d;
/* Master transform: opacity + smooth scale + drift driven by --reel-show.
Pointer tilt + resting Z-axis tilt layer on top for the card feel. */
transform: translate(calc((1 - var(--reel-show)) * 80px), calc(-50% + (1 - var(--reel-show)) * 110px)) perspective(1100px) rotateZ(calc(var(--reel-rotz) + (1 - var(--reel-show)) * -3deg)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(calc(0.78 + var(--reel-show) * 0.22));
opacity: var(--reel-show);
/* No CSS transition — the JS-driven CSS variable updates already sit on
the smoothstep curve, so motion stays in sync with the scroll. */
will-change: transform, opacity;
z-index: 3;
pointer-events: auto;
}
.services__reel::before {
background: radial-gradient(55% 55% at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0) 65%);
border-radius: inherit;
content: "";
inset: 0;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 280ms var(--ease);
z-index: 2;
}
.services__reel[data-tilted="true"]::before {
opacity: 1;
}
.services__reel-video {
background: transparent;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.services__reel-tag {
-webkit-backdrop-filter: blur(6px);
align-items: center;
backdrop-filter: blur(6px);
background: rgba(0, 0, 0, 0.55);
border-radius: 999px;
color: var(--accent-from);
display: inline-flex;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
height: 22px;
left: 12px;
letter-spacing: 0.18em;
padding: 0 10px;
position: absolute;
text-transform: uppercase;
top: 12px;
z-index: 1;
}
@property --swing {
inherits: false;
initial-value: 0deg;
syntax: "";
}
.services-balance__display {
position: absolute;
top: -65px;
left: clamp(450px, 34vw, 600px);
width: clamp(560px, 56vw, 980px);
padding-top: clamp(25px, 2.1vw, 45px);
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: clamp(20px, 1.8vw, 32px);
row-gap: clamp(16px, 1.4vw, 24px);
align-items: baseline;
/* Vertical travel distance at |slide| = 1 (one full transition into / out of view). */
--slide-dist: clamp(220px, 26vh, 340px);
--swing: 0deg;
transform-origin: 50% 0%;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: translateY(calc(var(--slide, 0) * var(--slide-dist) * -1)) perspective(1100px) rotateX(var(--swing));
opacity: var(--display-opacity, 0);
will-change: transform, opacity;
}
@keyframes spokeSwing {
0% {
--swing: -19deg;
}
24% {
--swing: 10deg;
}
48% {
--swing: -4deg;
}
70% {
--swing: 1.8deg;
}
88% {
--swing: -0.6deg;
}
100% {
--swing: 0deg;
}
}
.services-balance__spoke.is-active .services-balance__display {
animation: spokeSwing 1100ms cubic-bezier(0.42, 0, 0.58, 1) both;
}
.services-balance__display-num {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: clamp(18px, 1.4vw, 24px);
font-weight: 500;
grid-column: 1;
grid-row: 1;
letter-spacing: 0.06em;
white-space: nowrap;
}
.services-balance__display-desc {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: clamp(16px, 1.3vw, 22px);
grid-column: 2;
grid-row: 2;
line-height: 1.5;
margin: 0;
max-width: 40ch;
}
/* Mobile fallback: hide the balance + editorial display, render a stacked list. */
@media (max-width: 720px) {
/* Kill the 320vh sticky pin: on mobile there's no rotating balance to
scrub through, so the tall scroll range only created dead air between
this section and the next. */
.services__track {
height: auto;
margin-top: 0;
}
.services__sticky {
display: block;
height: auto;
position: static;
top: auto;
}
.services-diagram {
bottom: 0;
height: auto;
max-width: 100%;
overflow: visible;
padding-block: clamp(40px, 8vw, 64px);
padding-inline: var(--pad-x);
top: 0;
}
.services-balance, .services__reel {
display: none;
}
/* Show the editorial header (title, lede, CTA) inline above the list.
Override absolute positioning + transform from the desktop layout. */
.services__header--inline {
display: flex;
left: auto !important;
margin-bottom: clamp(28px, 6vw, 40px);
padding-inline: 0;
position: static;
top: auto;
transform: none;
width: auto;
}
.services__title {
font-size: clamp(36px, 9vw, 56px);
}
.services__cta {
align-self: flex-start;
}
.services-diagram__list {
display: flex;
flex-direction: column;
gap: 28px;
list-style: none;
margin: 0;
padding: 0;
}
.services-diagram__list li {
align-items: baseline;
border-top: 1px solid var(--rule);
column-gap: 14px;
display: grid;
grid-template-columns: auto 1fr;
padding-top: 24px;
row-gap: 6px;
}
.services-diagram__list-num {
align-self: start;
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 13px;
grid-row: 1 / span 2;
letter-spacing: 0.04em;
padding-top: 0.4em;
}
.services-diagram__list h3 {
color: var(--text-muted);
font-family: var(--font-display);
font-size: clamp(28px, 7vw, 40px);
font-weight: 900;
letter-spacing: 0em;
line-height: 1.1;
margin: 0;
}
.services-diagram__list p {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.5;
margin: 0;
}
}
/* ========================================================= */
/* CTA BANNER — bottom-anchored editorial spread */
/* ========================================================= */
/* The whole banner is one big click target. A "BOOK A DEMO" marquee
scrolls in outline behind the headline; on hover the default cursor
hides and a circular stamp follows the pointer. No buttons. */
.cta-banner {
background: var(--bg);
border-top: 1px solid var(--rule);
color: inherit;
cursor: none;
display: block;
isolation: isolate;
overflow: hidden;
padding-block: var(--pad-section);
position: relative;
text-decoration: none;
}
.cta-banner::before {
background: radial-gradient(60% 50% at 50% 100%, rgba(250, 108, 0, 0.2) 0%, rgba(250, 108, 0, 0) 65%),
radial-gradient(50% 40% at 20% 80%, rgba(235, 81, 115, 0.14) 0%, rgba(235, 81, 115, 0) 65%);
content: "";
filter: blur(40px);
inset: 0;
pointer-events: none;
position: absolute;
z-index: -1;
}
.cta-banner__inner {
align-items: end;
display: grid;
gap: clamp(24px, 3vw, 48px);
grid-template-columns: repeat(12, 1fr);
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
position: relative;
z-index: 1;
}
.cta-banner__inner .eyebrow {
grid-column: 1 / 5;
margin: 0 0 16px;
}
.cta-banner__title {
/* JS sets these from the cursor position in viewport pixels so the
spotlight crosses both lines as a single coherent light. */
--mouse-x: 50vw;
--mouse-y: 50vh;
--spotlight: clamp(240px, 28vw, 500px);
grid-column: 1 / 10;
margin: 0;
font-family: "Poppins", var(--font-display);
font-weight: 900;
font-size: clamp(64px, 11vw, 180px);
line-height: 1;
display: flex;
flex-direction: column;
gap: 0;
text-wrap: balance;
padding-top: 0.05em;
}
/* Hollow outlined letters by default; a radial gradient anchored at the
cursor (viewport-fixed) paints the fill inside the spotlight via
background-clip:text. background-attachment:fixed locks the gradient to
the viewport so the same light pool spans both lines as one continuous
beam following the cursor. */
.cta-banner__title-line {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
/* Solid orange disc anchored at the cursor — letters fill in flat orange
inside the spotlight, hollow outside. No gradient inside the disc, no
soft edge around it. */
background-image: radial-gradient(circle var(--spotlight) at var(--mouse-x) var(--mouse-y),
var(--accent-from) 0%,
var(--accent-from) 70%,
transparent 72%);
background-attachment: fixed;
-webkit-background-clip: text;
background-clip: text;
background-repeat: no-repeat;
transition: -webkit-text-stroke-color 280ms var(--ease);
}
.cta-banner:hover .cta-banner__title-line {
-webkit-text-stroke-color: rgba(255, 255, 255, 0.35);
}
.cta-banner__lede {
color: var(--text-muted);
font-size: 15px;
grid-column: 10 / 13;
line-height: 1.5;
margin: 0 0 8px;
max-width: 28ch;
}
@media (max-width: 960px) {
.cta-banner__inner .eyebrow, .cta-banner__title, .cta-banner__lede {
grid-column: 1 / -1;
}
.cta-banner__lede {
margin-top: 20px;
}
}
/* ---------- Custom cursor stamp ----------
White text ring rotating around a solid orange hub. The white arrow
sits on top of the hub and stays still while the ring spins. */
.cta-stamp {
filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.55));
height: 140px;
left: 0;
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
transform: translate(-50%, -50%) scale(0.7) rotate(-10deg);
transition: opacity 240ms var(--ease),
transform 380ms cubic-bezier(0.25, 1, 0.5, 1);
width: 140px;
will-change: transform, opacity, left, top;
z-index: 100;
}
.cta-banner.is-hot .cta-stamp {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0);
}
.cta-stamp__svg {
display: block;
height: 100%;
overflow: visible;
width: 100%;
}
.cta-stamp__rotor {
animation: cta-stamp-spin 9s linear infinite;
transform-origin: 70px 70px;
}
@keyframes cta-stamp-spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.cta-stamp__text {
fill: var(--text);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cta-stamp__hub {
fill: var(--accent-from);
}
.cta-stamp__arrow line, .cta-stamp__arrow polyline {
fill: none;
stroke: var(--text);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.4;
}
/* Touch / no-hover devices: show the stamp pinned bottom-right of the
section instead of as a cursor follower, so the affordance still reads. */
@media (hover: none),
(pointer: coarse) {
.cta-banner {
cursor: pointer;
}
.cta-stamp {
bottom: clamp(32px, 5vw, 64px);
left: auto;
opacity: 1;
position: absolute;
right: clamp(24px, 5vw, 80px);
top: auto;
transform: rotate(-8deg);
}
}
@media (prefers-reduced-motion: reduce) {
.cta-stamp__rotor {
animation: none;
}
}
/* ========================================================= */
/* WORDMARK + FOOTER */
/* ========================================================= */
/* Crane shot reveal: wordmark starts zoomed-in + offset-down + invisible
when entering viewport, then scales back, slides up and fades in as the
user scrolls — like a camera craning back from a close-up. JS drives
--crane-scale, --crane-y and --crane-opacity each frame. */
.wordmark {
background: var(--bg);
border-top: 1px solid var(--rule);
overflow: hidden;
padding-bottom: 0;
padding-top: 40px;
position: relative;
z-index: 2;
}
/* Mask is on the IMG (not the section) so the SVG still fades at the
bottom for the editorial bleed effect, while the section itself stays
fully opaque. */
.wordmark__img {
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
display: block;
height: auto;
margin: 0 auto;
margin-bottom: .1rem;
mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
max-width: var(--max-w);
opacity: var(--crane-opacity, 0);
transform: scale(var(--crane-scale, 2.6)) translate3d(0, var(--crane-y, 90px), 0);
transform-origin: 50% 50%;
width: 100%;
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.wordmark__img {
opacity: 1;
transform: none;
}
}
/* Editorial footer: three condensed link columns up top, thin signature
line at the bottom. */
.footer {
background: var(--bg);
border-top: 1px solid var(--rule);
display: flex;
flex-direction: column;
gap: clamp(20px, 2.4vw, 32px);
padding: clamp(28px, 3.5vw, 48px) var(--pad-x) clamp(16px, 2vw, 24px);
position: relative;
z-index: 2;
}
.footer__nav {
align-items: start;
border-bottom: 1px solid var(--rule);
display: grid;
gap: clamp(20px, 3vw, 56px);
grid-template-columns: repeat(4, minmax(0, max-content));
justify-content: end;
margin: 0 auto;
max-width: var(--max-w);
padding-bottom: clamp(20px, 2.4vw, 32px);
width: 100%;
}
.footer__col-link {
color: var(--text-dim);
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-decoration: none;
text-transform: uppercase;
transition: color 160ms var(--ease);
}
.footer__col-link:hover {
color: var(--text);
}
.footer__bottom {
align-items: center;
display: flex;
gap: 24px;
justify-content: space-between;
margin: 0 auto;
max-width: var(--max-w);
width: 100%;
}
.footer__copy {
color: var(--text-dim);
font-size: 12px;
letter-spacing: 0.04em;
margin: 0;
max-width: 60ch;
}
.footer__social {
display: flex;
flex: none;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.footer__social-link {
align-items: center;
background: transparent;
border: 1px solid var(--border-strong);
border-radius: 50%;
color: var(--text-muted);
display: flex;
height: 36px;
justify-content: center;
transition: color 160ms var(--ease),
border-color 160ms var(--ease),
background 160ms var(--ease),
transform 200ms cubic-bezier(0.25, 1, 0.5, 1);
width: 36px;
}
.footer__social-link:hover {
background: rgba(250, 108, 0, 0.08);
border-color: var(--accent-from);
color: var(--text);
transform: translateY(-2px);
}
@media (max-width: 880px) {
.footer__nav {
grid-template-columns: repeat(3, 1fr);
justify-content: stretch;
}
.footer__bottom {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 540px) {
.footer__nav {
grid-template-columns: 1fr 1fr;
}
}
/* ========================================================= */
/* MENU PANEL — editorial full-bleed */
/* ========================================================= */
.menu-panel {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
padding: 24px;
position: fixed;
z-index: 100;
}
.menu-panel[hidden] {
display: none;
}
.menu-panel__scrim {
-webkit-backdrop-filter: blur(8px);
animation: menu-scrim-in 240ms ease forwards;
backdrop-filter: blur(8px);
background: rgba(0, 0, 0, 0.78);
inset: 0;
opacity: 0;
position: absolute;
}
.menu-panel__card {
animation: menu-card-in 360ms cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: 18px;
box-shadow: 0 60px 140px -24px rgba(0, 0, 0, 0.8);
height: auto;
opacity: 0;
padding: clamp(48px, 6vw, 88px);
position: relative;
transform: translateY(12px) scale(0.985);
width: min(1200px, 100%);
}
@keyframes menu-scrim-in {
to {
opacity: 1;
}
}
@keyframes menu-card-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.menu-panel__close {
align-items: center;
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
height: 44px;
justify-content: center;
padding: 0;
position: absolute;
right: 24px;
top: 24px;
transition: background-color 160ms var(--ease);
width: 44px;
}
.menu-panel__close:hover {
background: rgba(255, 255, 255, 0.06);
}
.menu-panel__close:focus-visible {
outline: 2px solid rgba(250, 108, 0, 0.6);
outline-offset: 2px;
}
/* The "+" glyph (same as in the CRAFTSMAN+ wordmark) is rotated 45° at rest so
it reads as an X close affordance; it springs back to "+" on hover. Two
overlapping paths cross-fade between the muted-gray rest fill and the
orange gradient hover fill. */
.menu-panel__close {
color: var(--text-muted);
}
.menu-panel__close-plus {
transform: rotate(45deg);
transform-box: fill-box;
transform-origin: 50% 50%;
transition: transform 240ms var(--ease), opacity 200ms var(--ease);
}
.menu-panel__close-plus--hover {
opacity: 0;
}
.menu-panel__close:hover .menu-panel__close-plus, .menu-panel__close:focus-visible .menu-panel__close-plus {
transform: rotate(0deg);
}
.menu-panel__close:hover .menu-panel__close-plus--rest, .menu-panel__close:focus-visible .menu-panel__close-plus--rest {
opacity: 0;
}
.menu-panel__close:hover .menu-panel__close-plus--hover, .menu-panel__close:focus-visible .menu-panel__close-plus--hover {
opacity: 1;
}
.menu-panel__body {
align-items: start;
display: grid;
gap: 48px;
grid-template-columns: 1.4fr 1fr;
height: 100%;
position: relative;
}
.menu-panel__primary {
counter-reset: menu;
display: flex;
flex-direction: column;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
}
.menu-panel__primary-item {
counter-increment: menu;
position: relative;
}
.menu-panel__primary-link {
display: inline-block;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(40px, 6vw, 80px);
line-height: 1;
/* letter-spacing: -0.035em; */
color: rgba(224, 224, 224, 0.18);
transition: color 200ms var(--ease);
}
.menu-panel__primary-item::before {
color: var(--text-dim);
content: "0" counter(menu);
font-family: var(--font-sans);
font-size: 10px;
font-variant-numeric: tabular-nums;
font-weight: 500;
left: -44px;
letter-spacing: 0.18em;
position: absolute;
top: 12px;
}
.menu-panel__primary-item:hover .menu-panel__primary-link, .menu-panel__primary-item.is-active .menu-panel__primary-link, .menu-panel__primary-link:focus-visible {
color: var(--text);
}
.menu-panel__sub {
/* Anchor the sub-menu's bottom edge to the same y as the active title's
underline. Both share --underline-y, set on .menu-panel__body by the JS. */
position: absolute;
right: 0;
width: 100%;
top: var(--underline-y, 0);
/* translateY(-100%) puts the sub's bottom at "top"; +1px aligns with the
underline's bottom (it's 1px tall). +6px is the resting offset for the
slide-up entrance — overridden below by .is-active. */
transform: translateY(calc(-100% + 1px + 6px));
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
text-align: right;
opacity: 0;
visibility: hidden;
transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
pointer-events: none;
}
.menu-panel__sub.is-active {
opacity: 1;
pointer-events: auto;
transform: translateY(calc(-100% + 1px));
visibility: visible;
}
.menu-panel__sub a {
color: var(--text-muted);
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.3;
transition: color 160ms var(--ease);
}
.menu-panel__sub a:hover {
color: var(--text);
}
.menu-panel__underline {
background: var(--accent-gradient);
border-radius: 0;
height: 1px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
transform: translateY(var(--underline-y, 0));
transition: opacity 200ms var(--ease), transform 280ms var(--ease);
}
.menu-panel__body.has-active .menu-panel__underline {
opacity: 1;
}
@media (max-width: 720px) {
.menu-panel__card {
height: auto;
padding: 56px 32px;
}
.menu-panel__body {
gap: 32px;
grid-template-columns: 1fr;
}
.menu-panel__primary-item::before {
display: none;
}
.menu-panel__sub {
position: static;
text-align: left;
top: auto;
transform: none;
}
.menu-panel__sub.is-active {
transform: none;
}
.menu-panel__sub a {
font-size: 16px;
}
}
/* ========================================================= */
/* Responsive catchall */
/* ========================================================= */
@media (max-width: 720px) {
:root {
--pad-x: 16px;
}
.hero {
height: 55vh;
isolation: isolate;
overflow: visible;
padding: clamp(28px, 4vw, 56px) 0 0;
position: relative;
}
.meet-play--workspace .meet-play__title-word {
display: block;
line-height: .95;
}
.nav {
height: 60px;
}
.nav__logo img {
height: 20px;
}
.nav__right {
gap: 8px;
}
/* Icon-only menu button: kill the word "MENU", keep the "+" */
.nav__menu {
font-size: 0;
gap: 0;
justify-content: center;
padding: 0;
width: 40px;
}
/* Mobile MENU+ icon size, applied to the .orangespan suffix. */
.nav__menu .orangespan {
font-size: 22px;
font-weight: 500;
line-height: 1;
}
/* Swap "Request a Demo" → "Demo" at mobile without touching the DOM copy */
.nav .btn--primary {
font-size: 0;
height: 36px;
padding: 0 14px;
}
.nav .btn--primary::before {
content: "Demo";
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
}
.meet-play__title, .results__title, .services__title, .cta-banner__title {
color: var(--title-fill);
}
/* Try them yourself sits over a darker area and needs more contrast: keep
it in light grey rather than the dark fill used elsewhere. */
.gallery-v2__title {
color: #E0E0E0;
}
/* ========================================================= */
/* BOOK A DEMO — dedicated page */
/* ========================================================= */
.book {
isolation: isolate;
padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 5vw, 80px);
position: relative;
}
.book::before {
background: radial-gradient(60% 50% at 12% 18%, rgba(250, 108, 0, 0.16) 0%, rgba(250, 108, 0, 0) 60%),
radial-gradient(50% 40% at 88% 70%, rgba(235, 81, 115, 0.12) 0%, rgba(235, 81, 115, 0) 65%);
content: "";
filter: blur(40px);
inset: 0;
pointer-events: none;
position: absolute;
z-index: -1;
}
.book__inner {
align-items: start;
display: grid;
gap: clamp(40px, 5vw, 96px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.book__copy {
display: flex;
flex-direction: column;
position: sticky;
top: clamp(96px, 9vw, 120px);
}
.book__copy .eyebrow {
margin: 0 0 16px;
}
.book__title {
align-items: flex-start;
color: var(--text);
display: flex;
flex-direction: column;
font-family: var(--font-display);
font-size: clamp(48px, 5.6vw, 88px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 0.98;
margin: 0 0 clamp(16px, 1.6vw, 24px);
padding-top: 0.04em;
}
.book__title-line {
display: inline-block;
}
.book__title-line--accent {
font-weight: 900;
margin-left: 0;
}
.book__lede {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.55;
margin: 0 0 clamp(28px, 3vw, 44px);
max-width: 44ch;
}
.book__points {
display: flex;
flex-direction: column;
gap: clamp(16px, 1.6vw, 24px);
list-style: none;
margin: 0;
padding: 0;
}
.book__points li {
border-top: 1px solid var(--rule);
display: grid;
gap: 16px;
grid-template-columns: 36px 1fr;
padding-top: 14px;
}
.book__points-num {
color: var(--accent-from);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
padding-top: 2px;
}
.book__points h3 {
color: var(--text);
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.book__points p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* ----- Form panel ----- */
.book-form {
position: relative;
width: 100%;
}
.demo-panel--book {
aspect-ratio: auto;
grid-column: auto;
width: 100%;
}
.demo-panel--book .demo-panel__bar {
height: 40px;
}
.demo-panel__title {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
margin-left: 8px;
text-transform: uppercase;
}
.book-form__body {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: .4rem;
display: flex;
flex-direction: column;
font-family: var(--font-sans) !important;
gap: 10px;
padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
position: relative;
z-index: 1;
}
/* Fieldset wrapper for radio/checkbox groups (Company size, Creative types).
Reset native fieldset chrome; the legend acts as the field label. */
.book-form__group {
border: 0;
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
}
.book-form__group .book-form__label {
color: var(--text-muted);
display: block;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
padding: 0;
}
.book-form__field em, .book-form__group .book-form__label em {
color: var(--accent-from);
font-style: normal;
margin-left: 2px;
}
.book-form__choices {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.book-form__choice {
align-items: center;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
color: var(--text);
cursor: pointer;
display: inline-flex;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
gap: 8px;
padding: 8px 14px;
position: relative;
transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.book-form__choice:hover {
border-color: rgba(250, 108, 0, 0.32);
}
.book-form__choice input {
cursor: pointer;
height: 100%;
inset: 0;
margin: 0;
opacity: 0;
position: absolute;
width: 100%;
}
.book-form__choice:has(input:focus-visible) {
outline: 2px solid rgba(250, 108, 0, 0.55);
outline-offset: 2px;
}
.book-form__choice:has(input:checked) {
background: rgba(250, 108, 0, 0.10);
border-color: rgba(250, 108, 0, 0.62);
color: var(--text);
}
.book-form__consent {
align-items: flex-start;
color: var(--text-muted);
display: flex;
font-family: var(--font-sans);
font-size: 12px;
gap: 10px;
line-height: 1.55;
margin-top: 4px;
}
.book-form__consent input[type="checkbox"] {
accent-color: var(--accent-from);
cursor: pointer;
flex: 0 0 auto;
height: 16px;
margin-top: 3px;
width: 16px;
}
.book-form__consent a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 2px;
}
.book-form__consent a:hover {
color: var(--accent-from);
}
.book-form__status {
border-radius: 8px;
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.5;
margin: 6px 0 0;
padding: 10px 12px;
}
.book-form__status[hidden] {
display: none;
}
.book-form__status[data-type="error"] {
background: rgba(235, 81, 115, 0.10);
border: 1px solid rgba(235, 81, 115, 0.4);
color: rgba(255, 210, 215, 0.95);
}
.book-form__honeypot {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
.book-form__row {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
}
.book-form__field {
display: flex;
flex-direction: column;
font-family: var(--font-sans);
gap: 4px;
}
.book-form__field>span {
color: var(--text-muted);
font-family: var(--font-sans);
font-weight: 500;
}
.book-form__field input, .book-form__field select, .book-form__field textarea {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: .4rem;
color: var(--text);
font: inherit;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.4;
padding: 9px 12px;
transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
width: 100%;
}
.book-form__field textarea {
font-family: var(--font-sans);
min-height: 56px;
resize: vertical;
}
.book-form__field select {
-webkit-appearance: none;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
linear-gradient(-45deg, transparent 50%, var(--text-muted) 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-repeat: no-repeat;
background-size: 5px 5px;
padding-right: 36px;
}
.book-form__field input::placeholder, .book-form__field textarea::placeholder {
color: rgba(255, 255, 255, 0.28);
}
.book-form__field input:hover, .book-form__field select:hover, .book-form__field textarea:hover {
border-color: rgba(255, 255, 255, 0.16);
}
.book-form__field input:focus, .book-form__field select:focus, .book-form__field textarea:focus {
background: rgba(255, 255, 255, 0.04);
border-color: var(--accent-from);
border-width: 1px;
box-shadow: 0 0 0 3px rgba(250, 108, 0, 0.18);
outline: none;
}
.book-form__field input:user-invalid {
border-color: rgba(235, 81, 115, 0.5);
}
.book-form__submit {
align-self: flex-end;
height: 42px;
margin-top: 4px;
padding: 0 22px;
}
.book-form__legal {
color: var(--text-dim);
font-size: 11px;
line-height: 1.45;
margin: 2px 0 0;
}
/* ----- Success state ----- */
.book-form__success {
align-items: flex-start;
background: linear-gradient(180deg, rgba(250, 108, 0, 0.06), rgba(235, 81, 115, 0.03) 50%, transparent),
#0e0e11;
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
gap: 12px;
padding: clamp(40px, 5vw, 72px);
text-align: left;
}
.book-form__success[hidden] {
display: none;
}
.book-form__success .eyebrow {
margin: 0;
}
.book-form__success-title {
font-family: var(--font-display);
font-size: clamp(36px, 4vw, 56px);
font-weight: 900;
letter-spacing: 0em;
line-height: 1;
margin: 4px 0;
}
.book-form__success-lede {
color: var(--text-muted);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
margin: 0 0 12px;
max-width: 42ch;
}
@media (max-width: 960px) {
.book__inner {
gap: clamp(32px, 5vw, 48px);
grid-template-columns: 1fr;
}
.book__copy {
position: static;
top: auto;
}
.book-form__row {
grid-template-columns: 1fr;
}
}
/* Caption + CTA stacked at the bottom-centre of .demo-panel--plain.
Both sit above the gradient fade (which is z-index 1000) so they
stay legible while the workspace mockup darkens behind them. */
.demo-panel__caption {
position: absolute;
left: 50%;
bottom: clamp(76px, calc(3vw + 56px), 96px);
transform: translateX(-50%);
z-index: 1001;
/* margin: 0; */
max-width: calc(100% - 32px);
font-family: var(--font-display);
font-size: clamp(14px, 1.2vw, 17px);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-muted);
text-align: center;
white-space: nowrap;
pointer-events: none;
}
.abscenter {
bottom: clamp(20px, 3vw, 40px);
left: 10%;
letter-spacing: 0.08em;
padding: 0 17px;
position: absolute;
top: 110%;
transform: translateX(-50%);
z-index: 1001;
}
.centered-text, .centered {
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
text-align: center;
}
@media (max-width: 720px) {
.demo-panel__caption {
font-size: 13px;
max-width: calc(100% - 24px);
white-space: normal;
}
}
/* Floating "back to top" button. Fixed bottom-right of the viewport,
fades in once the user scrolls past one viewport. visibility is
delayed on hide so the opacity transition can play out. */
.go-up {
bottom: clamp(16px, 2vw, 28px);
display: inline-flex;
height: 52px;
opacity: 0;
pointer-events: none;
position: fixed;
right: clamp(16px, 2vw, 28px);
transform: translateY(8px);
transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
visibility: hidden;
width: 52px;
z-index: 200;
}
.go-up.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 0s;
visibility: visible;
}
.go-up:hover {
transform: translateY(-2px);
}
.go-up:active {
transform: translateY(0);
}
.go-up svg {
display: block;
height: 100%;
width: 100%;
}
@media (max-width: 720px) {
.go-up {
height: 44px;
width: 44px;
}
}
/* ========================================================= */
/* CASE STUDIES — proof grid */
/* ========================================================= */
.case-studies {
background: #09090b;
padding-block: clamp(64px, 7vw, 120px) var(--pad-section);
position: relative;
}
.case-studies__inner {
margin: 0 auto;
max-width: var(--max-w);
padding-inline: var(--pad-x);
}
.case-studies__head {
margin-bottom: clamp(40px, 4.5vw, 64px);
}
.case-studies__title {
font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 64px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.06;
margin: 0;
max-width: 22ch;
padding-bottom: 0.12em;
}
.case-studies__title-line {
display: block;
}
.case-studies__title-line--accent {
-webkit-background-clip: text;
background: linear-gradient(90deg, #fa6c00 0%, #eb5173 51.4%, #8912a0 100%);
background-clip: text;
color: transparent;
margin: -0.08em -0.04em -0.18em 0;
padding: 0.08em 0.04em 0.18em 0;
}
.case-studies__grid {
display: grid;
gap: clamp(14px, 1.4vw, 22px);
grid-template-columns: repeat(2, 1fr);
}
.case-study {
background: var(--surface-2);
border: 1px solid var(--border-strong);
border-radius: 18px;
display: grid;
gap: clamp(4px, 0.5vw, 8px);
grid-template-columns: 1fr 1fr;
padding: 4px;
transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.case-study:hover {
border-color: rgba(250, 108, 0, 0.32);
box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
transform: translateY(-2px);
}
.case-study--description {
grid-template-columns: 1fr;
}
.case-study__text {
background: var(--surface);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
min-height: clamp(220px, 22vw, 280px);
padding: clamp(18px, 1.6vw, 26px);
}
.case-study__text--full {
min-height: clamp(240px, 24vw, 300px);
}
.case-study__logo {
height: 26px;
margin-bottom: clamp(14px, 1.3vw, 18px);
max-width: 92px;
object-fit: contain;
object-position: left center;
width: auto;
}
.case-study__title {
color: var(--text);
font-family: var(--font-sans);
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0 0 clamp(16px, 1.4vw, 20px);
text-wrap: balance;
}
.case-study__desc {
color: var(--text-muted);
font-size: 13px;
line-height: 1.55;
margin: 0 0 clamp(16px, 1.5vw, 22px);
max-width: 52ch;
}
.case-study__stats {
display: flex;
gap: clamp(24px, 2.4vw, 40px);
list-style: none;
margin: 0 0 clamp(18px, 1.8vw, 24px);
padding: 0;
}
.case-study__stats li {
padding: 0;
}
.case-study__stat-value {
color: var(--text);
display: block;
font-family: var(--font-display);
font-size: clamp(22px, 1.9vw, 30px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
}
.case-study__stat-label {
color: var(--text-muted);
display: block;
font-size: 11px;
line-height: 1.3;
margin-top: 6px;
}
.case-study__readmore {
align-items: center;
align-self: flex-start;
color: var(--text);
display: inline-flex;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
gap: 6px;
margin-top: auto;
transition: color 160ms var(--ease), gap 160ms var(--ease);
}
.case-study__readmore:hover {
color: var(--accent-from);
gap: 10px;
}
.case-study__media {
background: #1a1a1d;
border-radius: var(--radius-lg);
display: block;
min-height: clamp(220px, 22vw, 280px);
overflow: hidden;
position: relative;
}
.case-study__media>img:not(.case-study__brand) {
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
.case-study__media--clorox {
align-items: center;
background: radial-gradient(120% 90% at 50% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(135deg, #0b3fa3 0%, #1665c1 45%, #1f86e0 100%);
display: flex;
justify-content: center;
}
.case-study__media--clorox .case-study__brand {
filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.4));
height: auto;
max-width: 280px;
width: 62%;
}
.case-study__media--placeholder {
background: radial-gradient(100% 80% at 60% 40%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 60%),
#1a1a1d;
}
@media (max-width: 960px) {
.case-studies__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.case-study, .case-study--description {
grid-template-columns: 1fr;
}
.case-study__text, .case-study__media {
min-height: 0;
}
.case-study__media {
aspect-ratio: 16 / 10;
}
}
.legal-page, .legal-page {
background: #09090b;
display: inline-block;
padding: 1rem;
padding-block: clamp(64px, 7vw, 120px) var(--pad-section);
padding-left: 3rem;
width: 90vw;
}
.control {
font-family: "Inter", system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 5px;
padding-top: 3px;
cursor: pointer;
font-size: 16px;
@keyframes s-ripple {
0% {
transform: scale(0);
}
20% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes s-ripple-dup {
0% {
transform: scale(0);
}
30%, 60% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
.control-checkbox input+.control_indicator::before {
animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked+.control_indicator::before {
animation-name: s-ripple-dup;
}
}