/* ==========================================================================
   COBALT WILD — main stylesheet (v2)
   Racing-livery editorial: Klein cobalt · safety orange · bone paper · warm ink
   Flat color, hard edges, no gradients, no glows.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts (latin subsets). Archivo MUST stay variable with the
   wdth axis — the display face runs at font-stretch ~118% and a wdth-less
   file silently flattens every headline.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-var.woff2') format('woff2');
}
@font-face {
	font-family: "Archivo";
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-var-italic.woff2') format('woff2');
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

:root {
	/* Color system */
	--paper: #efebe1;          /* bone paper — light sections */
	--paper-2: #f7f4ec;        /* raised paper (inputs, cards) */
	--ink: #141310;            /* warm near-black */
	--ink-2: #1d1b17;          /* raised ink */
	--cobalt: #002fa7;         /* International Klein Blue — the "Cobalt" */
	--cobalt-2: #0037c8;       /* hover state */
	--orange: #ff4b12;         /* safety orange — adrenaline accent */
	--bone-muted: rgba(239, 235, 225, .62);
	--ink-muted: rgba(20, 19, 16, .64);
	--line-dark: rgba(239, 235, 225, .16);   /* rules on ink */
	--line-light: rgba(20, 19, 16, .18);     /* rules on paper */

	/* Type */
	--font-display: "Archivo", Impact, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, monospace;

	/* Rhythm */
	--section-pad: clamp(5rem, 10vw, 9rem);
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--radius: 2px;

	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

::selection { background: var(--cobalt); color: var(--paper); }

/* Film grain — analog texture over everything, very light */
body::after {
	content: ""; position: fixed; inset: 0; z-index: 9000;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 140px 140px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}
.skip-link:focus {
	clip-path: none; width: auto; height: auto;
	position: fixed; top: 12px; left: 12px; z-index: 999;
	background: var(--orange); color: var(--ink); padding: .6rem 1rem;
}

.cw-mono {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Display type — expanded, aggressive */
.cw-display {
	font-family: var(--font-display);
	font-weight: 900;
	font-stretch: 118%;
	line-height: .95;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

/* Highlight word — solid accent, italic slant for speed. No gradients. */
.cw-grad-text { color: var(--orange); font-style: italic; }

/* Focus */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Custom cursor
   -------------------------------------------------------------------------- */
.cw-cursor { display: none; }
@media (pointer: fine) {
	.cw-cursor { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
	.cw-cursor__dot, .cw-cursor__ring {
		position: absolute; top: 0; left: 0; border-radius: 50%;
		transform: translate(-50%, -50%);
		will-change: transform;
	}
	.cw-cursor__dot { width: 6px; height: 6px; background: var(--orange); }
	.cw-cursor__ring {
		width: 34px; height: 34px;
		border: 1.5px solid var(--orange);
		opacity: .55;
		transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s;
	}
	.cw-cursor.is-active .cw-cursor__ring { width: 56px; height: 56px; opacity: 1; }
	body.cw-has-cursor, body.cw-has-cursor a, body.cw-has-cursor button { cursor: none; }
}

/* --------------------------------------------------------------------------
   Intro — race start sequence (lights out)
   -------------------------------------------------------------------------- */
.cw-intro {
	position: fixed; inset: 0; z-index: 9998;
	background: var(--ink);
	overflow: clip;
	display: grid; place-items: center;
}
.cw-intro.is-off { display: none; }

.cw-intro__stage {
	display: grid; justify-items: center; gap: clamp(1.6rem, 4vh, 2.6rem);
	padding: 0 var(--gutter);
	transition: opacity .3s var(--ease-out), transform .45s var(--ease-out);
}
.cw-intro__label { color: var(--bone-muted); opacity: 0; transition: opacity .5s .1s; }
.cw-intro.s1 .cw-intro__label { opacity: 1; }

.cw-intro__logo { overflow: clip; }
.cw-intro__logo img {
	width: min(620px, 78vw); height: auto;
	clip-path: inset(0 100% 0 0);
	transform: translateX(-3%) skewX(-6deg);
	transition: clip-path .7s var(--ease-out), transform .7s var(--ease-out);
}
.cw-intro.s1 .cw-intro__logo img { clip-path: inset(0 0 0 0); transform: none; }

.cw-intro__lights { display: flex; gap: clamp(.7rem, 2vw, 1.1rem); }
.cw-intro__lights span {
	width: clamp(18px, 3.4vw, 26px); height: clamp(18px, 3.4vw, 26px);
	background: transparent;
	border: 2px solid var(--line-dark);
	transition: background .12s, border-color .12s;
}
.cw-intro.s2 .cw-intro__lights span.on { background: var(--orange); border-color: var(--orange); }
.cw-intro.s3 .cw-intro__lights span { background: transparent !important; border-color: var(--line-dark) !important; }

.cw-intro__hint { color: var(--bone-muted); opacity: 0; transition: opacity .4s .3s; }
.cw-intro.s2 .cw-intro__hint { opacity: .8; }

/* Exit: content snaps forward, then two skewed panels chase off-screen */
.cw-intro.s4 .cw-intro__stage { opacity: 0; transform: translateX(6vw) skewX(-6deg); }
.cw-intro__panel {
	position: absolute; inset: -12% -18%;
	transform: translateX(-115%) skewX(-8deg);
	pointer-events: none;
}
.cw-intro__panel--cobalt { background: var(--cobalt); z-index: 2; }
.cw-intro__panel--orange { background: var(--orange); z-index: 3; }
.cw-intro.s4 .cw-intro__panel--cobalt { transition: transform .55s cubic-bezier(.7, 0, .2, 1) .06s; transform: translateX(115%) skewX(-8deg); }
.cw-intro.s4 .cw-intro__panel--orange { transition: transform .55s cubic-bezier(.7, 0, .2, 1); transform: translateX(115%) skewX(-8deg); }
.cw-intro.s4 { background: transparent; transition: background .01s .3s; }

/* --------------------------------------------------------------------------
   Scroll progress — telemetry bar
   -------------------------------------------------------------------------- */
.cw-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 950;
	pointer-events: none;
}
.cw-progress span {
	display: block; height: 100%;
	background: var(--orange);
	transform: scaleX(0); transform-origin: left;
}

/* --------------------------------------------------------------------------
   Telemetry HUD — live speed readout driven by scroll velocity (desktop only)
   -------------------------------------------------------------------------- */
.cw-telemetry {
	position: fixed; left: var(--gutter); bottom: 1.4rem; z-index: 940;
	display: none;
	align-items: baseline; gap: .55rem;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
	color: var(--bone-muted); text-transform: uppercase;
	pointer-events: none;
	mix-blend-mode: difference;
	opacity: 0;
	transition: opacity .45s var(--ease-out);
}
@media (min-width: 961px) { body.cw-telemetry-on .cw-telemetry { display: flex; } }
body.cw-telemetry-live .cw-telemetry { opacity: 1; }
.cw-telemetry__bars { display: flex; gap: 3px; align-items: flex-end; }
.cw-telemetry__bars i {
	width: 5px; height: 10px;
	background: var(--line-dark);
}
.cw-telemetry__bars i.on { background: var(--orange); }
.cw-telemetry__bars i:nth-child(5).on, .cw-telemetry__bars i:nth-child(6).on { background: var(--paper); }
.cw-telemetry__val { color: var(--paper); min-width: 3ch; text-align: right; font-size: .82rem; }
.cw-telemetry__gear { color: var(--orange); border: 1px solid var(--line-dark); padding: .1rem .45rem; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.cw-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 900;
	transition: transform .4s var(--ease-out), background .3s, border-color .3s;
	border-bottom: 1px solid transparent;
}
.cw-header__inner {
	display: flex; align-items: center; gap: 2rem;
	max-width: 1440px; margin: 0 auto;
	padding: 1rem var(--gutter);
}
.cw-header.is-scrolled {
	background: var(--ink);
	border-bottom-color: var(--line-dark);
}
/* Inner pages sit on paper — the bone logo/nav need the ink bar from the start. */
body:not(.home) .cw-header {
	background: var(--ink);
	border-bottom-color: var(--line-dark);
}
.cw-header.is-hidden { transform: translateY(-100%); }
.cw-header__logo { width: 208px; height: auto; }
@media (max-width: 480px) { .cw-header__logo { width: 172px; } }
.cw-header__brand { flex-shrink: 0; }

.cw-nav { margin-left: auto; }
.cw-nav__list { display: flex; gap: 2rem; }
.cw-nav__list a {
	font-family: var(--font-mono);
	font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--bone-muted);
	position: relative; padding: .4rem 0;
	transition: color .2s;
}
.cw-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--orange);
	transform: scaleX(0); transform-origin: right;
	transition: transform .3s var(--ease-out);
}
.cw-nav__list a:hover { color: var(--paper); }
.cw-nav__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.cw-nav__list a.is-current { color: var(--paper); }
.cw-nav__list a.is-current::after { transform: scaleX(1); transform-origin: left; }

/* Buttons — flat, bordered, hard offset shadow. Print poster, not SaaS. */
.cw-btn {
	display: inline-flex; align-items: center; gap: .65rem;
	font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	padding: .9rem 1.5rem;
	border-radius: var(--radius);
	position: relative;
	transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s, color .2s, border-color .2s;
	will-change: transform;
}
.cw-btn--primary {
	background: var(--orange);
	color: var(--ink);
	border: 2px solid var(--ink);
}
.cw-btn--primary:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--cobalt);
}
.cw-btn--ghost {
	border: 2px solid var(--line-dark);
	color: var(--paper);
}
.cw-btn--ghost:hover { border-color: var(--paper); }
.cw-btn--inverse {
	background: var(--ink);
	color: var(--paper);
	border: 2px solid var(--ink);
}
.cw-btn--inverse:hover {
	transform: translate(-2px, -2px);
	box-shadow: 4px 4px 0 var(--paper);
}
.cw-btn__arrow { transition: transform .25s var(--ease-out); }
.cw-btn:hover .cw-btn__arrow { transform: translateX(5px); }

.cw-header__cta { flex-shrink: 0; }

/* Burger / mobile menu */
.cw-burger { display: none; flex-direction: column; gap: 5px; padding: .6rem; margin-left: auto; }
.cw-burger span { width: 24px; height: 2px; background: var(--paper); transition: transform .3s var(--ease-out), opacity .3s; }
.cw-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cw-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cw-mobile-menu {
	position: fixed; inset: 0; z-index: 890;
	background: var(--cobalt);
	display: grid; place-content: center; gap: 2.5rem; text-align: center;
	opacity: 0; visibility: hidden;
	transition: opacity .3s var(--ease-out), visibility .3s;
}
.cw-mobile-menu.is-open { opacity: 1; visibility: visible; }
.cw-mobile-menu__list { display: grid; gap: 1.4rem; }
.cw-mobile-menu__list a {
	font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
	font-size: clamp(2rem, 8vw, 3rem); text-transform: uppercase; line-height: 1;
	color: var(--paper);
	transition: color .2s;
}
.cw-mobile-menu__list a:hover { color: var(--orange); }

@media (max-width: 960px) {
	.cw-nav, .cw-header__cta { display: none; }
	.cw-burger { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero — photography on ink
   -------------------------------------------------------------------------- */
.cw-hero {
	position: relative;
	min-height: 100svh;
	display: flex; flex-direction: column; justify-content: flex-end;
	overflow: clip;
	isolation: isolate;
	background: var(--ink);
}
.cw-hero__bgs { position: absolute; inset: 0; z-index: -2; }
.cw-hero__bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .8s var(--ease-out), transform 6s linear;
}
.cw-hero__bg.is-active { opacity: 1; transform: scale(1); }
.cw-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(20,19,16,.72) 0%, rgba(20,19,16,.34) 48%, rgba(20,19,16,.05) 100%),
		linear-gradient(180deg, rgba(20,19,16,.42) 0%, rgba(20,19,16,.05) 38%, rgba(20,19,16,.72) 80%, var(--ink) 100%);
}

/* HUD labels */
.cw-hero__hud {
	position: absolute; inset: 0; pointer-events: none; z-index: 0;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
	color: var(--bone-muted); text-transform: uppercase;
}
.cw-hero__hud span { position: absolute; }
.cw-hud-tr { top: 96px; right: var(--gutter); text-align: right; }
.cw-hud-bl { top: 96px; left: var(--gutter); color: var(--paper); }
@media (max-width: 960px) { .cw-hud-bl { display: none; } }
@media (max-width: 640px) { .cw-hud-tr { display: none; } }
.cw-hud-line {
	position: absolute; top: 88px; left: var(--gutter); right: var(--gutter);
	border-top: 1px solid var(--line-dark);
}

.cw-hero__content {
	position: relative; z-index: 1;
	max-width: 1440px; width: 100%;
	margin: 0 auto;
	padding: 8rem var(--gutter) clamp(1.6rem, 4vh, 3rem);
}
.cw-hero__kicker { margin-bottom: 1rem; display: flex; align-items: center; gap: .9rem; color: var(--paper); }
.cw-hero__kicker::before { content: ""; width: 42px; height: 2px; background: var(--orange); }

.cw-hero__title {
	font-size: clamp(2.4rem, 6.6vw, 6.2rem);
	max-width: 14ch;
}
.cw-hero__title .cw-line { display: block; overflow: hidden; }
.cw-hero__title .cw-line > span { display: inline-block; transform: translateY(110%); }
.cw-hero.is-in .cw-line > span { animation: cw-rise .9s var(--ease-out) forwards; }
.cw-hero.is-in .cw-line:nth-child(2) > span { animation-delay: .08s; }
.cw-hero.is-in .cw-line:nth-child(3) > span { animation-delay: .16s; }
@keyframes cw-rise { to { transform: translateY(0); } }

.cw-hero__sub {
	margin-top: 1.3rem;
	max-width: 46ch;
	color: var(--bone-muted);
	font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.cw-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

/* Vertical switcher */
.cw-hero__switch {
	margin-top: clamp(1.8rem, 4.5vh, 3.2rem);
	border-top: 1px solid var(--line-dark);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.cw-switch {
	text-align: left;
	padding: 1.15rem 1.2rem 1.3rem 0;
	border-right: 1px solid var(--line-dark);
	position: relative;
	transition: background .3s;
}
.cw-switch:last-child { border-right: 0; }
.cw-switch::before {
	content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 3px;
	background: var(--orange);
	transform: scaleX(0); transform-origin: left;
	transition: transform .45s var(--ease-out);
}
.cw-switch.is-active::before { transform: scaleX(1); }
.cw-switch__num { font-family: var(--font-mono); font-size: .7rem; color: var(--bone-muted); letter-spacing: .16em; }
.cw-switch__name {
	display: block;
	font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
	text-transform: uppercase; font-size: clamp(.95rem, 1.6vw, 1.35rem);
	margin-top: .3rem; letter-spacing: .01em;
	color: var(--bone-muted);
	transition: color .3s;
}
.cw-switch:hover .cw-switch__name, .cw-switch.is-active .cw-switch__name { color: var(--paper); }
.cw-switch__bar {
	display: block; height: 3px; margin-top: .8rem; width: 100%;
	background: var(--line-dark); overflow: hidden;
}
.cw-switch__bar i {
	display: block; height: 100%; width: 100%;
	background: var(--orange);
	transform: scaleX(0); transform-origin: left;
}
.cw-switch.is-active .cw-switch__bar i { animation: cw-progress 6s linear forwards; }
@keyframes cw-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 760px) {
	.cw-hero__switch { grid-template-columns: repeat(2, 1fr); }
	.cw-switch { padding-right: 1rem; }
	.cw-switch:nth-child(2) { border-right: 0; }
	.cw-switch:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
}

@media (max-height: 860px) {
	.cw-hero__title { font-size: clamp(2.2rem, 5.6vw, 4.8rem); }
	.cw-hero__content { padding-top: 6.5rem; }
	.cw-hero__sub { margin-top: 1rem; }
	.cw-switch__bar { margin-top: .5rem; }
}

/* Scroll cue */
.cw-scrollcue {
	position: absolute; right: var(--gutter); bottom: 2rem; z-index: 2;
	writing-mode: vertical-rl;
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .3em;
	color: var(--bone-muted); text-transform: uppercase;
	display: flex; align-items: center; gap: .8rem;
}
.cw-scrollcue::after {
	content: ""; width: 2px; height: 54px;
	background: var(--orange);
	animation: cw-drip 1.8s ease-in-out infinite;
}
@keyframes cw-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 960px) { .cw-scrollcue { display: none; } }

/* --------------------------------------------------------------------------
   Marquee ticker — flat cobalt band, slight racing slant
   -------------------------------------------------------------------------- */
.cw-ticker {
	position: relative;
	padding: 1.05rem 0;
	background: var(--cobalt);
	color: var(--paper);
	overflow: clip;
	transform: rotate(-1.2deg) scale(1.03);
	margin: .6rem 0;
}
.cw-ticker__track {
	display: flex; gap: 3rem; width: max-content;
	animation: cw-marquee 28s linear infinite;
}
.cw-ticker:hover .cw-ticker__track { animation-play-state: paused; }
.cw-ticker__item {
	display: flex; align-items: center; gap: 3rem;
	font-family: var(--font-display); font-weight: 800; font-stretch: 115%;
	font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
	white-space: nowrap;
}
.cw-ticker__item em { font-style: italic; color: var(--orange); }
.cw-ticker__dot { width: 8px; height: 8px; background: var(--orange); flex-shrink: 0; }
@keyframes cw-marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Sections — shared
   -------------------------------------------------------------------------- */
.cw-section { padding: var(--section-pad) 0; position: relative; }
.cw-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

.cw-section__head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.cw-kicker { display: flex; align-items: center; gap: .9rem; }
.cw-kicker::before { content: ""; width: 42px; height: 2px; background: var(--orange); }
.cw-h2 { font-size: clamp(2rem, 5vw, 3.9rem); max-width: 18ch; }

/* Reveal-on-scroll */
.cw-reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.cw-reveal.is-in { opacity: 1; transform: none; }
.cw-reveal[data-delay="1"] { transition-delay: .1s; }
.cw-reveal[data-delay="2"] { transition-delay: .2s; }
.cw-reveal[data-delay="3"] { transition-delay: .3s; }

/* --------------------------------------------------------------------------
   Manifesto + stats — PAPER
   -------------------------------------------------------------------------- */
.cw-manifesto {
	background: var(--paper);
	color: var(--ink);
}
.cw-manifesto .cw-kicker { color: var(--ink-muted); }
.cw-manifesto__text {
	font-family: var(--font-display); font-weight: 700; font-stretch: 108%;
	font-size: clamp(1.5rem, 3.4vw, 2.7rem);
	line-height: 1.25; text-transform: none; letter-spacing: 0;
	max-width: 30ch;
}
.cw-manifesto__text .cw-word { opacity: .16; transition: opacity .5s var(--ease-out); }
.cw-manifesto__text .cw-word.is-lit { opacity: 1; }
.cw-manifesto__text .cw-hot { color: var(--cobalt); font-style: italic; }

.cw-stats {
	margin-top: clamp(3rem, 7vw, 5rem);
	display: grid; grid-template-columns: repeat(4, 1fr);
	border-top: 2px solid var(--ink);
}
.cw-stat { padding: 1.8rem 1.6rem 0 0; border-right: 1px solid var(--line-light); }
.cw-stat:last-child { border-right: 0; }
.cw-stat__num {
	font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
	font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1;
	color: var(--cobalt);
}
.cw-stat__label { margin-top: .6rem; color: var(--ink-muted); }
@media (max-width: 860px) {
	.cw-stats { grid-template-columns: repeat(2, 1fr); }
	.cw-stat:nth-child(2n) { border-right: 0; }
	.cw-stat { padding-left: 0; margin-bottom: 1.4rem; }
}

/* --------------------------------------------------------------------------
   Verticals — photo panels on paper
   -------------------------------------------------------------------------- */
.cw-verticals {
	background: var(--paper);
	color: var(--ink);
	border-top: 1px solid var(--line-light);
}
.cw-verticals .cw-kicker { color: var(--ink-muted); }
.cw-verticals .cw-grad-text { color: var(--cobalt); }
.cw-vertical {
	position: relative;
	overflow: clip;
	min-height: clamp(420px, 58vh, 600px);
	display: flex; align-items: flex-end;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	isolation: isolate;
	color: var(--paper);
	border: 2px solid var(--ink);
}
.cw-vertical:last-child { margin-bottom: 0; }
.cw-vertical__bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
	transform: scale(1.04);
	transition: transform 1.1s var(--ease-out);
	will-change: transform;
}
.cw-vertical:hover .cw-vertical__bg { transform: scale(1.1); }
/* Cobalt wipe: covers the panel, collapses to the right when revealed */
.cw-vertical::after {
	content: ""; position: absolute; inset: 0; z-index: 2;
	background: var(--cobalt);
	transform: scaleX(1); transform-origin: right;
	transition: transform .85s cubic-bezier(.7, 0, .2, 1) .15s;
	pointer-events: none;
}
.cw-vertical.is-in::after { transform: scaleX(0); }
.cw-vertical::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(90deg, rgba(20,19,16,.86) 0%, rgba(20,19,16,.45) 52%, rgba(20,19,16,.06) 100%);
}
.cw-vertical__inner {
	display: grid; gap: 1rem;
	padding: clamp(1.6rem, 4vw, 3rem);
	max-width: 640px;
}
.cw-vertical__num {
	font-family: var(--font-mono); font-size: .8rem; letter-spacing: .2em;
	color: var(--orange);
}
.cw-vertical__title { font-size: clamp(1.9rem, 4.2vw, 3.4rem); }
.cw-vertical__copy { color: var(--bone-muted); max-width: 52ch; }
.cw-vertical__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.cw-tag {
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
	padding: .42rem .8rem;
	border: 1px solid var(--line-dark);
	color: var(--paper);
	background: rgba(20, 19, 16, .55);
	transition: border-color .25s, color .25s;
}
.cw-vertical:hover .cw-tag { border-color: var(--orange); }

/* --------------------------------------------------------------------------
   Services — paper, bordered cards, hard shadows
   -------------------------------------------------------------------------- */
.cw-services {
	background: var(--paper);
	color: var(--ink);
	border-top: 1px solid var(--line-light);
}
.cw-services .cw-kicker { color: var(--ink-muted); }
.cw-services .cw-grad-text { color: var(--cobalt); }
.cw-services__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
.cw-service {
	position: relative;
	border: 2px solid var(--ink);
	background: var(--paper-2);
	padding: 2rem 1.8rem 1.9rem;
	transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
	will-change: transform;
}
.cw-service:hover {
	transform: translate(-4px, -4px);
	box-shadow: 6px 6px 0 var(--cobalt);
}
.cw-service__icon {
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: var(--cobalt);
	margin-bottom: 1.3rem;
}
.cw-service__icon svg { width: 22px; height: 22px; stroke: var(--paper); }
.cw-service__title {
	font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
	font-size: 1.18rem; text-transform: uppercase; letter-spacing: .02em;
}
.cw-service__copy { color: var(--ink-muted); font-size: .96rem; margin-top: .7rem; }
.cw-service__num {
	position: absolute; top: 1.4rem; right: 1.5rem;
	font-family: var(--font-mono); font-size: .72rem; color: var(--orange); letter-spacing: .14em;
}
@media (max-width: 1024px) { .cw-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cw-services__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Work — featured events on ink
   -------------------------------------------------------------------------- */
.cw-work { background: var(--ink); }
.cw-work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cw-work__grid { perspective: 1200px; }
.cw-case {
	position: relative; overflow: clip;
	aspect-ratio: 4 / 5;
	display: flex; align-items: flex-end;
	isolation: isolate;
	border: 1px solid var(--line-dark);
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
	transform-style: preserve-3d;
}
.cw-case.is-tilting { transition: box-shadow .3s var(--ease-out), border-color .3s; }
.cw-case:hover {
	transform: translate(-4px, -4px);
	box-shadow: 6px 6px 0 var(--orange);
	border-color: var(--paper);
}
.cw-case__bg {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
	transition: transform .9s var(--ease-out);
}
.cw-case:hover .cw-case__bg { transform: scale(1.07); }
.cw-case::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, transparent 32%, rgba(20,19,16,.92) 88%);
}
.cw-case__inner { padding: 1.6rem; display: grid; gap: .4rem; }
.cw-case__meta { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.cw-case__title {
	font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
	font-size: 1.35rem; text-transform: uppercase; line-height: 1.1;
}
.cw-case__result { color: var(--bone-muted); font-size: .92rem; }
@media (max-width: 900px) { .cw-work__grid { grid-template-columns: 1fr; } .cw-case { aspect-ratio: 16 / 10; } }

/* --------------------------------------------------------------------------
   Process — flat cobalt block
   -------------------------------------------------------------------------- */
.cw-process {
	background: var(--cobalt);
	color: var(--paper);
}
.cw-process .cw-kicker::before { background: var(--orange); }
.cw-process .cw-grad-text { color: var(--orange); }
.cw-process__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.cw-step {
	position: relative;
	border-top: 2px solid rgba(239, 235, 225, .35);
	padding-top: 1.6rem;
}
.cw-step::before {
	content: ""; position: absolute; top: -2px; left: 0;
	width: 0%; height: 2px; background: var(--orange);
	transition: width 1s var(--ease-out);
}
.cw-step.is-in::before { width: 100%; }
.cw-step__num { font-family: var(--font-mono); font-size: .75rem; color: var(--orange); letter-spacing: .18em; }
.cw-step__title {
	font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
	font-size: 1.25rem; text-transform: uppercase; margin-top: .5rem;
}
.cw-step__copy { color: rgba(239, 235, 225, .78); font-size: .95rem; margin-top: .6rem; }
@media (max-width: 900px) { .cw-process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cw-process__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Briefing / FAQ — paper, flat bordered accordion
   -------------------------------------------------------------------------- */
.cw-faq {
	background: var(--paper);
	color: var(--ink);
	border-top: 1px solid var(--line-light);
}
.cw-faq .cw-kicker { color: var(--ink-muted); }
.cw-faq .cw-grad-text { color: var(--cobalt); }
.cw-faq__list { display: grid; border-top: 2px solid var(--ink); max-width: 900px; }
.cw-faq__item { border-bottom: 1px solid var(--line-light); }
.cw-faq__item summary {
	list-style: none;
	display: flex; align-items: baseline; gap: 1.4rem;
	padding: 1.35rem .2rem;
	cursor: pointer;
	transition: background .2s;
}
.cw-faq__item summary::-webkit-details-marker { display: none; }
.cw-faq__item summary:hover { background: var(--paper-2); }
.cw-faq__num { color: var(--orange); flex-shrink: 0; }
.cw-faq__q {
	font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
	font-size: clamp(1.05rem, 2vw, 1.35rem); text-transform: uppercase; line-height: 1.2;
	flex: 1;
}
.cw-faq__toggle {
	position: relative; width: 16px; height: 16px; flex-shrink: 0; align-self: center;
}
.cw-faq__toggle::before, .cw-faq__toggle::after {
	content: ""; position: absolute; background: var(--cobalt);
	transition: transform .3s var(--ease-out);
}
.cw-faq__toggle::before { left: 0; right: 0; top: 7px; height: 2px; }
.cw-faq__toggle::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.cw-faq__item[open] .cw-faq__toggle::after { transform: scaleY(0); }
.cw-faq__a { padding: 0 .2rem 1.6rem calc(1.4rem + 4ch); max-width: 72ch; }
.cw-faq__a p { color: var(--ink-muted); }
@media (max-width: 640px) {
	.cw-faq__item summary { gap: .9rem; }
	.cw-faq__a { padding-left: .2rem; }
}

/* --------------------------------------------------------------------------
   CTA — flat safety-orange poster with outline marquee
   -------------------------------------------------------------------------- */
.cw-cta {
	background: var(--orange);
	color: var(--ink);
	position: relative;
	overflow: clip;
}
.cw-cta__glow { display: none; }
.cw-cta__marquee {
	position: absolute; top: 50%; left: 0; right: 0;
	transform: translateY(-50%) rotate(-3deg);
	pointer-events: none;
	opacity: .16;
}
.cw-cta__marquee-track {
	display: flex; width: max-content;
	animation: cw-marquee 24s linear infinite;
	font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
	font-size: clamp(5rem, 14vw, 11rem); line-height: 1;
	text-transform: uppercase; white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px var(--ink);
}
.cw-cta__inner {
	position: relative; z-index: 1;
	text-align: center;
	display: grid; justify-items: center; gap: 1.8rem;
	padding: clamp(5rem, 12vw, 8rem) var(--gutter);
}
/* Start-lights countdown — re-uses the intro's visual language */
.cw-cta__lights { display: flex; gap: .7rem; }
.cw-cta__lights span {
	width: 16px; height: 16px;
	border: 2px solid rgba(20, 19, 16, .35);
	background: transparent;
	transition: background .1s, border-color .1s;
}
.cw-cta__lights span.on { background: var(--ink); border-color: var(--ink); }
.cw-cta.is-go .cw-cta__lights span { background: transparent; border-color: rgba(20, 19, 16, .35); }
.cw-cta.is-go .cw-cta__title { animation: cw-go-pop .5s var(--ease-out); }
.cw-cta.is-go .cw-cta__marquee { opacity: .3; transition: opacity .4s; }
@keyframes cw-go-pop {
	0% { transform: scale(.94); }
	55% { transform: scale(1.03); }
	100% { transform: scale(1); }
}
.cw-cta .cw-kicker { color: var(--ink); }
.cw-cta .cw-kicker::before { background: var(--ink); }
.cw-cta__title { font-size: clamp(2.6rem, 8vw, 6.4rem); }
.cw-cta .cw-grad-text { color: var(--cobalt); }

/* --------------------------------------------------------------------------
   Contact — paper
   -------------------------------------------------------------------------- */
.cw-contact {
	background: var(--paper);
	color: var(--ink);
}
.cw-contact .cw-kicker { color: var(--ink-muted); }
.cw-contact .cw-grad-text { color: var(--cobalt); }
.cw-contact__grid {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 6vw, 5rem);
}
.cw-contact__intro { color: var(--ink-muted); max-width: 44ch; margin-top: 1.2rem; }
.cw-contact__list { margin-top: 2rem; display: grid; gap: .9rem; }
.cw-contact__list a { color: var(--ink); border-bottom: 2px solid var(--cobalt); transition: color .2s, border-color .2s; }
.cw-contact__list a:hover { color: var(--cobalt); }
.cw-contact__list .cw-mono { color: var(--ink-muted); }

.cw-form { display: grid; gap: 1.2rem; }
.cw-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cw-field { display: grid; gap: .45rem; }
.cw-field label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.cw-field input, .cw-field textarea, .cw-field select {
	font: inherit; color: var(--ink);
	background: var(--paper-2);
	border: 2px solid var(--ink);
	border-radius: var(--radius);
	padding: .85rem 1.05rem;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}
.cw-field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px; background-repeat: no-repeat;
}
.cw-field input:focus, .cw-field textarea:focus, .cw-field select:focus {
	outline: none; border-color: var(--cobalt);
	box-shadow: 3px 3px 0 var(--cobalt);
}
.cw-field textarea { min-height: 150px; resize: vertical; }
.cw-form__hp { position: absolute !important; left: -9999px; }
.cw-form__note { font-size: .85rem; color: var(--ink-muted); }
.cw-form__alert {
	padding: 1rem 1.2rem; font-size: .95rem; margin-bottom: 1.2rem;
	border: 2px solid var(--cobalt); background: rgba(0, 47, 167, .07); color: var(--ink);
}
.cw-form__alert--error { border-color: var(--orange); background: rgba(255, 75, 18, .08); }
@media (max-width: 900px) {
	.cw-contact__grid { grid-template-columns: 1fr; }
	.cw-form__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Footer — ink
   -------------------------------------------------------------------------- */
.cw-footer { position: relative; background: var(--ink); border-top: 1px solid var(--line-dark); overflow: clip; }
.cw-footer__glow { display: none; }
.cw-footer__inner {
	position: relative;
	max-width: 1440px; margin: 0 auto;
	padding: clamp(3rem, 7vw, 5rem) var(--gutter) 2.5rem;
	display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
}
.cw-footer__brand img { width: 236px; }
.cw-footer__tag { color: var(--bone-muted); margin-top: 1.2rem; max-width: 34ch; font-size: .95rem; }
.cw-footer__head {
	font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em;
	text-transform: uppercase; color: var(--bone-muted); margin: 0 0 1.1rem;
}
.cw-footer__inner ul { display: grid; gap: .7rem; }
.cw-footer__inner a { color: var(--paper); transition: color .2s; }
.cw-footer__inner a:hover { color: var(--orange); }
.cw-footer__verticals li { color: var(--bone-muted); }
.cw-footer__bottom {
	position: relative;
	border-top: 1px solid var(--line-dark);
	max-width: 1440px; margin: 0 auto;
	padding: 1.4rem var(--gutter);
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	color: var(--bone-muted);
}
.cw-footer__flag { color: var(--orange); }
@media (max-width: 900px) { .cw-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cw-footer__inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Inner pages — paper
   -------------------------------------------------------------------------- */
.cw-page-hero {
	padding: calc(var(--section-pad) + 4rem) 0 var(--section-pad);
	background: var(--paper);
	color: var(--ink);
	border-bottom: 1px solid var(--line-light);
}
.cw-page-hero .cw-kicker { color: var(--ink-muted); }
.cw-page-hero__title { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.cw-main > .cw-section:not([class*="cw-manifesto"]):not([class*="cw-verticals"]):not([class*="cw-services"]):not([class*="cw-work"]):not([class*="cw-process"]):not([class*="cw-contact"]) {
	background: var(--paper); color: var(--ink);
}
.cw-prose { max-width: 68ch; }
.cw-prose p { margin: 0 0 1.2rem; color: var(--ink-muted); }
.cw-prose h2, .cw-prose h3 { font-family: var(--font-display); font-stretch: 112%; text-transform: uppercase; margin: 2.2rem 0 .9rem; }
.cw-prose a { color: var(--cobalt); border-bottom: 1px solid var(--cobalt); }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.cw-reveal, .cw-hero__title .cw-line > span { opacity: 1 !important; transform: none !important; }
	.cw-cursor { display: none !important; }
	body.cw-has-cursor, body.cw-has-cursor a, body.cw-has-cursor button { cursor: auto; }
	.cw-ticker { transform: none; }
	.cw-ticker__track, .cw-cta__marquee-track { animation: none; }
	.cw-manifesto__text .cw-word { opacity: 1; }
	.cw-intro { display: none !important; }
	.cw-vertical::after { display: none; }
	.cw-telemetry { display: none !important; }
	.cw-cta__lights span { background: var(--ink); border-color: var(--ink); }
}