/* RutvikFolio v4 — "signal field"
   Full-bleed tone sections (field / ink / paper) joined by pixel dissolves,
   circuit traces that carry a pulse with the scroll, a grotesk + mono type pair. */

/* ------------------------------------------------------------------ tokens */
:root {
	--field: #0447b2;
	--field-deep: #03378c;
	--ink: #0c0c0f;
	--ink-2: #16161b;
	--paper: #ffffff;
	--paper-2: #eef2f9;
	--accent: #7fe0ff;
	--white: #ffffff;

	--navy: #050b1f;
	--navy-2: #0b1a3e;
	--navy-glow: #1d5cff;

	/* Figtree: free (SIL OFL) stand-in for GT Walsheim, which is a commercial font not shipped here.
	   Instrument Serif supplies the serif italic accent from the reference. */
	--sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Instrument Serif", "Times New Roman", serif;
	--mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--gutter: clamp(16px, 1.95vw, 32px);
	--radius: 3px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-roll: cubic-bezier(0.16, 1, 0.3, 1);
	--header-h: 66px;
	--pad: clamp(88px, 8.5vw, 144px);
	/* pixel band height (two rows of squares); fixed in CSS so nothing shifts once the script runs */
	--px-h: clamp(44px, 4.4vw, 72px);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--field); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.v4 {
	margin: 0;
	font-family: var(--sans);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.55;
	font-weight: 400;
	color: var(--white);
	background: var(--ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[data-tone="paper"] :focus-visible { outline-color: var(--field); }

.skip4 {
	position: fixed; left: 16px; top: -60px; z-index: 100;
	padding: 10px 14px; background: var(--white); color: var(--ink); border-radius: var(--radius);
}
.skip4:focus { top: 16px; }

.wrap4 { width: 100%; max-width: 1680px; margin: 0 auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------------ type */
.d1 { font-size: clamp(36px, 4.2vw, 68px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 400; }
.d2 { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.04; letter-spacing: -0.018em; font-weight: 400; }
.d3 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; letter-spacing: -0.012em; font-weight: 400; }
.mono4 {
	font-family: var(--mono); font-size: clamp(11px, 0.82vw, 13px); line-height: 1.35; letter-spacing: -0.02em;
	text-transform: uppercase; font-weight: 400;
}
.tag4 {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--mono); font-size: clamp(11px, 0.82vw, 13px); letter-spacing: -0.02em; text-transform: uppercase;
}
.tag4 i { width: 7px; height: 7px; background: currentColor; animation: flicker4 1.4s ease-in-out infinite; }
@keyframes flicker4 { 0%, 100% { opacity: 1; } 30% { opacity: 0.45; } 50% { opacity: 0.2; } 75% { opacity: 0.85; } }

/* split headings: each word rises out of a mask */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
[data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-roll); transition-delay: calc(var(--i) * 45ms); }
[data-split].is-in .w > span { transform: none; }
.no-js [data-split] .w > span, [data-split]:not(.is-ready) .w > span { transform: none; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(18% 12% 18% 12%); transition: clip-path 1.5s var(--ease-roll); }
[data-reveal="clip"] img { transform: scale(1.18); transition: transform 1.8s var(--ease-roll); }
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="clip"].is-in img { transform: scale(1); }
html:not(.js) [data-reveal] { opacity: 1; transform: none; clip-path: none; }

/* ------------------------------------------------------------------ roll label (hover) */
.roll { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25em; vertical-align: top; }
.roll > span { position: relative; display: block; transition: transform 0.95s var(--ease-roll); }
.roll > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	a:hover > .roll > span, a:focus-visible > .roll > span,
	a:hover .b4-label .roll > span, a:focus-visible .b4-label .roll > span,
	button:hover > .roll > span, button:focus-visible > .roll > span { transform: translateY(-100%); }
}

/* ------------------------------------------------------------------ buttons */
.b4 {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
	height: clamp(44px, 3.15vw, 52px); padding: 3px 3px 3px 14px; min-width: 190px;
	border-radius: 2.6px; font-size: clamp(13px, 0.95vw, 15px); font-weight: 500; line-height: 1;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.b4-light { background: var(--white); color: var(--field); }
.b4-light .b4-arrow { background: var(--field); color: var(--white); }
.b4-field { background: var(--field); color: var(--white); }
.b4-field .b4-arrow { background: var(--white); color: var(--field); }
.b4-sm { height: 33px; min-width: 0; gap: 16px; padding: 3px 3px 3px 11px; font-size: 12px; }
.b4-arrow { position: relative; flex: none; width: clamp(38px, 2.65vw, 46px); height: clamp(38px, 2.65vw, 46px); overflow: hidden; border-radius: 2px; }
.b4-sm .b4-arrow { width: 27px; height: 27px; }
.b4-arrow svg, .box4 svg, .link4 > svg {
	position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
	transform: translate(-50%, -50%); transition: transform 0.62s var(--ease), opacity 0.62s var(--ease);
}
.b4-sm .b4-arrow svg { width: 13px; height: 13px; }
.b4-arrow svg + svg, .box4 svg + svg { transform: translate(calc(-50% - 24px), calc(-50% + 24px)) scale(0.85); opacity: 0; }
@media (hover: hover) and (pointer: fine) {
	.b4:hover .b4-arrow svg:first-child, .card4:hover .box4 svg:first-child { transform: translate(calc(-50% + 24px), calc(-50% - 24px)) scale(0.85); opacity: 0; }
	.b4:hover .b4-arrow svg + svg, .card4:hover .box4 svg + svg { transform: translate(-50%, -50%); opacity: 1; }
}
.b4:focus-visible .b4-arrow svg:first-child { opacity: 0; }
.b4:focus-visible .b4-arrow svg + svg { transform: translate(-50%, -50%); opacity: 1; }

.link4 { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(13px, 0.95vw, 15px); font-weight: 500; line-height: 1.25; }
.link4 > svg { position: static; transform: none; width: 13px; height: 13px; transition: transform 0.5s var(--ease); }
.link4:hover > svg { transform: translate(3px, -3px); }
.link4 .copy-label { opacity: 0.6; }

.chip4 {
	display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 2px;
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ header */
.h4 {
	position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
	padding: 0 var(--gutter); pointer-events: none;
}
.h4 > * { pointer-events: auto; }
.h4-brand { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; transition: color 0.4s var(--ease); }
.mark4 { width: 20px; height: 20px; fill: currentColor; }
.h4.on-light .h4-brand { color: var(--field); }
.h4-pill {
	display: flex; align-items: center; gap: 2px; padding: 3.6px; border-radius: 3.6px;
	background: rgba(0, 0, 0, 0.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transition: background-color 0.42s var(--ease);
}
.h4.on-light .h4-pill { background: var(--field); }
.h4.on-navy .h4-pill { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.h4.on-ink .h4-pill { background: rgba(28, 28, 34, 0.82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.h4-pill > a:not(.b4) { display: inline-flex; align-items: center; height: 33px; padding: 0 13.6px; border-radius: 2px; font-size: 12px; font-weight: 500; transition: opacity 0.32s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease); }
.h4-pill > a[aria-current="page"] { background: var(--white); color: var(--field); }
/* centre navigation: one fully rounded capsule with a hairline border, pill-shaped items inside */
.h4 .h4-nav.h4-pill { gap: 2px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 12px 32px -16px rgba(0, 0, 0, 0.55); }
.h4.on-light .h4-nav.h4-pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 12px 32px -16px rgba(4, 71, 178, 0.45); }
.h4 .h4-nav > a:not(.b4) { height: 34px; padding: 0 16px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
	.h4-pill:has(> a:not(.b4):hover) > a:not(.b4):not(:hover) { opacity: 0.6; }
}
.h4-right { justify-self: end; gap: 6px; }
.h4-right > a:not(.b4) { margin-left: 2px; }
.h4-menu { display: none; justify-self: end; align-items: center; gap: 12px; height: 40px; font-size: 16px; }
.h4-dots { display: grid; grid-template-columns: repeat(3, 6px); grid-template-rows: repeat(3, 6px); transition: transform 0.5s var(--ease); }
.h4-dots i { background: currentColor; transition: transform 0.4s var(--ease); }
.h4-dots i:nth-child(1) { grid-area: 1 / 1; }
.h4-dots i:nth-child(2) { grid-area: 1 / 3; }
.h4-dots i:nth-child(3) { grid-area: 3 / 1; }
.h4-dots i:nth-child(4) { grid-area: 3 / 3; }
.h4-dots i:nth-child(5) { grid-area: 2 / 2; transform: scale(0); }
.h4-menu[aria-expanded="true"] .h4-dots { transform: rotate(90deg); }
.h4-menu[aria-expanded="true"] .h4-dots i:nth-child(5) { transform: none; }

/* mobile menu */
.m4 {
	position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between;
	padding: calc(var(--header-h) + 8vh) var(--gutter) 32px; background: var(--paper); color: var(--field);
	opacity: 0; transition: opacity 0.4s var(--ease);
}
.m4[hidden] { display: none; }
.m4.is-open { opacity: 1; }
.m4-links a { display: inline-flex; align-items: center; font-size: clamp(36px, 10vw, 56px); line-height: 1.1; letter-spacing: -0.03em; }
.m4-links i { width: 0; height: 12px; margin-right: 0; background: var(--field); transition: width 0.3s var(--ease), margin 0.3s var(--ease); }
.m4-links a[aria-current="page"] i { width: 12px; margin-right: 14px; }
.m4-links li { overflow: hidden; }
.m4-links li a { transform: translateY(100%); transition: transform 0.7s var(--ease-roll); transition-delay: calc(var(--k, 0) * 50ms + 80ms); }
.m4.is-open .m4-links li a { transform: none; }
.m4-meta { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(4, 71, 178, 0.25); font-size: 18px; }
.m4-meta .mono4 { margin-bottom: 4px; opacity: 0.7; }
.m4-meta sup { font-family: var(--mono); font-size: 11px; }
body.menu-open .h4 { color: var(--field); }
body.menu-open .h4 .h4-brand { color: var(--field); }

/* ------------------------------------------------------------------ section tones */
[data-tone="field"] { background: var(--field); color: var(--white); }
[data-tone="ink"] { background: var(--ink); color: var(--white); }
[data-tone="paper"] { background: var(--paper); color: var(--field); }
[data-tone="navy"] { background: var(--navy); color: var(--white); }
[data-tone="paper"] p { color: #1c2a48; }
.s4 { position: relative; padding: var(--pad) 0; }

/* pixel dissolve band: drawn inside the bottom padding of its own section (never adds height of its own)
   and resolves into the next tone; the next section then needs only a short top padding */
.px4 { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--px-h); overflow: hidden; pointer-events: none; }
.px4 canvas { width: 100%; height: 100%; }
.s4:has(> .px4) { padding-bottom: calc(var(--px-h) + var(--pad) * 0.4); }
.phero:has(> .px4) { padding-bottom: var(--px-h); }
/* neighbouring sections on the same background read as one: don't stack two full paddings */
.s4[data-tone="ink"] + .s4[data-tone="ink"], .s4[data-tone="paper"] + .s4[data-tone="paper"], .s4[data-tone="field"] + .s4[data-tone="field"] { padding-top: calc(var(--pad) * 0.3); }
:is(.s4, .phero, .hero4):has(> .px4) + .s4 { padding-top: clamp(28px, 3vw, 48px); }
:is(.s4, .phero, .hero4):has(> .px4) + .s4 :is(.rail4-sticky, .cov4-sticky) { padding-top: clamp(20px, 2.6vw, 40px); }

/* ------------------------------------------------------------------ hero (signal ring + tech dial) */
.hero4 {
	--px-h: 0px; /* no pixel band: the hero flows straight into the About section on the same navy */
	position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
	isolation: isolate;
	/* deep navy, lit softly from behind the ring and from the top-left */
	background:
		radial-gradient(48% 62% at 72% 44%, rgba(29, 92, 255, 0.26), rgba(29, 92, 255, 0) 70%),
		radial-gradient(38% 46% at 6% 0%, rgba(127, 224, 255, 0.09), rgba(127, 224, 255, 0) 72%),
		linear-gradient(180deg, var(--navy-2) 0%, #08142f 46%, var(--navy) 100%);
}
/* a faint drafting grid that fades out towards the edges */
.hero4::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 72px 72px; background-position: center center;
	-webkit-mask-image: radial-gradient(70% 70% at 62% 45%, #000 0%, transparent 78%); mask-image: radial-gradient(70% 70% at 62% 45%, #000 0%, transparent 78%);
}
.hero4 > .hero4-bottom { margin-top: auto; }
.hero4-strings { position: absolute; top: 0; left: 0; right: 0; bottom: var(--px-h); width: 100%; height: calc(100% - var(--px-h)); touch-action: pan-y; }
.hero4-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: calc(var(--header-h) + 12px); pointer-events: none; }
.hero4-bottom { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: clamp(28px, 5vh, 56px); pointer-events: none; }
.hero4-bottom a, .hero4-bottom button { pointer-events: auto; }
.hero4-copy { max-width: 640px; }
.hero4-title { font-size: clamp(52px, 6.4vw, 112px); font-weight: 800; line-height: 0.9; letter-spacing: -0.035em; }
.hero4-title > span { display: block; }
.hero4-title i { font-style: normal; color: var(--accent); }
.hero4-tagline { display: grid; margin-top: clamp(18px, 1.8vw, 28px); font-family: var(--serif); font-style: italic; font-size: clamp(22px, 1.95vw, 32px); line-height: 1.18; letter-spacing: 0; color: rgba(255, 255, 255, 0.88); }
.hero4-tagline span:last-child { color: var(--accent); }
html.preloading .hero4-tagline { opacity: 0; }
.hero4-tagline { transition: opacity 0.9s var(--ease) 0.45s; }
.hero4-actions .b4 { min-width: 190px; }
.hero4-side {
	display: grid; gap: 6px; padding: 14px 16px; text-align: right; color: rgba(255, 255, 255, 0.78);
	border-radius: 10px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero4-scroll { margin-top: 10px; color: var(--accent); animation: nudge4 2.4s var(--ease) infinite; }
@keyframes nudge4 { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.hero4-tip {
	--brand: var(--accent);
	position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 4px; width: 240px; padding: 12px 14px 13px;
	border-radius: var(--radius); background: rgba(8, 20, 50, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 24px 48px -24px rgba(0, 0, 0, 0.6);
	opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease);
}
.hero4-tip.is-on { opacity: 1; }
.hero4-tip-cat { opacity: 0.6; }
.hero4-tip-name { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.hero4-tip-desc { font-size: 14px; line-height: 1.4; opacity: 0.82; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.hero4-status { display: inline-flex; align-items: center; gap: 10px; }
.live4 { width: 7px; height: 7px; background: var(--accent); box-shadow: 0 0 0 0 rgba(127, 224, 255, 0.7); animation: live4 2s infinite; }
@keyframes live4 { 70% { box-shadow: 0 0 0 8px rgba(127, 224, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 224, 255, 0); } }
.hero4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: clamp(22px, 2.2vw, 32px); }

/* ------------------------------------------------------------------ intro + traces */
.intro4 { overflow: hidden; }
.trace4 { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trace4 path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.trace4-base { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.trace4-pulse { stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 90 910; stroke-dashoffset: 90; }
.trace4-pulse.sub { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 60 940; }
@media (max-width: 1199px) { .trace4 { display: none; } }
.intro4-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(40px, 9vw, 140px); }
.intro4-grid .d2 { max-width: 12ch; margin-top: 20px; }
.intro4-side { justify-self: end; width: min(440px, 100%); display: grid; gap: 22px; margin-right: clamp(0px, 8vw, 140px); }
.intro4-side p { opacity: 0.85; }
.intro4-side .b4 { justify-self: start; margin-top: 8px; }

/* ------------------------------------------------------------------ proof (home) */
.proof4-head { margin-bottom: clamp(32px, 4vw, 56px) !important; }
.proof4-head { display: grid; justify-items: center; text-align: center; gap: 20px; margin-bottom: clamp(48px, 6vw, 88px); }
.proof4-head .d2 { max-width: 18ch; font-size: clamp(28px, 2.9vw, 46px); }
.proof4-head p { max-width: 600px; opacity: 0.85; }

/* ------------------------------------------------------------------ work rail */
.work4 { padding: 0; }
.rail4-sticky { position: relative; padding: clamp(96px, 14vh, 160px) 0 48px; overflow: hidden; }
.work4-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.work4-side { display: grid; gap: 22px; width: min(400px, 100%); padding-top: 8px; }
.work4-side p { opacity: 0.8; }
.rail4-viewport { margin-top: clamp(40px, 7vh, 72px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: var(--gutter); }
.rail4-viewport::-webkit-scrollbar { display: none; }
.rail4-track { display: flex; gap: clamp(16px, 2vw, 32px); width: max-content; padding-block: 8px 24px; }
.card4 {
	position: relative; flex: none; display: flex; flex-direction: column; gap: 14px;
	width: clamp(290px, 26vw, 400px); padding: 12px; border-radius: 12px;
	background: var(--field); color: var(--white); scroll-snap-align: start; will-change: transform;
	transition: background-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.card4:hover { background: #0a54c9; box-shadow: 0 30px 60px -30px rgba(4, 71, 178, 0.8); }
.card4-top { display: flex; align-items: center; gap: 10px; }
.card4-top .mono4 { opacity: 0.6; }
.card4-top .chip4 { margin-right: auto; }
.box4 { position: relative; width: 34px; height: 34px; overflow: hidden; border-radius: 6px; background: var(--white); color: var(--field); }
.box4 svg { width: 13px; height: 13px; }
.card4-shot { display: block; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }
.card4-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: #eef1f7; color: #5b6478; font-family: var(--mono); font-size: 10px; }
.card4-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfd5e2; }
.card4-bar span { margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card4-view { display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.card4-view img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 1.2s cubic-bezier(0.45, 0, 0.55, 1); }
.card4:hover .card4-view img, .card4:focus-visible .card4-view img { object-position: 50% 100%; transition-duration: 7s; }
.card4-body { display: grid; gap: 8px; padding: 4px 2px 2px; }
.card4-meta { display: flex; gap: 14px; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.card4-meta .mono4 { opacity: 0.7; }
.card4-meta .card4-go { margin-left: auto; opacity: 1; }
.card4-title { font-size: 24px; line-height: 1.1; letter-spacing: -0.02em; }
.card4-lead { font-size: 15.5px; line-height: 1.35; font-weight: 500; color: var(--accent); }
.card4-text { font-size: 14px; line-height: 1.5; opacity: 0.8; }
.card4-more { justify-content: space-between; min-height: 100%; background: var(--accent); color: var(--ink); }
.card4-more .chip4 { background: rgba(12, 12, 15, 0.1); }
.card4-more .box4 { background: var(--ink); color: var(--accent); }
.card4-more .card4-title { font-size: clamp(30px, 2.6vw, 40px); }
.rail4-foot { display: flex; align-items: center; gap: 20px; margin-top: clamp(28px, 4vh, 48px); }
.rail4-foot .mono4 { opacity: 0.7; white-space: nowrap; }
.rail4-bar { position: relative; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.rail4-bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--white); transform-origin: left; transform: scaleX(0.1); }

/* desktop: the section becomes a tall scroll track and the rail moves sideways */
.is-railing .work4 > .pin4 { height: var(--rail-h, 300vh); }
.is-railing .rail4-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--header-h) + clamp(12px, 2vh, 24px)) 0 28px; }
.is-railing .rail4-viewport { overflow: visible; scroll-snap-type: none; }
.is-railing .rail4-track { padding-block: 44px 56px; }
.is-railing .work4-head .d1 { font-size: clamp(34px, 3.8vw, 58px); }
.is-railing .card4 { width: clamp(270px, 21vw, 350px); }
.is-railing .card4-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.is-railing .rail4-foot .mono4:first-child { visibility: hidden; }

/* ------------------------------------------------------------------ chips */
.chips4 { display: flex; flex-wrap: wrap; gap: 6px; }

/* ------------------------------------------------------------------ split image + list */

.split4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.split4-img { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--field); }
.split4-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: luminosity; }
.split4-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 71, 178, 0) 40%, rgba(12, 12, 15, 0.55)); }
.split4-img figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; }
.split4-copy { display: grid; gap: 26px; justify-items: start; }
.split4-copy > p { max-width: 560px; opacity: 0.8; }
.split4-copy > .split4-lead { opacity: 1; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; }
.list4 { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.list4 li { display: grid; grid-template-columns: 12px 130px 1fr; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); font-size: 16px; }
.list4 i { width: 6px; height: 6px; background: var(--accent); }
.list4 .mono4 { opacity: 0.6; }

/* ------------------------------------------------------------------ insights (paper) */
.news4-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 7vh, 72px); }
.news4-side { display: grid; gap: 20px; width: min(380px, 100%); }
.news4-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.post4 { display: grid; gap: 14px; align-content: start; padding: 12px 12px 22px; border-radius: var(--radius); background: var(--paper-2); color: var(--ink); transition: background-color 0.45s var(--ease); }
.post4-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--field); }
.post4-art canvas { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.post4-meta { display: flex; gap: 6px; }
.post4 .chip4 { background: var(--field); color: var(--white); }
.post4 .chip4 + .chip4 { background: rgba(4, 71, 178, 0.12); color: var(--field); }
.post4-title { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.12; letter-spacing: -0.02em; color: var(--field); }
.post4-text { font-size: 15px; line-height: 1.5; color: #4a5875; }
@media (hover: hover) and (pointer: fine) {
	.post4:hover { background: #dfe7f7; }
	.post4:hover .post4-art canvas { transform: scale(1.06); }
}

/* ------------------------------------------------------------------ faq */
.faq4 { padding-top: calc(var(--pad) * 0.4); }
.faq4-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq4-intro { position: sticky; top: calc(var(--header-h) + 40px); display: grid; gap: 22px; justify-items: start; }
.faq4-list { border-top: 1px solid rgba(4, 71, 178, 0.25); }
.faq4-item { border-bottom: 1px solid rgba(4, 71, 178, 0.25); }
.faq4-item summary { display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 12px; padding: 22px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.01em; }
.faq4-item summary::-webkit-details-marker { display: none; }
.faq4-item summary .mono4 { opacity: 0.6; }
.pm { position: relative; width: 14px; height: 14px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: currentColor; transition: transform 0.45s var(--ease); }
.pm::after { transform: rotate(90deg); }
.faq4-item[open] .pm::after { transform: rotate(0deg); }
.faq4-a { padding: 0 0 26px 56px; max-width: 720px; }
.faq4-a a { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ cta (paper) */
.cta4 { padding-top: calc(var(--pad) * 0.6); }
.cta4-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cta4-art { display: grid; gap: 28px; }
.cta4-art svg { width: 100%; height: auto; overflow: visible; }
.cta4-base, .cta4-pulse { fill: none; stroke-linejoin: round; stroke-linecap: square; }
.cta4-base { stroke: rgba(4, 71, 178, 0.35); stroke-width: 1.2; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 0.15s); }
.cta4-pulse { stroke: var(--field); stroke-width: 2.4; stroke-dasharray: 0.08 3; stroke-dashoffset: 0.08; opacity: 0; }
.cta4-cap { font-family: var(--mono); font-size: 12px; fill: var(--field); letter-spacing: 0.02em; opacity: 0; transition: opacity 0.6s var(--ease); transition-delay: calc(1.6s + var(--i) * 0.15s); }
.cta4-node { fill: var(--field); opacity: 0.25; transition: opacity 0.6s var(--ease) 2.2s; }
.cta4-art svg { max-width: 640px; }
.cta4.is-in .cta4-base { stroke-dashoffset: 0; }
.cta4.is-in .cta4-pulse { animation: flow4 3.2s linear infinite; animation-delay: calc(2.4s + var(--i) * 0.55s); }
.cta4.is-in .cta4-cap { opacity: 1; }
.cta4.is-in .cta4-node { opacity: 1; animation: node4 2.4s ease-in-out 2.8s infinite; }
@keyframes flow4 { 0% { stroke-dashoffset: 0.08; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes node4 { 50% { opacity: 0.55; } }
.cta4-copy { display: grid; gap: 26px; justify-items: start; }
.cta4-copy .d1 { font-size: clamp(34px, 3.8vw, 60px); text-wrap: balance; }
.cta4-copy > p { max-width: 520px; }
.cta4-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.cta4-actions .link4 { flex-wrap: wrap; text-align: left; }

/* ------------------------------------------------------------------ footer */
.f4 { padding-top: clamp(80px, 12vh, 140px); }
.f4-top { display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: 32px; padding-bottom: clamp(64px, 10vh, 120px); }
.f4-talk { display: grid; gap: 24px; justify-items: start; align-content: start; }
.f4-email { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(460px, 100%); height: 52px; padding: 0 6px 0 16px; border-radius: var(--radius); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: box-shadow 0.4s var(--ease); }
.f4-email:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.f4-copy { display: inline-grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 2px; background: var(--field); font-size: 14px; }
.f4-note { font-size: 14px; opacity: 0.55; }
.f4-col { display: grid; gap: 16px; align-content: start; }
.f4-col .mono4 { opacity: 0.5; }
.f4-col ul { display: grid; gap: 6px; font-size: 15px; }
.f4-bottom { display: grid; gap: 20px; padding-bottom: 24px; }
.f4-word { display: flex; align-items: flex-end; gap: clamp(10px, 1.6vw, 28px); font-size: clamp(88px, 20vw, 330px); line-height: 0.78; letter-spacing: -0.06em; font-weight: 500; }
.f4-word .mark4 { width: 0.62em; height: 0.62em; fill: var(--field); margin-bottom: 0.02em; }
.f4-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); opacity: 0.6; }

/* ------------------------------------------------------------------ section heads */
.shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: clamp(40px, 7vh, 80px); }
.shead > div:first-child { display: grid; gap: 20px; justify-items: start; }
.shead .d1 { max-width: 14ch; }
.shead-side { display: grid; gap: 20px; justify-items: start; width: min(420px, 100%); }
.shead-side p { opacity: 0.8; }
[data-tone="paper"] .shead-side p { opacity: 1; }
.shead-center { display: grid; justify-items: center; text-align: center; gap: 22px; margin-bottom: clamp(48px, 8vh, 88px); }
.shead-center p { max-width: 560px; opacity: 0.85; }

/* ------------------------------------------------------------------ inner-page hero */
.phero { position: relative; min-height: 88vh; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-top: calc(var(--header-h) + 40px); }
.phero .trace4 { opacity: 0.8; }
.phero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 5vw, 96px); padding-bottom: clamp(56px, 9vh, 96px); }
.phero-copy { display: grid; gap: 24px; justify-items: start; }
.phero-copy .d1 { font-size: clamp(36px, 4vw, 64px); max-width: 15ch; text-wrap: balance; }
.phero-lead { max-width: 560px; font-size: clamp(16px, 1.2vw, 19px); opacity: 0.86; }
.phero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 6px; }
.phero-art { position: relative; align-self: center; }

.phero-article .phero-copy .d1 { max-width: 20ch; font-size: clamp(36px, 4vw, 64px); }
.phero-article .phero-grid { grid-template-columns: 1fr; }
.art4-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.back4 { color: inherit; }
.nf4 { gap: 8px; }
.nf4 .chip4 { height: 36px; padding: 0 14px; font-size: 12px; }
.nf4 .chip4:hover { background: var(--white); color: var(--field); }

/* collage of framed screenshots (work hero) */
.collage4 { position: relative; aspect-ratio: 5 / 4; }
.collage4-item { position: absolute; width: 74%; transition: transform 0.6s var(--ease); will-change: transform; }
.collage4-item.c1 { left: 0; top: 4%; z-index: 1; }
.collage4-item.c2 { right: 0; top: 28%; z-index: 3; }
.collage4-item.c3 { left: 10%; bottom: 0; z-index: 2; width: 62%; }
.collage4-item .frame4 { box-shadow: 0 30px 60px -30px rgba(0, 10, 40, 0.65); }

/* portrait (about hero) */
.portrait4 { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 72vh; justify-self: end; width: min(100%, 520px); border-radius: var(--radius); overflow: hidden; background: var(--field-deep); box-shadow: 0 40px 80px -40px rgba(0, 10, 40, 0.7); transition: transform 0.6s var(--ease); }
.portrait4 img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.12) brightness(1.06); mix-blend-mode: luminosity; }
.portrait4::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px); }
.portrait4::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 71, 178, 0) 50%, rgba(3, 30, 80, 0.6)); }
.portrait4 figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; justify-content: space-between; }

/* ------------------------------------------------------------------ browser frame */
.frame4 { display: block; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.frame4-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #eef1f7; color: #5b6478; font-family: var(--mono); font-size: 10.5px; }
.frame4-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd5e2; }
.frame4-bar span { margin-left: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.frame4 img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }

/* ------------------------------------------------------------------ logo wall */
.grid4 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(92px, 8vw, 132px); gap: 10px; }
.grid4-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile4 { display: grid; place-items: center; border-radius: var(--radius); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: background-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.logo4 img { width: 64%; height: 46%; object-fit: contain; transition: filter 0.45s var(--ease), opacity 0.45s var(--ease); }
.logo4.alpha img { filter: brightness(0) invert(1); opacity: 0.9; }
.logo4.invert img { filter: grayscale(1) invert(1) brightness(2.4) contrast(1.1); mix-blend-mode: screen; opacity: 0.92; }
@media (hover: hover) and (pointer: fine) {
	.logo4:hover { background: var(--white); box-shadow: none; }
	.logo4.light:hover { background: var(--ink); }
	.logo4:hover img { filter: none; opacity: 1; mix-blend-mode: normal; }
}
.logo4:focus-visible { background: var(--white); }
.logo4:focus-visible img { filter: none; opacity: 1; mix-blend-mode: normal; }
.stat4 { place-items: start; align-content: space-between; padding: 14px 16px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.stat4 strong { font-size: clamp(32px, 3.2vw, 52px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.stat4 .mono4 { opacity: 0.85; }

/* ------------------------------------------------------------------ case studies (paper) */
.cases4-list { display: grid; gap: clamp(72px, 12vh, 140px); }
.case4 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.case4.flip .case4-media { order: 2; }
.case4-media { display: block; padding: clamp(18px, 2.6vw, 40px); border-radius: var(--radius); background: var(--field); transition: transform 0.6s var(--ease); }
.case4-media .frame4 { box-shadow: 0 30px 60px -30px rgba(0, 10, 40, 0.6); }
.case4-media:hover .frame4 img { transform: scale(1.03); }
.case4-body { display: grid; gap: 20px; justify-items: start; color: var(--ink); }
.case4-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--field); }
.case4-logo { height: 40px; display: flex; align-items: center; }
.case4-logo img { height: 100%; width: auto; max-width: 200px; object-fit: contain; object-position: left; }
.case4-body .d2 { color: var(--field); font-size: clamp(30px, 3vw, 48px); max-width: 16ch; }
.case4-goal { display: grid; gap: 6px; max-width: 520px; color: #1c2a48; }
.case4-goal .mono4 { color: var(--field); }
.case4-list { width: 100%; max-width: 560px; border-top: 1px solid rgba(4, 71, 178, 0.18); }
.case4-list li { display: grid; grid-template-columns: 14px 1fr; align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(4, 71, 178, 0.18); }
.case4-list i { width: 6px; height: 6px; margin-top: 0.6em; background: var(--field); }
.case4-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; width: 100%; max-width: 560px; }
.case4 .chip4 { background: rgba(4, 71, 178, 0.1); color: var(--field); }
.case4 .link4 { color: var(--field); }

/* ------------------------------------------------------------------ all projects (ink) */
.filters4 { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(28px, 5vh, 48px); }
.filters4 button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 500; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.filters4 button span { font-family: var(--mono); font-size: 11px; opacity: 0.6; }
.filters4 button:hover { background: rgba(255, 255, 255, 0.16); }
.filters4 button[aria-pressed="true"] { background: var(--white); color: var(--field); }
.projgrid4 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.proj4 { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; transition: box-shadow 0.4s var(--ease), opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.proj4[hidden] { display: none; }
.proj4.is-entering { opacity: 0; transform: translateY(14px); }
.proj4-media { display: block; padding: 14px 14px 0; background: var(--field); }
.proj4-media .frame4 { border-radius: 6px 6px 0 0; }
.proj4:hover { box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.45); }
.proj4:hover .frame4 img { transform: scale(1.03); }
.proj4-body { display: grid; gap: 12px; align-content: start; padding: 18px 18px 20px; }
.proj4-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proj4-meta .mono4 { opacity: 0.6; }
.proj4 h3 { font-size: 22px; letter-spacing: -0.015em; }
.proj4 h3 a:hover { color: var(--accent); }
.proj4 p { font-size: 14.5px; opacity: 0.78; }
.proj4 ul { display: grid; gap: 4px; font-size: 13.5px; opacity: 0.7; }
.proj4 li { position: relative; padding-left: 14px; }
.proj4 li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; background: var(--accent); }
.proj4-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.proj4-foot .mono4 { opacity: 0.55; }
.proj4-foot .link4 { font-size: 13px; }

/* ------------------------------------------------------------------ solution flows */
.flow5-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); margin-bottom: clamp(28px, 5vh, 48px); }
.flow5-tabs button { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 3px; font-size: 14px; font-weight: 500; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.flow5-tabs button .mono4 { opacity: 0.55; }
.flow5-tabs button[aria-selected="true"] { background: var(--white); color: var(--field); }
.flow5-sub { margin-bottom: 24px; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.01em; }
.flow5-chain { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.flow5-node { position: relative; display: grid; gap: 8px; align-content: start; min-height: 190px; padding: 18px 16px; border-radius: var(--radius); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.flow5-node::after { /* connector to the next step, with a travelling pulse */
	content: ""; position: absolute; top: 38px; left: 100%; width: 12px; height: 2px; z-index: 1;
	background: linear-gradient(90deg, rgba(127, 224, 255, 0.15), var(--accent), rgba(127, 224, 255, 0.15)); background-size: 300% 100%;
	animation: pulse5 1.6s linear infinite; animation-delay: calc(var(--i) * 0.25s);
}
.flow5-node:last-child::after { display: none; }
@keyframes pulse5 { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.flow5-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: var(--radius); background: var(--field); color: var(--white); }
.flow5-ic svg { width: 20px; height: 20px; }
.flow5-node .mono4 { opacity: 0.6; }
.flow5-node strong { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.flow5-node small { font-size: 13.5px; line-height: 1.45; opacity: 0.7; }
.flow5-panel.is-active .flow5-node { animation: rise5 0.7s var(--ease) both; animation-delay: calc(var(--i) * 0.07s); }
.flow5-panel.is-active .flow5-node .flow5-ic { animation: glow5 4s var(--ease) infinite; animation-delay: calc(var(--i) * 0.5s); }
@keyframes rise5 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes glow5 { 0%, 18%, 100% { background: var(--field); color: var(--white); } 6%, 12% { background: var(--accent); color: var(--ink); } }

/* ------------------------------------------------------------------ testimonials */
.quotes4-ctrl { display: flex; gap: 6px; }
.qbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); transition: background-color 0.3s var(--ease); }
.qbtn:hover { background: var(--white); color: var(--field); }
.qbtn svg { width: 18px; height: 18px; }
.quotes4 { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); }
.quotes4::-webkit-scrollbar { display: none; }
.quote4 { flex: none; display: grid; align-content: space-between; gap: 32px; width: clamp(300px, 34vw, 480px); margin: 0; padding: clamp(22px, 2.2vw, 32px); border-radius: var(--radius); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); scroll-snap-align: start; }
.quote4 blockquote { margin: 0; }
.quote4 p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; letter-spacing: -0.005em; }
.quote4 figcaption { display: flex; align-items: center; gap: 12px; }
.quote4 figcaption > span:last-child { display: grid; gap: 2px; }
.quote4 strong { font-weight: 500; font-size: 15px; }
.quote4 .mono4 { opacity: 0.6; }
.quote4-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--field); font-weight: 500; }

/* ------------------------------------------------------------------ services page */
.sov4-grid { display: grid; gap: 6px; }
.sov4 { position: relative; display: grid; grid-template-columns: 34px 1fr 16px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
.sov4 .mono4 { grid-row: 1 / 3; opacity: 0.6; }
.sov4 strong { font-weight: 500; font-size: 16px; }
.sov4 > span:not(.mono4) { grid-column: 2; font-size: 13.5px; opacity: 0.75; }
.sov4 svg { grid-column: 3; grid-row: 1 / 3; width: 13px; height: 13px; transition: transform 0.4s var(--ease); }
.sov4:hover { background: var(--white); color: var(--field); }
.sov4:hover svg { transform: translate(3px, -3px); }
.svcd4-sec { padding-top: clamp(48px, 8vh, 96px); }
.svcd4 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); padding: clamp(56px, 9vh, 96px) 0; border-top: 1px solid rgba(255, 255, 255, 0.12); scroll-margin-top: calc(var(--header-h) + 16px); }
.svcd4:first-child { border-top: 0; padding-top: 0; }
.svcd4-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 18px; justify-items: start; }
.svcd4-head .mono4 { opacity: 0.6; }
.svcd4-head p { max-width: 460px; opacity: 0.8; }
.svcd4-head .svcd4-who { opacity: 1; font-size: 17px; }
.svcd4-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svcd4-list li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; padding: 16px; border-radius: var(--radius); background: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 15px; }
.svcd4-list i { width: 6px; height: 6px; margin-top: 0.55em; background: var(--accent); }
.svcd4-work { margin-top: 28px; display: grid; gap: 14px; }
.svcd4-work .mono4 { opacity: 0.6; }
.svcd4-work > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini4 { display: grid; gap: 8px; font-size: 14px; }
.mini4 img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius); transition: transform 0.6s var(--ease); }
.mini4:hover img { transform: translateY(-4px); }
.tchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 9px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 500; white-space: nowrap; }
.tchip svg { width: 14px; height: 14px; }
.tchip i { width: 6px; height: 6px; background: var(--accent); }
[data-tone="paper"] .tchip { background: var(--paper-2); color: var(--ink); }
[data-tone="paper"] .tchip i { background: var(--field); }

/* ------------------------------------------------------------------ about page */
.story4-grid, .exp4-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.story4-grid > div:first-child, .exp4-grid > div:first-child { display: grid; gap: 20px; justify-items: start; position: sticky; top: calc(var(--header-h) + 32px); }
.story4-prose { display: grid; gap: 18px; max-width: 680px; }
.story4-prose p { opacity: 0.82; }
.story4-prose .first { opacity: 1; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.01em; }
.story4-prose a { text-decoration: underline; text-underline-offset: 3px; }
.statsr4 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(56px, 9vh, 96px); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.statr4 { display: grid; gap: 10px; padding: 22px 16px 0 0; }
.statr4 strong { font-size: clamp(32px, 3vw, 48px); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }
.statr4 .mono4 { opacity: 0.6; }
.tl4 { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.tl4 li { display: grid; grid-template-columns: 160px 1fr; grid-template-rows: auto auto; column-gap: 24px; row-gap: 4px; padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.tl4 .mono4 { grid-row: 1 / 3; padding-top: 6px; opacity: 0.6; }
.tl4 p { opacity: 0.7; }
.cred4-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cred4 { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 22px; border-radius: var(--radius); background: var(--paper-2); color: var(--ink); transition: background-color 0.35s var(--ease); }
a.cred4:hover { background: #dfe7f7; }
.cred4-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--white); color: var(--field); }
.cred4-ic img { width: 30px; height: 30px; object-fit: contain; }
.cred4-ic svg { width: 24px; height: 24px; }
.cred4 .chip4 { background: rgba(4, 71, 178, 0.1); color: var(--field); }
.cred4 h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--field); }
.cred4 p { font-size: 14px; color: #4a5875; }
.cred4 .link4 { margin-top: 6px; color: var(--field); font-size: 13px; }
.tks4 { padding-top: 0; }
.tk4-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tk4 { display: grid; gap: 16px; padding: 22px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(4, 71, 178, 0.18); }
.tk4 .mono4 { color: var(--field); }

/* ------------------------------------------------------------------ insights / linkedin */
.lips4 { padding-top: 0; }
.lip4-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lip4 { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 12px 12px 18px; border-radius: var(--radius); background: var(--paper-2); color: var(--ink); transition: background-color 0.35s var(--ease); }
.lip4:hover { background: #dfe7f7; }
.lip4-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--field); }
.lip4-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.lip4:hover .lip4-img img { transform: scale(1.05); }
.lip4 .chip4 { background: rgba(4, 71, 178, 0.1); color: var(--field); }
.lip4-title { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; color: var(--field); }
.lip4 .link4 { font-size: 13px; color: var(--field); }

/* ------------------------------------------------------------------ contact */
.contact4-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.contact4-side { display: grid; gap: 12px; }
.contact4-card { display: grid; gap: 18px; padding: clamp(20px, 2vw, 28px); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); }
.contact4-card .tag4 { color: var(--field); }
.csteps4 li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 0; border-top: 1px solid rgba(4, 71, 178, 0.15); }
.csteps4 .mono4 { color: var(--field); padding-top: 3px; }
.csteps4 strong { font-weight: 500; color: var(--field); }
.direct4 { display: grid; gap: 4px; }
.direct4 a, .direct4 div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); transition: background-color 0.3s var(--ease); }
.direct4 a:hover { background: var(--white); }
.direct4 > li > * > span:last-child { display: grid; gap: 2px; font-size: 15px; word-break: break-word; }
.direct4 .mono4 { color: var(--field); opacity: 0.8; }
.ic4 { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--field); color: var(--white); }
.ic4 svg { width: 18px; height: 18px; }
.form4 { display: grid; gap: 12px; padding: clamp(20px, 2.4vw, 36px); border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(4, 71, 178, 0.14), 0 30px 60px -40px rgba(4, 30, 90, 0.4); scroll-margin-top: calc(var(--header-h) + 16px); }
.form4 .d3 { color: var(--field); }
.form4 > p { color: #4a5875; }
.form4-frame { margin-top: 8px; min-height: 620px; }
.form4-frame iframe { display: block; width: 100%; min-width: 100%; height: 900px; border: 0; }

/* ------------------------------------------------------------------ articles */
.art4-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 96px); align-items: start; }
.art4-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 12px; }
.author4 { display: flex; align-items: center; gap: 12px; }
.author4 img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; }
.author4 div { display: grid; gap: 2px; }
.author4 strong { font-weight: 500; color: var(--field); }
.author4 .mono4 { color: #4a5875; }
.more4 { display: grid; gap: 10px; font-size: 15px; }
.more4 a { color: var(--field); }
.more4 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose4 { max-width: 720px; color: #1c2a48; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; }
.prose4 > * + * { margin-top: 1.1em; }
.prose4 h2 { margin-top: 2em; color: var(--field); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -0.015em; }
.prose4 h3 { margin-top: 1.6em; color: var(--field); font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.01em; }
.prose4 ul, .prose4 ol { padding-left: 1.2em; }
.prose4 ul { list-style: square; }
.prose4 ol { list-style: decimal; }
.prose4 li + li { margin-top: 0.4em; }
.prose4 li::marker { color: var(--field); }
.prose4 a { color: var(--field); text-decoration: underline; text-underline-offset: 3px; }
.prose4 strong { color: var(--ink); font-weight: 500; }
.prose4 blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--field); color: var(--field); font-size: 1.1em; }
.prose4 table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.prose4 th, .prose4 td { padding: 10px 12px; border-bottom: 1px solid rgba(4, 71, 178, 0.18); text-align: left; vertical-align: top; }
.prose4 th { color: var(--field); font-weight: 500; }

/* ------------------------------------------------------------------ staggered reveal for grids */
[data-stagger] > * { opacity: 0; transform: translateY(22px); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger] > * { transition: opacity 0.8s var(--ease) calc(var(--i, 0) * 45ms), transform 0.9s var(--ease) calc(var(--i, 0) * 45ms), background-color 0.45s var(--ease), box-shadow 0.45s var(--ease); }
html:not(.js) [data-stagger] > * { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ scattered logo wall (home) */
.grid4-rows { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: clamp(78px, 6.6vw, 112px); gap: clamp(8px, 0.7vw, 12px); }
.grid4-rows .logo4 img { width: 66%; height: 44%; }
.grid4-rows .stat4 { padding: clamp(10px, 1vw, 16px); }
.grid4-rows .stat4 strong { font-size: clamp(26px, 2.4vw, 40px); }
.grid4-rows .stat4 .mono4 { font-size: 10.5px; }
@media (max-width: 1199px) { .grid4-rows { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(84px, 9vw, 112px); } }
.grid4-scatter { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(104px, 9.6vw, 176px); gap: clamp(10px, 1vw, 16px); }
.grid4-scatter .tile4 { grid-column: var(--c); grid-row: var(--r); }
.grid4-scatter .logo4 img { width: 60%; height: 46%; }
.grid4-scatter .stat4 { padding: clamp(14px, 1.5vw, 22px); }
.grid4-scatter .stat4 strong { font-size: clamp(36px, 3.7vw, 64px); }

/* ------------------------------------------------------------------ particle portrait */
/* About: carries on from the hero on the same navy, lit from behind the portrait */
.about5 {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(48px, 5.5vw, 88px) 0 clamp(88px, 8vw, 128px);
	background:
		radial-gradient(42% 40% at 24% 52%, rgba(29, 92, 255, 0.2), rgba(29, 92, 255, 0) 72%),
		linear-gradient(180deg, var(--navy) 0%, #060e26 55%, #050a1c 100%);
}
.about5::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 72px 72px; background-position: center top;
	/* kept clear of the top and bottom edges so the section joins the hero without a seam */
	-webkit-mask-image: radial-gradient(52% 46% at 26% 52%, #000 0%, transparent 76%); mask-image: radial-gradient(52% 46% at 26% 52%, #000 0%, transparent 76%);
}
.about5 .split4-grid { align-items: center; }

/* portrait: particles sampled from the photo assemble into it, then hand over to the sharp photo */
.portrait5 { position: relative; margin: 0 0 34px; width: min(100%, 520px); aspect-ratio: 472 / 560; justify-self: center; }
.portrait5 canvas, .portrait5 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait5 img { object-fit: contain; }
/* the canvas draws the portrait from particles; the photo is only the source (and the fallback without JS) */
html.js .portrait5 img { visibility: hidden; }
html.js .portrait5.is-static img { visibility: visible; }
.portrait5.is-static canvas { display: none; }
.portrait5 figcaption { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: space-between; gap: 12px; opacity: 0.6; }
@media (hover: none), (pointer: coarse) { .portrait5-hint { display: none; } }

/* Services rises in as a rounded cobalt panel over the About section */
.about5 + .cov4 {
	--round: 1;
	position: relative; z-index: 1; border-radius: calc(clamp(24px, 3vw, 44px) * var(--round)) calc(clamp(24px, 3vw, 44px) * var(--round)) 0 0;
	box-shadow: 0 -30px 90px -40px rgba(29, 92, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ------------------------------------------------------------------ LinkedIn insights (home) */
.li4-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.li4-card { display: grid; gap: 12px; align-content: start; justify-items: start; padding: 12px 12px 18px; border-radius: var(--radius); background: var(--paper-2); color: var(--ink); }
.li4-card:hover { background: #dfe7f7; }
.li4-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--field); }
.li4-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.li4-card:hover .li4-img img { transform: scale(1.05); }
.li4-meta { display: flex; align-items: center; gap: 8px; color: var(--field); }
.li4-in { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: #0a66c2; color: #fff; }
.li4-in svg { width: 12px; height: 12px; }
.li4-title { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.25; letter-spacing: -0.01em; color: var(--field); }
.li4-card .link4 { margin-top: auto; font-size: 13px; color: var(--field); }

/* ------------------------------------------------------------------ preloader (once per visit) */
.pl4 { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink); color: var(--white); animation: pl4-out 0.6s var(--ease) 4.2s forwards; }
.pl-seen .pl4 { display: none; }
html.preloading, html.preloading body { overflow: hidden; }
.pl4-aura { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(4, 71, 178, 0.55), rgba(4, 71, 178, 0) 70%); filter: blur(10px); animation: pl4-breathe 2.4s ease-in-out infinite; }
.pl4-group { position: relative; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.pl4-logo { position: relative; flex: none; width: clamp(92px, 9.5vw, 132px); aspect-ratio: 1; display: grid; place-items: center; transform-origin: 0 0; }
.pl4-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pl4-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 2; }
.pl4-arc { fill: none; stroke: url(#pl4-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: pl4-arc 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; filter: drop-shadow(0 0 6px rgba(127, 224, 255, 0.6)); }
.pl4-mark { width: 40%; height: 40%; fill: var(--white); overflow: visible; }
.pl4-mark rect { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; animation: pl4-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: calc(0.25s + var(--i) * 0.07s); }
.pl4-text { display: grid; gap: 8px; }
.pl4-name { font-size: clamp(28px, 3.3vw, 50px); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.pl4-name span { display: inline-block; opacity: 0.12; animation: pl4-light 0.5s var(--ease) forwards; animation-delay: calc(0.55s + var(--i) * 0.045s); }
.pl4-role { opacity: 0.7; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: pl4-type 0.9s steps(34) 1.25s forwards; }
.pl4.is-leaving { animation: none; transition: background-color 0.7s var(--ease), opacity 0.5s var(--ease) 0.45s; background-color: rgba(12, 12, 15, 0); opacity: 0; }
.pl4.is-leaving .pl4-text, .pl4.is-leaving .pl4-aura, .pl4.is-leaving .pl4-ring { opacity: 0; transition: opacity 0.35s var(--ease); }
.pl4.is-leaving .pl4-logo { transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1); }
@keyframes pl4-arc { to { stroke-dashoffset: 0; } }
@keyframes pl4-pop { to { transform: none; opacity: 1; } }
@keyframes pl4-light { to { opacity: 1; } }
@keyframes pl4-type { to { clip-path: inset(0 0 0 0); } }
@keyframes pl4-breathe { 50% { transform: scale(1.08); opacity: 0.8; } }
@keyframes pl4-out { to { opacity: 0; visibility: hidden; } }
html.preloading [data-split] .w > span { transform: translateY(105%) !important; }
html.preloading .hero4-top, html.preloading .hero4-actions, html.preloading .hero4-side { opacity: 0; }
.hero4-top, .hero4-actions, .hero4-side { transition: opacity 0.9s var(--ease) 0.5s; }
@media (max-width: 600px) { .pl4-group { flex-direction: column; text-align: center; gap: 18px; } .pl4-text { justify-items: center; } .pl4-logo { transform-origin: 50% 50%; } }

/* ------------------------------------------------------------------ services coverflow */
.cov4 { padding: 0; overflow: hidden; }

.cov4-sticky { padding: var(--pad) 0; }
.cov4 .shead { margin-bottom: clamp(20px, 3.5vh, 44px); }
.cov4 .shead .d1 { font-size: clamp(30px, 3.1vw, 50px); max-width: 20ch; }
.cov4-stage { position: relative; perspective: 1600px; }
.cov4-track { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px var(--gutter) 24px; }
.cov4-track::-webkit-scrollbar { display: none; }
.cov4-card {
	position: relative; flex: none; display: grid; justify-items: center; align-content: start; gap: 14px; text-align: center;
	width: min(82vw, 440px); padding: 28px 24px 26px; border-radius: 16px; scroll-snap-align: center;
	background: linear-gradient(180deg, rgba(10, 16, 46, 0.72), rgba(8, 10, 24, 0.9) 55%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
	transition: box-shadow 0.5s var(--ease);
}
.cov4-card.is-active { box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.4), 0 40px 90px -40px rgba(0, 8, 40, 0.9); }
.cov4-tag { padding: 5px 10px; border-radius: 999px; background: rgba(127, 224, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.35); color: var(--accent); font-size: 11px; }
.cov4-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cov4-ic svg { width: 20px; height: 20px; }
.cov4-h { font-size: clamp(25px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -0.02em; max-width: min(100%, 15ch); }
.cov4-h em { font-style: normal; color: var(--accent); }
.cov4-card > p { max-width: min(100%, 36ch); font-size: 15px; line-height: 1.55; opacity: 0.75; }
.cov4-tools { display: flex; justify-content: center; margin: 14px 0 8px; padding-top: 10px; }
.cov4-tools li { --c: calc(var(--k) - (var(--m) - 1) / 2); margin: 0 -5px; transform: translateY(calc(var(--c) * var(--c) * 2.2px)) rotate(calc(var(--c) * 6deg)); transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1); transition-delay: calc(var(--k) * 40ms); }
.cov4-tool { display: grid; justify-items: center; align-content: center; gap: 7px; width: 66px; height: 74px; padding: 8px 4px; border-radius: 10px; background: #1c1c23; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 18px -10px rgba(0, 0, 0, 0.8); transition: transform 0.35s var(--ease), background-color 0.35s var(--ease); }
.cov4-tool svg { width: 20px; height: 20px; }
.cov4-tool b { font-weight: 500; font-size: 10.5px; line-height: 1.15; text-align: center; opacity: 0.85; }
.cov4-tools li:hover .cov4-tool { transform: translateY(-8px); background: var(--field); }
.cov4-card:not(.is-active) .cov4-tools li { transform: translateY(6px) rotate(0deg); }
.cov4-cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 13px; font-weight: 500; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.cov4-cta svg { width: 12px; height: 12px; }
.cov4-cta:hover { background: var(--white); color: var(--field); }
.cov4-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.cov4-dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); transition: width 0.4s var(--ease), background-color 0.4s var(--ease); }
.cov4-dots button[aria-current="true"] { width: 28px; background: var(--accent); }
/* desktop: pinned stage, scroll turns the cards in 3D */
.is-covering .cov4 { overflow: visible; }
.is-covering .cov4 > .pin4 { height: var(--cov-h, 400vh); }
.is-covering .cov4-sticky { position: sticky; top: 0; height: 100vh; min-height: 700px; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--header-h) + clamp(12px, 2vh, 24px)) 0 24px; overflow: hidden; }
.is-covering .cov4-stage { height: min(560px, 62vh); }
.is-covering .cov4-track { display: block; overflow: visible; height: 100%; padding: 0; transform-style: preserve-3d; }
.is-covering .cov4-card { position: absolute; left: 50%; top: 0; width: min(440px, 34vw); margin-left: max(-220px, -17vw); will-change: transform, opacity; }
.is-covering .cov4-card > p { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ------------------------------------------------------------------ how I work: connected workflow (NBK-style) */
.how5 .how5-head { margin-bottom: clamp(56px, 7vw, 96px); }
.how5-head .d1 { max-width: 20ch; }
.how5-stage { position: relative; max-width: 1080px; margin: 0 auto; perspective: 1600px; }
.how5-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.how5-line { fill: none; stroke: url(#how5-grad); stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.how5-line.l1 { stroke-width: 9; stroke-dasharray: 60 30 12 26 110 32 12 50; opacity: 0.55; }
.how5-line.l2 { stroke-width: 13; stroke-dasharray: 80 34 20 32 140 40 20 60; }
.how5-line.l3 { stroke-width: 10; stroke-dasharray: 70 30 16 28 100 34 16 46; opacity: 0.75; }
.how5-line.l4 { stroke-width: 15; stroke-dasharray: 96 40 24 40 160 46 24 70; opacity: 0.4; }
.how5-reveal { fill: none; stroke: #fff; stroke-width: 140; stroke-linecap: round; stroke-linejoin: round; }
.how5-comet { fill: #ffffff; filter: drop-shadow(0 0 10px #7fe0ff) drop-shadow(0 0 4px #7fe0ff); }
.how5-comet.c3 { fill: var(--accent); }
.how5-beacon .b1 { fill: rgba(127, 224, 255, 0.12); }
.how5-beacon .b2 { fill: var(--accent); filter: drop-shadow(0 0 12px #7fe0ff); }
.how5-beacon .b3 { fill: #fff; }
.how5-beacon .b4 { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.how5-cards { position: relative; z-index: 1; display: grid; gap: clamp(64px, 7vw, 104px); }
.how5-card {
	position: relative; display: grid; gap: 14px; align-content: start; width: min(100%, 440px); min-height: 330px;
	padding: clamp(26px, 2.4vw, 34px); border-radius: 22px; overflow: hidden;
	background: rgba(18, 19, 26, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -24px rgba(0, 0, 0, 0.75);
	opacity: 0; transform: translate3d(var(--fx, -60px), 30px, 0) rotateY(var(--ry, 18deg)) scale(0.96);
	transition: opacity 0.9s var(--ease), transform 1s var(--ease), box-shadow 0.5s var(--ease);
}
.how5-card.is-left { justify-self: start; margin-left: clamp(0px, 3vw, 40px); transform-origin: 0% 50%; }
.how5-card.is-right { justify-self: end; margin-right: clamp(0px, 3vw, 40px); transform-origin: 100% 50%; --fx: 60px; --ry: -18deg; }
.how5-card.is-on { opacity: 1; transform: none; }
.how5-card:hover { box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.45), 0 30px 70px -24px rgba(4, 71, 178, 0.6); }
.how5-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(127, 224, 255, 0.6), rgba(127, 224, 255, 0.1), transparent); }
.how5-num { position: absolute; top: 18px; right: 22px; font-size: clamp(56px, 5.2vw, 78px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; color: rgba(255, 255, 255, 0.05); transition: color 0.6s var(--ease); }
.how5-card.is-on .how5-num { color: rgba(127, 224, 255, 0.12); }
.how5-tag { justify-self: start; padding: 5px 12px; border-radius: 999px; background: rgba(127, 224, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(127, 224, 255, 0.4); color: var(--accent); font-size: 11px; letter-spacing: 0.08em; }
.how5-h { margin-top: 4px; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.02em; max-width: 14ch; }
.how5-card > p { font-size: 15px; line-height: 1.6; opacity: 0.72; }
.how5-get { display: grid; gap: 6px; margin-top: auto; padding-top: 16px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(127, 224, 255, 0.5), rgba(127, 224, 255, 0.1), transparent) 1; font-size: 14px; }
.how5-get .mono4 { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 11px; letter-spacing: 0.08em; }
.how5-get .mono4::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.how5-close { display: grid; justify-items: center; gap: 28px; margin-top: clamp(64px, 8vw, 112px); text-align: center; }
.how5-close p { max-width: 30ch; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.25; letter-spacing: -0.015em; }
.how5-close em { font-style: normal; color: var(--accent); }
html:not(.js) .how5-card { opacity: 1; transform: none; }
@media (max-width: 899px) {
	.how5-cards { gap: 28px; }
	.how5-card.is-left, .how5-card.is-right { justify-self: stretch; width: auto; margin: 0 0 0 36px; min-height: 0; --fx: 30px; --ry: -10deg; transform-origin: 100% 50%; }
}

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
	.h4 .h4-nav > a:not(.b4) { padding: 0 11px; }
}
@media (max-width: 991px) {
	:root { --header-h: 64px; }
	.h4 { grid-template-columns: 1fr auto; }
	.h4-nav, .h4-right { display: none; }
	.h4-menu { display: inline-flex; }
	.hero4-side { display: none; }
	.h4 { background: var(--field); transition: background-color 0.35s var(--ease), color 0.35s var(--ease); }
	.h4.on-ink { background: var(--ink); }
	.h4.on-navy { background: rgba(5, 11, 31, 0.88); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
	.h4.on-light, body.menu-open .h4 { background: var(--paper); color: var(--field); }
	.news4-grid { grid-template-columns: 1fr 1fr; }
	.news4-grid .post4:nth-child(3) { display: none; }
	.split4-img { aspect-ratio: 4 / 3; }
	.f4-top { grid-template-columns: 1fr 1fr; }
	.f4-talk { grid-column: 1 / -1; }
	.faq4-grid, .split4-grid, .cta4-grid { grid-template-columns: 1fr; }
	.faq4-intro { position: static; }
	.cta4-art { order: 2; }
	.phero { min-height: 0; }
	.phero-grid { grid-template-columns: 1fr; align-items: start; }
	.phero-art { width: min(100%, 560px); }
	.portrait4 { justify-self: start; aspect-ratio: 4 / 3; max-height: none; }
	.case4, .svcd4, .story4-grid, .exp4-grid, .contact4-grid, .art4-grid { grid-template-columns: 1fr; }
	.case4.flip .case4-media { order: 0; }
	.svcd4-head, .story4-grid > div:first-child, .exp4-grid > div:first-child, .art4-aside { position: static; }
	.projgrid4 { grid-template-columns: 1fr 1fr; }
	.flow5-chain { grid-template-columns: 1fr 1fr 1fr; }
	.flow5-node:nth-child(3n)::after { display: none; }
	.statsr4 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
	.cred4-grid { grid-template-columns: 1fr 1fr; }
	.lip4-grid { grid-template-columns: 1fr 1fr; }
	.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.grid4-scatter { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(100px, 15vw, 150px); }
	.grid4-scatter .tile4 { grid-column: auto; grid-row: auto; }
	.grid4-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 92px; }
	.grid4-scatter > :last-child { grid-column: span 3; }
	.shead { flex-direction: column; align-items: flex-start; }
	.li4-grid { grid-template-columns: 1fr 1fr; }
	.portrait5 { width: min(100%, 440px); }
}
@media (max-width: 767px) {
	body.v4 { font-size: 16px; }
	.hero4-top { flex-direction: column; align-items: flex-start; gap: 10px; }
	.hero4-actions { gap: 18px; }
	.hero4-actions .b4 { width: 100%; }
	.hero4-title { font-size: clamp(46px, 14.5vw, 64px); }
	.hero4-tagline { font-size: 21px; }
	.hero4-bottom { padding-top: 34svh; }
	.intro4 { min-height: 0; }
	.intro4-side { margin-right: 0; justify-self: start; }
	.grid4, .grid4-5, .grid4-scatter { grid-template-columns: 1fr 1fr; grid-auto-rows: 96px; gap: 8px; }
	.grid4-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 6px; }
	.grid4-rows .stat4 strong { font-size: 24px; }
	.grid4-rows .stat4 .mono4 { font-size: 9px; }
	.grid4-scatter .stat4 strong { font-size: 34px; }
	.grid4-scatter > :last-child { grid-column: auto; }
	.portrait5 { margin-bottom: 44px; }
	.cov4-card { padding: 24px 16px 22px; }
	.cov4-tools li { margin: 0 -7px; }
	.cov4-tool { width: 52px; height: 62px; gap: 5px; }
	.cov4-tool svg { width: 17px; height: 17px; }
	.cov4-tool b { font-size: 9px; }
	.li4-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
	.li4-grid::-webkit-scrollbar { display: none; }
	.li4-card { flex: none; width: 76vw; scroll-snap-align: start; }
	.projgrid4, .svcd4-list, .tk4-grid, .cred4-grid, .lip4-grid { grid-template-columns: 1fr; }
	.svcd4-work > div { grid-template-columns: 1fr 1fr; }
	.flow5-chain { grid-template-columns: 1fr; gap: 10px; }
	.flow5-node { min-height: 0; grid-template-columns: 40px 1fr; column-gap: 14px; row-gap: 2px; }
	.flow5-node .flow5-ic { grid-row: 1 / 4; margin: 0; }
	.flow5-node::after, .flow5-node:nth-child(3n)::after { display: block; top: 100%; left: 35px; width: 2px; height: 10px; background: linear-gradient(180deg, rgba(127, 224, 255, 0.2), var(--accent)); animation: none; }
	.flow5-node:last-child::after { display: none; }
	.flow5-tabs { display: flex; width: 100%; }
	.flow5-tabs button { flex: 1; justify-content: center; padding: 0 8px; font-size: 13px; }
	.flow5-tabs button .mono4 { display: none; }
	.tl4 li { grid-template-columns: 1fr; }
	.tl4 .mono4 { grid-row: auto; }
	.statsr4 { grid-template-columns: 1fr 1fr; }
	.quote4 { width: 84vw; }
	.collage4 { aspect-ratio: 4 / 3; }
	.phero-copy .d1 { font-size: clamp(36px, 10vw, 48px); }
	.case4-media { padding: 14px; }
	.work4-head, .news4-head { flex-direction: column; align-items: flex-start; }
	.card4 { width: 82vw; }
	.news4-grid { grid-template-columns: 1fr; }
	.news4-grid .post4:nth-child(3) { display: grid; }
	.list4 li { grid-template-columns: 12px 1fr; }
	.list4 li > span:last-child { grid-column: 2; }
	.faq4-a { padding-left: 0; }
	.faq4-item summary { grid-template-columns: 32px 1fr 16px; }
	.f4-top { grid-template-columns: 1fr; }
	.b4 { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
	[data-reveal], [data-split] .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
	.cta4-base { stroke-dashoffset: 0; }
	.cta4-cap { opacity: 1; }
}