/* ---- css/fonts.css ---- */
/* Self-hosted variable fonts (no third-party font requests).
   General Sans — Fontshare / Indian Type Foundry (ITF Free Font License)
   Geist, Geist Mono — Vercel (SIL OFL 1.1) */

@font-face {
	font-family: "General Sans";
	src: url("../fonts/GeneralSans-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* ---- css/tokens.css ---- */
/* ==========================================================================
   Design tokens — extracted 1:1 from "Weblabs Homepage.dc.html" (Claude Design).
   Do not invent values here; every token maps to a value used in the design.
   Documentation: /docs/design-system.md
   ========================================================================== */

:root {
	/* ---------- Color · light ---------- */
	--color-bg: #f7f7f5;            /* --bg  page background */
	--color-surface: #eeeee9;       /* --surface  panels (Scale pipeline, Ventures) */
	--color-ink: #111111;           /* --ink  text, primary button */
	--color-text-strong: #2c2c28;   /* lead / body copy on light */
	--color-muted: #6f6f69;         /* --muted  secondary text, eyebrows */
	--color-faint: #a6a69e;         /* footnotes */
	--color-subtle: #8a8a82;        /* mono meta on cards */
	--color-line: #e4e4de;          /* --line  borders, dividers */
	--color-line-card: #e7e7e1;     /* floating card border */
	--color-line-soft: #e2e2dc;     /* placeholder label border, browser chrome */
	--color-track: #deded8;         /* progress track (pipeline) */
	--color-white: #ffffff;
	--color-paper: #faf9f6;         /* label chips on placeholders */
	--color-chrome: #f4f4f0;        /* browser chrome bar */
	--color-chrome-dot: #dcdcd4;

	/* ---------- Color · dark ---------- */
	--color-dark: #0d0d0c;          /* --dark  dark sections */
	--color-dark-2: #0f0f0e;        /* code / input panels */
	--color-dark-3: #111110;        /* dark floating card */
	--color-dark-4: #141412;        /* dark tiles */
	--color-frame: #111111;         /* device / browser frame bezel */
	--color-on-dark: #f2f2ec;       /* text on dark */
	--color-on-dark-2: #cfcfc8;     /* tags on dark */
	--color-on-dark-3: #c3c3bb;     /* body on dark */
	--color-on-dark-4: #b4b4ac;
	--color-on-dark-muted: #8a8a82; /* eyebrow on dark */
	--color-on-dark-faint: #6a6a62;
	--color-on-dark-mid: #9a9a90;
	--color-dot-idle: #3a3a36;      /* carousel dots idle */

	/* white-alpha layers used on dark surfaces */
	--a-white-03: #ffffff08;
	--a-white-04: #ffffff0a;
	--a-white-05: #ffffff0d;
	--a-white-06: #ffffff0f;
	--a-white-07: #ffffff12;
	--a-white-08: #ffffff14;
	--a-white-09: #ffffff18;
	--a-white-10: #ffffff1a;
	--a-ink-06: #17171510;          /* skeleton bars on light */

	/* ---------- Color · accent ---------- */
	--color-accent: #46a99b;
	--color-on-accent: #06201e;
	--color-accent-glow: rgba(70, 169, 155, .55);

	/* ---------- Placeholder stripes (art-direction slots) ---------- */
	--stripe-light: repeating-linear-gradient(135deg, #e9e9e4, #e9e9e4 12px, #eef0ec 12px, #eef0ec 24px);
	--stripe-cool: repeating-linear-gradient(135deg, #e6e9e9, #e6e9e9 12px, #eef0f0 12px, #eef0f0 24px);
	--stripe-dark: repeating-linear-gradient(135deg, #19191710, #19191710 12px, #ffffff08 12px, #ffffff08 24px);

	/* ---------- Typography ---------- */
	--font-display: "General Sans", "Geist", system-ui, sans-serif;
	--font-body: "Geist", system-ui, sans-serif;
	--font-mono: "Geist Mono", ui-monospace, monospace;

	/* Display scale (fluid, from design clamps) */
	--fs-display-xl: clamp(58px, 8.5vw, 168px);   /* Hero H1 */
	--fs-display-lg: clamp(72px, 9vw, 150px);     /* Chapter: Build. Grow. Scale. */
	--fs-display-md: clamp(44px, 6.5vw, 118px);   /* Final CTA */
	--fs-display-sm: clamp(44px, 6vw, 104px);     /* Why Weblabs */
	--fs-heading-xl: clamp(40px, 5.4vw, 92px);    /* AI */
	--fs-heading-lg: clamp(40px, 5vw, 84px);      /* Work, Process */
	--fs-heading-md: clamp(40px, 4.6vw, 76px);    /* api4cars */
	--fs-heading-sm: clamp(38px, 4.4vw, 68px);    /* Featured case */
	--fs-heading-xs: clamp(34px, 4.2vw, 66px);    /* Team, Ventures (62), Brain (60) */
	--fs-heading-2xs: clamp(32px, 3.6vw, 56px);   /* Content break */
	--fs-stat: clamp(46px, 5vw, 76px);
	--fs-quote: clamp(24px, 2.6vw, 38px);
	--fs-step: clamp(22px, 2.2vw, 32px);          /* Process rows */
	--fs-lead-lg: clamp(20px, 2vw, 28px);
	--fs-lead: clamp(18px, 1.8vw, 24px);
	--fs-tagline: clamp(18px, 1.5vw, 24px);
	--fs-body-xl: clamp(17px, 1.4vw, 21px);       /* Hero intro */
	--fs-footer-claim: clamp(22px, 2.4vw, 34px);

	--fs-title-lg: 24px;   /* card titles */
	--fs-title-md: 22px;
	--fs-title-sm: 20px;
	--fs-title-xs: 19px;   /* funnel / step rows */
	--fs-title-2xs: 18px;
	--fs-body-lg: 17px;
	--fs-body: 16px;
	--fs-ui: 15px;         /* buttons */
	--fs-nav: 14.5px;
	--fs-body-sm: 14px;
	--fs-mono-lg: 12.5px;
	--fs-mono: 12px;
	--fs-mono-sm: 11px;
	--fs-mono-xs: 10px;

	--lh-display: .9;
	--lh-chapter: .92;
	--lh-tight: .96;
	--lh-snug: 1;
	--lh-lead: 1.4;
	--lh-body: 1.55;
	--lh-relaxed: 1.6;

	--ls-display: -.035em;
	--ls-chapter: -.04em;
	--ls-heading: -.03em;
	--ls-title: -.02em;
	--ls-tight: -.01em;
	--ls-eyebrow: .14em;
	--ls-eyebrow-lg: .16em;
	--ls-label: .1em;
	--ls-label-sm: .08em;

	/* ---------- Spacing ---------- */
	--space-3xs: 6px;
	--space-2xs: 8px;
	--space-xs: 10px;
	--space-sm: 14px;
	--space-md: 20px;
	--space-lg: 28px;
	--space-xl: 40px;
	--space-2xl: 56px;
	--space-3xl: 72px;
	--space-4xl: 120px;

	--gap-grid: 20px;            /* card grids */
	--gap-split: 56px;           /* 2-col intros */
	--section-y: 120px;          /* standard section padding */
	--section-y-sm: 40px;        /* top padding of continuation sections */
	--header-h: 82px;            /* 20px + 42px button + 20px */

	/* ---------- Layout ---------- */
	--container-max: 1320px;
	--container-wide: 1400px;
	--container-narrow: 1100px;
	--container-text: 900px;
	--page-gutter: 32px;
	--page-gutter-wide: 24px;

	/* ---------- Radius ---------- */
	--radius-xs: 6px;
	--radius-sm: 8px;      /* labels on placeholders */
	--radius-md: 12px;     /* chips */
	--radius-btn: 14px;    /* buttons, floating chips */
	--radius-lg: 16px;     /* step rows, choice buttons */
	--radius-xl: 20px;     /* floating cards */
	--radius-2xl: 28px;    /* tiles */
	--radius-3xl: 30px;    /* project cards */
	--radius-4xl: 34px;    /* framed tiles */
	--radius-panel: 40px;  /* big dark panels */
	--radius-pill: 999px;

	/* ---------- Shadows ---------- */
	--shadow-frame: 0 50px 120px -40px rgba(17, 17, 17, .4);
	--shadow-card: 0 30px 60px -28px rgba(17, 17, 17, .45), 0 2px 6px rgba(17, 17, 17, .04);
	--shadow-chip: 0 18px 40px -18px rgba(0, 0, 0, .45);
	--shadow-chip-light: 0 16px 34px -18px rgba(17, 17, 17, .5);
	--shadow-device: 0 30px 70px -24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset;

	/* ---------- Motion ---------- */
	--ease-primary: cubic-bezier(.16, 1, .3, 1);   /* expo-out, used for reveals + screens */
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
	--ease-standard: ease;
	--dur-fast: .25s;     /* hover */
	--dur-base: .35s;     /* header bg */
	--dur-mid: .5s;       /* step activation */
	--dur-slow: .9s;      /* reveals, screen crossfade */
	--reveal-distance: 28px;

	--z-header: 100;
	--z-overlay: 200;
	--z-consent: 300;
}

/* Tablet / mobile overrides of layout tokens (design is desktop-only; these are derived). */
@media (max-width: 1024px) {
	:root {
		--section-y: 96px;
		--gap-split: 40px;
		--page-gutter: 28px;
	}
}

@media (max-width: 767px) {
	:root {
		--section-y: 80px;
		--section-y-sm: 24px;
		--page-gutter: 20px;
		--page-gutter-wide: 12px;
		--gap-grid: 14px;
		--gap-split: 28px;
		--radius-panel: 28px;
		--radius-3xl: 24px;
		--radius-4xl: 26px;
		--header-h: 68px;
	}
}
/* ---- css/reset.css ---- */
/* Minimal modern reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

[hidden] {
	display: none !important;
}
/* ---- css/base.css ---- */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
}

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

::selection {
	background: var(--color-ink);
	color: var(--color-bg);
}

a {
	color: var(--color-ink);
	transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
	color: var(--color-accent);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.site-main {
	display: block;
}

/* Accessible helpers */
.screen-reader-text,
.u-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--color-ink);
	color: var(--color-bg);
	border-radius: var(--radius-btn);
	font-weight: 500;
}

/* Internal QA marker — rendered only for logged-in editors (see weblabs_internal_marker()). */
.qa-marker {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .04em;
	line-height: 1.3;
	color: #b3261e;
	background: #fff3f1;
	border: 1px dashed #e0827a;
	border-radius: 6px;
	padding: 2px 6px;
	vertical-align: middle;
	white-space: nowrap;
}

[data-unverified="true"] {
	position: relative;
}

body.wl-qa [data-unverified="true"] {
	outline: 1px dashed #e0827a;
	outline-offset: 4px;
}
/* ---- css/typography.css ---- */
/* ==========================================================================
   Typography system — global classes, no per-section font sizes.
   display-*  : General Sans 600, very tight
   heading-*  : General Sans 600
   title-*    : General Sans 500/600 for cards, rows
   lead / body: Geist (lead uses display face 500)
   eyebrow / label / tag : Geist Mono
   ========================================================================== */

.display-xl,
.display-lg,
.display-md,
.display-sm,
.heading-xl,
.heading-lg,
.heading-md,
.heading-sm,
.heading-xs,
.heading-2xs,
.stat {
	font-family: var(--font-display);
	font-weight: 600;
}

.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-chapter); letter-spacing: var(--ls-chapter); }
.display-md { font-size: var(--fs-display-md); line-height: .94; letter-spacing: var(--ls-chapter); }
.display-sm { font-size: var(--fs-display-sm); line-height: .94; letter-spacing: var(--ls-display); }

.heading-xl  { font-size: var(--fs-heading-xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.heading-lg  { font-size: var(--fs-heading-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.heading-md  { font-size: var(--fs-heading-md); line-height: .98; letter-spacing: var(--ls-heading); }
.heading-sm  { font-size: var(--fs-heading-sm); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.heading-xs  { font-size: var(--fs-heading-xs); line-height: .98; letter-spacing: var(--ls-heading); }
.heading-2xs { font-size: var(--fs-heading-2xs); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }

.stat { font-size: var(--fs-stat); line-height: 1; letter-spacing: var(--ls-heading); }

.quote {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-quote);
	line-height: 1.25;
	letter-spacing: var(--ls-title);
}

.lead-lg,
.lead,
.tagline {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: var(--ls-tight);
}

.lead-lg { font-size: var(--fs-lead-lg); line-height: 1.35; }
.lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-text-strong); }
.tagline { font-size: var(--fs-tagline); line-height: 1.2; letter-spacing: var(--ls-title); }

.title-lg,
.title-md,
.title-sm,
.title-xs,
.title-2xs {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: var(--ls-tight);
	line-height: 1.2;
}

.title-lg  { font-size: var(--fs-title-lg); }
.title-md  { font-size: var(--fs-title-md); }
.title-sm  { font-size: var(--fs-title-sm); }
.title-xs  { font-size: var(--fs-title-xs); font-weight: 500; }
.title-2xs { font-size: var(--fs-title-2xs); font-weight: 500; }

.body-xl { font-size: var(--fs-body-xl); line-height: 1.5; color: var(--color-text-strong); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--color-text-strong); }
.body-md { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--color-muted); }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-muted); }

.eyebrow,
.label,
.meta {
	font-family: var(--font-mono);
	font-weight: 400;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fs-mono);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-muted);
}

.eyebrow--lg {
	font-size: var(--fs-mono-lg);
	letter-spacing: var(--ls-eyebrow-lg);
}

.label {
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-muted);
}

.meta {
	font-size: var(--fs-mono-sm);
	color: var(--color-subtle);
}

.footnote {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--color-faint);
}

/* Dark contexts */
.is-dark .eyebrow,
.is-dark .label { color: var(--color-on-dark-muted); }
.is-dark .lead  { color: var(--color-on-dark); }
.is-dark .body-lg { color: var(--color-on-dark-3); }
.is-dark .body-md { color: var(--color-on-dark-4); }

/* Long-form content (pages, posts, case study copy) */
.prose {
	font-size: var(--fs-body-lg);
	line-height: 1.65;
	color: var(--color-text-strong);
	max-width: 72ch;
}

.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: var(--ls-heading); margin-top: 1.8em; color: var(--color-ink); }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: var(--ls-title); margin-top: 1.5em; color: var(--color-ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.35; border-left: 2px solid var(--color-accent); padding-left: 20px; color: var(--color-ink); }
/* ---- css/layout.css ---- */
/* ==========================================================================
   Layout: container, sections, grids.
   Design: max-width 1320 + 32px gutter (content 1256); wide band 1400 + 24px.
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--page-gutter);
}

.container-wide {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--page-gutter-wide);
}

.container-narrow {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

/* ---------- Sections ---------- */
.section {
	position: relative;
	padding-block: var(--section-y);
}

.section--continue { padding-top: var(--section-y-sm); }   /* sections following a section */
.section--compact  { padding-block: calc(var(--section-y) * .75); }
.section--flush    { padding-block: 0; }

.section-light {
	background: var(--color-bg);
	color: var(--color-ink);
}

.section-dark,
.is-dark {
	background: var(--color-dark);
	color: var(--color-on-dark);
}

.section-dark a:not(.btn) { color: var(--color-on-dark); }
.section-dark a:not(.btn):hover { color: var(--color-accent); }

.section-fullscreen {
	min-height: 100vh;
	min-height: 100svh;
}

/* ---------- Section header (eyebrow + headline + intro) ---------- */
.section-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: end;
	margin-bottom: 52px;
}

.section-head--top { align-items: start; }
.section-head__title { margin-top: 18px; }
.section-head__intro { max-width: 440px; padding-bottom: 14px; }

/* ---------- Grids ---------- */
.grid {
	display: grid;
	gap: var(--gap-grid);
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-split);
	align-items: center;
}

.stack > * + * { margin-top: var(--stack-gap, var(--space-md)); }

@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.section-head,
	.split,
	.grid-2,
	.grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.section-head { gap: var(--space-md); margin-bottom: 36px; }
	.section-head__intro { padding-bottom: 0; }
}

@media (max-width: 560px) {
	.grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.grid-6 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Inner pages ---------- */
.section--page { padding-top: calc(var(--header-h) + 88px); }
.page-head { margin-bottom: 56px; }
.page-head__title { margin-top: 18px; max-width: 18ch; }
.page-hero-media { margin-bottom: 56px; border-radius: var(--radius-3xl); overflow: hidden; }
.post-list { border-top: 1px solid var(--color-line); }
.post-row { border-bottom: 1px solid var(--color-line); }
.post-row__link { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 28px 0; align-items: baseline; }
@media (max-width: 767px) {
	.section--page { padding-top: calc(var(--header-h) + 48px); }
	.post-row__link { grid-template-columns: 1fr; gap: 6px; }
}
/* ---- css/buttons.css ---- */
/* ==========================================================================
   Buttons — one system, variants via modifier classes.
   Design: 16px 24px, radius 14, 15px/500, hover translateY(-2px), arrow slides.
   ========================================================================== */

.btn {
	--btn-bg: transparent;
	--btn-fg: var(--color-ink);
	--btn-border: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 24px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--ease-standard),
		background-color var(--dur-fast) var(--ease-standard),
		border-color var(--dur-fast) var(--ease-standard),
		color var(--dur-fast) var(--ease-standard);
	-webkit-tap-highlight-color: transparent;
}

.btn:hover,
.btn:focus-visible {
	color: var(--btn-fg);
}

.btn__arrow {
	display: inline-block;
	transition: transform var(--dur-fast) var(--ease-primary);
}

.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.98); }

.btn[disabled],
.btn.is-disabled {
	opacity: .4;
	pointer-events: none;
}

/* Primary — ink */
.btn-primary {
	--btn-bg: var(--color-ink);
	--btn-fg: var(--color-bg);
}

.btn-primary:hover { transform: translateY(-2px); }

/* Secondary — outline */
.btn-secondary {
	--btn-border: var(--color-line);
}

.btn-secondary:hover { --btn-border: var(--color-ink); }

/* Light — on dark panels */
.btn-light {
	--btn-bg: var(--color-on-dark);
	--btn-fg: var(--color-ink);
}

.btn-light:hover { transform: translateY(-2px); }

/* Dark ghost — outline on dark */
.btn-dark {
	--btn-bg: var(--a-white-05);
	--btn-fg: var(--color-on-dark);
	--btn-border: var(--a-white-10);
}

.btn-dark:hover {
	--btn-bg: var(--color-accent);
	--btn-fg: var(--color-on-accent);
	--btn-border: var(--color-accent);
	transform: translateY(-2px);
}

/* Text link with arrow */
.btn-text {
	padding: 0;
	border: 0;
	border-radius: 0;
	gap: 8px;
}

.btn-text:hover { color: var(--color-accent); }

/* Icon-only */
.btn-icon {
	padding: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

/* Sizes */
.btn--sm {
	padding: 12px 20px;
	font-size: var(--fs-nav);
	gap: 9px;
}

.btn--lg {
	padding: 18px 32px;
	border-radius: var(--radius-lg);
	font-size: 17px;
	font-weight: 600;
}

.btn--block { width: 100%; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Choice / selectable chip-button (funnel) */
.choice {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-title-2xs);
	color: var(--color-on-dark);
	background: var(--a-white-05);
	border: 1px solid var(--a-white-10);
	border-radius: var(--radius-lg);
	padding: 16px 26px;
	cursor: pointer;
	transition: all var(--dur-fast) var(--ease-standard);
}

.choice:hover,
.choice[aria-pressed="true"],
.choice[aria-checked="true"] {
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

@media (max-width: 560px) {
	.btn { padding: 15px 20px; }
	.btn--lg { padding: 17px 26px; }
	.choice { font-size: 16px; padding: 14px 20px; }
}
/* ---- css/components.css ---- */
/* ==========================================================================
   Reusable components (all patterns that appear 2+ times in the design).
   ========================================================================== */

/* ---------- Accent helpers ---------- */
.u-accent { color: var(--color-accent); }

.dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	flex: none;
}

.dot--glow { box-shadow: 0 0 8px var(--color-accent); }
.dot--sm { width: 6px; height: 6px; }
.dot--pulse { animation: wl-pulse 2.4s ease-in-out infinite; }

/* ---------- Tags / pills ---------- */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	align-content: start;
}

.tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	line-height: 1.2;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	padding: 10px 16px;
	transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}

.tag--lg { font-size: var(--fs-mono-lg); padding: 11px 18px; }
.tag--xs { font-size: var(--fs-mono-sm); padding: 5px 13px; color: var(--color-on-dark-muted); }

.is-dark .tag {
	color: var(--color-on-dark-2);
	border-color: var(--a-white-09);
}

.is-dark .tag--xs {
	color: var(--color-on-dark-muted);
	border-color: var(--a-white-08);
}

.tag.is-active,
.is-dark .tag.is-active {
	color: var(--color-on-accent);
	background: var(--color-accent);
	border-color: var(--color-accent);
}

/* ---------- Live badge (dark glass pill) ---------- */
.badge-live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	color: #fff;
	background: rgba(13, 13, 12, .72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius-pill);
	padding: 7px 12px;
	white-space: nowrap;
}

/* ---------- Floating chip (labels on visuals) ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .95);
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: var(--radius-md);
	padding: 9px 13px;
	box-shadow: var(--shadow-chip-light);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

.chip--dark {
	background: var(--color-ink);
	color: #fff;
	border-color: transparent;
}

/* Chip with icon square (screen overlays) */
.chip--icon {
	gap: 9px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(17, 17, 17, .06);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: var(--radius-btn);
	padding: 10px 14px 10px 10px;
	box-shadow: var(--shadow-chip);
	font-size: 14.5px;
}

.chip__icon {
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: var(--color-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.chip--metric {
	background: var(--color-ink);
	color: #fff;
	border: 0;
	border-radius: var(--radius-btn);
	padding: 11px 15px;
	font-size: var(--fs-ui);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
}

.is-floating {
	animation: wl-float var(--float-dur, 5.6s) ease-in-out var(--float-delay, 0s) infinite;
}

/* ---------- Art-direction placeholder slot ----------
   Striped tile + mono label. Used wherever final photography (Higgsfield)
   is still missing — see /docs/higgsfield-shotlist.md. */
.slot {
	position: relative;
	overflow: hidden;
	background: var(--stripe-light);
	border-radius: var(--radius-3xl);
}

.slot--cool { background: var(--stripe-cool); }
.slot--ink { background: #111; }
.slot--dark { background: var(--stripe-dark); background-color: var(--color-dark-4); }

.slot__label {
	position: absolute;
	top: 22px;
	left: 24px;
	z-index: 2;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	color: var(--color-subtle);
	background: var(--color-paper);
	border: 1px solid var(--color-line-soft);
	border-radius: var(--radius-sm);
	padding: 6px 12px;
	line-height: 1.3;
}

.slot--ink .slot__label,
.slot--dark .slot__label {
	color: var(--color-on-dark-mid);
	background: #000;
	border-color: var(--a-white-10);
}

.slot--dark .slot__label { background: #111; }

.slot > img,
.slot > video,
.slot > picture,
.slot__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Step rows (funnel / AI flow / featured case) ---------- */
.steps {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.step {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: var(--a-white-04);
	border: 1px solid var(--a-white-08);
	border-radius: 18px;
	color: var(--color-on-dark);
	transition:
		opacity var(--dur-mid) var(--ease-standard),
		transform var(--dur-mid) var(--ease-primary),
		background-color var(--dur-mid) var(--ease-standard),
		border-color var(--dur-mid) var(--ease-standard);
}

.step__num {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	color: var(--color-accent);
	min-width: 20px;
}

.step__label {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-title-xs);
	line-height: 1.2;
}

.step__end {
	margin-left: auto;
	color: var(--color-on-dark-faint);
}

.step__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--a-white-09);
	flex: none;
	transition: background-color var(--dur-mid) var(--ease-standard), box-shadow var(--dur-mid);
}

.step--sm { padding: 16px 22px; border-radius: var(--radius-lg); }
.step--sm .step__label { font-size: var(--fs-title-2xs); }

.step--accent {
	background: var(--color-accent);
	color: var(--color-on-accent);
	border-color: var(--color-accent);
}

.step--accent .step__num,
.step--accent .step__end { color: var(--color-on-accent); }
.step--accent .step__label { font-weight: 600; }
.step--accent .step__dot { background: #111; }

/* ---------- KPI card (floating cards in hero) ---------- */
.kpi-card {
	background: rgba(255, 255, 255, .97);
	border: 1px solid var(--color-line-card);
	border-radius: var(--radius-xl);
	padding: 10px;
	box-shadow: var(--shadow-card);
	color: var(--color-ink);
}

.kpi-card--dark {
	background: var(--color-dark-3);
	border-color: rgba(255, 255, 255, .08);
	color: var(--color-on-dark);
}

.kpi-card__media {
	height: 38px;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	background: repeating-linear-gradient(135deg, #e9e9e4, #e9e9e4 9px, #f0f0eb 9px, #f0f0eb 18px);
}

.kpi-card--dark .kpi-card__media {
	background: repeating-linear-gradient(135deg, #1b1b19, #1b1b19 9px, #222220 9px, #222220 18px);
}

.kpi-card__tag {
	position: absolute;
	top: 8px;
	left: 8px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: var(--ls-label-sm);
	color: var(--color-muted);
	background: rgba(255, 255, 255, .85);
	border-radius: var(--radius-xs);
	padding: 3px 7px;
}

.kpi-card--dark .kpi-card__tag {
	color: var(--color-on-dark-2);
	background: rgba(0, 0, 0, .55);
}

.kpi-card__led {
	position: absolute;
	top: 9px;
	right: 9px;
}

.kpi-card__body {
	padding: 10px 6px 2px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.kpi-card__value {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
	letter-spacing: var(--ls-title);
	color: var(--color-accent);
	white-space: nowrap;
}

.kpi-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
}

.kpi-card__meta {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-xs);
	color: var(--color-subtle);
	margin-top: 3px;
	white-space: nowrap;
}

.kpi-card--dark .kpi-card__meta { color: #8d8d85; }

.kpi-card__bar {
	margin: 8px 6px 4px;
	height: 3px;
	border-radius: 3px;
	background: #ededE7;
	overflow: hidden;
}

.kpi-card--dark .kpi-card__bar { background: rgba(255, 255, 255, .08); }

.kpi-card__bar > span {
	display: block;
	height: 100%;
	width: var(--fill, 70%);
	background: var(--color-accent);
	border-radius: 3px;
	transform-origin: left;
}

/* ---------- Metric (proof row) ---------- */
.metric__value { display: block; }

.metric__label {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-top: 14px;
}

/* ---------- Skeleton bars (UI placeholders inside product mockups) ---------- */
.skel {
	display: block;
	height: 12px;
	border-radius: 4px;
	background: var(--a-white-08);
}

.skel--light { background: var(--a-ink-06); }

/* ---------- Panel ---------- */
.panel {
	border-radius: var(--radius-panel);
	overflow: hidden;
	position: relative;
}

.panel--dark { background: var(--color-dark); color: var(--color-on-dark); }
.panel--surface { background: var(--color-surface); border: 1px solid var(--color-line); }

/* ---------- Project card ---------- */
.project-card {
	display: block;
	color: inherit;
}

.project-card:hover { color: inherit; }

.project-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-3xl);
	height: var(--card-h, 340px);
	background:
		radial-gradient(120% 90% at 85% 100%, rgba(70, 169, 155, .16), transparent 55%),
		linear-gradient(160deg, #efeee9, #e3e2dc);
	isolation: isolate;
	transform: translateZ(0);
}

/* browser window: true 16:9 screen, anchored top-left, may bleed off the bottom */
.pc-browser {
	position: absolute;
	top: 9%;
	left: 7%;
	width: 86%;
	display: block;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 30px 60px -28px rgba(17, 17, 17, .35), 0 0 0 1px rgba(17, 17, 17, .07);
	transition: translate 1s var(--ease-primary);
}
.project-card.has-phone .pc-browser { width: 80%; }
.pc-browser__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #f3f3f0; border-bottom: 1px solid #e7e7e2; }
.pc-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #d4d4ce; }
.pc-browser__bar em { margin: 0 auto; transform: translateX(-12px); padding: 2px 12px; border-radius: 6px; background: #fff; border: 1px solid #e7e7e2; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: #8a8a82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.pc-browser__screen { position: relative; display: block; aspect-ratio: 16 / 9; background: #f6f6f3; }
.pc-browser__screen img,
.pc-browser__screen video,
.pc-phone img,
.pc-phone video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: opacity .6s var(--ease-standard);
}

/* phone in front, bottom right */
.pc-phone {
	position: absolute;
	right: 6%;
	bottom: 7%;
	z-index: 2;
	height: 74%;
	max-height: 340px;
	aspect-ratio: 9 / 19.5;
	border-radius: 22px;
	padding: 5px;
	background: #0b0b0a;
	box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .45);
	transition: translate 1s var(--ease-primary), rotate 1s var(--ease-primary);
}
.pc-phone::before { content: ""; position: absolute; z-index: 3; top: 9px; left: 50%; width: 30%; height: 9px; border-radius: 99px; background: #0b0b0a; transform: translateX(-50%); }
.pc-phone img, .pc-phone video { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 17px; background: #fff; }

.project-card__media video { opacity: 0; }
.project-card.is-playing .project-card__media video { opacity: 1; }
.project-card:hover .pc-browser { translate: 0 -8px; }
.project-card:hover .pc-phone { translate: 0 -14px; rotate: -1.5deg; }

.project-card__body {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-top: 20px;
}

.project-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-title-md);
	letter-spacing: var(--ls-tight);
	line-height: 1.2;
}

.project-card--lg .project-card__title { font-size: var(--fs-title-lg); }

.project-card__sub {
	font-size: var(--fs-body-sm);
	color: var(--color-muted);
	margin-top: 4px;
}

.project-card__kpi {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--color-accent);
	white-space: nowrap;
	text-align: right;
}

/* ---------- Quote / testimonial ---------- */
.person {
	display: flex;
	align-items: center;
	gap: 14px;
}

.person__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2a2a28;
	object-fit: cover;
	flex: none;
}

.person__name { font-weight: 600; }
.person__role { font-size: var(--fs-body-sm); color: var(--color-on-dark-mid); }

/* ---------- Play button ---------- */
.play-btn {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--color-on-dark);
	color: #111;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--dur-fast) var(--ease-primary), background-color var(--dur-fast);
}

.play-btn svg { width: 20px; height: 20px; margin-left: 3px; }
.play-btn:hover { transform: scale(1.06); background: #fff; }

/* ---------- Cursor-follow label ---------- */
.cursor-label {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--z-overlay);
	pointer-events: none;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-on-accent);
	background: var(--color-accent);
	border-radius: var(--radius-pill);
	padding: 9px 14px;
	opacity: 0;
	transform: translate3d(-50%, -50%, 0) scale(.6);
	transition: opacity .25s var(--ease-standard), transform .35s var(--ease-primary);
	will-change: transform;
}

.cursor-label.is-visible { opacity: 1; }

@media (hover: none), (pointer: coarse) {
	.cursor-label { display: none; }
}

.project-card__title,
.project-card__sub { display: block; }

/* small cards: browser sits in the optical middle instead of hugging the top */
.project-card--sm .pc-browser { top: 17%; }
/* ---- css/frames.css ---- */
/* ==========================================================================
   Frames: browser frame, device (phone) frame, framed tile, code window.
   ========================================================================== */

/* ---------- Browser frame ---------- */
.browser {
	position: relative;
	border-radius: 38px;
	background: var(--color-frame);
	padding: 14px;
	box-shadow: var(--shadow-frame);
}

.browser__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	background: #e9e9e4;
	height: var(--browser-h, clamp(360px, 46vw, 620px));
}

.browser__chrome {
	position: absolute;
	inset: 0 0 auto;
	z-index: 5;
	height: 50px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 20px;
	background: var(--color-chrome);
	border-bottom: 1px solid var(--color-line-soft);
}

.browser__light {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--color-chrome-dot);
}

.browser__url {
	margin-left: 14px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: #9a9a92;
	background: #fff;
	border: 1px solid #e6e6e0;
	border-radius: var(--radius-sm);
	padding: 5px 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60%;
}

.browser__screens {
	position: absolute;
	inset: 50px 0 0;
}

.browser__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 14px;
	padding: 2px 8px 4px;
	flex-wrap: wrap;
}

.browser__caption {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: var(--ls-label-sm);
	color: var(--color-on-dark-2);
}

/* Pager dots */
.dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.dots__item {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: var(--color-dot-idle);
	transition: all .4s var(--ease-standard);
	padding: 0;
}

.dots__item[aria-current="true"] {
	width: 22px;
	background: var(--color-accent);
}

/* ---------- Phone frame ---------- */
.device {
	position: absolute;
	right: 4%;
	top: 7%;
	height: 86%;
	aspect-ratio: 9 / 19.5;
	border-radius: 34px;
	background: #0b0b0a;
	padding: 7px;
	box-shadow: var(--shadow-device);
	z-index: 2;
}

.device__screen {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 27px;
	overflow: hidden;
	background: #fff;
}

.device__screen video,
.device__screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.device__island {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 34%;
	height: 16px;
	border-radius: 10px;
	background: #0b0b0a;
	z-index: 1;
}

/* ---------- Framed tile (black bezel around a slot) ---------- */
.framed {
	border-radius: var(--radius-4xl);
	background: var(--color-frame);
	padding: 12px;
}

.framed > .slot { border-radius: 24px; height: 100%; }

/* ---------- Code window ---------- */
.code-window {
	border-radius: 32px;
	background: var(--color-dark-2);
	padding: 30px;
	font-family: var(--font-mono);
	color: var(--color-on-dark-3);
}

.code-window__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}

.code-window__light {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #2a2a28;
}

.code-window__title {
	margin-left: 10px;
	font-size: var(--fs-mono);
	color: var(--color-on-dark-faint);
}

@media (max-width: 767px) {
	.browser { border-radius: 26px; padding: 8px; }
	.browser__viewport { border-radius: 19px; }
	.browser__chrome { height: 38px; padding: 0 12px; gap: 6px; }
	.browser__light { width: 8px; height: 8px; }
	.browser__url { margin-left: 8px; font-size: 10.5px; padding: 3px 10px; }
	.browser__screens { inset: 38px 0 0; }
	.code-window { padding: 20px; border-radius: 24px; }
}
/* ---- css/header.css ---- */
/* ==========================================================================
   Header + navigation
   Design: fixed, transparent at top; after 24px scroll → frosted bg
   rgba(247,247,245,.72) + blur(14px) + hairline border.
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-header);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--dur-base) var(--ease-standard),
		box-shadow var(--dur-base) var(--ease-standard),
		border-color var(--dur-base) var(--ease-standard),
		transform .45s var(--ease-primary);
}

.site-header.is-scrolled {
	background: rgba(247, 247, 245, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: rgba(17, 17, 17, .08);
}

.site-header.is-hidden { transform: translateY(-100%); }

/* Over dark sections the frosted bar switches to dark glass */
.site-header.is-scrolled.is-on-dark {
	background: rgba(13, 13, 12, .72);
	border-bottom-color: rgba(255, 255, 255, .08);
}

.site-header.is-on-dark .site-nav__list a,
.site-header.is-on-dark .nav-toggle { color: var(--color-on-dark); }
.site-header.is-on-dark .site-logo img { filter: brightness(0) invert(.95); }
.site-header.is-on-dark .btn-primary { --btn-bg: var(--color-on-dark); --btn-fg: var(--color-ink); }

.site-header__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 20px var(--page-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-logo {
	display: flex;
	align-items: center;
	flex: none;
}

.site-logo img {
	height: 24px;
	width: auto;
	filter: brightness(0);
	transition: filter var(--dur-base);
}

/* ---------- Primary nav (desktop) ---------- */
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 34px;
	font-size: var(--fs-nav);
	font-weight: 500;
}

.site-nav__list a {
	position: relative;
	color: var(--color-ink);
	padding-block: 6px;
}

/* animated underline */
.site-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease-primary);
}

.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list a[aria-current="true"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

.site-nav__list a:hover { color: inherit; }

/* Sub menus (prepared for service mega-nav) */
.site-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	min-width: 220px;
	padding: 10px;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .25s, transform .35s var(--ease-primary), visibility .25s;
}

.site-nav__list li { position: relative; }
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__list .sub-menu a { display: block; padding: 8px 10px; }

.site-header__cta { flex: none; }

/* ---------- Mobile toggle ---------- */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-btn);
	color: var(--color-ink);
}

.nav-toggle__bars {
	position: relative;
	width: 20px;
	height: 12px;
}

.nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .4s var(--ease-primary), top .4s var(--ease-primary);
}

.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { top: 10.5px; }

.nav-open .nav-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.nav-open .nav-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }

/* ---------- Mobile panel ---------- */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-header) - 1);
	background: var(--color-bg);
	padding: calc(var(--header-h) + 24px) var(--page-gutter) 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .6s var(--ease-primary), visibility 0s .6s;
}

.nav-open .mobile-nav {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path .6s var(--ease-primary), visibility 0s;
}

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mobile-nav__list a {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(36px, 11vw, 56px);
	line-height: 1.08;
	letter-spacing: var(--ls-heading);
	color: var(--color-ink);
	padding-block: 4px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .5s var(--ease-primary), transform .6s var(--ease-primary);
}

.nav-open .mobile-nav__list a { opacity: 1; transform: none; }
.nav-open .mobile-nav__list li:nth-child(2) a { transition-delay: .04s; }
.nav-open .mobile-nav__list li:nth-child(3) a { transition-delay: .08s; }
.nav-open .mobile-nav__list li:nth-child(4) a { transition-delay: .12s; }
.nav-open .mobile-nav__list li:nth-child(5) a { transition-delay: .16s; }
.nav-open .mobile-nav__list li:nth-child(6) a { transition-delay: .2s; }

.mobile-nav__foot {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.nav-open { overflow: hidden; }

@media (max-width: 1024px) {
	.site-nav { display: none; }
	.nav-toggle { display: inline-flex; }
	.site-header__cta { margin-left: auto; }
}

@media (max-width: 560px) {
	.site-header__inner { padding-block: 14px; gap: 10px; }
	.site-logo img { height: 21px; }
	.site-header__cta .btn { padding: 11px 14px; font-size: 14px; }
}

@media (min-width: 1025px) {
	.mobile-nav { display: none; }
}

/* ==========================================================================
   Mega menu
   ========================================================================== */
.mega-nav__item { position: static; }

.mega-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-block: 6px;
	font: inherit;
	color: var(--color-ink);
	position: relative;
}

.mega-nav__chev { width: 11px; height: 11px; transition: transform .35s var(--ease-primary); opacity: .6; }
.mega-nav__trigger[aria-expanded="true"] .mega-nav__chev { transform: rotate(180deg); opacity: 1; }
.mega-nav__trigger::after { content: ""; position: absolute; left: 0; right: 16px; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-primary); }
.mega-nav__trigger:hover::after, .mega-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.site-header.is-on-dark:not(.has-mega) .mega-nav__trigger { color: var(--color-on-dark); }

.mega-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: rgba(247, 247, 245, .97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--color-line);
	box-shadow: 0 40px 80px -40px rgba(17, 17, 17, .25);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	transition: clip-path .55s var(--ease-primary), opacity .3s var(--ease-standard);
}

.mega-panel.is-open { clip-path: inset(0 0 0 0); opacity: 1; }

.mega-panel__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 40px var(--page-gutter) 48px;
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 2.2fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.mega-panel__big { display: block; font-family: var(--font-display); font-weight: 600; font-size: 64px; line-height: .9; letter-spacing: var(--ls-chapter); }
.mega-panel__lead { margin-top: 16px; color: var(--color-muted); font-size: 15px; line-height: 1.5; max-width: 260px; }

.mega-panel__cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 28px; }
.mega-col__title { display: block; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-muted); padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--color-line); }
.mega-col__links { display: flex; flex-direction: column; }

.mega-link { display: block; padding: 10px 0; color: var(--color-ink); }
.mega-link__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: var(--ls-tight); }
.mega-link__arrow { opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease-primary); color: var(--color-accent); }
.mega-link:hover { color: var(--color-ink); }
.mega-link:hover .mega-link__arrow { opacity: 1; transform: none; }
.mega-link__desc { display: block; margin-top: 3px; font-size: 13.5px; color: var(--color-muted); }

/* stagger in */
.mega-panel .mega-col,
.mega-panel .mega-feature,
.mega-panel .mega-panel__intro { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-primary), transform .6s var(--ease-primary); }
.mega-panel.is-open .mega-panel__intro { opacity: 1; transform: none; transition-delay: .05s; }
.mega-panel.is-open .mega-col { opacity: 1; transform: none; }
.mega-panel.is-open .mega-col:nth-child(1) { transition-delay: .1s; }
.mega-panel.is-open .mega-col:nth-child(2) { transition-delay: .15s; }
.mega-panel.is-open .mega-col:nth-child(3) { transition-delay: .2s; }
.mega-panel.is-open .mega-feature { opacity: 1; transform: none; transition-delay: .25s; }

.mega-feature { display: flex; flex-direction: column; gap: 8px; color: var(--color-ink); }
.mega-feature:hover { color: var(--color-ink); }
.mega-feature__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--color-dark); }
.mega-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--ease-primary); }
.mega-feature:hover .mega-feature__media img { transform: scale(1.04); }
.mega-feature__eyebrow { margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-mono-sm); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-accent); }
.mega-feature__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: var(--ls-tight); }
.mega-feature__brain { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.mega-feature__q { font-family: var(--font-mono); font-size: 11px; color: var(--color-on-dark-2); background: var(--a-white-05); border: 1px solid var(--a-white-08); border-radius: 10px; padding: 10px; }
.mega-feature__chips { display: flex; gap: 6px; }
.mega-feature__chips i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--color-on-accent); background: var(--color-accent); border-radius: 999px; padding: 3px 9px; }

/* header state while a panel is open */
.site-header.has-mega { background: rgba(247, 247, 245, .97); border-bottom-color: var(--color-line); }
.site-header.has-mega .site-logo img { filter: brightness(0); }
.site-header.has-mega .btn-primary { --btn-bg: var(--color-ink); --btn-fg: var(--color-bg); }
.mega-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); background: rgba(13, 13, 12, .25); opacity: 0; pointer-events: none; transition: opacity .4s; }
.mega-backdrop.is-on { opacity: 1; pointer-events: auto; }

/* mobile accordion */
.mobile-acc summary { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 11vw, 56px); line-height: 1.08; letter-spacing: var(--ls-heading); padding-block: 4px; }
.mobile-acc summary::-webkit-details-marker { display: none; }
.mobile-acc__icon { position: relative; width: 18px; height: 18px; }
.mobile-acc__icon::before, .mobile-acc__icon::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform .4s var(--ease-primary); }
.mobile-acc__icon::after { transform: rotate(90deg); }
.mobile-acc[open] .mobile-acc__icon::after { transform: rotate(0); }
.mobile-acc__links { padding: 8px 0 16px; display: grid; gap: 2px; }
.mobile-acc__links a { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 18px !important; letter-spacing: 0 !important; color: var(--color-muted) !important; opacity: 1 !important; transform: none !important; padding: 6px 0 !important; }
.mobile-nav { overflow-y: auto; }
.nav-open .mobile-nav__list > li > a, .nav-open .mobile-acc summary { opacity: 1; transform: none; }

@media (max-width: 1180px) {
	.mega-panel__inner { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
	.mega-panel__intro { display: none; }
	.site-nav__list { gap: 24px; }
}
.site-nav__list .mega-nav__item { position: static; }
/* ---- css/footer.css ---- */
.site-footer {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 72px var(--page-gutter) 48px;
	border-top: 1px solid var(--color-line);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-xl);
	margin-bottom: 64px;
}

.site-footer__logo img {
	height: 26px;
	width: auto;
	filter: brightness(0);
	margin-bottom: 20px;
}

.site-footer__claim {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-footer-claim);
	line-height: 1.1;
	letter-spacing: var(--ls-title);
	max-width: 420px;
}

.site-footer__heading {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 18px;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 11px;
	font-size: var(--fs-ui);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding-top: 28px;
	border-top: 1px solid var(--color-line);
	flex-wrap: wrap;
}

.site-footer__copy {
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--color-muted);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono);
	color: var(--color-muted);
}

.site-footer__legal a,
.site-footer__legal button {
	color: var(--color-muted);
	font-family: inherit;
	font-size: inherit;
}

.site-footer__legal a:hover,
.site-footer__legal button:hover { color: var(--color-ink); }

.site-footer__sign {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .02em;
}

@media (max-width: 860px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	.site-footer { padding-top: 56px; }
	.site-footer__grid { gap: 32px 20px; margin-bottom: 44px; }
}
/* ---- css/forms.css ---- */
/* ==========================================================================
   Forms + project funnel (dark context by default — final CTA panel)
   ========================================================================== */

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.field__label {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-muted);
}

.input,
.textarea,
.select {
	width: 100%;
	font-size: var(--fs-body);
	line-height: 1.4;
	color: var(--color-ink);
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-btn);
	padding: 15px 18px;
	transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.textarea { min-height: 120px; resize: vertical; }

.input:focus,
.textarea:focus,
.select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(70, 169, 155, .18);
}

.is-dark .field__label { color: var(--color-on-dark-muted); }

.is-dark .input,
.is-dark .textarea,
.is-dark .select {
	color: var(--color-on-dark);
	background: var(--color-dark-2);
	border-color: var(--a-white-10);
}

.is-dark .input::placeholder,
.is-dark .textarea::placeholder { color: var(--color-on-dark-faint); }

.check {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	text-align: left;
	font-size: var(--fs-body-sm);
	line-height: 1.5;
	color: var(--color-on-dark-mid);
}

.check input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-accent);
	flex: none;
}

.check a { text-decoration: underline; text-underline-offset: 2px; }

.form-error {
	font-size: var(--fs-body-sm);
	color: #ff8a80;
}

/* Honeypot */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* ---- css/consent.css ---- */
/* ==========================================================================
   Consent banner + settings dialog (markup rendered by Weblabs Core › consent).
   Look: Weblabs design system — dark glass card, mono labels, accent toggles.
   ========================================================================== */

.wl-consent {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: var(--z-consent);
	width: min(440px, calc(100vw - 32px));
	background: rgba(13, 13, 12, .94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: var(--color-on-dark);
	border: 1px solid var(--a-white-08);
	border-radius: 24px;
	padding: 24px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	transform: translateY(20px);
	opacity: 0;
	transition: opacity .5s var(--ease-primary), transform .6s var(--ease-primary);
}

.wl-consent.is-visible { opacity: 1; transform: none; }

.wl-consent__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-on-dark-muted);
	margin-bottom: 12px;
}

.wl-consent__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: var(--ls-title);
	line-height: 1.15;
	margin-bottom: 10px;
}

.wl-consent__text {
	font-size: var(--fs-body-sm);
	line-height: 1.55;
	color: var(--color-on-dark-4);
}

.wl-consent__text a { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 2px; }

.wl-consent__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 20px;
}

.wl-consent__actions .btn { padding: 13px 16px; font-size: 14px; }
.wl-consent__actions .btn-text { grid-column: 1 / -1; justify-self: center; color: var(--color-on-dark-mid); font-size: 13px; padding-top: 4px; }
.wl-consent__actions .btn-text:hover { color: var(--color-on-dark); }

/* Settings dialog */
.wl-consent-dialog {
	width: min(620px, calc(100vw - 32px));
	max-height: min(86vh, 820px);
	padding: 0;
	border: 1px solid var(--a-white-08);
	border-radius: 28px;
	background: var(--color-dark);
	color: var(--color-on-dark);
	box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .7);
}

.wl-consent-dialog::backdrop {
	background: rgba(13, 13, 12, .55);
	backdrop-filter: blur(4px);
}

.wl-consent-dialog__inner { padding: 32px; overflow: auto; max-height: inherit; }
.wl-consent-dialog__head { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 20px; }
.wl-consent-dialog__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--a-white-10); color: var(--color-on-dark); flex: none; }
.wl-consent-dialog__close:hover { background: var(--a-white-06); }

.wl-consent-cat {
	border: 1px solid var(--a-white-08);
	background: var(--a-white-03);
	border-radius: 18px;
	padding: 18px 20px;
	margin-top: 10px;
}

.wl-consent-cat__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.wl-consent-cat__name { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.wl-consent-cat__desc { font-size: 13.5px; line-height: 1.5; color: var(--color-on-dark-mid); margin-top: 6px; }

.wl-consent-cat details { margin-top: 10px; }
.wl-consent-cat summary { cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-on-dark-muted); }
.wl-consent-cat ul { margin-top: 10px; padding-left: 0; display: grid; gap: 8px; }
.wl-consent-cat li { font-size: 13px; color: var(--color-on-dark-4); list-style: none; }
.wl-consent-cat li strong { color: var(--color-on-dark); font-weight: 500; }

/* Toggle */
.wl-switch { position: relative; width: 46px; height: 26px; flex: none; }
.wl-switch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; z-index: 1; }
.wl-switch span { position: absolute; inset: 0; border-radius: 26px; background: var(--a-white-10); transition: background-color .3s var(--ease-standard); }
.wl-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-on-dark); transition: transform .45s var(--ease-primary); }
.wl-switch input:checked + span { background: var(--color-accent); }
.wl-switch input:checked + span::after { transform: translateX(20px); }
.wl-switch input:disabled + span { opacity: .6; }
.wl-switch input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.wl-consent-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* External media placeholder (YouTube/Vimeo/Maps before consent) */
.wl-embed-gate {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 280px;
	aspect-ratio: var(--ratio, 16 / 9);
	border-radius: var(--radius-2xl);
	background: var(--stripe-dark);
	background-color: var(--color-dark-4);
	color: var(--color-on-dark);
	text-align: center;
	padding: 28px;
	overflow: hidden;
}

.wl-embed-gate__inner { max-width: 420px; display: grid; gap: 14px; justify-items: center; }
.wl-embed-gate__text { font-size: 13.5px; color: var(--color-on-dark-mid); line-height: 1.5; }
.wl-embed-gate iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 560px) {
	.wl-consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 20px; }
	.wl-consent-dialog__inner { padding: 22px; }
}
/* ---- css/motion.css ---- */
/* ==========================================================================
   Motion foundation (CSS side).
   - Keyframes reproduced 1:1 from the design (wl-*).
   - Reveal initial states are applied ONLY when JS is running (.js-motion on
     <html>), so content is never hidden without JS or with reduced motion.
   ========================================================================== */

@keyframes wl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes wl-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes wl-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes wl-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -10px); } }
@keyframes wl-scan { 0% { top: 2%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: 86%; opacity: 0; } }
@keyframes wl-flow { to { stroke-dashoffset: -28; } }

/* Hero glitch-in (cyborg) */
@keyframes wl-gin {
	0% { opacity: 0; transform: translate(-14px, 0) skewX(8deg); clip-path: inset(0 0 100% 0); }
	6% { opacity: 1; clip-path: inset(0 0 62% 0); }
	10% { transform: translate(10px, 0) skewX(-6deg); clip-path: inset(30% 0 22% 0); }
	16% { transform: translate(-6px, 0); clip-path: inset(0 0 0 0); }
	22% { transform: translate(8px, 0) skewX(4deg); }
	28% { transform: translate(-3px, 0); }
	34% { transform: translate(4px, 0) skewX(-2deg); }
	42% { transform: translate(0, 0); }
	48% { transform: translate(-5px, 0); }
	52% { transform: translate(0, 0) skewX(0); }
	100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

@keyframes wl-gr {
	0%, 100% { opacity: 0; }
	4% { opacity: .85; transform: translate(-16px, 0); clip-path: inset(12% 0 64% 0); }
	12% { transform: translate(12px, 0); clip-path: inset(48% 0 30% 0); }
	20% { transform: translate(-8px, 0); clip-path: inset(70% 0 10% 0); }
	28% { transform: translate(9px, 0); clip-path: inset(24% 0 58% 0); }
	36% { transform: translate(-4px, 0); clip-path: inset(56% 0 26% 0); }
	46% { opacity: .6; transform: translate(3px, 0); clip-path: inset(6% 0 80% 0); }
	54% { opacity: 0; }
}

@keyframes wl-gc {
	0%, 100% { opacity: 0; }
	6% { opacity: .8; transform: translate(14px, 0); clip-path: inset(36% 0 40% 0); }
	14% { transform: translate(-12px, 0); clip-path: inset(8% 0 74% 0); }
	22% { transform: translate(7px, 0); clip-path: inset(62% 0 18% 0); }
	32% { transform: translate(-9px, 0); clip-path: inset(40% 0 44% 0); }
	42% { transform: translate(4px, 0); clip-path: inset(80% 0 4% 0); }
	50% { opacity: 0; }
}

/* Hero floating KPI cards loop */
@keyframes wl-pop {
	0% { opacity: 0; transform: translateY(16px) scale(.92); }
	6% { opacity: 1; transform: translateY(0) scale(1); }
	82% { opacity: 1; transform: translateY(0) scale(1); }
	90%, 100% { opacity: 0; transform: translateY(-10px) scale(.97); }
}

@keyframes wl-bar { 0%, 10% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }

/* ---------- Reveal system (data-motion="reveal") ---------- */
.js-motion [data-motion~="reveal"]:not(.is-in) {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
}

.js-motion [data-motion~="reveal"] {
	transition:
		opacity var(--dur-slow) var(--ease-primary) var(--reveal-delay, 0ms),
		transform var(--dur-slow) var(--ease-primary) var(--reveal-delay, 0ms);
}

/* Masked line reveal for display type (data-motion="lines") */
.line-mask {
	display: block;
	overflow: hidden;
	padding-bottom: .06em;
	margin-bottom: -.06em;
}

.line-mask__inner { display: block; will-change: transform; }

/* Media mask reveal */
.js-motion [data-motion~="mask"]:not(.is-in) { clip-path: inset(12% 6% 12% 6% round var(--radius-3xl)); }
.js-motion [data-motion~="mask"] { transition: clip-path 1.2s var(--ease-primary) var(--reveal-delay, 0ms); }
.js-motion [data-motion~="mask"].is-in { clip-path: inset(0 0 0 0 round var(--radius-3xl)); }

/* Page transitions (cross-document View Transitions, progressive) */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .45s;
	animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reduced motion: everything visible, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.js-motion [data-motion~="reveal"]:not(.is-in),
	.js-motion [data-motion~="mask"]:not(.is-in) {
		opacity: 1;
		transform: none;
		clip-path: none;
	}

	.is-floating { animation: none !important; }

	@view-transition { navigation: none; }
}
/* ---- css/utilities.css ---- */
/* Utilities — keep this list short. */
.u-center { text-align: center; }
.u-mx-auto { margin-inline: auto; }
.u-muted { color: var(--color-muted); }
.u-nowrap { white-space: nowrap; }
.u-relative { position: relative; }
.u-mt-xs { margin-top: var(--space-xs); }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mb-0 { margin-bottom: 0; }
.u-maxw-text { max-width: 460px; }

@media (max-width: 767px) {
	.u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
	.u-hide-desktop { display: none !important; }
}