/* ==========================================================================
   BLITZ Campaign — header, navigation, footer
   ========================================================================== */

/* --- Header ------------------------------------------------------------
   STICKY LIVES ON THE SHELL, NOT ON .blitz-header.

   v0.6.0 put `position: sticky` on .blitz-header itself. It computed as sticky
   and never stuck. A sticky element is positioned inside its nearest scrolling
   ancestor but constrained by its PARENT box, and the parent here is the
   `.wp-block-template-part` wrapper WordPress emits around the header template
   part — a div exactly as tall as the header. With no spare height in the
   parent there is nowhere for the element to travel, so it scrolled away with
   the page.

   The fix is structural rather than a patch: the template part carries
   .blitz-header-shell (set in templates/*.html) and that becomes the sticky
   box, with the header positioned normally inside it. Nothing moves to
   `position: fixed`, so the header still occupies its own space in the flow and
   no compensating top padding is needed anywhere.

   Related: body uses `overflow-x: clip`, not `hidden`. `hidden` turns the body
   into a scroll container, which silently breaks position:sticky in exactly
   this situation. See assets/css/base.css. */
.blitz-header-shell,
.wp-block-template-part:has(> .blitz-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}
/*
 * Two selectors on purpose. The class is set on the template part in
 * templates/*.html and is the intended hook. The :has() rule is a safety net:
 * if that attribute is ever lost — a template reset in the site editor, a
 * template part re-inserted by hand — the header still sticks. Neither depends
 * on the other.
 */

.blitz-header {
	position: relative;
	/* Above the mobile drawer (z-index 99), which is a sibling inside the same
	   sticky shell. Without this the drawer covers the logo and the close button
	   while it is open, which is exactly when you need them. */
	z-index: 100;
	background: color-mix(in srgb, var(--ink) 82%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid transparent;
	transition: background var(--t-base) var(--ease),
	            border-color var(--t-base) var(--ease),
	            height var(--t-base) var(--ease);
}
.blitz-header.is-condensed {
	background: var(--ink);
	border-bottom-color: var(--ink-line);
	backdrop-filter: none;
}

.blitz-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--wp--preset--spacing--l);
	height: var(--header-h);
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
	transition: height var(--t-base) var(--ease);
}
/* Three zones — logo, nav, actions — so the navigation sits optically centred
   regardless of how wide the lock-up or the CTA happen to be. A flex row with
   space-between shifts the nav every time either end changes width, which is
   the single most common reason a header looks slightly "off". */
.blitz-header.is-condensed .blitz-header__inner { height: var(--header-h-cond); }

/* Below the desktop navigation breakpoint the header is a fixed 64px: logo,
   CTA and menu button. It does not condense, because there is nothing left to
   condense — and a header that changes height while you scroll a phone reads
   as a glitch. */
@media (max-width: 1023px) {
	.blitz-header__inner,
	.blitz-header.is-condensed .blitz-header__inner { height: 64px; }
}

/* --- Logo ------------------------------------------------------------- */
.blitz-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.blitz-logo img {
	display: block;
	width: auto;
	height: 48px;
	transition: height var(--t-base) var(--ease);
}
.blitz-header.is-condensed .blitz-logo img { height: 38px; }
/* Mobile header is 64px tall, so the lock-up sits at 36px with room to breathe. */
@media (max-width: 1023px) { .blitz-logo img { height: 36px; } }
@media (max-width: 359px)  { .blitz-logo img { height: 34px; } }

/* The lock-up carries yellow; the interface is green. Keeping a clear zone
   around the mark is what stops those two reading as a two-colour palette
   rather than a logo sitting on a system. Nothing accent-coloured is allowed
   inside this gap. */
.blitz-logo { padding-right: var(--wp--preset--spacing--s); }

/* --- Desktop navigation ---------------------------------------------- */
.blitz-nav { display: none; }
.blitz-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--s); justify-self: end; }

@media (min-width: 1024px) {
	.blitz-nav { display: flex; align-items: center; justify-content: center; }

	.blitz-nav__list {
		display: flex;
		align-items: center;
		gap: clamp(1.25rem, 2.4vw, 2.25rem);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.blitz-nav__item { position: relative; }

	.blitz-nav__link {
		display: inline-flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.5rem 0;
		min-height: 44px;
		color: var(--paper);
		font-size: var(--wp--preset--font-size--body-s);
		font-weight: 500;
		letter-spacing: -0.005em;
		text-decoration: none;
		background: none;
		border: 0;
		cursor: pointer;
		font-family: inherit;
		white-space: nowrap;
		transition: color var(--t-fast) var(--ease);
	}
	.blitz-nav__link:hover { color: var(--accent); }
	.blitz-nav__link::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: 0.25rem;
		height: 1px;
		background: var(--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 180ms var(--ease);
	}
	.blitz-nav__item:hover > .blitz-nav__link::after,
	.blitz-nav__link:focus-visible::after,
	.blitz-nav__link[aria-expanded="true"]::after,
	.blitz-nav__item.is-current > .blitz-nav__link::after { transform: scaleX(1); }

	/* The Campaign Index is the moat — it gets a permanent accent rule. */
	.blitz-nav__item--feature > .blitz-nav__link { color: var(--accent); }
	.blitz-nav__item--feature > .blitz-nav__link::after { transform: scaleX(1); opacity: 0.35; }
	.blitz-nav__item--feature:hover > .blitz-nav__link::after { opacity: 1; }

	.blitz-nav__chevron { width: 10px; height: 10px; transition: transform var(--t-fast) var(--ease); }
	.blitz-nav__link[aria-expanded="true"] .blitz-nav__chevron { transform: rotate(180deg); }

	/* --- Mega panel --- */
	.blitz-panel {
		position: absolute;
		top: calc(100% + 0.75rem);
		left: 50%;
		translate: -50% 0;
		min-width: 560px;
		padding: var(--wp--preset--spacing--l);
		background: var(--ink-raised);
		border: 1px solid var(--ink-line);
		border-radius: var(--radius);
		box-shadow: 0 24px 48px -24px rgba(0,0,0,0.8);
		opacity: 0;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	}
	.blitz-nav__item.is-open > .blitz-panel { opacity: 1; transform: none; pointer-events: auto; }

	.blitz-panel--wide { min-width: 720px; }

	.blitz-panel__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
		margin: 0; padding: 0; list-style: none;
	}
	.blitz-panel__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.blitz-panel__link {
		display: block;
		padding: 0.75rem;
		margin: -0.75rem;
		border-radius: var(--radius);
		text-decoration: none;
		color: inherit;
		border: 1px solid transparent;
		transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
	}
	.blitz-panel__link:hover,
	.blitz-panel__link:focus-visible { background: var(--accent-wash); border-color: var(--accent); }

	.blitz-panel__title {
		display: block;
		font-family: var(--ff-display);
		font-stretch: 108%;
		font-weight: 700;
		font-size: var(--wp--preset--font-size--heading-s);
		letter-spacing: var(--wp--custom--tracking--tight);
		margin-bottom: 0.25rem;
	}
	.blitz-panel__desc {
		display: block;
		font-size: var(--wp--preset--font-size--body-s);
		color: var(--paper-dim);
		line-height: 1.45;
	}
	.blitz-panel__foot {
		margin-top: var(--wp--preset--spacing--m);
		padding-top: var(--wp--preset--spacing--s);
		border-top: 1px solid var(--ink-line);
		font-size: var(--wp--preset--font-size--body-s);
		color: var(--paper-dim);
	}
}

/* Explicit grid placement, so the columns stay stable when the nav and the
   actions drop out at mobile widths. */
.blitz-logo            { grid-column: 1; }
.blitz-nav             { grid-column: 2; }
.blitz-header__actions { grid-column: 3; }
.blitz-burger          { grid-column: 3; justify-self: end; }

/* --- Header CTA ------------------------------------------------------- */
.blitz-header__actions { display: none; }
@media (min-width: 1024px) { .blitz-header__actions { display: flex; } }

/* --- Mobile toggle ---------------------------------------------------- */
.blitz-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	margin-right: -0.5rem;
	background: none;
	border: 0;
	color: var(--paper);
	cursor: pointer;
}
@media (min-width: 1024px) { .blitz-burger { display: none; } }

.blitz-burger__box { position: relative; width: 22px; height: 14px; }
.blitz-burger__bar {
	position: absolute; left: 0; right: 0;
	height: 2px; background: currentColor;
	transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.blitz-burger__bar:nth-child(1) { top: 0; }
.blitz-burger__bar:nth-child(2) { top: 6px; }
.blitz-burger__bar:nth-child(3) { top: 12px; }
.blitz-burger[aria-expanded="true"] .blitz-burger__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.blitz-burger[aria-expanded="true"] .blitz-burger__bar:nth-child(2) { opacity: 0; }
.blitz-burger[aria-expanded="true"] .blitz-burger__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Mobile drawer ---------------------------------------------------- */
.blitz-drawer {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	background: var(--ink);
	/* Clears the 64px mobile header, which stays visible above the panel. */
	padding: calc(64px + 1.5rem) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/*
	 * visibility is delayed to the end of the close transition so the drawer
	 * fades out before it is removed from the accessibility tree...
	 */
	transition: opacity var(--t-base) var(--ease),
	            transform var(--t-base) var(--ease),
	            visibility 0s linear var(--t-base);
}
/* While the drawer is open the header sits on solid ink rather than a
   translucent blur over a moving panel. */
body.blitz-no-scroll .blitz-header {
	background: var(--ink);
	backdrop-filter: none;
	border-bottom-color: var(--ink-line);
}

.blitz-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	/* ...and applied with no delay on open, so the drawer is focusable on the
	   very next frame. Without this, moving focus into the drawer silently
	   fails: an element that is still computed visibility:hidden cannot be
	   focused, and the keyboard user is left stranded outside the menu. */
	transition: opacity var(--t-base) var(--ease),
	            transform var(--t-base) var(--ease),
	            visibility 0s linear 0s;
}
@media (min-width: 1024px) { .blitz-drawer { display: none; } }

.blitz-drawer__list { list-style: none; margin: 0; padding: 0; }
.blitz-drawer__item { border-bottom: 1px solid var(--ink-line); }

.blitz-drawer__link,
.blitz-drawer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.05rem 0;
	min-height: 60px;
	font-family: var(--ff-display);
	font-stretch: 106%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--display-s);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--paper);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}
.blitz-drawer__item--feature .blitz-drawer__link { color: var(--accent); }

.blitz-drawer__sub { list-style: none; margin: 0; padding: 0 0 1rem; }
.blitz-drawer__sub a {
	display: block;
	padding: 0.625rem 0;
	min-height: 44px;
	font-size: var(--wp--preset--font-size--body);
	color: var(--paper-dim);
	text-decoration: none;
}
.blitz-drawer__sub a:hover { color: var(--accent); }

.blitz-drawer__foot { margin-top: auto; padding-top: var(--wp--preset--spacing--xl); }
.blitz-drawer__descriptor {
	margin: var(--wp--preset--spacing--m) 0 0;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.6;
	color: var(--paper-dim);
}
.blitz-drawer__foot .blitz-btn { width: 100%; justify-content: center; }

body.blitz-no-scroll { overflow: hidden; }

/* --- Footer ----------------------------------------------------------- */
.blitz-footer {
	background: var(--ink);
	border-top: 1px solid var(--ink-line);
	padding-block: var(--wp--preset--spacing--3xl) var(--wp--preset--spacing--l);
}

.blitz-footer__top {
	display: grid;
	gap: var(--wp--preset--spacing--xl);
	grid-template-columns: 1fr;
}
/*
   The column count is read from data-cols on .blitz-footer__top, which the
   footer block sets from the number of link groups that actually have working
   destinations. v0.6.0 hardcoded five columns; when the group count changed the
   last child wrapped underneath the brand block and the footer read as broken.
   Stating the count at every breakpoint from the same source removes that whole
   class of bug.
*/
/* Two columns from the smallest phone up. Four link lists of three to five
   items stacked single-file made the footer ~1100px tall on a 390px screen —
   most of the scroll after the form, for the least important content. */
@media (min-width: 360px)  { .blitz-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m); } }

/* 560–899px: enough width for the link groups to sit side by side. The count is
   chosen so the groups divide evenly — three groups in three columns, four in
   two rows of two. A group left alone on a half-empty row is the ragged look
   this whole data-cols mechanism exists to prevent. */
@media (min-width: 560px) {
	/* No link groups published yet — brand takes its own row (below), Contact
	   is the only thing left, so it gets the full row rather than sitting in
	   half a 2-column grid. */
	.blitz-footer__top[data-cols="2"] { grid-template-columns: 1fr; }
	.blitz-footer__top[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* 4 link groups + contact = 5 remaining once the brand takes its own row.
	   5 does not divide evenly at this width, so the groups fill one clean row
	   of 4 and Contact takes the row under them rather than sitting alone next
	   to empty grid tracks. This is the count blitz_footer_nav() actually
	   returns in production — Growth/Creative/Tech/Launch, Read, Tools and
	   Company are never empty — so this is the case that matters most. */
	.blitz-footer__top[data-cols="6"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="6"] > .blitz-footer__col:last-child { grid-column: 1 / -1; }
}

/* 900–1199px: the brand takes its own row, so the link groups share the width. */
@media (min-width: 900px) {
	.blitz-footer__top[data-cols="2"] { grid-template-columns: 1fr; }
	.blitz-footer__top[data-cols="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="5"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.blitz-footer__top[data-cols="6"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ≥1200px: brand beside the groups, with extra width for direct contact links. */
@media (min-width: 1200px) {
	.blitz-footer__top { gap: var(--wp--preset--spacing--2xl); }
	.blitz-footer__top[data-cols="2"] { grid-template-columns: 1.8fr 1.15fr; }
	.blitz-footer__top[data-cols="3"] { grid-template-columns: 1.8fr minmax(0, 1fr) 1.15fr; }
	.blitz-footer__top[data-cols="4"] { grid-template-columns: 1.8fr repeat(2, minmax(0, 0.9fr)) 1.15fr; }
	.blitz-footer__top[data-cols="5"] { grid-template-columns: 1.8fr repeat(3, minmax(0, 0.9fr)) 1.15fr; }
	.blitz-footer__top[data-cols="6"] { grid-template-columns: 1.8fr repeat(4, minmax(0, 0.9fr)) 1.15fr; }
}

/* Below the full-width breakpoint the brand block takes its own row rather
   than being squeezed beside link lists. */
@media (max-width: 1199px) { .blitz-footer__brand { grid-column: 1 / -1; } }

/* Contact gets the full width on phones so its links stay easy to scan. */
@media (max-width: 559px) { .blitz-footer__top > .blitz-footer__col:last-child { grid-column: 1 / -1; } }

/* Below 360px everything is a single column — two 150px columns of links is
   not a layout, it is a wrapping accident. */
@media (max-width: 359px) { .blitz-footer__top { grid-template-columns: 1fr; } }

.blitz-footer__brand .blitz-logo img { height: 64px; }
.blitz-footer__brand .blitz-logo { padding-right: 0; }
@media (max-width: 767px) { .blitz-footer__brand .blitz-logo img { height: 52px; } }

/* The short category descriptor appears with the brand on every page. */
@media (max-width: 1199px) {
	.blitz-footer__brand { padding-bottom: var(--wp--preset--spacing--m); border-bottom: 1px solid var(--ink-line); }
	.blitz-footer__brand > * { max-width: 62ch; }
}

.blitz-footer__descriptor {
	margin: var(--wp--preset--spacing--l) 0 0;
	max-width: 40ch;
	font-size: var(--wp--preset--font-size--body-s);
	line-height: 1.65;
	color: var(--paper-dim);
	text-wrap: pretty;
}
.blitz-footer__descriptor + .blitz-footer__descriptor { margin-top: var(--wp--preset--spacing--s); }

.blitz-footer__colhead {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tr-eyebrow);
	color: var(--paper);
	margin: 0 0 var(--wp--preset--spacing--m);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--ink-line);
}
.blitz-footer__list { list-style: none; margin: 0; padding: 0; }
.blitz-footer__list li { margin-bottom: 0.15rem; }
.blitz-footer__list a {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0;
	color: var(--paper-dim);
	font-size: var(--wp--preset--font-size--body-s);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}
.blitz-footer__list a:hover { color: var(--accent); }
/* Touch target. The label is short; the tap area must not be. Desktop keeps the
   tighter rhythm — a 44px row there just makes the footer taller for no gain. */
@media (max-width: 1023px) { .blitz-footer__list a { min-height: 44px; } }

.blitz-footer__nap { font-style: normal; color: var(--paper-dim); font-size: var(--wp--preset--font-size--body-s); line-height: 1.7; }
.blitz-footer__nap a { color: var(--paper-dim); text-decoration: none; }
.blitz-footer__nap a:hover { color: var(--accent); }

.blitz-footer__social { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--wp--preset--spacing--s); list-style: none; padding: 0; }
.blitz-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--ink-line);
	border-radius: var(--radius);
	color: var(--paper-dim);
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.blitz-footer__social a:hover { border-color: var(--accent); color: var(--accent); }

.blitz-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	margin-top: var(--wp--preset--spacing--3xl);
	padding-top: var(--wp--preset--spacing--m);
	border-top: 1px solid var(--ink-line);
	font-size: var(--wp--preset--font-size--body-s);
	color: var(--paper-dim);
}
.blitz-footer__legal { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--m); list-style: none; margin: 0; padding: 0; }
.blitz-footer__legal a { color: var(--paper-dim); text-decoration: none; }
.blitz-footer__legal a:hover { color: var(--accent); }

/* Editor placeholder notice — visible to admins only, never to visitors. */
.blitz-placeholder {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border: 1px dashed var(--accent);
	border-radius: var(--radius);
	color: var(--accent);
	font-family: var(--ff-mono);
	font-size: 0.75rem;
}

/* Optional grouped contact details preserve the footer rhythm. */
.blitz-footer__nap-block { display: block; margin-bottom: var(--wp--preset--spacing--s); }

/* ==========================================================================
   v0.8.1 — BLITZ editorial mega navigation

   The interaction rhythm is intentionally familiar to premium agency sites,
   but every shape, icon, colour and type decision belongs to BLITZ. The panel
   is a full-width reading surface rather than a floating SaaS dropdown.
   ========================================================================== */
.blitz-header {
	background: var(--ink);
	border-top: 3px solid var(--accent);
	border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
	backdrop-filter: none;
	color: var(--paper);
	transition: box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.blitz-header.is-condensed {
	background: color-mix(in srgb, var(--ink) 96%, transparent);
	border-bottom-color: color-mix(in srgb, var(--paper) 18%, transparent);
	backdrop-filter: saturate(120%) blur(12px);
	box-shadow: 0 12px 32px -28px rgba(16,18,14,.8);
}
.blitz-header__inner {
	grid-template-columns: minmax(230px, auto) 1fr auto;
	height: 112px;
	max-width: min(100%, 1840px);
	gap: clamp(1.5rem, 2.4vw, 3.25rem);
}
.blitz-header.is-condensed .blitz-header__inner { height: 82px; }
.blitz-header .blitz-logo { padding-right: 0; }
.blitz-header .blitz-logo img { height: 58px; }
.blitz-header.is-condensed .blitz-logo img { height: 46px; }

@media (min-width: 1200px) {
	.blitz-nav { display: flex; justify-content: flex-end; }
	.blitz-drawer { display: none; }
	.blitz-nav__list { gap: clamp(1rem, 1.75vw, 2rem); }
	.blitz-nav__item { position: static; }
	.blitz-nav__link {
		position: relative;
		z-index: 1;
		min-height: 52px;
		padding: .75rem .2rem;
		color: var(--paper);
		font-family: var(--ff-display);
		font-size: clamp(.94rem, 1.05vw, 1.15rem);
		font-weight: 750;
		letter-spacing: -.03em;
	}
	.blitz-nav__link:hover { color: var(--paper); }
	.blitz-nav__link::after {
		left: 50%;
		right: auto;
		bottom: 4px;
		width: calc(100% + 22px);
		height: calc(100% - 4px);
		border: 4px solid var(--accent);
		border-radius: 52% 48% 50% 46%;
		background: transparent;
		transform: translateX(-50%) rotate(-3deg) scale(.72);
		opacity: 0;
		transition: transform 180ms var(--ease), opacity 140ms var(--ease);
		pointer-events: none;
	}
	.blitz-nav__item:hover > .blitz-nav__link::after,
	.blitz-nav__link:focus-visible::after,
	.blitz-nav__link[aria-expanded="true"]::after {
		transform: translateX(-50%) rotate(-3deg) scale(1);
		opacity: 1;
	}
	.blitz-nav__item--feature > .blitz-nav__link { color: var(--paper); }
	.blitz-nav__item--feature > .blitz-nav__link::after {
		border-color: var(--wp--preset--color--marker);
		transform: translateX(-50%) rotate(2deg) scale(.72);
		opacity: 0;
	}
	.blitz-nav__item--feature:hover > .blitz-nav__link::after,
	.blitz-nav__item--feature > .blitz-nav__link:focus-visible::after,
	.blitz-nav__item--feature > .blitz-nav__link[aria-expanded="true"]::after { transform: translateX(-50%) rotate(2deg) scale(1); opacity: 1; }
	.blitz-nav__item:nth-child(2) > .blitz-nav__link::after,
	.blitz-nav__item:nth-child(4) > .blitz-nav__link::after { border-color: var(--paper); }
	.blitz-nav__item.is-current > .blitz-nav__link::after { opacity: 0; transform: translateX(-50%) rotate(-3deg) scale(.72); }
	.blitz-nav__item.is-current:hover > .blitz-nav__link::after,
	.blitz-nav__item.is-current > .blitz-nav__link:focus-visible::after,
	.blitz-nav__item.is-current > .blitz-nav__link[aria-expanded="true"]::after { opacity: 1; transform: translateX(-50%) rotate(-3deg) scale(1); }
	.blitz-nav__item.is-current > .blitz-nav__link::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 1px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--accent);
		transform: translateX(-50%);
	}

	.blitz-panel {
		position: fixed;
		top: 112px;
		left: 0;
		translate: none;
		width: 100vw;
		min-width: 0;
		padding: 0;
		background: var(--paper);
		border: 0;
		border-top: 2px solid var(--accent);
		border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
		border-radius: 0;
		box-shadow: 0 28px 44px -36px rgba(16,18,14,.75);
		opacity: 0;
		transform: translateY(-12px);
		visibility: hidden;
		pointer-events: none;
		display: grid;
		grid-template-columns: clamp(180px, 20vw, 370px) minmax(0, 1fr);
		max-height: calc(100vh - 112px);
		overflow-y: auto;
		transition: opacity 170ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
	}
	.blitz-header.is-condensed .blitz-panel { top: 82px; max-height: calc(100vh - 82px); }
	.blitz-nav__item.is-open > .blitz-panel {
		opacity: 1;
		transform: none;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 170ms var(--ease), transform 220ms var(--ease), visibility 0s;
	}
	.blitz-panel__wash {
		position: relative;
		display: grid;
		place-items: center;
		min-height: 388px;
		overflow: hidden;
		background: color-mix(in srgb, var(--paper) 82%, var(--ink) 18%);
	}
	.blitz-panel__wash::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--paper) 66%, transparent) 45% 56%, transparent 56%);
	}
	.blitz-panel__wash .blitz-logo { opacity: .055; transform: scale(1.3); }
	.blitz-panel__wash .blitz-logo img { height: min(27vw, 330px); max-width: none; }
	.blitz-panel__body {
		min-width: 0;
		padding: clamp(2rem, 3.1vw, 3.75rem) var(--gutter) clamp(2rem, 3vw, 3.25rem) clamp(2rem, 3.4vw, 4.5rem);
	}
	.blitz-panel__intro {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2rem;
		margin-bottom: clamp(1.7rem, 2.5vw, 2.75rem);
	}
	.blitz-panel__eyebrow {
		display: block;
		margin-bottom: .45rem;
		font-family: var(--ff-mono);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: color-mix(in srgb, var(--ink) 62%, transparent);
	}
	.blitz-panel__heading {
		margin: 0;
		font-family: var(--ff-display);
		font-size: clamp(1.75rem, 2.4vw, 2.8rem);
		font-weight: 720;
		letter-spacing: -.045em;
		line-height: 1.02;
		color: var(--ink);
	}
	.blitz-panel__action {
		display: inline-flex;
		align-items: center;
		gap: .8rem;
		min-height: 52px;
		color: var(--ink);
		font-size: 1rem;
		font-weight: 750;
		text-decoration: none;
		white-space: nowrap;
	}
	.blitz-panel__action > span {
		display: grid;
		place-items: center;
		width: 50px;
		height: 50px;
		background: var(--accent);
		clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%);
	}
	.blitz-panel__action .blitz-menu-icon { width: 24px; height: 24px; transition: transform var(--t-fast) var(--ease); }
	.blitz-panel__action:hover .blitz-menu-icon { transform: translate(3px,-3px); }
	.blitz-panel__grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 clamp(1.25rem, 2.4vw, 2.5rem);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.blitz-panel--services .blitz-panel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.blitz-panel__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		color: var(--ink);
		text-decoration: none;
	}
	.blitz-panel__link:hover,
	.blitz-panel__link:focus-visible { background: transparent; border-color: transparent; }
	.blitz-panel__visual {
		display: grid;
		place-items: center;
		width: 100%;
		aspect-ratio: 2.15 / 1;
		margin-bottom: 1rem;
		overflow: hidden;
		background: color-mix(in srgb, var(--paper) 80%, var(--ink) 20%);
		color: var(--ink);
		transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
	}
	.blitz-panel__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform 320ms var(--ease), filter 220ms var(--ease); }
	.blitz-panel__visual .blitz-menu-icon { width: clamp(34px, 3.2vw, 54px); height: auto; }
	.blitz-panel__link:hover .blitz-panel__visual { background: var(--accent); }
	.blitz-panel__link:hover .blitz-panel__visual img { transform: scale(1.025); filter: saturate(1); }
	.blitz-panel--services .blitz-panel__visual { aspect-ratio: 2.5 / 1; background: color-mix(in srgb, var(--paper) 90%, var(--ink) 10%); }
	.blitz-panel--editorial .blitz-panel__cell:nth-child(1) .blitz-panel__visual { background: var(--wp--preset--color--marker); }
	.blitz-panel--editorial .blitz-panel__cell:nth-child(2) .blitz-panel__visual { background: color-mix(in srgb, var(--accent) 62%, var(--paper)); }
	.blitz-panel--editorial .blitz-panel__cell:nth-child(3) .blitz-panel__visual { background: var(--ink); color: var(--paper); }
	.blitz-panel__label-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: .8rem;
		min-height: 72px;
		padding: .15rem 0 .9rem;
		border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
	}
	.blitz-panel__title {
		display: block;
		margin: 0;
		font-family: var(--ff-display);
		font-size: clamp(1.25rem, 1.7vw, 2rem);
		font-weight: 740;
		letter-spacing: -.04em;
		line-height: 1.08;
		color: var(--ink);
	}
	.blitz-panel__desc { display: block; margin-top: .45rem; max-width: 30ch; color: color-mix(in srgb, var(--ink) 68%, transparent); font-size: .86rem; line-height: 1.4; }
	.blitz-panel__arrow { flex: 0 0 auto; color: var(--ink); transition: transform var(--t-fast) var(--ease); }
	.blitz-panel__link:hover .blitz-panel__arrow { transform: translate(3px,-3px); }
	.blitz-panel__cell.is-placeholder .blitz-panel__visual { border: 1px dashed color-mix(in srgb, var(--ink) 38%, transparent); background: transparent; }
	.blitz-panel__cell.is-placeholder .blitz-panel__title::after { content: " · editable"; color: color-mix(in srgb, var(--ink) 55%, transparent); font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
	.blitz-header__actions { display: flex; }
	.blitz-burger { display: none; }
}

.blitz-header__cta,
.blitz-drawer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	min-height: 58px;
	padding: .8rem 1.35rem;
	background: var(--accent);
	color: var(--ink);
	font-weight: 760;
	text-decoration: none;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.blitz-header__cta:hover { background: var(--paper); color: var(--ink); }
.blitz-drawer__cta:hover { background: var(--paper); color: var(--ink); }
.blitz-header__cta .blitz-menu-icon { width: 21px; height: 21px; }

@media (max-width: 1439px) and (min-width: 1200px) {
	.blitz-header__inner { grid-template-columns: minmax(190px, auto) 1fr auto; gap: 1.2rem; }
	.blitz-header__inner { height: 96px; }
	.blitz-header .blitz-panel { top: 96px; max-height: calc(100vh - 96px); }
	.blitz-header.is-condensed .blitz-panel { top: 82px; max-height: calc(100vh - 82px); }
	.blitz-header .blitz-logo img { height: 48px; }
	.blitz-nav__list { gap: .9rem; }
	.blitz-nav__link { font-size: .9rem; }
	.blitz-header__cta { padding-inline: 1rem; font-size: .86rem; }
}

/* --- Mobile/tablet: a deliberate two-screen menu -------------------- */
@media (max-width: 1199px) {
	.blitz-header__inner,
	.blitz-header.is-condensed .blitz-header__inner {
		grid-template-columns: 1fr auto;
		height: 88px;
		gap: 1rem;
	}
	.blitz-header .blitz-logo,
	.blitz-header.is-condensed .blitz-logo { grid-column: 1; }
	.blitz-header .blitz-logo img,
	.blitz-header.is-condensed .blitz-logo img { height: 43px; }
	.blitz-nav,
	.blitz-header__actions { display: none; }
	.blitz-burger {
		grid-column: 2;
		display: inline-flex;
		align-items: center;
		gap: .65rem;
		width: auto;
		height: 48px;
		margin: 0;
		padding: 0 .25rem 0 .75rem;
		color: var(--paper);
		font-family: var(--ff-display);
		font-weight: 720;
	}
	.blitz-burger__label { display: inline; }
	.blitz-burger__box { position: relative; width: 27px; height: 20px; }
	.blitz-burger__box span { position: absolute; left: 0; width: 27px; height: 2px; background: currentColor; transition: transform 220ms var(--ease), top 220ms var(--ease); }
	.blitz-burger__box span:first-child { top: 6px; }
	.blitz-burger__box span:last-child { top: 14px; }
	.blitz-burger[aria-expanded="true"] .blitz-burger__label { display: none; }
	.blitz-burger[aria-expanded="true"] .blitz-burger__box span:first-child { top: 10px; transform: rotate(45deg); }
	.blitz-burger[aria-expanded="true"] .blitz-burger__box span:last-child { top: 10px; transform: rotate(-45deg); }

	.blitz-drawer {
		display: flex;
		position: fixed;
		inset: 88px 0 0;
		z-index: 99;
		padding: 0;
		background: var(--ink);
		color: var(--paper);
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
	}
	body.blitz-no-scroll .blitz-header { background: var(--ink); border-bottom-color: color-mix(in srgb, var(--paper) 18%, transparent); backdrop-filter: none; }
	.blitz-drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease), transform 220ms var(--ease), visibility 0s; }
	.blitz-drawer__track { position: relative; width: 100%; height: 100%; overflow: hidden; }
	.blitz-drawer__screen {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		padding: clamp(1.3rem, 4vw, 2.2rem) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ink);
		transition: transform 260ms var(--ease), visibility 0s linear 260ms;
	}
	.blitz-drawer__screen--main { transform: translateX(0); visibility: visible; }
	.blitz-drawer__track.is-sub-open .blitz-drawer__screen--main { transform: translateX(-100%); visibility: hidden; }
	.blitz-drawer__screen--sub { transform: translateX(100%); visibility: hidden; }
	.blitz-drawer__screen--sub.is-active { transform: translateX(0); visibility: visible; transition: transform 260ms var(--ease), visibility 0s; }
	.blitz-drawer__list,
	.blitz-drawer__sublist { list-style: none; margin: 0; padding: 0; }
	.blitz-drawer__item { border-bottom: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); }
	.blitz-drawer__link,
	.blitz-drawer__sub-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		min-height: clamp(70px, 11vh, 92px);
		padding: .85rem 0;
		border: 0;
		background: transparent;
		color: var(--paper);
		font-family: var(--ff-display);
		font-size: clamp(1.45rem, 5.3vw, 2.2rem);
		font-weight: 720;
		letter-spacing: -.04em;
		line-height: 1.05;
		text-decoration: none;
		text-align: left;
		cursor: pointer;
	}
	.blitz-drawer__link .blitz-menu-icon,
	.blitz-drawer__sub-link > .blitz-menu-icon { flex: 0 0 auto; width: 25px; height: 25px; }
	.blitz-drawer__cta { align-self: flex-start; margin-top: auto; min-height: 64px; padding: 1rem 1.3rem; font-size: 1rem; }
	.blitz-drawer__back {
		display: inline-flex;
		align-items: center;
		gap: .55rem;
		align-self: flex-start;
		min-height: 48px;
		margin: -.35rem 0 1rem;
		padding: .35rem .5rem .35rem 0;
		border: 0;
		background: transparent;
		color: var(--paper);
		font-weight: 730;
		cursor: pointer;
	}
	.blitz-drawer__back .blitz-menu-icon { width: 21px; height: 21px; }
	.blitz-drawer__eyebrow { margin: 0 0 .45rem; color: color-mix(in srgb, var(--paper) 68%, transparent); font-family: var(--ff-mono); font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
	.blitz-drawer__heading { margin: 0 0 1.2rem; max-width: 16ch; color: var(--paper); font-family: var(--ff-display); font-size: clamp(1.7rem, 7vw, 2.6rem); font-weight: 720; letter-spacing: -.045em; line-height: 1; }
	.blitz-drawer__sublist li { border-bottom: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); }
	.blitz-drawer__sub-link { min-height: 68px; font-size: clamp(1.1rem, 4.5vw, 1.55rem); }
	.blitz-drawer__sub-link--all { color: var(--accent); font-weight: 790; }
	.blitz-drawer__sub-name { display: inline-flex; align-items: center; gap: .8rem; }
	.blitz-drawer__sub-name .blitz-menu-icon { width: 25px; height: 25px; color: color-mix(in srgb, var(--paper) 78%, transparent); }
}

@media (max-width: 430px) {
	.blitz-header__inner,
	.blitz-header.is-condensed .blitz-header__inner { height: 82px; }
	.blitz-header .blitz-logo img,
	.blitz-header.is-condensed .blitz-logo img { height: 36px; }
	.blitz-drawer { inset-block-start: 82px; }
	.blitz-drawer__screen { padding-top: 1.1rem; }
}

body.admin-bar .blitz-header-shell,
body.admin-bar .wp-block-template-part:has(> .blitz-header) { top: 32px; }
@media (max-width: 1199px) {
	body.admin-bar .blitz-drawer { inset-block-start: 120px; }
}
@media (max-width: 782px) {
	body.admin-bar .blitz-header-shell,
	body.admin-bar .wp-block-template-part:has(> .blitz-header) { top: 46px; }
	body.admin-bar .blitz-drawer { inset-block-start: 134px; }
}
@media (max-width: 430px) {
	body.admin-bar .blitz-drawer { inset-block-start: 128px; }
}
@media (max-width: 374px) {
	.blitz-header .blitz-logo img,
	.blitz-header.is-condensed .blitz-logo img { height: 33px; }
	.blitz-burger { padding-left: .35rem; }
	.blitz-burger__label { font-size: .85rem; }
	.blitz-drawer__link { font-size: 1.38rem; min-height: 67px; }
}

@media (prefers-reduced-motion: reduce) {
	.blitz-panel,
	.blitz-drawer,
	.blitz-drawer__screen,
	.blitz-nav__link::after { transition-duration: .01ms !important; }
}