/* ==========================================================================
   BLITZ Campaign — homepage sections
   Phase 3. Layout, composition and pacing. Every colour and size here comes
   from a token; nothing is hardcoded.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Asymmetric, not centred. The headline occupies seven of twelve columns and
   the supporting material sits below-right of it, so the eye travels down and
   across rather than straight down a centre line.
   ========================================================================== */
.blitz-hero {
	position: relative;
	padding-top: clamp(3rem, 7vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 8vw, 7rem);
	overflow: hidden;
}

/* Dynamic Selected Client Stories — one editorial feature and two supports. */
.blitz-work-dynamic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-block: var(--wp--preset--spacing--xl);
}
.blitz-work-dynamic__item {
	display: grid;
	align-content: start;
	border-bottom: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	padding-bottom: var(--wp--preset--spacing--l);
}
.blitz-work-dynamic__item.is-featured { grid-row: span 2; }
.blitz-work-dynamic__media { display: block; overflow: hidden; margin-bottom: var(--wp--preset--spacing--m); background: var(--wp--preset--color--ink-raised); }
.blitz-work-dynamic__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease); }
.blitz-work-dynamic__item.is-featured .blitz-work-dynamic__media img { aspect-ratio: 16 / 10; }
.blitz-work-dynamic__item:hover .blitz-work-dynamic__media img { transform: scale(1.015); }
.blitz-work-dynamic__item h3 { margin-block: .45rem .75rem; font-size: var(--wp--preset--font-size--heading-l); }
.blitz-work-dynamic__item p { max-width: 60ch; }
.blitz-latest-editorial { margin: var(--wp--preset--spacing--l) 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.blitz-latest-editorial li { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.blitz-latest-editorial a { display: flex; justify-content: space-between; gap: 1rem; min-height: 52px; padding-block: .85rem; color: inherit; }
.blitz-latest-editorial a:hover, .blitz-latest-editorial a:focus-visible { color: var(--wp--preset--color--accent-deep); }
@media (max-width: 767px) {
	.blitz-work-dynamic { grid-template-columns: 1fr; }
	.blitz-work-dynamic__item.is-featured { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.blitz-work-dynamic__media img { transition: none; }
	.blitz-work-dynamic__item:hover .blitz-work-dynamic__media img { transform: none; }
}

/* A single slow diagonal wash, drawn from the accent at very low opacity.
   It reads as light rather than as a gradient, which is what keeps this side
   of premium. */
.blitz-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -30%;
	height: 120%;
	background: radial-gradient( 60% 50% at 25% 20%, var(--accent-wash), transparent 70% );
	pointer-events: none;
}
.blitz-hero > * { position: relative; }

.blitz-hero__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 108%;
	font-size: var(--wp--preset--font-size--display-xl);
	line-height: 0.92;
	letter-spacing: -0.03em;
	margin: 0;
	text-wrap: balance;
}
/* One clause of the headline carries the accent. Exactly one. */
.blitz-hero__title em { font-style: normal; color: var(--accent); }

.blitz-hero__lead {
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.55;
	color: var(--paper-dim);
	margin: 0;
	max-width: 46ch;
}

.blitz-hero__meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--m);
}

/* Mobile: the signature strip follows the buttons closely rather than sitting
   below a screenful of nothing. Dead vertical space costs more on a phone,
   where it is the difference between one scroll and two. */
@media (max-width: 1023px) {
	.blitz-hero__aside { margin-top: var(--wp--preset--spacing--l); }
	.blitz-hero__meta .blitz-actions { margin-top: var(--wp--preset--spacing--m); }
}
@media (max-width: 559px) {
	.blitz-hero { padding-bottom: var(--wp--preset--spacing--xl); }
	.blitz-hero__title { line-height: 0.98; }
}

@media (min-width: 1024px) {
	.blitz-hero__head { grid-column: 1 / span 10; }
	.blitz-hero__meta { grid-column: 1 / span 5; margin-top: var(--wp--preset--spacing--xl); }
	.blitz-hero__aside {
		grid-column: 8 / span 5;
		margin-top: var(--wp--preset--spacing--xl);
		align-self: start;
	}
}

/* The signature sits under the headline as a rule-separated strip. */
.blitz-hero__signature {
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--ink-line);
}

/* Disambiguation line — category plus geography, on every page. */
.blitz-hero__descriptor {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.6;
	color: var(--paper-dim);
	max-width: 42ch;
}

/* ==========================================================================
   2. CAPABILITY MAP  —  the illustrated editable section
   Two columns: the arranged card cluster on the left, the editorial block on
   the right. On a light surface, so it breaks the run of dark sections early
   and gives the page an editorial change of register.
   ========================================================================== */
.blitz-solve__grid {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.blitz-solve__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xl);
	}
	.blitz-solve__visual { grid-column: 1 / span 6; grid-row: 1 / span 2; }
	.blitz-solve__copy   { grid-column: 8 / span 5; grid-row: 1; align-self: center; }
	.blitz-solve__aside  { grid-column: 8 / span 5; grid-row: 2; align-self: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
	/* Tablet: the cluster loosens into a wider band above the copy rather than
	   being squeezed into half a narrow viewport. */
	.blitz-solve__grid { gap: var(--wp--preset--spacing--xl); }
}

/* Mobile order: copy first, cards second. The heading has to establish what
   the cards *are* before they mean anything, and on a phone the visitor sees
   one screen at a time. */
@media (max-width: 1023px) {
	.blitz-solve__copy   { order: 1; }
	.blitz-solve__visual { order: 2; }
	.blitz-solve__aside  { order: 3; }
}

.blitz-solve__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	margin: 0 0 var(--wp--preset--spacing--m);
	text-wrap: balance;
}
.blitz-solve__body {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.6;
	max-width: 42ch;
}

/* --- The map ---------------------------------------------------------- */
.blitz-map {
	position: relative;
	--_spine: 50%;
}

.blitz-map__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	position: relative;
}

/* The connector spine. One vertical line, with each card reaching to it by a
   short stub. This is why the cluster survives an editor adding a seventh card
   or deleting the third: nothing is positioned by hand. */
.blitz-map__spine {
	position: absolute;
	top: 8%;
	bottom: 8%;
	left: var(--_spine);
	width: 1px;
	background: linear-gradient( to bottom, transparent, var(--_line, rgba(5,7,8,0.16)) 12%, var(--_line, rgba(5,7,8,0.16)) 88%, transparent );
	pointer-events: none;
}
.blitz-map:not(.has-connectors) .blitz-map__spine { display: none; }

/* --- Cards ------------------------------------------------------------ */
.blitz-node {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.95rem 1.15rem;
	background: var(--wp--preset--color--card);
	border: 1px solid rgba(5, 7, 8, 0.1);
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(5, 7, 8, 0.05), 0 10px 30px -22px rgba(5, 7, 8, 0.3);
	text-decoration: none;
	color: var(--ink);
	width: fit-content;
	max-width: 100%;
	transition: transform var(--t-base) var(--ease),
	            box-shadow var(--t-base) var(--ease),
	            border-color var(--t-base) var(--ease);
}

.blitz-node__label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.25;
	letter-spacing: var(--wp--custom--tracking--tight);
}
.blitz-node__sub {
	font-size: 0.75rem;
	line-height: 1.35;
	color: rgba(5, 7, 8, 0.55);
}

/* One or two highlighted cards carry the accent. The rest stay neutral —
   that ratio is what makes the accent read as emphasis rather than decoration. */
.blitz-node.is-highlight {
	background: var(--accent);
	border-color: var(--accent);
	box-shadow: 0 1px 2px rgba(5, 7, 8, 0.06), 0 12px 32px -18px rgba(56, 74, 0, 0.55);
}
.blitz-node.is-highlight .blitz-node__sub { color: rgba(5, 7, 8, 0.62); }

a.blitz-node:hover,
a.blitz-node:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(5, 7, 8, 0.06), 0 16px 36px -18px rgba(5, 7, 8, 0.3);
	border-color: rgba(5, 7, 8, 0.2);
}

/* --- Staggered cluster (the designed default) --------------------------
   Cards alternate sides of the spine. Odd cards sit right-aligned against it,
   even cards left-aligned, each with a stub connecting to the line. */
.blitz-map--scatter .blitz-map__inner { gap: var(--wp--preset--spacing--s); }

@media (min-width: 560px) {
	/* Fixed 42% width, not fit-content. Variable-width cards look more organic
	   but leave the connector dots floating short of the spine, which reads as
	   a bug rather than as looseness. Precision wins here. 42 + 8 = 50%, so the
	   stub always lands exactly on the line. */
	.blitz-map--scatter .blitz-node { width: 42%; max-width: 42%; }
	.blitz-map--scatter .blitz-node:nth-child(odd)  { align-self: flex-start; }
	.blitz-map--scatter .blitz-node:nth-child(even) { align-self: flex-end; }
	/* Vertical offsets, small and irregular, so the column does not read as a
	   list. Deliberate values rather than a formula — the irregularity is the
	   point, but it has to be controlled. */
	.blitz-map--scatter .blitz-node:nth-child(2) { margin-top: -1.25rem; }
	.blitz-map--scatter .blitz-node:nth-child(3) { margin-top: 1rem; }
	.blitz-map--scatter .blitz-node:nth-child(4) { margin-top: -0.5rem; }
	.blitz-map--scatter .blitz-node:nth-child(5) { margin-top: 0.75rem; }
	.blitz-map--scatter .blitz-node:nth-child(6) { margin-top: -0.75rem; }

	/* Connector stubs. */
	.blitz-map.has-connectors .blitz-node::after {
		content: "";
		position: absolute;
		top: 50%;
		width: 19.05%; /* 8% of the map = 19.05% of a 42%-wide card */
		height: 1px;
		background: rgba(5, 7, 8, 0.16);
	}
	.blitz-map--scatter.has-connectors .blitz-node:nth-child(odd)::after  { left: 100%; }
	.blitz-map--scatter.has-connectors .blitz-node:nth-child(even)::after { right: 100%; }

	/* A node on the spine gets a dot where the stub meets the line. */
	.blitz-map--scatter.has-connectors .blitz-node::before {
		content: "";
		position: absolute;
		top: 50%;
		width: 5px;
		height: 5px;
		margin-top: -2px;
		border-radius: 50%;
		background: rgba(5, 7, 8, 0.22);
	}
	.blitz-map--scatter.has-connectors .blitz-node:nth-child(odd)::before  { left: calc(119.05% - 2.5px); }
	.blitz-map--scatter.has-connectors .blitz-node:nth-child(even)::before { right: calc(119.05% - 2.5px); }
	.blitz-map--scatter.has-connectors .blitz-node.is-highlight::before { background: var(--accent-deep); }
}

/* Mobile cluster: the spine moves to the left edge and every card hangs off
   it. Still a designed diagram, not a stack of boxes — and nothing is squeezed
   into 47% of a 375px screen. */
@media (max-width: 559px) {
	.blitz-map { --_spine: 10px; padding-left: 34px; }
	.blitz-map--scatter .blitz-node,
	.blitz-map--grid .blitz-node { width: 100%; max-width: none; }
	.blitz-map.has-connectors .blitz-node::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 100%;
		width: 24px;
		height: 1px;
		background: rgba(5, 7, 8, 0.16);
	}
	.blitz-map.has-connectors .blitz-node::before {
		content: "";
		position: absolute;
		top: 50%;
		right: calc(100% + 22px);
		width: 5px;
		height: 5px;
		margin-top: -2px;
		border-radius: 50%;
		background: rgba(5, 7, 8, 0.22);
	}
	.blitz-map.has-connectors .blitz-node.is-highlight::before { background: var(--accent-deep); }
	.blitz-map--scatter .blitz-map__inner { gap: 0.65rem; }
}

/* --- Alternative arrangements ----------------------------------------- */
.blitz-map--grid .blitz-map__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--s);
}
.blitz-map--grid .blitz-node { width: 100%; }
.blitz-map--grid .blitz-map__spine,
.blitz-map--column .blitz-map__spine { display: none; }
.blitz-map--column .blitz-node { width: 100%; }

/* On a dark surface the map inverts. Not used on the homepage, but pillar
   pages will want it, and defining it now stops someone inventing it later. */
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-node {
	background: var(--ink-raised);
	border-color: var(--ink-line);
	color: var(--paper);
	box-shadow: none;
}
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-node__sub { color: var(--paper-dim); }
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-node.is-highlight {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
}
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-node.is-highlight .blitz-node__sub { color: rgba(5, 7, 8, 0.62); }
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-map { --_line: var(--ink-line); }
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-map .blitz-node::after { background: var(--ink-line); }
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-map .blitz-node::before { background: var(--ink-line); }

/* ==========================================================================
   3. STATEMENT — the parent-level idea
   One sentence, very large, with generous air. The only section on the page
   that does nothing else.
   ========================================================================== */
.blitz-statement { text-align: left; }
.blitz-statement__text {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}
.blitz-statement__text em { font-style: normal; color: var(--accent); }
@media (min-width: 1024px) {
	.blitz-statement__text { grid-column: 1 / span 8; }
	.blitz-statement__note { grid-column: 10 / span 3; align-self: end; }
}
.blitz-statement__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--paper-dim);
	line-height: 1.6;
}

/* ==========================================================================
   4. TRIANGLE SECTION
   Triangle left, explanatory copy right — so the device is read alongside the
   sentence that explains it rather than under a caption.
   ========================================================================== */
.blitz-triangle-section__grid {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.blitz-triangle-section__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.blitz-triangle-section__visual { grid-column: 1 / span 5; }
	.blitz-triangle-section__copy   { grid-column: 7 / span 5; }
}
.blitz-triangle-section__visual .blitz-triangle { margin-inline: auto; }

/* ==========================================================================
   5. DIAGNOSTIC SECTION
   ========================================================================== */
.blitz-diag-section__grid {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.blitz-diag-section__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.blitz-diag-section__copy   { grid-column: 1 / span 4; }
	.blitz-diag-section__visual { grid-column: 6 / span 7; }
}
.blitz-diag-section__visual .blitz-diagnostic { max-width: none; margin: 0; }

/* ==========================================================================
   6. PILLAR CARDS
   ========================================================================== */
.blitz-pillars {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--ink-line);
	border-block: 1px solid var(--ink-line);
}
@media (min-width: 600px)  { .blitz-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blitz-pillars { grid-template-columns: repeat(4, 1fr); } }

/* Hairline dividers rather than card borders: four bordered boxes read as a
   widget, four panels sharing rules read as a system. */
.blitz-pillar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m) var(--wp--preset--spacing--xl);
	background: var(--ink);
	text-decoration: none;
	color: inherit;
	transition: background var(--t-base) var(--ease);
}
.blitz-pillar:hover { background: var(--ink-raised); }
.blitz-pillar:hover .blitz-pillar__name { color: var(--accent); }

.blitz-pillar__index {
	font-family: var(--ff-mono);
	font-size: 0.75rem;
	color: var(--paper-dim);
	letter-spacing: 0.08em;
}
.blitz-pillar__name {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	margin: 0;
	transition: color var(--t-fast) var(--ease);
}
.blitz-pillar__job {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--paper-dim);
	line-height: 1.5;
	flex: 1 1 auto;
}
.blitz-pillar__who {
	font-size: 0.75rem;
	color: var(--paper-dim);
	padding-top: var(--wp--preset--spacing--s);
	border-top: 1px solid var(--ink-line);
}

/* ==========================================================================
   7. CAMPAIGN INDEX PREVIEW
   ========================================================================== */
.blitz-index-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--m);
}
@media (min-width: 700px)  { .blitz-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blitz-index-grid { grid-template-columns: repeat(3, 1fr); } }

.blitz-entry {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--m);
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	background: var(--ink-raised);
	text-decoration: none;
	color: inherit;
	min-height: 220px;
	transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.blitz-entry:hover { border-color: var(--accent); background: var(--ink-soft); }
.blitz-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--paper-dim);
}
.blitz-entry__tag { padding: 0.2rem 0.5rem; border: 1px solid var(--ink-line); border-radius: 100px; }
.blitz-entry__tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.blitz-entry__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
	letter-spacing: var(--wp--custom--tracking--tight);
	flex: 1 1 auto;
}
.blitz-entry__teaches { margin: 0; font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); line-height: 1.5; }

/* Empty state, used until entries exist. Says so plainly rather than showing
   invented placeholder entries — but styled as a deliberate strip rather than
   a small dashed box stranded in a wide dark section, which looks unfinished
   in a way the honesty does not deserve. */
.blitz-note {
	display: grid;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--l);
	border: 1px solid var(--ink-line);
	border-left: 2px solid var(--accent);
	border-radius: var(--radius);
	background: linear-gradient(90deg, var(--accent-wash), transparent 40%);
	color: var(--paper-dim);
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.6;
	max-width: none;
}
.blitz-note strong { color: var(--paper); font-weight: 600; }
.blitz-section--light .blitz-note,
.blitz-section--warm .blitz-note { border-color: rgba(5,7,8,0.12); border-left-color: var(--accent-deep); color: rgba(5,7,8,0.7); }
.blitz-section--light .blitz-note strong,
.blitz-section--warm .blitz-note strong { color: var(--ink); }

/* ==========================================================================
   8. SELECTED WORK
   ========================================================================== */
.blitz-work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--ink-line);
	border-block: 1px solid var(--ink-line);
}
@media (min-width: 900px) { .blitz-work-grid { grid-template-columns: repeat(3, 1fr); } }

.blitz-case {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
	background: var(--ink);
	text-decoration: none;
	color: inherit;
	transition: background var(--t-base) var(--ease);
}
.blitz-case:hover { background: var(--ink-raised); }
.blitz-case__metric {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 100%;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.blitz-case__basis { font-size: 0.75rem; color: var(--paper-dim); }
.blitz-case__title { margin: 0; font-size: var(--wp--preset--font-size--heading-s); font-family: var(--ff-ui); font-weight: 600; line-height: 1.3; }
.blitz-case__sector { font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); }

/* ==========================================================================
   9. ACADEMY STRIP
   ========================================================================== */
.blitz-academy-strip__grid {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.blitz-academy-strip__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.blitz-academy-strip__copy { grid-column: 1 / span 6; }
	.blitz-academy-strip__side { grid-column: 8 / span 5; }
}

/* The Academy badge — the one pillar granted its own visual device. */
.blitz-academy-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tr-eyebrow);
	color: var(--accent);
	margin-bottom: var(--wp--preset--spacing--s);
}
.blitz-academy-badge::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--accent);
}
.blitz-section--light .blitz-academy-badge,
.blitz-section--warm .blitz-academy-badge { color: var(--accent-deep); }
.blitz-section--light .blitz-academy-badge::before,
.blitz-section--warm .blitz-academy-badge::before { background: var(--accent-deep); }

.blitz-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--ink-line);
	border-radius: 100px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--paper-dim);
}
.blitz-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ==========================================================================
   10. FINAL CTA
   ========================================================================== */
.blitz-final {
	position: relative;
	overflow: hidden;
}
.blitz-final__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0 0 var(--wp--preset--spacing--m);
	max-width: 16ch;
	text-wrap: balance;
}
@media (min-width: 1024px) {
	.blitz-final__title { grid-column: 1 / span 6; }
	.blitz-final__side  { grid-column: 8 / span 5; align-self: end; }
}
.blitz-final__side p { margin: 0 0 var(--wp--preset--spacing--m); color: var(--paper-dim); max-width: 40ch; }

/* ==========================================================================
   11. VISIBLE-NO STRIP
   ========================================================================== */
.blitz-no {
	display: grid;
	gap: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--xl) 0;
	border-block: 1px solid var(--ink-line);
}
@media (min-width: 900px) { .blitz-no { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--2xl); } }
.blitz-no__label {
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--tr-eyebrow);
	font-weight: 600;
	color: var(--paper-dim);
	margin: 0 0 0.5rem;
}
.blitz-no p { margin: 0; line-height: 1.6; max-width: 46ch; }

/* ==========================================================================
   12. QUOTE / PHILOSOPHY MOMENT
   Two on the page, no more. They are editorial breaks between sections rather
   than decoration — the page needs somewhere to slow down.
   ========================================================================== */
.blitz-quote { position: relative; }
.blitz-quote__mark {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--wp--preset--spacing--l);
}
.blitz-section--light .blitz-quote__mark,
.blitz-section--warm .blitz-quote__mark { background: var(--accent-deep); }

.blitz-quote__text {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 102%;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.18;
	letter-spacing: -0.015em;
	max-width: 26ch;
	text-wrap: balance;
}
.blitz-quote__attr {
	margin: var(--wp--preset--spacing--m) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--paper-dim);
}
.blitz-section--light .blitz-quote__attr,
.blitz-section--warm .blitz-quote__attr { color: rgba(5, 7, 8, 0.6); }

@media (min-width: 1024px) {
	.blitz-quote__text { grid-column: 2 / span 7; font-size: var(--wp--preset--font-size--display-m); max-width: 22ch; }
	.blitz-quote__side { grid-column: 10 / span 3; align-self: end; }
}

/* ==========================================================================
   13. INSIGHTS
   ========================================================================== */
.blitz-insights-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--ink-line);
}
.blitz-insight {
	display: grid;
	gap: 0.35rem 2rem;
	padding: var(--wp--preset--spacing--m) 0;
	border-bottom: 1px solid var(--ink-line);
	text-decoration: none;
	color: inherit;
	transition: padding-left var(--t-base) var(--ease);
}
@media (min-width: 768px) {
	.blitz-insight { grid-template-columns: 8rem 1fr auto; align-items: baseline; }
}
.blitz-insight:hover { padding-left: 0.75rem; }
.blitz-insight:hover .blitz-insight__title { color: var(--accent); }
.blitz-insight__kicker {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--paper-dim);
}
.blitz-insight__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.2;
	letter-spacing: var(--wp--custom--tracking--tight);
	transition: color var(--t-fast) var(--ease);
}
.blitz-insight__meta { font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); }

/* ==========================================================================
   14. BLITZ ACADEMY — its own section, not another service card
   A different rhythm on purpose: light surface, wide statement, topic cards in
   a row rather than a cluster. Same type, same spacing scale, same black and
   white — a distinct room in the same building, not a different building.
   ========================================================================== */
.blitz-academy { position: relative; overflow: hidden; }

.blitz-academy__grid { display: grid; gap: var(--wp--preset--spacing--xl); }
@media (min-width: 1024px) {
	.blitz-academy__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.blitz-academy__lead { grid-column: 1 / span 6; }
	.blitz-academy__side { grid-column: 8 / span 5; padding-top: 0.6rem; }
}

.blitz-academy__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.blitz-academy__body { margin: 0; font-size: var(--wp--preset--font-size--body-l); line-height: 1.6; max-width: 44ch; }

/* The "Learn" motif: a repeating underline stroke behind one word. Quiet, and
   it belongs to Academy alone. */
.blitz-academy__title mark {
	background: none;
	color: inherit;
	box-shadow: inset 0 -0.14em 0 var(--wp--preset--color--marker);
	padding-bottom: 0.02em;
}

/* Topic cards — a preview, not a catalogue. */
.blitz-topics {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--s);
	margin-top: var(--wp--preset--spacing--2xl);
}
@media (min-width: 560px)  { .blitz-topics { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .blitz-topics { grid-template-columns: repeat(4, 1fr); } }

.blitz-topic {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--m);
	background: var(--card);
	border: 1px solid rgba(5, 7, 8, 0.1);
	border-radius: 6px;
	text-decoration: none;
	color: var(--ink);
	min-height: 116px;
	transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.blitz-topic:hover { transform: translateY(-2px); border-color: rgba(5, 7, 8, 0.24); }

/* Card links must not pick up the light-section link colour — they are
   surfaces, not links in prose. */
.blitz-section--light a.blitz-topic,
.blitz-section--warm  a.blitz-topic,
.blitz-section--light a.blitz-node,
.blitz-section--warm  a.blitz-node { color: var(--ink); }
.blitz-topic__n { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--accent-deep); }
.blitz-topic__name {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--tight);
	margin-top: auto;
}

/* ==========================================================================
   15. CAPABILITY CARDS (Growth / Creative / Tech)
   Three panels sharing hairlines. Replaces the four-pillar grid.
   ========================================================================== */
.blitz-caps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--ink-line);
	border-block: 1px solid var(--ink-line);
	margin-top: var(--wp--preset--spacing--2xl);
}
@media (min-width: 860px) { .blitz-caps { grid-template-columns: repeat(3, 1fr); } }

.blitz-cap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
	background: var(--ink);
	text-decoration: none;
	color: inherit;
	transition: background var(--t-base) var(--ease);
}
.blitz-cap:hover { background: var(--ink-raised); }
.blitz-cap:hover .blitz-cap__name { color: var(--accent); }
.blitz-cap__name {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
	transition: color var(--t-fast) var(--ease);
}
.blitz-cap__job { margin: 0; font-size: var(--wp--preset--font-size--body); color: var(--paper); }
.blitz-cap__detail { margin: 0; font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); line-height: 1.55; }

/* The quiet Academy pointer under the solve section's buttons. It keeps the
   learning path visible without letting it compete with the commercial one. */
/* No top margin: this is a grid/flex child now, so the gap already spaces it —
   and a margin here is indistinguishable from one injected by WordPress's flow
   layout, which is the thing tools/smoke-test-layout.mjs exists to catch. */
.blitz-solve__aside {
	margin: 0;
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid rgba(5, 7, 8, 0.12);
	font-size: var(--wp--preset--font-size--body-s);
	color: rgba(5, 7, 8, 0.6);
	max-width: 46ch;
}

.blitz-academy__foot {
	margin: var(--wp--preset--spacing--l) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	color: rgba(5, 7, 8, 0.6);
	max-width: 62ch;
}

/* ==========================================================================
   16. MOBILE PASS
   Written against 375 / 390 / 430, not inherited from the desktop rules.
   The recurring problems on a phone are the same three: too much air between
   a heading and the copy that explains it, too little between one section and
   the next, and headlines set at a desktop size that force awkward breaks.
   ========================================================================== */
@media (max-width: 767px) {

	/* Section rhythm: tighter than desktop, but still clearly separated.
	   Reading on a phone is one screen at a time, so the gap between sections
	   is doing less work and can afford to be smaller. */
	.blitz-section        { padding-block: clamp(3rem, 11vw, 4rem); }
	.blitz-section--tight { padding-block: clamp(2.5rem, 9vw, 3.25rem); }
	.blitz-section--loose { padding-block: clamp(3.5rem, 13vw, 5rem); }

	/* Headings sit closer to the copy they introduce. */
	.blitz-sechead { margin-bottom: var(--wp--preset--spacing--l); gap: var(--wp--preset--spacing--s); }
	.blitz-sechead__title,
	.blitz-solve__title,
	.blitz-academy__title,
	.blitz-final__title,
	.blitz-statement__text { text-wrap: pretty; }

	.blitz-eyebrow { margin-bottom: 0.6rem; }
	.blitz-eyebrow--numbered::after { max-width: 40px; }

	/* Paragraph measure: ~60ch is too wide once the gutter shrinks. */
	.blitz-lead,
	.blitz-solve__body,
	.blitz-academy__body,
	.blitz-hero__lead { max-width: 38ch; }

	/* Statement and closing headlines lose the desktop character limit, which
	   at phone width produced two-word lines. */
	.blitz-statement__text { max-width: none; font-size: var(--wp--preset--font-size--display-m); }
	.blitz-final__title    { max-width: none; }
	.blitz-quote__text     { max-width: none; }

	.blitz-statement__note { margin-top: var(--wp--preset--spacing--l); }

	/* Grids that were 2-up become 1-up with real gaps rather than hairlines. */
	.blitz-no { gap: var(--wp--preset--spacing--l); padding-block: var(--wp--preset--spacing--l); }

	/* Cards: hairline dividers are hard to read on a phone; give each panel air. */
	.blitz-cap { padding: var(--wp--preset--spacing--m) 0; }
	.blitz-caps { margin-top: var(--wp--preset--spacing--l); }

	.blitz-triangle-section__grid,
	.blitz-diag-section__grid,
	.blitz-solve__grid,
	.blitz-academy__grid { gap: var(--wp--preset--spacing--l); }

	.blitz-topics { margin-top: var(--wp--preset--spacing--l); }
	.blitz-topic  { min-height: 0; padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); }
	.blitz-topic__name { font-size: var(--wp--preset--font-size--body); }

	.blitz-note { padding: var(--wp--preset--spacing--m); }
}

/* Hero, phones. It should land inside the first screen with the headline, a
   short lead and one clear action — not a headline and a scroll hint. */
@media (max-width: 767px) {
	.blitz-hero { padding-top: var(--wp--preset--spacing--xl); padding-bottom: var(--wp--preset--spacing--2xl); }
	.blitz-hero__title { font-size: var(--wp--preset--font-size--display-l); line-height: 1; text-wrap: pretty; }
	.blitz-hero__meta { gap: var(--wp--preset--spacing--m); margin-top: var(--wp--preset--spacing--m); }
	.blitz-hero__aside { margin-top: var(--wp--preset--spacing--xl); }
	.blitz-hero__signature { padding-top: var(--wp--preset--spacing--s); }
	.blitz-hero__descriptor { margin-top: var(--wp--preset--spacing--s); }
	.blitz-hero::before { inset: -30% -20% auto -40%; }
}

/* The triangle on a phone: same device, more room, copy underneath rather than
   beside it. Labels move outward so nothing sits on a line. */
@media (max-width: 767px) {
	.blitz-triangle-section__visual { padding-block: var(--wp--preset--spacing--s); }
	.blitz-triangle { max-width: 340px; margin-inline: auto; }
	.blitz-triangle__caption { margin-top: var(--wp--preset--spacing--m); }
}

/* Footer, phones. */
@media (max-width: 767px) {
	.blitz-footer { padding-block: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--m); }
	.blitz-footer__top { gap: var(--wp--preset--spacing--l); }
	.blitz-footer__bottom { margin-top: var(--wp--preset--spacing--xl); flex-direction: column; align-items: flex-start; }
	.blitz-footer__legal { gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m); }
}

/* ==========================================================================
   17. LOGO RAIL
   Greyscale at rest, colour on hover. No autoplay ticker: a strip that moves
   on its own is noise on a page whose argument is "we think before we act".
   ========================================================================== */
.blitz-logos {
	display: grid;
	gap: var(--wp--preset--spacing--l);
	align-items: center;
}
@media (min-width: 900px) {
	.blitz-logos { grid-template-columns: minmax(0, 200px) 1fr; gap: var(--wp--preset--spacing--2xl); }
}
.blitz-logos__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.45;
	color: var(--paper-dim);
	max-width: 18ch;
}
.blitz-section--light .blitz-logos__heading,
.blitz-section--warm .blitz-logos__heading { color: rgba(5, 7, 8, 0.6); }

.blitz-logos__rail {
	display: flex;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	min-width: 0;
}
/* Overflow scrolls rather than wrapping, so the rail keeps one clean line at
   every width. Snap points make a drag feel deliberate. */
.blitz-logos.can-scroll .blitz-logos__rail {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
}
.blitz-logos.can-scroll .blitz-logos__rail::-webkit-scrollbar { display: none; }

.blitz-logo-item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 260ms var(--ease), opacity 260ms var(--ease);
}
.blitz-logo-item:hover,
.blitz-logo-item:focus-visible,
.blitz-logo-item:focus-within { filter: grayscale(0); opacity: 1; }
.blitz-logo-item img { height: clamp(28px, 4vw, 40px); width: auto; }

/* Dark sections need the marks inverted; the demo logos are drawn in ink. */
.blitz-section:not(.blitz-section--light):not(.blitz-section--warm) .blitz-logo-item img { filter: invert(1); }

.blitz-logo-item__ph {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.01em;
}
.blitz-logos__note {
	grid-column: 1 / -1;
	margin: var(--wp--preset--spacing--m) 0 0;
	font-size: 0.75rem;
	color: var(--paper-dim);
}
.blitz-section--light .blitz-logos__note,
.blitz-section--warm .blitz-logos__note { color: rgba(5, 7, 8, 0.5); }

@media (max-width: 899px) {
	.blitz-logos__rail { gap: 1.75rem; }
	.blitz-logo-item img { height: 30px; }
}

/* ==========================================================================
   18. TILE FIELD  —  the "start where you need us" arrangement
   Same block as the staggered cluster, different composition. Multi-column,
   loosely ranked, with two or three tiles carrying the accent.
   ========================================================================== */
.blitz-map--tiles .blitz-map__spine { display: none; }
.blitz-map--tiles .blitz-map__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	align-items: start;
}
@media (min-width: 700px)  { .blitz-map--tiles .blitz-map__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } }
@media (min-width: 1024px) { .blitz-map--tiles .blitz-map__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.blitz-map--tiles .blitz-node {
	width: 100%;
	max-width: none;
	min-height: 92px;
	justify-content: flex-end;
	padding: 0.9rem 1rem;
}
/* Alternating vertical offsets give the field a hand-placed feel without any
   card being positioned by hand. */
@media (min-width: 700px) {
	.blitz-map--tiles .blitz-node:nth-child(3n+2) { margin-top: 1.75rem; }
	.blitz-map--tiles .blitz-node:nth-child(4n+4) { margin-top: 0.9rem; }
}

/* ==========================================================================
   19. HOW WE WORK
   ========================================================================== */
.blitz-how__grid { display: grid; gap: var(--wp--preset--spacing--2xl); align-items: center; }
@media (min-width: 1024px) {
	.blitz-how__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--wp--preset--spacing--xl); }
	.blitz-how__visual { grid-column: 1 / span 7; }
	.blitz-how__copy   { grid-column: 9 / span 4; }
}
@media (max-width: 1023px) {
	.blitz-how__copy   { order: 1; }
	.blitz-how__visual { order: 2; }
}

/* ==========================================================================
   20. FEATURED WORK
   ========================================================================== */
.blitz-feature { position: relative; }
.blitz-feature__grid { display: grid; gap: var(--wp--preset--spacing--xl); align-items: center; }
@media (min-width: 900px) {
	.blitz-feature__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wp--preset--spacing--2xl); }
}
.blitz-feature__kicker {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 600;
	color: var(--paper-dim);
	margin: 0 0 var(--wp--preset--spacing--s);
}
.blitz-feature__title {
	margin: 0 0 var(--wp--preset--spacing--m);
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.blitz-feature__body { margin: 0; color: var(--paper-dim); line-height: 1.6; max-width: 42ch; }

.blitz-feature__media { position: relative; }
.blitz-feature__media img {
	width: 100%;
	border-radius: var(--radius);
	border: 1px solid var(--ink-line);
}
/* Tags sit on the image, as an index of what the project involved. */
.blitz-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blitz-feature__tags {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--wp--preset--spacing--2xl) var(--wp--preset--spacing--m) var(--wp--preset--spacing--m);
	background: linear-gradient(to top, rgba(5, 7, 8, 0.85), transparent);
	border-radius: 0 0 var(--radius) var(--radius);
}
.blitz-tag {
	padding: 0.35rem 0.75rem;
	border-radius: 100px;
	background: var(--card);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}
.blitz-tag--accent { background: var(--accent); }

/* The demo-content marker and its artwork were removed in v0.6.2 — see README. */

/* ==========================================================================
   21. WORK CARD GRID
   ========================================================================== */
.blitz-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--l);
	margin-top: var(--wp--preset--spacing--2xl);
}
@media (min-width: 860px) { .blitz-cards { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--m); } }

.blitz-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--s);
	text-decoration: none;
	color: inherit;
}
.blitz-card__media { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--ink-line); }
.blitz-card__media img { width: 100%; display: block; transition: transform 400ms var(--ease); }
.blitz-card:hover .blitz-card__media img { transform: scale(1.03); }
.blitz-card__cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper-dim); }
.blitz-card__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--tight);
	transition: color var(--t-fast) var(--ease);
}
.blitz-card:hover .blitz-card__title { color: var(--accent); }
.blitz-card__desc { margin: 0; font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); line-height: 1.55; }

/* ==========================================================================
   22. THINKING — Campaign Index and Insights, side by side
   Deliberately typographic. Work is images and outcomes; this is analysis, and
   it should not compete for the same kind of attention.
   ========================================================================== */
.blitz-think { display: grid; gap: var(--wp--preset--spacing--2xl); }
@media (min-width: 900px) { .blitz-think { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--3xl); } }

.blitz-think__col { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); }
.blitz-think__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--m); }
.blitz-think__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--display);
}
.blitz-think__what { margin: 0; font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); line-height: 1.55; max-width: 40ch; }

/* ==========================================================================
   23. TESTIMONIALS
   ========================================================================== */
.blitz-testi__grid { display: grid; gap: var(--wp--preset--spacing--l); }
@media (min-width: 1024px) {
	.blitz-testi__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--wp--preset--spacing--2xl); }
	.blitz-testi__head { grid-column: 1 / span 4; }
	.blitz-testi__body { grid-column: 6 / span 7; }
}
.blitz-testi__title {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
/* The editorial marker: the logo yellow, used only here and only as a stroke.
   It is the one place the mark's colour appears in the interface, which is why
   it stays rare. */
.blitz-testi__title mark {
	background: none;
	color: inherit;
	box-shadow: inset 0 -0.32em 0 var(--wp--preset--color--marker);
	padding: 0 0.04em;
}

.blitz-quotes { position: relative; }
.blitz-quotes__track { display: grid; }
.blitz-quote-card {
	grid-area: 1 / 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--l);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
}
.blitz-quote-card.is-active { opacity: 1; visibility: visible; }
/* Without JS the first one is simply shown. */
.no-js .blitz-quote-card:first-child { opacity: 1; visibility: visible; }

.blitz-quote-card__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s);
	line-height: 1.3;
	letter-spacing: -0.015em;
	font-weight: 500;
}
.blitz-quote-card__attr { display: flex; align-items: center; gap: var(--wp--preset--spacing--m); flex-wrap: wrap; margin: 0; }
.blitz-quote-card__logo { height: 34px; width: auto; }
.blitz-quote-card__who { font-size: var(--wp--preset--font-size--body-s); color: var(--paper-dim); line-height: 1.5; }
.blitz-section--light .blitz-quote-card__who { color: rgba(5, 7, 8, 0.6); }

.blitz-quotes__nav { display: flex; gap: 0.5rem; margin-top: var(--wp--preset--spacing--l); }
.blitz-quotes__btn {
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent);
	color: var(--ink);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--t-fast) var(--ease);
}
.blitz-quotes__btn:hover { background: var(--accent-hover); }
.blitz-quotes__btn[disabled] { opacity: 0.35; cursor: default; }

/* ==========================================================================
   24. QUICK CONTACT
   ========================================================================== */
.blitz-contact__grid { display: grid; gap: var(--wp--preset--spacing--xl); }
@media (min-width: 1024px) {
	.blitz-contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--wp--preset--spacing--2xl); }
	.blitz-contact__copy { grid-column: 1 / span 5; }
	.blitz-contact__form { grid-column: 7 / span 6; }
}
.blitz-contact__title {
	margin: 0 0 var(--wp--preset--spacing--m);
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 106%;
	font-size: var(--wp--preset--font-size--display-m);
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.blitz-contact__line {
	margin: var(--wp--preset--spacing--l) 0 0;
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--ink-line);
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-m);
	line-height: 1.1;
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--accent);
}

/* --- Form styling ------------------------------------------------------
   Written against plain markup and against Fluent Forms' class names, so the
   production form inherits this without a second stylesheet. */
.blitz-form { display: grid; gap: var(--wp--preset--spacing--m); }
.blitz-form__row { display: grid; gap: var(--wp--preset--spacing--m); }
@media (min-width: 640px) { .blitz-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.blitz-field { display: grid; gap: 0.45rem; }
.blitz-field label,
.blitz-form .ff-el-input--label label {
	font-size: var(--wp--preset--font-size--body-s);
	font-weight: 600;
	color: var(--paper);
}
.blitz-section--light .blitz-field label { color: var(--ink); }
.blitz-field__hint { font-size: 0.75rem; color: var(--paper-dim); }

.blitz-field input[type="text"],
.blitz-field input[type="email"],
.blitz-field input[type="url"],
.blitz-field input[type="tel"],
.blitz-field select,
.blitz-field textarea,
.blitz-form .ff-el-form-control {
	width: 100%;
	padding: 0.85rem 1rem;
	/* 16px minimum: anything smaller makes iOS zoom the viewport on focus. */
	font-size: 16px;
	font-family: inherit;
	color: var(--paper);
	background: var(--ink-raised);
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.blitz-field textarea { min-height: 120px; resize: vertical; }
.blitz-field input::placeholder,
.blitz-field textarea::placeholder { color: var(--paper-dim); opacity: 0.7; }

.blitz-field input:focus,
.blitz-field select:focus,
.blitz-field textarea:focus,
.blitz-form .ff-el-form-control:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
	background: var(--ink);
}

.blitz-field.has-error input,
.blitz-field.has-error textarea,
.blitz-form .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--error); }
.blitz-field__error,
.blitz-form .error {
	font-size: 0.75rem;
	color: var(--wp--preset--color--error);
}

.blitz-check { display: flex; align-items: flex-start; gap: 0.65rem; }
.blitz-check input[type="checkbox"] {
	width: 20px; height: 20px;
	margin-top: 2px;
	accent-color: var(--accent);
	flex: 0 0 auto;
}
.blitz-check label { font-size: var(--wp--preset--font-size--body-s); font-weight: 400; color: var(--paper-dim); line-height: 1.5; }

.blitz-form .blitz-btn,
.blitz-form .ff-btn-submit { width: auto; }

.blitz-form__success {
	padding: var(--wp--preset--spacing--m);
	border: 1px solid var(--accent);
	border-left-width: 2px;
	border-radius: var(--radius);
	background: var(--accent-wash);
}

/* Mobile form: one column, comfortable spacing, nothing side by side. */
@media (max-width: 639px) {
	.blitz-form { gap: var(--wp--preset--spacing--s); }
	.blitz-form__row { gap: var(--wp--preset--spacing--s); }
	.blitz-form .blitz-btn { width: 100%; }
}

/* ==========================================================================
   v0.6.2 — PRODUCTION POLISH
   Everything below was added or replaced in the v0.6.2 controlled polish pass.
   It is grouped by component rather than appended per-fix, so the media
   queries for one section stay together and there is no second, competing
   layer of overrides for anyone to trip over later.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HOW WE THINK — the consolidated philosophy section

   Replaces four adjacent sections (statement, quote, triangle, capability
   cards) that together ran to roughly 2,000px at 1366px. The target here is
   850–1050px: one heading, one paragraph, one bridge line, the triangle as
   evidence, and one closing sentence across the grid.

   The composition is 7 columns of copy and 5 of triangle. That ratio is
   deliberate — the triangle is the brand's strongest device but it is the
   evidence for the sentence, not the subject of the section, and giving it
   equal width made it read as the point.
   -------------------------------------------------------------------------- */
.blitz-philos__grid {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}
@media (min-width: 1024px) {
	.blitz-philos__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--xl);
	}
	.blitz-philos__copy   { grid-column: 1 / span 7; }
	.blitz-philos__visual { grid-column: 9 / span 4; }
}

.blitz-philos__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--display-l);
	line-height: 0.98;
	letter-spacing: -0.025em;
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}

/*
 * The highlight is a <mark>, not a hardcoded span with a colour on it. Editors
 * apply it from the toolbar's highlight control on any word in any heading, and
 * this rule decides what it looks like — a yellow editorial underline, the one
 * place the lock-up's yellow appears in the interface. Green stays reserved for
 * things you can click. See also .blitz-testi__title mark and
 * .blitz-academy__title mark, which are the same treatment at other scales.
 */
/* Thinner than the global marker. At display size a 0.16em stroke becomes a
   highlighter bar two lines deep; the mark is meant to read as an editor's
   underline, not as a change of background colour. */
.blitz-philos__title mark {
	background: none;
	color: inherit;
	box-shadow: inset 0 -0.075em 0 var(--wp--preset--color--marker);
	padding-bottom: 0.04em;
}

.blitz-philos__body {
	margin: var(--wp--preset--spacing--m) 0 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.55;
	color: var(--paper-dim);
	max-width: 54ch;      /* Inside the 52–68 character reading measure. */
	text-wrap: pretty;
}

/* The bridge line is the hinge of the whole section, so it is set apart with a
   rule rather than another heading. A second heading here would compete. */
.blitz-philos__bridge {
	margin: var(--wp--preset--spacing--l) 0 0;
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--ink-line);
	font-family: var(--ff-display);
	font-weight: 700;
	font-stretch: 104%;
	font-size: var(--wp--preset--font-size--heading-l);
	line-height: 1.15;
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--paper);
	max-width: 22ch;
}

.blitz-philos__close {
	margin: var(--wp--preset--spacing--2xl) 0 0;
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--ink-line);
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.5;
	color: var(--paper-dim);
	max-width: 62ch;
	text-wrap: pretty;
}

.blitz-philos__visual .blitz-triangle { margin-inline: auto; max-width: 440px; }
@media (max-width: 767px) {
	.blitz-philos__grid { gap: var(--wp--preset--spacing--xl); }
	.blitz-philos__visual .blitz-triangle { max-width: 320px; }
	.blitz-philos__close { margin-top: var(--wp--preset--spacing--xl); }
}

/* --------------------------------------------------------------------------
   HERO — vertical frame

   The hero was 711px under a 108px header, so the first screen was almost
   entirely the hero and the next section was never hinted at. The header is now
   96px and these paddings bring the frame to roughly 72/80 desktop, 56/64
   tablet and 40/56 mobile. Nothing about the composition changes.
   -------------------------------------------------------------------------- */
.blitz-hero {
	padding-top: clamp(2.5rem, 4.5vw, 4.5rem);
	padding-bottom: clamp(3.5rem, 5.5vw, 5rem);
}
@media (max-width: 767px) {
	.blitz-hero { padding-top: 2.5rem; padding-bottom: 3.5rem; }
}

/* Full-width buttons only on the narrowest phones. Above 390px a hero button
   that spans the screen reads as a form control, not a choice. */
@media (min-width: 390px) and (max-width: 599px) {
	.blitz-hero .blitz-actions > *:first-child .blitz-btn { width: auto; }
}

/* --------------------------------------------------------------------------
   THE CARD MAPS ON SMALL SCREENS

   Both the problem cluster ("What are you trying to solve?") and the service
   field ("Start where you need us") are arranged compositions built from the
   same blitz/solve-map block. A staggered cluster with connector lines is a
   desktop idea: at 390px the offsets become wrapping accidents and the
   connectors point at nothing.

   Below 768px both become an ordinary two-column card grid — deliberately
   composed as a list, not a squeezed diagram — and a single column below 390px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.blitz-map__spine,
	.blitz-map .blitz-node::before,
	.blitz-map .blitz-node::after { display: none; }

	/* The scatter arrangement reserves 34px on the left for the spine. With the
	   spine gone the reservation is just an inset that makes the card grid
	   narrower than everything above it. */
	.blitz-map { padding: 0 !important; }
	.blitz-map__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		padding: 0;
	}
	.blitz-map .blitz-node {
		position: static;
		margin: 0;
		transform: none;
		min-height: 56px;
		width: auto;
		max-width: none;
		padding: 0.85rem 1rem;
		/* Column direction, so a one-word label and a two-line label sit on the
		   same left edge. Centring a flex column centres the text, which is why
		   "Search" and "Analytics" looked adrift beside the wrapped labels. */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.blitz-map .blitz-node__label { text-align: left; }
}
@media (max-width: 389px) {
	.blitz-map__inner,
	.blitz-map--tiles .blitz-map__inner { grid-template-columns: 1fr; }
	.blitz-map--tiles .blitz-node { min-height: 56px; }
}

/*
 * Reading order on small screens: the explanation, then the call to action,
 * then the cards. The desktop layout puts the visual first in the source so it
 * can sit on the left; stacked, that means a visitor meets a field of unlabelled
 * cards before being told what they are for.
 */
@media (max-width: 1023px) {
	/* Spacing comes from `gap`, not a margin on the child. A margin here would
	   be indistinguishable from one injected by WordPress's flow layout, which
	   is exactly the thing tools/smoke-test-layout.mjs probes for. */
	.blitz-solve__grid,
	.blitz-how__grid {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--xl);
	}
	.blitz-solve__copy,
	.blitz-how__copy   { order: 1; }
	.blitz-solve__visual,
	.blitz-how__visual { order: 2; }

	/* The Academy aside is a footnote to the section, so on a phone it belongs
	   after the cards rather than between the buttons and the thing they refer
	   to. Lifting it out of the copy block is a flex reorder, not a second copy
	   of the markup. */
	.blitz-solve__grid { display: flex; }
	.blitz-solve__aside { order: 3; }
}

/* --------------------------------------------------------------------------
   DIAGNOSTIC — tablet composition
   Copy above, panel full width. The 4/7 desktop split is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.blitz-diag-section__grid { gap: var(--wp--preset--spacing--xl); }
	.blitz-diag-section__visual .blitz-diagnostic { max-width: none; }
}

/* --------------------------------------------------------------------------
   WORK — empty cards never reach a visitor

   The featured block and the three supporting cards ship empty so an editor can
   fill them. An unfilled card must not render as a blank frame on a live page,
   so anything without a title is hidden. The editor overrides this in
   editor.css — there, empty cards are exactly what you need to see.
   -------------------------------------------------------------------------- */
.blitz-card:has(> .blitz-card__title:empty) { display: none; }
.blitz-feature:has(.blitz-feature__title:empty) { display: none; }
.blitz-cards:not(:has(.blitz-card__title:not(:empty))) { display: none; }

/* --------------------------------------------------------------------------
   ACADEMY — non-interactive topics

   While /academy/ does not exist the topic cards are text, not links. A card
   that lifts on hover and does nothing on click is a small broken promise, and
   four of them in a row is a pattern.
   -------------------------------------------------------------------------- */
.blitz-topic.is-static { cursor: default; }
.blitz-topic.is-static:hover { transform: none; }

/* --------------------------------------------------------------------------
   CAMPAIGN INDEX vs INSIGHTS

   Same palette, same type, different cadence — the difference has to be
   composition, because two panels distinguished only by background colour are
   not distinguished at all. The Index reads as structured analysis: a tight
   metadata label above a compact block. Insights reads as a reading list: more
   air, wider measure.
   -------------------------------------------------------------------------- */
.blitz-think__kind {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--ff-mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--tr-eyebrow);
	color: var(--accent);
}
.blitz-think__col--index {
	padding-left: var(--wp--preset--spacing--m);
	border-left: 2px solid var(--accent);
}
.blitz-think__col--index .blitz-think__what { max-width: 44ch; }
.blitz-think__col--insights .blitz-think__kind { color: var(--paper-dim); }
.blitz-think__col--insights .blitz-think__title { margin-top: var(--wp--preset--spacing--s); }
.blitz-think__col--insights .blitz-think__what { max-width: 58ch; line-height: 1.7; }
@media (max-width: 767px) {
	.blitz-think { gap: var(--wp--preset--spacing--xl); }
}

/* --------------------------------------------------------------------------
   CONTACT — the pre-plugin fallback
   -------------------------------------------------------------------------- */
.blitz-contact__fallback {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.6;
	color: var(--paper-dim);
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   EDITOR-ONLY NOTES

   Rendered only for admin requests (see blitz_editor_note), and belt-and-braces
   hidden here as well. A note explaining how to publish a section must never
   reach a visitor — that is the exact failure this release is fixing.
   -------------------------------------------------------------------------- */
.blitz-editor-note { display: none; }

/* --------------------------------------------------------------------------
   THE CARD FIELDS — less dashboard, more hierarchy

   Nine equally raised white tiles with 6px corners and drop shadows read as a
   software feature grid, and the release spec is right that it is the wrong
   register for an agency describing how it works. Two corrections:

   1. Elevation is removed from cards that do nothing. A shadow is a promise
      that something is interactive; these are labels. Only a card that is
      genuinely a link keeps one, and even then only on a light surface.

   2. Corners come back to the 2px system radius. Rounded SaaS cards sitting
      inside square editorial panels is the single fastest way to make one
      design look like two.

   The field then carries three levels rather than one: the two accent cards
   (where an engagement usually starts), the pillar-tagged cards (Growth,
   Creative and Tech proper) and the quiet remainder. That is hierarchy the
   editor controls from the block sidebar, not a new component.
   -------------------------------------------------------------------------- */
.blitz-node {
	border-radius: var(--radius);
	box-shadow: none;
}
.blitz-node.is-highlight { box-shadow: none; }

/* Level 2: the three capability cards carry a heavier edge. */
.blitz-map--tiles .blitz-node.is-growth,
.blitz-map--tiles .blitz-node.is-creative,
.blitz-map--tiles .blitz-node.is-tech { border-color: rgba(0, 0, 0, 0.28); }
.blitz-map--tiles .blitz-node.is-highlight { border-color: var(--accent); }

/* Interactive cards keep a single restrained shadow and the 3px maximum lift. */
a.blitz-node { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
a.blitz-node:hover,
a.blitz-node:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* One column when there is no form or direct contact action to show beside the
   copy — see patterns/home-contact.php. */
.blitz-contact__grid--single { display: block; }
.blitz-contact__grid--single .blitz-contact__copy { max-width: 40rem; }