/* ==========================================================================
   Ctrl Z — Design tokens + reusable component classes
   --------------------------------------------------------------------------
   Every value is read through var(--cz-*, fallback). Change a token here and the whole page follows;
   the fallbacks keep the site correct if a token is ever removed.

   Written with logical properties (inline-start/end) so the same CSS serves
   the Arabic (RTL) build with no overrides.
   ========================================================================== */

:root {
	/* --- Color ------------------------------------------------------------ */
	--cz-black: #080808;          /* page ground                        */
	--cz-ink: #101010;            /* text on light sections             */
	--cz-surface: #111111;        /* dark supporting surface            */
	--cz-surface-2: #171717;      /* team section surface               */
	--cz-red: #ff2929;            /* brand red — accents + CTAs         */
	--cz-white: #f2efe7;          /* off-white, never pure #fff         */
	--cz-grey: #98958d;           /* muted warm grey, secondary text    */
	--cz-grey-dim: #77736d;
	--cz-grey-light: #6e6b65;     /* secondary text on light sections   */
	--cz-line: rgba(242, 239, 231, 0.16);   /* dividers on dark         */
	--cz-line-dark: rgba(0, 0, 0, 0.15);    /* dividers on light        */
	--cz-line-dark-strong: rgba(0, 0, 0, 0.3);

	/* --- Typography ------------------------------------------------------- */
	/* The approved prototype sets display type in the same neutral face at weight
	   900 — matched here on purpose. "Arial Black" is deliberately NOT in the
	   stack: it renders wider and breaks the approved line breaks. When a
	   licensed condensed face is supplied, self-host it and swap this one token. */
	--cz-font-display: Arial, Helvetica, sans-serif;
	--cz-font-body: Arial, Helvetica, sans-serif;
	--cz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--cz-h1: clamp(66px, 9.7vw, 150px);
	--cz-h2: clamp(54px, 8vw, 120px);
	--cz-h2-lg: clamp(60px, 8.5vw, 130px);
	--cz-h3: clamp(26px, 3.5vw, 50px);
	--cz-display-final: clamp(92px, 16vw, 245px);
	--cz-metric: clamp(52px, 7vw, 108px);
	--cz-quote: clamp(34px, 5.3vw, 76px);
	--cz-label: 11px;
	--cz-tight: -0.075em;
	--cz-tighter: -0.085em;

	/* --- Space ------------------------------------------------------------ */
	--cz-pad: 3.4vw;              /* horizontal page gutter             */
	--cz-section-y: 10vw;         /* vertical section rhythm            */
	--cz-nav-h: 88px;

	/* --- Motion ----------------------------------------------------------- */
	--cz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--cz-reveal-duration: 0.75s;
	--cz-undo-delay: 1800ms;      /* hero: question → answer            */
}

/* ==========================================================================
   Base reset
   --------------------------------------------------------------------------
   WordPress ships no reset for a classic theme, and the approved prototype
   relied on these five rules — without them the page grows by the default body
   margin and images pick up inline-baseline gaps, which also causes horizontal
   overflow at 390px. Keep them.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }

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

button { font: inherit; }

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

/* ==========================================================================
   Base
   ========================================================================== */

body {
	background: var(--cz-black, #080808);
	color: var(--cz-white, #f2efe7);
	font-family: var(--cz-font-body, Arial, Helvetica, sans-serif);
	overflow-x: hidden;
}

::selection {
	background: var(--cz-red, #ff2929);
	color: var(--cz-black, #080808);
}

/* Anchor scrolling — the nav is fixed, so offset the landing position. */
html {
	scroll-behavior: smooth;
	scroll-padding-block-start: var(--cz-nav-h, 88px);
}

.cz-mono {
	font-family: var(--cz-font-mono);
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Button ---------------------------------------------------------------
   Applied to the theme's buttons and CTA links. Modifiers, not new classes, so the
   red / ghost / dark variants stay one component.                          */
.cz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 16px 20px;
	border: 1px solid var(--cz-red, #ff2929);
	border-radius: 0;
	background: var(--cz-red, #ff2929);
	color: var(--cz-black, #080808);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.cz-btn:hover,
.cz-btn:focus-visible {
	background: var(--cz-white, #f2efe7);
	border-color: var(--cz-white, #f2efe7);
	color: var(--cz-black, #080808);
}

.cz-btn--ghost {
	background: transparent;
	border-color: var(--cz-line, rgba(242, 239, 231, 0.16));
	color: var(--cz-white, #f2efe7);
}

.cz-btn--ghost:hover,
.cz-btn--ghost:focus-visible {
	background: transparent;
	border-color: var(--cz-white, #f2efe7);
	color: var(--cz-white, #f2efe7);
}

/* For use on the red (studio / qualify) sections. */
.cz-btn--dark {
	background: #0a0a0a;
	border-color: #0a0a0a;
	color: var(--cz-white, #f2efe7);
}

.cz-btn--dark:hover,
.cz-btn--dark:focus-visible {
	background: var(--cz-black, #080808);
	border-color: var(--cz-black, #080808);
	color: var(--cz-white, #f2efe7);
}

/* --- Section label (01 / PROOF) ------------------------------------------ */
.cz-section-id {
	display: block;
	margin-block-end: 6.5vw;
	color: var(--cz-grey, #98958d);
	font: 700 11px/1 var(--cz-font-mono);
	letter-spacing: 0.12em;
}

.cz-section-id--light { color: var(--cz-grey-dim, #77736d); }   /* on off-white */
.cz-section-id--red { color: #350303; }                          /* on red      */

/* --- Eyebrow / kicker ----------------------------------------------------- */
.cz-eyebrow {
	font: 800 11px/1.2 var(--cz-font-mono);
	letter-spacing: 0.13em;
	color: var(--cz-red, #ff2929);
}

.cz-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 26px;
	color: var(--cz-grey, #98958d);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
}

.cz-kicker::before {
	content: "";
	inline-size: 30px;
	block-size: 2px;
	background: var(--cz-red, #ff2929);
}

/* --- Keyboard hint -------------------------------------------------------- */
.cz-keyhint {
	margin-block-start: 34px;
	color: #706e69;
	font: 700 10px/1 var(--cz-font-mono);
	letter-spacing: 0.08em;
}

.cz-key {
	display: inline-block;
	margin-inline-end: 4px;
	padding: 7px 9px;
	border: 1px solid #44413d;
	border-block-end-width: 3px;
	border-radius: 4px;
	color: #a9a59c;
}

/* --- Dividers ------------------------------------------------------------- */
.cz-rule { border-block-start: 1px solid var(--cz-line, rgba(242, 239, 231, 0.16)); }
.cz-rule--dark { border-block-start: 1px solid var(--cz-line-dark, rgba(0, 0, 0, 0.15)); }

/* --- Brand mark (the Z, drawn in CSS — no image request) ------------------ */
.cz-mark {
	inline-size: 29px;
	block-size: 29px;
	border: 7px solid var(--cz-red, #ff2929);
	clip-path: polygon(0 0, 100% 0, 100% 26%, 35% 74%, 100% 74%, 100% 100%, 0 100%, 0 74%, 65% 26%, 0 26%);
}

/* --- Film grain overlay --------------------------------------------------- */
.cz-noise {
	position: fixed;
	inset: 0;
	z-index: 50;
	opacity: 0.05;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

/* --- Scroll progress line ------------------------------------------------- */
.cz-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 3px;
	inline-size: 0;
	background: var(--cz-red, #ff2929);
	z-index: 100;
}

/* --- Reveal on scroll ----------------------------------------------------- */
.cz-reveal {
	opacity: 0;
	transform: translateY(35px);
	transition: opacity var(--cz-reveal-duration, 0.75s) ease,
	            transform var(--cz-reveal-duration, 0.75s) ease;
}

.cz-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Reduced motion — one place, covers every module
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.cz-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* The brand lockup is typeset in caps in the approved design, whatever casing
   the WordPress site title uses. */
.cz-brand { text-transform: uppercase; }