/*
 * Zaaka — theme styles.
 * Tokens live in theme.json. This file holds what global styles cannot express:
 * block style variations, the motion layer, and the composed components
 * (marquee, hero glow, product mock, work cards).
 */

/* ------------------------------------------------------------------ base -- */

:root {
	--zk-measure: 60ch;
	--zk-ease: cubic-bezier(.22, .61, .27, 1);
	--zk-ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.zk-measure.zk-measure { max-width: var(--zk-measure); margin-left: 0; margin-right: auto; }
.zk-center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------- skip link -- */

.zaaka-skip-link:focus {
	background: var(--wp--preset--color--volt);
	color: var(--wp--preset--color--void);
	clip: auto !important; clip-path: none;
	display: block; font-size: var(--wp--preset--font-size--sm); font-weight: 700;
	height: auto; left: 1rem; top: 1rem; padding: .8rem 1.4rem;
	border-radius: 999px; text-decoration: none; width: auto; z-index: 100000;
}

/* ---------------------------------------------------------- focus states -- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--volt);
	outline-offset: 3px;
	border-radius: 2px;
}

.zk-light :where(a, button, input, select, textarea):focus-visible {
	outline-color: var(--wp--preset--color--moss);
}

/* ---------------------------------------------------------- block styles -- */

.is-style-eyebrow {
	display: flex; align-items: center; justify-content: flex-start; gap: .55rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.1rem;
}
.is-style-eyebrow::before {
	content: ""; width: 1.6rem; height: 2px; background: var(--wp--preset--color--volt);
}
.zk-dark .is-style-eyebrow { color: var(--wp--preset--color--mist); }

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	height: 100%;
	transition: transform .35s var(--zk-ease-out), box-shadow .35s var(--zk-ease-out), border-color .25s;
}
.wp-block-group.is-style-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--ink);
	box-shadow: var(--wp--preset--shadow--lift);
}

.wp-block-group.is-style-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--30);
	height: 100%;
	transition: transform .35s var(--zk-ease-out), border-color .25s, background .25s;
}
.wp-block-group.is-style-panel:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--volt);
	background: var(--wp--preset--color--surface-2);
}

.wp-block-list.is-style-ticks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-ticks li { padding-left: 1.7rem; position: relative; margin-bottom: .5rem; }
.wp-block-list.is-style-ticks li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: .72rem; height: .38rem;
	border-left: 2px solid var(--wp--preset--color--volt);
	border-bottom: 2px solid var(--wp--preset--color--volt);
	transform: rotate(-45deg);
}

.is-style-measure.is-style-measure { max-width: 18ch; margin-left: 0; margin-right: auto; }

/* Highlighted words inside a heading. */
.zk-mark {
	background-image: linear-gradient(transparent 62%, rgba(203, 249, 76, .55) 62%);
	background-repeat: no-repeat;
}
.zk-dark .zk-mark { color: var(--wp--preset--color--volt); background-image: none; }

/* ----------------------------------------------------------------- logo -- */

.zk-logo {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	line-height: 0;
}

.zk-logo svg {
	width: 118px;
	height: auto;
	display: block;
	transition: color .25s var(--zk-ease);
}

.zk-logo:hover svg { color: var(--wp--preset--color--volt); }

.zk-light .zk-logo { color: var(--wp--preset--color--ink); }

.zk-logo--footer svg { width: 132px; }

@media (max-width: 480px) {
	.zk-logo svg { width: 100px; }
}

/* Screen-reader text, in case the theme runs without core's utility class. */
.screen-reader-text {
	border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* --------------------------------------------------------------- header -- */

.zk-header {
	position: sticky; top: 0; z-index: 60;
	background: rgba(7, 8, 10, .92);
	backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.zk-header .wp-block-site-title a { color: var(--wp--preset--color--paper); text-decoration: none; }

/* Core's navigation stylesheet ships
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
    { color: inherit }`
   — the class is deliberately doubled, giving it specificity (0,3,0), which
   beats any descendant rule written against `a`. Left alone it makes every
   link take the inherited root text colour (ink) on a void header: 1.08:1,
   effectively invisible. So the colour is set on the navigation container,
   which `inherit` then resolves to, AND on the item content at matching
   specificity. Belt and braces, because core has changed this selector before. */
.zk-header .wp-block-navigation,
.zk-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--mist);
}
.zk-header .wp-block-navigation a {
	text-decoration: none;
	padding-block: .3rem; position: relative;
}
.zk-header .wp-block-navigation a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
	background: var(--wp--preset--color--volt); transition: right .3s var(--zk-ease-out);
}
.zk-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.zk-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--paper);
}
.zk-header .wp-block-navigation a:hover::after,
.zk-header .wp-block-navigation a:focus-visible::after { right: 0; }

/* The hamburger and close buttons inherit currentColor for their fill, which
   would be ink on a dark header for the same reason as above. */
.zk-header .wp-block-navigation__responsive-container-open,
.zk-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--paper);
}

/* The mobile overlay: core gives the open container `background-color: inherit`,
   which on this header resolves to transparent over the page beneath. Set the
   ground and the text explicitly so the overlay is never dark-on-dark. */
.zk-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--void);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
.zk-header .wp-block-navigation__responsive-container.is-menu-open,
.zk-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
}
.zk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.1rem;
}

/* ----------------------------------------------------------------- hero -- */

.zk-hero { position: relative; isolation: isolate; overflow: hidden; }
.zk-hero::before {
	content: ""; position: absolute; inset: -30% -10% auto -10%; height: 130%;
	background:
		radial-gradient(46% 52% at 18% 8%, rgba(203, 249, 76, .20), transparent 62%),
		radial-gradient(40% 46% at 84% 22%, rgba(255, 106, 61, .16), transparent 64%),
		radial-gradient(60% 60% at 50% 100%, rgba(33, 39, 52, .9), transparent 70%);
	z-index: -1;
	animation: zk-drift 22s var(--zk-ease) infinite alternate;
}
.zk-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
	                  linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%);
}
@keyframes zk-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}

.zk-hero h1 { max-width: 16ch; }

.zk-scroll-cue {
	display: flex; align-items: center; justify-content: flex-start; gap: .6rem;
	font-size: var(--wp--preset--font-size--xs); letter-spacing: .14em;
	text-transform: uppercase; color: var(--wp--preset--color--mist);
}
.zk-scroll-cue::after {
	content: ""; width: 1px; height: 2.4rem;
	background: linear-gradient(var(--wp--preset--color--volt), transparent);
	animation: zk-cue 2.2s ease-in-out infinite;
	transform-origin: top;
}
@keyframes zk-cue { 0%,100% { transform: scaleY(.35); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }

/* -------------------------------------------------------------- marquee -- */

.zk-marquee {
	overflow: hidden; position: relative;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	padding-block: 1.1rem;
}
.zk-marquee__track {
	display: flex; width: max-content; gap: 0;
	animation: zk-scroll 38s linear infinite;
}
.zk-marquee:hover .zk-marquee__track { animation-play-state: paused; }
.zk-marquee__item {
	display: inline-flex; align-items: center; gap: 2.6rem;
	padding-right: 2.6rem; white-space: nowrap;
	font-size: var(--wp--preset--font-size--lg); font-weight: 600;
	letter-spacing: -.02em; color: var(--wp--preset--color--mist);
}
.zk-marquee__item::after {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--wp--preset--color--volt); flex: none;
}
@keyframes zk-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* ---------------------------------------------------------- numbered UI -- */

.zk-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm); font-weight: 700;
	letter-spacing: .08em; color: var(--wp--preset--color--volt);
	display: block; margin-bottom: .9rem;
}
.zk-light .zk-num { color: var(--wp--preset--color--moss); }

.zk-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl); font-weight: 800;
	line-height: 1; letter-spacing: -.045em;
}

/* -------------------------------------------------------- product mock --- */

.zk-mock {
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 14px; overflow: hidden;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
	transition: transform .6s var(--zk-ease-out);
}
.zk-mock:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
.zk-mock__bar {
	display: flex; gap: .4rem; align-items: center;
	padding: .7rem .9rem; border-bottom: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--surface-2);
}
.zk-mock__dot { width: 8px; height: 8px; border-radius: 50%; background: #3A4353; }
.zk-mock__body { padding: 1.1rem; display: grid; gap: .75rem; }
.zk-mock__row {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
	padding: .7rem .85rem; border-radius: 9px; background: rgba(255, 255, 255, .035);
	font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--mist);
}
.zk-mock__pill {
	font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: .22rem .6rem; border-radius: 999px;
	background: rgba(203, 249, 76, .16); color: var(--wp--preset--color--volt);
}
.zk-mock__pill--warn { background: rgba(255, 106, 61, .18); color: var(--wp--preset--color--coral); }
.zk-mock__chart { display: flex; align-items: flex-end; gap: .35rem; height: 62px; padding: 0 .2rem; }
.zk-mock__chart i {
	flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--wp--preset--color--volt), rgba(203, 249, 76, .25));
	display: block;
}

/* ----------------------------------------------------------- work cards -- */

/* Each project is one editorial card: a fixed-ratio image, a quiet meta line,
   the title, a measured excerpt, and a single explicit affordance. The ratio
   is enforced so a mixed-size media library cannot make the row ragged, and
   the whole card shares one hover state so it reads as a single target. */

.zk-work .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(27rem, 100%), 1fr));
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--60);
	margin: 0; padding: 0; list-style: none;
}
.zk-work .wp-block-post-template > li {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	margin: 0;
}

.zk-work .wp-block-post-featured-image {
	width: 100%; margin: 0 0 1.4rem;
	overflow: hidden; border-radius: 14px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--chalk);
	transition: transform .5s var(--zk-ease-out), box-shadow .5s var(--zk-ease-out),
	            border-color .5s;
}
.zk-work .wp-block-post-featured-image a,
.zk-work .wp-block-post-featured-image img { display: block; width: 100%; }
.zk-work .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10; object-fit: cover;
	transition: transform .8s var(--zk-ease-out);
}
.zk-work li:hover .wp-block-post-featured-image {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--muted);
	box-shadow: var(--wp--preset--shadow--lift);
}
.zk-work li:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.zk-dark .wp-block-post-featured-image,
.zk-work.zk-dark .wp-block-post-featured-image {
	border-color: var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--surface);
}

/* Meta line. Core renders taxonomy terms as links; underlined small caps read
   as clutter directly above a large title, so the underline is earned on hover. */
.zk-work .wp-block-post-terms {
	margin: 0 0 .7rem;
	color: var(--wp--preset--color--muted);
}
.zk-work .wp-block-post-terms a { text-decoration: none; color: inherit; }
.zk-work .wp-block-post-terms a:hover { color: var(--wp--preset--color--moss); }
.zk-work .wp-block-post-terms .wp-block-post-terms__separator { opacity: .45; }

.zk-work .wp-block-post-title { margin: 0 0 .6rem; }
.zk-work .wp-block-post-title a { text-decoration: none; }
.zk-work li:hover .wp-block-post-title a { color: var(--wp--preset--color--moss); }

.zk-work .wp-block-post-excerpt { margin: 0; }
.zk-work .wp-block-post-excerpt__excerpt {
	display: block; max-width: 46ch;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.1rem;
}
.zk-dark .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--mist); }

/* The single affordance per card. The arrow carries the motion so the label
   itself stays still and legible. */
.zk-work .wp-block-post-excerpt__more-link {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
	text-decoration: none; color: var(--wp--preset--color--ink);
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: color .3s, border-color .3s;
}
.zk-work .wp-block-post-excerpt__more-link::after {
	content: "→"; font-size: 1.05em; line-height: 1;
	transition: transform .35s var(--zk-ease-out);
}
.zk-work li:hover .wp-block-post-excerpt__more-link,
.zk-work .wp-block-post-excerpt__more-link:focus-visible {
	color: var(--wp--preset--color--moss);
	border-bottom-color: var(--wp--preset--color--moss);
}
.zk-work li:hover .wp-block-post-excerpt__more-link::after { transform: translateX(5px); }
.zk-dark .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--paper);
	border-bottom-color: var(--wp--preset--color--hairline);
}
.zk-dark .zk-work li:hover .wp-block-post-excerpt__more-link,
.zk-work.zk-dark li:hover .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--volt);
	border-bottom-color: var(--wp--preset--color--volt);
}

/* The card body fills the remaining height so every "View case study" lands on
   one line across the row, however long the individual excerpts run. */
.zk-work .wp-block-post-excerpt {
	width: 100%; flex: 1;
	display: flex; flex-direction: column; align-items: flex-start;
}
.zk-work .wp-block-post-excerpt__more-text { margin: auto 0 0; }
/* Doubled class: WordPress's constrained-layout rule sets `margin-inline: auto`
   on children at the same specificity and prints later, which would centre the
   section header instead of leaving it on the left edge. */
.zk-work__title.zk-work__title {
	flex: 1 1 auto; max-width: 42ch;
	margin-left: 0; margin-right: auto;
}
.zk-work__title > * { margin-left: 0; margin-right: auto; }

/* Section header: title left, archive link right, sharing one baseline. */
.zk-work__head { margin-bottom: var(--wp--preset--spacing--50); }
.zk-work__head .wp-block-heading { margin: 0; }
.zk-work__all a {
	text-decoration: none; font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .12em; text-transform: uppercase;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: .35rem; transition: color .3s, border-color .3s;
}
.zk-work__all a:hover {
	color: var(--wp--preset--color--moss);
	border-bottom-color: var(--wp--preset--color--moss);
}

@media (max-width: 781px) {
	.zk-work .wp-block-post-template { row-gap: var(--wp--preset--spacing--50); }
}

/* ------------------------------------------------------- narrow screens -- */

/* WordPress generates `repeat(auto-fill, minmax(<minimumColumnWidth>, 1fr))`
   for grid layouts. `minmax()` never goes below its floor, so a 23rem column
   overflows a 390px viewport instead of reflowing — measured at 368px wide
   inside 278px of available width. The class is doubled to out-specify the
   generated `.wp-container-core-*-is-layout-*` rule without !important. */
@media (max-width: 600px) {
	.is-layout-grid.is-layout-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ case study -- */

/* The page opens on a dark band and the featured image is pulled up so it
   straddles the boundary. That overlap is what stops a case study reading as
   a title with a picture under it. */

.zk-case { padding-top: 0; }

.zk-case__hero {
	position: relative; isolation: isolate; overflow: hidden;
	background: var(--wp--preset--color--void);
}
.zk-case__hero::before {
	content: ""; position: absolute; inset: -40% -10% auto -10%; height: 150%;
	background:
		radial-gradient(42% 48% at 14% 4%, rgba(203, 249, 76, .17), transparent 62%),
		radial-gradient(38% 44% at 88% 18%, rgba(255, 106, 61, .13), transparent 64%);
	z-index: -1;
}
.zk-case__eyebrow { margin-bottom: 1.6rem; }
.zk-case__eyebrow .wp-block-post-terms { margin: 0; color: var(--wp--preset--color--mist); }
.zk-case__eyebrow .wp-block-post-terms a { text-decoration: none; color: inherit; }
.zk-case__eyebrow .wp-block-post-terms a:hover { color: var(--wp--preset--color--volt); }

.zk-case__title.zk-case__title {
	margin: 0; max-width: 16ch;
	color: var(--wp--preset--color--paper);
}
.zk-case__lede.zk-case__lede {
	margin: 1.6rem 0 0; max-width: 54ch;
	color: var(--wp--preset--color--mist);
	line-height: 1.5; letter-spacing: -.012em;
}

/* Pulled up into the dark band above. The hero carries matching bottom padding
   so the overlap is a designed gap, not a collision. */
.zk-case__media.zk-case__media {
	margin-top: calc(-1 * var(--wp--preset--spacing--60));
	margin-bottom: var(--wp--preset--spacing--50);
	border-radius: 16px; overflow: hidden;
	border: 1px solid var(--wp--preset--color--hairline);
	box-shadow: 0 30px 80px rgba(7, 8, 10, .28);
	background: var(--wp--preset--color--surface);
}
.zk-case__media img { display: block; width: 100%; object-fit: cover; }

/* Body: one measured column with real vertical rhythm. Headings get space
   above rather than below, so each section reads as a block. */
.zk-case__body > * { margin-top: 1.15rem; margin-bottom: 0; }
.zk-case__body > h2 {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.6rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--xxl);
}
.zk-case__body > h3 { margin-top: var(--wp--preset--spacing--30); }
.zk-case__body > :first-child { margin-top: 0; }
.zk-case__body > p { color: var(--wp--preset--color--ink); }
.zk-case__body > ul, .zk-case__body > ol { margin-top: 1.4rem; }
.zk-case__body li { margin-bottom: .85rem; }

/* Pull-quote. The one place in a case study where a claim gets to stand alone. */
.zk-case__body blockquote {
	margin: var(--wp--preset--spacing--40) 0;
	padding: 0 0 0 var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--volt);
}
.zk-case__body blockquote p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.32; letter-spacing: -.02em;
	color: var(--wp--preset--color--ink); margin: 0;
}
.zk-case__body code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: .88em;
	background: var(--wp--preset--color--chalk);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 5px; padding: .12em .4em;
}

/* Closing prompt. */
.zk-case__next { border-top: 1px solid var(--wp--preset--color--line); }
.zk-case__next .wp-block-heading { margin: 0; max-width: 26ch; }

.zk-case__more { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--50); }

/* Related work at the foot of a case study is usually a single card, which
   would leave half the row empty in the two-up grid. It runs horizontally
   instead, so one item still completes the line. */
.zk-case__more .wp-block-post-template { grid-template-columns: 1fr; row-gap: var(--wp--preset--spacing--40); }
.zk-case__more .wp-block-post-template > li {
	display: grid; align-content: center;
	grid-template-columns: minmax(0, 22rem) 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--wp--preset--spacing--40);
}
/* Explicit placement: the post template emits three siblings, so without it the
   title wraps under the image instead of stacking beside it. */
.zk-case__more .wp-block-post-template > li > .wp-block-post-featured-image {
	grid-column: 1; grid-row: 1 / span 2; align-self: center;
}
.zk-case__more .wp-block-post-template > li > .wp-block-post-terms {
	grid-column: 2; grid-row: 1; align-self: end;
}
.zk-case__more .wp-block-post-template > li > .wp-block-post-title {
	grid-column: 2; grid-row: 2; align-self: start;
}
.zk-case__more .wp-block-post-featured-image { margin-bottom: 0; }
.zk-case__more .wp-block-post-terms { margin-bottom: .5rem; }
.zk-case__more .wp-block-post-title { margin: 0; }
@media (max-width: 781px) {
	.zk-case__more .wp-block-post-template > li { grid-template-columns: 1fr; row-gap: 1.2rem; }
	.zk-case__more .wp-block-post-template > li > * { grid-column: 1; grid-row: auto; }
}

@media (max-width: 781px) {
	.zk-case__media.zk-case__media {
		margin-top: calc(-1 * var(--wp--preset--spacing--50));
		border-radius: 12px;
	}
	.zk-case__title.zk-case__title { max-width: none; }
}

/* ---------------------------------------------------------- sectors band -- */

/* This band sits between two light sections. On chalk it read as an accidental
   seam rather than a change of gear, so it carries the dark ground and the
   same faint grid as the hero — the page alternates instead of drifting. */
.zk-sectors { position: relative; isolation: isolate; overflow: hidden; }
.zk-sectors::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image:
		linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
	background-size: 78px 78px;
	mask-image: radial-gradient(70% 80% at 70% 30%, #000 20%, transparent 78%);
}
.zk-sectors::after {
	content: ""; position: absolute; inset: auto -12% -55% 42%; height: 90%; z-index: -1;
	background: radial-gradient(50% 50% at 50% 50%, rgba(203, 249, 76, .13), transparent 68%);
}
.zk-sectors .wp-block-columns { align-items: center; }
.zk-sectors__note { color: var(--wp--preset--color--mist); }
.zk-sectors__note a { color: var(--wp--preset--color--volt); text-decoration: none; border-bottom: 1px solid rgba(203,249,76,.4); }
.zk-sectors__note a:hover { border-bottom-color: var(--wp--preset--color--volt); }

/* ------------------------------------------------------------- the steps -- */

.zk-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}
.zk-step {
	position: relative;
	padding-top: 1.7rem;
	border-top: 1px solid var(--wp--preset--color--line);
}
/* Every step gets the same volt tick. Previously only the fourth had a volt
   rule, which read as an accident rather than emphasis. On hover the tick
   runs the width of the column. */
.zk-step::before {
	content: ""; position: absolute; top: -2px; left: 0;
	width: 2.6rem; height: 3px; background: var(--wp--preset--color--volt);
	transition: width .55s var(--zk-ease-out);
}
.zk-step:hover::before { width: 100%; }

/* A ghost numeral gives the column weight without competing with the title. */
.zk-step .zk-num {
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800; letter-spacing: -.04em; line-height: 1;
	color: var(--wp--preset--color--muted);
	margin-bottom: .7rem;
	transition: color .4s;
}
.zk-step:hover .zk-num { color: var(--wp--preset--color--moss); }
.zk-step h3 { margin: 0 0 .6rem; }
.zk-step p { margin: 0; }

.zk-process__head { margin-bottom: 0; }
.zk-process__title.zk-process__title {
	flex: 1 1 auto; max-width: 30ch; margin-left: 0; margin-right: auto;
}
.zk-process__title .wp-block-heading { margin: 0; }
.zk-process__aside { max-width: 26ch; text-align: right; margin: 0; }

@media (max-width: 781px) {
	.zk-process__aside { text-align: left; }
	.zk-step::before { width: 100%; }
}

/* --------------------------------------------------------- sector chips -- */

.zk-chips { display: flex; flex-wrap: wrap; gap: .7rem; }
.zk-chips span {
	display: inline-flex; align-items: center; gap: .55rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px; padding: .72rem 1.3rem;
	background: rgba(255, 255, 255, .022);
	font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--mist);
	transition: border-color .3s, color .3s, background .3s,
	            transform .35s var(--zk-ease-out);
}
.zk-chips span::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--wp--preset--color--hairline);
	transition: background .3s, transform .35s var(--zk-ease-out);
}
.zk-chips span:hover {
	border-color: var(--wp--preset--color--volt); color: var(--wp--preset--color--paper);
	background: rgba(203, 249, 76, .07);
	transform: translateY(-3px);
}
.zk-chips span:hover::before { background: var(--wp--preset--color--volt); transform: scale(1.6); }

/* The chips arrive in sequence rather than all at once — the band is a list of
   twelve things, and staggering it is what makes that read as considered. */
.zk-js .zk-chips--stagger span { opacity: 0; transform: translateY(10px); }
.zk-js .zk-chips--stagger.is-in span {
	opacity: 1; transform: none;
	transition: opacity .5s var(--zk-ease-out), transform .5s var(--zk-ease-out),
	            border-color .3s, color .3s, background .3s;
}
.zk-js .zk-chips--stagger.is-in span:nth-child(1)  { transition-delay: .00s }
.zk-js .zk-chips--stagger.is-in span:nth-child(2)  { transition-delay: .04s }
.zk-js .zk-chips--stagger.is-in span:nth-child(3)  { transition-delay: .08s }
.zk-js .zk-chips--stagger.is-in span:nth-child(4)  { transition-delay: .12s }
.zk-js .zk-chips--stagger.is-in span:nth-child(5)  { transition-delay: .16s }
.zk-js .zk-chips--stagger.is-in span:nth-child(6)  { transition-delay: .20s }
.zk-js .zk-chips--stagger.is-in span:nth-child(7)  { transition-delay: .24s }
.zk-js .zk-chips--stagger.is-in span:nth-child(8)  { transition-delay: .28s }
.zk-js .zk-chips--stagger.is-in span:nth-child(9)  { transition-delay: .32s }
.zk-js .zk-chips--stagger.is-in span:nth-child(10) { transition-delay: .36s }
.zk-js .zk-chips--stagger.is-in span:nth-child(11) { transition-delay: .40s }
.zk-js .zk-chips--stagger.is-in span:nth-child(12) { transition-delay: .44s }
.zk-light .zk-chips span { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--muted); }
.zk-light .zk-chips span:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }

/* -------------------------------------------------------------- meta ----- */

.zk-meta {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.zk-dark .zk-meta { color: var(--wp--preset--color--mist); }

.zk-status {
	display: inline-block; border-radius: 999px;
	padding: .28rem .8rem;
	font-size: var(--wp--preset--font-size--xs); font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	background: rgba(255, 106, 61, .14); color: var(--wp--preset--color--ember);
	border: 1px solid rgba(255, 106, 61, .35);
	margin: 0;
}
.zk-status:empty { display: none; }
.zk-dark .zk-status { color: var(--wp--preset--color--coral); }

/* -------------------------------------------------------- button variant - */

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--paper);
	border: 1px solid rgba(255, 255, 255, .28);
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .08); border-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}
.zk-light .wp-block-button.is-style-ghost .wp-block-button__link {
	color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink);
}
.zk-light .wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------- reveals --- */

.zk-js .zk-reveal { opacity: 0; transform: translateY(22px); }
.zk-js .zk-reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity .7s var(--zk-ease-out), transform .7s var(--zk-ease-out);
}

/* -------------------------------------------------------------- footer --- */

/* Footer link lists are navigation, not prose: markers and the default list
   indent read as an unfinished list rather than a menu. */
.zk-footer .wp-block-list {
	list-style: none;
	margin: 0; padding: 0;
}
.zk-footer .wp-block-list li { margin: 0 0 .55rem; }
.zk-footer .wp-block-list li:last-child { margin-bottom: 0; }
.zk-footer .zk-meta { margin-bottom: 1.1rem; }

.zk-footer a { text-decoration: none; color: var(--wp--preset--color--mist); }
.zk-footer a:hover { color: var(--wp--preset--color--volt); }

/* Inline links in the footer meta line sit inside running text, so grouping
   and position cannot signal that they are links. They carry an underline. */
.zk-footer .zk-meta a {
	text-decoration: underline;
	text-underline-offset: .28em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(167, 176, 192, .55);
}
.zk-footer .zk-meta a:hover,
.zk-footer .zk-meta a:focus-visible {
	color: var(--wp--preset--color--volt);
	text-decoration-color: currentColor;
}

/* -------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.zk-marquee__track, .zk-hero::before, .zk-scroll-cue::after { animation: none !important; }
	.zk-js .zk-reveal { opacity: 1 !important; transform: none !important; }
	.zk-js .zk-chips--stagger span { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.zk-header, .zk-footer, .wp-block-buttons, .zk-marquee { display: none; }
}