/* ==========================================================================
   The Invaders — global styles
   Tokens, fonts, base, typography, buttons, cards, header, footer,
   background and motion. Block-specific layout lives in blocks/{name}/style.css.
   ========================================================================== */

/* ─── Tokens ─────────────────────────────────────────────────────────────── */

:root {
	--wsi-bg:       #D8D8D8;
	--wsi-ink:      #000;
	--wsi-ink-2:    #1F1F1F;
	--wsi-header:   #DCDCDC;
	--wsi-paper:    #F2F2F2;
	--wsi-field:    #F1F1F1;
	--wsi-muted:    #777;

	--wsi-font:      'Futura', system-ui, sans-serif;
	--wsi-font-cond: 'Futura Cond', 'Futura', system-ui, sans-serif;

	--wsi-radius:     10px;
	--wsi-radius-btn: 8px;
	--wsi-gutter:     20px;
	--wsi-gap:        10px;
	--wsi-ease:       cubic-bezier(.2, .7, .2, 1);
	--wsi-ease-out:   cubic-bezier(.16, 1, .3, 1);

	/* Letter spacing: one scale for the whole site. */
	--wsi-ls-head:    0;      /* condensed headings and card titles */
	--wsi-ls-text:    .02em;  /* running text, pills, meta */
	--wsi-ls-caps:    .05em;  /* small uppercase titles in the text font, buttons */
	--wsi-ls-label:   .1em;   /* eyebrows, kickers, nav and footer links */
}
@media (min-width: 768px)  { :root { --wsi-gutter: 40px; } }
@media (min-width: 1024px) { :root { --wsi-gutter: 100px; } }

/* ─── Fonts ──────────────────────────────────────────────────────────────────
   Futura LT Pro. The original site only defines Medium (500) and Bold
   Condensed (700); lighter weights use Medium, heavier ones Bold Condensed. */

@font-face {
	font-family: 'Futura';
	src: url('../../fonts/futuraltpro_medium_webfont.woff2') format('woff2');
	font-weight: 100 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Futura';
	src: url('../../fonts/futuraltpro_boldcond_webfont.woff2') format('woff2'),
	     url('../../fonts/futuraltpro_boldcond_webfont.woff') format('woff');
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Futura';
	src: url('../../fonts/futura_light_italic_font_webfont.woff2') format('woff2');
	font-weight: 100 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Futura';
	src: url('../../fonts/futura_medium_italic_font_webfont.woff2') format('woff2');
	font-weight: 500 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Futura Cond';
	src: url('../../fonts/futuraltpro_boldcond_webfont.woff2') format('woff2'),
	     url('../../fonts/futuraltpro_boldcond_webfont.woff') format('woff');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

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

html, body { overflow-x: clip; }

body {
	margin: 0;
	background-color: var(--wsi-bg);
	color: var(--wsi-ink);
	font-family: var(--wsi-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: var(--wsi-ls-text);
	-webkit-font-smoothing: antialiased;
}

/* Dotted pixel pattern — CSS fallback under the canvas background. */
body.wsi-bg-pixel {
	background-image:
		radial-gradient(circle at 0 0, rgb(207, 210, 209) 1px, transparent 1.5px),
		linear-gradient(to bottom, rgba(0, 0, 0, .042) .5px, transparent .5px),
		linear-gradient(to right, rgba(0, 0, 0, .042) .5px, transparent .5px),
		radial-gradient(ellipse 60% 45% at 15% 0%, rgba(255, 255, 255, .55), transparent 70%),
		radial-gradient(ellipse 50% 40% at 90% 55%, rgba(255, 255, 255, .4), transparent 70%),
		radial-gradient(ellipse 45% 35% at 40% 100%, rgba(255, 255, 255, .3), transparent 70%);
	background-size: 22px 22px, 22px 22px, 22px 22px, 100% 100%, 100% 100%, 100% 100%;
	background-attachment: fixed;
}
body.wsi-bg-video {
	background-color: #000;
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	letter-spacing: var(--wsi-ls-head);
}
p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* Content above the fixed background canvases. */
.wp-site-blocks {
	position: relative;
	z-index: 2;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.wsi-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--wsi-gutter);
}
.wsi-section {
	padding-block: 100px 40px;
}
@media (min-width: 1024px) {
	.wsi-section { padding-block: 120px 60px; }
}
/* Consecutive sections: the previous one's bottom padding is the gap. */
.wsi-section + .wsi-section { padding-top: 0; }
.wsi-bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* First block of a page clears the fixed header. */
.wsi-page-content > :first-child:not(.wsi-section):not(.wsi-hero-headline) { padding-top: 120px; }

/* News article / job: 800px column (text 750px). */
.wsi-article {
	max-width: calc(800px + 2 * var(--wsi-gutter));
	padding-block: 40px 60px;
}
.wsi-article .wsi-prose { max-width: 750px; }
.wsi-article--job { padding-bottom: 100px; }

/* Case content: text in a 760px column, case blocks up to 1040px,
   hero media and carousels full-bleed. */
.wsi-case { padding-bottom: 40px; }
.wsi-case-content > * {
	max-width: 1040px;
	margin-block: 48px 0;
}
.wsi-case-content > .wsi-bleed { max-width: none; }
.wsi-case-content > :is(p, h2, h3, h4, ul, ol, blockquote, .wp-block-embed, .wp-block-image) { max-width: 760px; }
.wsi-case-content > p,
.wsi-case-content li { font-size: 15px; line-height: 1.67; letter-spacing: var(--wsi-ls-text); }
.wsi-case-content > p + p,
.wsi-case-content > :is(h2, h3) + p { margin-top: 1.2em; }
.wsi-case-content > :is(h2, h3) {
	margin-top: 1.4em;
	font-family: var(--wsi-font-cond);
	font-size: 22px;
	line-height: 1.05;
	text-transform: uppercase;
}
.wsi-case-content > .wsi-case-hero { margin-top: 32px; }
.wsi-case-content > .wsi-case-info { margin-top: 48px; }
.wsi-case-content img { height: auto; border-radius: var(--wsi-radius); }
.wsi-case-content iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--wsi-radius); }
.wsi-case-title {
	font-family: var(--wsi-font-cond);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
}
@media (min-width: 1024px) {
	.wsi-case-content > * { margin-top: 80px; }
	.wsi-case-content > p,
	.wsi-case-content li { font-size: 18px; line-height: 1.75; }
	.wsi-case-content > p + p,
	.wsi-case-content > :is(h2, h3) + p { margin-top: 1.5em; }
	.wsi-case-content > :is(h2, h3) { font-size: 40px; }
	.wsi-case-title { font-size: 40px; }
}

/* ─── Typography ─────────────────────────────────────────────────────────── */

.wsi-h-display,
.wsi-h-page,
.wsi-h-section,
.wsi-h2,
.wsi-h3 {
	font-family: var(--wsi-font-cond);
	font-weight: 700;
	letter-spacing: var(--wsi-ls-head);
	text-transform: uppercase;
}
.wsi-h-display { font-size: 50px; line-height: 1.08; }
.wsi-h-page    { font-size: 26px; line-height: 1.23; }
.wsi-h-section { font-size: 30px; line-height: 1.13; }
.wsi-h2        { font-size: 26px; line-height: 1.23; }
.wsi-h3        { font-size: 22px; line-height: 1.18; }
@media (min-width: 1024px) {
	.wsi-h-display { font-size: min(80px, calc((100vw - 200px) / 10.6)); line-height: 1; }
	.wsi-h-page    { font-size: 64px; line-height: 1; }
	.wsi-h-section { font-size: 50px; line-height: 1.08; }
	.wsi-h2        { font-size: 40px; line-height: 1.1; }
	.wsi-h3        { font-size: 30px; line-height: 1.13; }
}

.wsi-eyebrow {
	font-size: 13px;
	line-height: 1.5;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--wsi-ls-label);
}
@media (min-width: 1024px) { .wsi-eyebrow { font-size: 14px; } }

.wsi-lead {
	font-size: 15px;
	line-height: 2;
	letter-spacing: var(--wsi-ls-text);
}
@media (min-width: 1024px) { .wsi-lead { font-size: 24px; } }
.wsi-lead p + p { margin-top: 1em; }

.wsi-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	font-size: 12px;
	line-height: 1.5;
	font-weight: 500;
}
.wsi-meta span { display: inline-flex; align-items: center; gap: 6px; }
.wsi-meta svg { width: 12px; height: 12px; fill: currentColor; }

.wsi-breadcrumbs {
	font-size: 14px;
	line-height: 24px;
}
.wsi-breadcrumbs a { text-decoration: none; }
.wsi-breadcrumbs a:hover { text-decoration: underline; }

/* Rich text (WYSIWYG / post content). */
.wsi-prose > * + * { margin-top: 1em; }
.wsi-prose p,
.wsi-prose li { font-size: 15px; line-height: 1.67; letter-spacing: var(--wsi-ls-text); }
.wsi-prose h2,
.wsi-prose h3,
.wsi-prose h4 {
	margin-top: 1.1em;
	font-family: var(--wsi-font-cond);
	font-size: 22px;
	line-height: 1.3;
	text-transform: uppercase;
}
.wsi-prose h2 + *,
.wsi-prose h3 + *,
.wsi-prose h4 + * { margin-top: 1em; }
.wsi-prose a { text-underline-offset: 2px; }
.wsi-prose ul,
.wsi-prose ol { margin-block: 0; padding-left: 40px; }
.wsi-prose img,
.wsi-prose video { border-radius: var(--wsi-radius); }
.wsi-prose iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--wsi-radius);
}
.wsi-prose blockquote {
	margin-inline: 0;
	padding-left: 24px;
	border-left: 2px solid currentColor;
	font-family: var(--wsi-font-cond);
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
}
.wsi-prose figure { margin-inline: 0; }
@media (min-width: 1024px) {
	.wsi-prose p,
	.wsi-prose li { font-size: 18px; line-height: 1.75; }
	.wsi-prose blockquote { font-size: 32px; }
}

/* Large-type prose: legal pages, job bodies. */
.wsi-prose--lg p,
.wsi-prose--lg li { font-size: 16px; line-height: 2; }
.wsi-prose--lg h2,
.wsi-prose--lg h3 { font-size: 22px; line-height: 1.18; }
@media (min-width: 1024px) {
	.wsi-prose--lg p,
	.wsi-prose--lg li { font-size: 24px; }
	.wsi-prose--lg h2,
	.wsi-prose--lg h3 { font-size: 30px; line-height: 1.13; }
}

/* News article: a bold first paragraph becomes the lead. */
.wsi-prose--post > p:first-child:has(> strong:only-child) { font-size: 20px; line-height: 1.35; }
@media (min-width: 1024px) {
	.wsi-prose--post > p:first-child:has(> strong:only-child) { font-size: 26px; }
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.wsi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 22px;
	border: 1px solid var(--wsi-ink-2);
	border-radius: var(--wsi-radius-btn);
	background: var(--wsi-ink);
	color: #fff;
	font-family: var(--wsi-font-cond);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wsi-ls-caps);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .3s ease;
}
.wsi-btn:hover { background: var(--wsi-ink-2); }
.wsi-btn::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-left: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.64 23.64'%3E%3Cpolygon points='23.64 22.34 19.97 22.34 19.97 3.67 1.3 3.67 1.3 0 23.64 0 23.64 22.34'/%3E%3Crect x='.72' y='19.12' width='3.92' height='3.67' transform='translate(-14.03 8.04) rotate(-45)'/%3E%3Crect x='7.07' y='6.1' width='17.26' height='3.67' transform='translate(-1.01 13.43) rotate(-45)'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.64 23.64'%3E%3Cpolygon points='23.64 22.34 19.97 22.34 19.97 3.67 1.3 3.67 1.3 0 23.64 0 23.64 22.34'/%3E%3Crect x='.72' y='19.12' width='3.92' height='3.67' transform='translate(-14.03 8.04) rotate(-45)'/%3E%3Crect x='7.07' y='6.1' width='17.26' height='3.67' transform='translate(-1.01 13.43) rotate(-45)'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .25s var(--wsi-ease);
}
.wsi-btn:hover::after { transform: translate(2px, -2px); }
/* Form submit buttons have no icon (as on the original). */
.wsi-form .wsi-btn::after { content: none; }
.wsi-btn--light {
	border-color: #fff;
	background: transparent;
}
.wsi-btn--light:hover { background: #fff; color: #000; }

/* "Just press" button with blinking play key (footer). */
.wsi-press {
	display: inline-flex;
	align-items: stretch;
	text-decoration: none;
}
.wsi-press__label {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	border: 1px solid #fff;
	border-right: 0;
	border-radius: var(--wsi-radius-btn) 0 0 var(--wsi-radius-btn); /* joins the play key */
	color: #fff;
	font-family: var(--wsi-font-cond);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--wsi-ls-caps);
	text-transform: uppercase;
	white-space: nowrap;
}
.wsi-press__key {
	position: relative;
	flex: 0 0 31px;
	width: 31px; /* explicit: Safari ignores aspect-ratio sizing here and lets the key overflow */
	min-height: 31px;
	border: 1px solid #fff; /* stays while the fill blinks */
	border-radius: 0 6px 6px 0;
	background-color: #fff;
	color: #000;
	animation: wsi-blink 1.1s steps(1) infinite;
}
.wsi-press__key::before {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M13 10.5v13l10.5-6.5z'/%3E%3C/svg%3E") center / cover no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M13 10.5v13l10.5-6.5z'/%3E%3C/svg%3E") center / cover no-repeat;
}
.wsi-press:hover .wsi-press__key {
	animation: none;
	background-color: #000;
	color: #fff;
}
@keyframes wsi-blink {
	0%, 100% { background-color: #fff; }
	50%      { background-color: rgba(255, 255, 255, .3); }
}


/* ─── Cards ──────────────────────────────────────────────────────────────── */

/* Image card: cover image, bottom gradient, title bottom-left, arrow top-right. */
.wsi-card {
	position: relative;
	display: block;
	overflow: hidden;
	isolation: isolate;
	min-width: 0;
	border-radius: var(--wsi-radius);
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	background: #000;
	color: #fff;
	text-decoration: none;
}
.wsi-card__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s ease-in-out;
}
.wsi-card::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 30%, transparent 55%);
}
.wsi-card__body {
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	z-index: 2;
}
.wsi-card__title {
	font-family: var(--wsi-font-cond);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--wsi-ls-head);
	text-transform: uppercase;
}
.wsi-card__kicker {
	margin-bottom: 4px;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: var(--wsi-ls-label);
	text-transform: uppercase;
}
.wsi-card__pill {
	display: inline-block;
	margin-bottom: 8px;
	padding: 2px 10px;
	border-radius: 100px;
	background: #fff;
	color: #000;
	font-size: 12px;
	line-height: 1.5;
}
.wsi-card__arrow {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--wsi-ls-label);
	text-transform: uppercase;
}
.wsi-arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	fill: currentColor;
}
/* Image cards: gentle zoom on hover, wide screens only (news cards get the framed zoom). */
@media (min-width: 1120px) {
	.wsi-card:hover .wsi-card__media { transform: scale(1.1); }
}
.wsi-card:hover .wsi-arrow,
.wsi-card-text:hover .wsi-arrow {
	animation: wsi-arrow-shot .5s ease;
}
@keyframes wsi-arrow-shot {
	0%   { transform: translate(0, 0); opacity: 1; }
	45%  { transform: translate(20px, -20px); opacity: 0; }
	46%  { transform: translate(-20px, 20px); opacity: 0; }
	100% { transform: translate(0, 0); opacity: 1; }
}

/* Outlined text card — inverts on hover. */
.wsi-card-text {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 95px;
	padding: 0 40px 0 20px;
	border: 1px solid #000;
	border-radius: var(--wsi-radius);
	color: #000;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease;
}
.wsi-card-text .wsi-card__arrow { color: inherit; }
.wsi-card-text__title {
	font-family: var(--wsi-font-cond);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.18;
	text-transform: uppercase;
	transition: transform .25s ease;
}
.wsi-card-text:hover {
	background: #000;
	color: #fff;
}
.wsi-card-text:hover .wsi-card-text__title { transform: translateY(-4px); }
@media (min-width: 1024px) {
	.wsi-card-text__title { font-size: 30px; }
}

/* News card: image on top, bordered body. */
.wsi-news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	border-radius: var(--wsi-radius);
	background: var(--wsi-bg);
	color: #000;
	text-decoration: none;
}
.wsi-news-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}
.wsi-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease, clip-path .3s ease;
}
.wsi-news-card:hover .wsi-news-card__media img {
	transform: scale(1.1);
	clip-path: inset(4.5455%);
}
.wsi-news-card__body {
	flex: 1;
	padding: 15px;
	border: 1px solid #000;
	border-top: 0;
	border-radius: 0 0 var(--wsi-radius) var(--wsi-radius);
}
.wsi-news-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 12px;
	line-height: 1.5;
}
.wsi-news-card__meta i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}
.wsi-news-card__title {
	display: -webkit-box;
	min-height: 3.25em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: var(--wsi-ls-text);
	text-transform: capitalize;
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

.wsi-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: background-color .3s ease, border-color .3s ease;
}
.admin-bar .wsi-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wsi-header { top: 46px; } }
.wsi-header.is-stuck {
	background: linear-gradient(96deg, rgba(216, 216, 216, .88), rgba(216, 216, 216, .72));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom-color: #000;
}
/* Slides away while scrolling down, comes back when scrolling up. */
.wsi-header { transition: background-color .3s ease, border-color .3s ease, transform .35s var(--wsi-ease); }
.wsi-header.is-hidden:not(.is-open) { transform: translateY(-100%); }
.wsi-header__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	height: 70px;
	transition: height .3s ease;
}
.wsi-header.is-stuck .wsi-header__inner { height: 40px; }
.wsi-header__logo {
	display: block;
	flex-shrink: 0;
	width: 100px;
}
.wsi-header__logo img {
	width: 100%;
	filter: invert(1);
}
.wsi-header__nav {
	display: none;
	flex: 1;
	justify-content: center;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.wsi-header__nav a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: var(--wsi-ls-label);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.wsi-header__nav a:hover,
.wsi-header__nav .is-current a { text-decoration: underline; text-underline-offset: 4px; }
.wsi-header.is-open .wsi-header__nav {
	opacity: 1;
	pointer-events: auto;
}
.wsi-burger {
	margin-left: auto;
	padding: 8px 0 8px 8px;
	border: 0;
	background: none;
	cursor: pointer;
}
.wsi-burger span {
	display: block;
	width: 28px;
	height: 3px;
	background: #000;
	transition: transform .3s ease, opacity .3s ease;
}
.wsi-burger span + span { margin-top: 3.5px; }
.wsi-header.is-open .wsi-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.wsi-header.is-open .wsi-burger span:nth-child(2) { opacity: 0; }
.wsi-header.is-open .wsi-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1024px) {
	.wsi-header__logo { width: 140px; }
}
/* Inline menu only where all 7 items fit; below that the burger opens the panel. */
@media (min-width: 1200px) {
	.wsi-header__nav { display: flex; min-width: 0; }
}

/* XP bar: reading progress under the header. */
.wsi-xp-bar {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 3px;
	background: #000;
	transform: scaleX(0);
	transform-origin: left center;
}

/* Mobile off-canvas menu. */
.wsi-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	overflow-y: auto;
	background-color: var(--wsi-bg);
	background-image:
		radial-gradient(circle at 0 0, rgb(207, 210, 209) 1px, transparent 1.5px),
		linear-gradient(to bottom, rgba(0, 0, 0, .042) .5px, transparent .5px),
		linear-gradient(to right, rgba(0, 0, 0, .042) .5px, transparent .5px);
	background-size: 22px 22px;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .4s var(--wsi-ease), visibility 0s linear .4s;
}
.wsi-mobile-open .wsi-mobile-menu {
	transform: translateX(0);
	visibility: visible;
	transition: transform .4s var(--wsi-ease);
}
.admin-bar .wsi-mobile-menu { top: 46px; }
.wsi-mobile-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 70px;
}
.wsi-mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.wsi-mobile-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wsi-mobile-menu li { border-bottom: 1px solid rgba(0, 0, 0, .15); }
.wsi-mobile-menu li a {
	display: block;
	padding: 20px 0;
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
}
@media (min-width: 1200px) {
	.wsi-mobile-menu { display: none; }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.wsi-footer { position: relative; z-index: 2; }
.wsi-footer__cta {
	padding-block: 40px;
	border-top: 1px solid #000;
	background: var(--wsi-ink-2);
	color: #fff;
}
.wsi-footer__title {
	margin-bottom: 40px;
	font-family: var(--wsi-font-cond);
	font-size: 28px;
	line-height: 1.15;
	text-transform: uppercase;
}
.wsi-footer__title small {
	display: block;
	margin-top: 4px;
	font-family: var(--wsi-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: var(--wsi-ls-text);
	text-transform: none;
}
.wsi-footer__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 24px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.wsi-footer__links li:first-child { grid-column: 1 / -1; }
.wsi-footer__links a {
	font-size: 12px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: var(--wsi-ls-label);
	text-transform: uppercase;
	text-decoration: none;
}
.wsi-footer__links a:hover { text-decoration: underline; }
.wsi-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid #fff;
	border-radius: 50%;
}
.wsi-footer__social svg { width: 12px; height: 12px; fill: #fff; }
.wsi-footer__bottom {
	padding: 20px;
	border-top: 1px solid #000;
	background: var(--wsi-paper);
	color: var(--wsi-muted);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: var(--wsi-ls-text);
	text-align: center;
}
.wsi-footer__bottom a { text-decoration: none; }
@media (min-width: 768px) {
	.wsi-footer__links {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 40px;
	}
}
@media (min-width: 1024px) {
	.wsi-footer__cta { padding-block: 85px; }
}

/* ─── Background ─────────────────────────────────────────────────────────── */

.wsi-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.wsi-bg #bg-glow {
	position: absolute;
	inset: -140px;
	width: calc(100% + 280px);
	height: calc(100% + 280px);
	filter: blur(80px);
}
.wsi-bg #pixel-grid {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.wsi-bg #grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: .2;
	mix-blend-mode: overlay;
}
.wsi-bg__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ─── Motion ─────────────────────────────────────────────────────────────── */

/* Titles type on letter by letter (JS). Hidden until typing starts so they
   don't flash; the letters keep their layout, so nothing shifts. */
.js :is(.js-typeon, .js-pixel-title) { visibility: hidden; }
.js :is(.js-typeon, .js-pixel-title):is(.is-typing, .is-typed) { visibility: visible; }
.wsi-tw { white-space: nowrap; } /* one word: never split while typing */
.is-typing .wsi-tc { visibility: hidden; }
.is-typing .wsi-tc.is-on { visibility: visible; }

/* Block cursor: zero-width so it never pushes the letters; drawn on top. */
.wsi-cursor {
	position: relative;
	display: inline-block;
	width: 0;
	height: .78em;
	vertical-align: -.02em;
}
.wsi-cursor::before {
	content: '';
	position: absolute;
	top: 0;
	left: .06em;
	width: .5em;
	height: 100%;
	background: currentColor;
}
.wsi-cursor.is-blinking { animation: wsi-cursor .5s steps(1) infinite; }
@keyframes wsi-cursor {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0; }
}

/* Scroll reveal. <html class="wsi-motion"> is set in <head> (functions.php),
   so this content is hidden from the very first paint and only ever fades in;
   the site script adds .is-in, staggered. The text and media lists mirror
   REVEAL_TEXT / REVEAL_MEDIA in blocks/_site/view.js: keep them in sync. */
.wsi-motion :is(
	.js-reveal,
	.wsi-page-title__eyebrow, .wsi-page-title__intro,
	.wsi-text-image__text > :not(.js-pixel-title), .wsi-contact__info > :not(h1), .wsi-contact__form,
	.wsi-case-info__item, .wsi-case-info__awards li, .wsi-case-results__item, .wsi-case-results .wsi-case-title,
	.wsi-case-text > *, .wsi-statement .wsi-btn, .wsi-signup__row, .wsi-signup__list,
	.wsi-rich-text__inner > :nth-child(-n+4),
	.wsi-footer__title, .wsi-press, .wsi-footer__links
):not(.is-in):not(.is-media) {
	opacity: 0;
	transform: translate3d(0, var(--wsi-reveal-y, 28px), 0);
}
.wsi-motion :is(
	.js-reveal.is-media,
	.wsi-text-image__media, .wsi-case-hero, .wsi-case-image, .wsi-case-double img, .wsi-case-video,
	.wsi-contact__photo, .wsi-coverflow
):not(.is-in) {
	opacity: 0;
	transform: scale(1.04);
}
.wsi-motion .js-reveal {
	transition: opacity .9s var(--wsi-ease-out), transform 1.1s var(--wsi-ease-out);
}
.wsi-motion .js-reveal.is-media {
	transition: opacity 1.1s var(--wsi-ease-out), transform 1.6s var(--wsi-ease-out);
}
@media (max-width: 767px) {
	:root { --wsi-reveal-y: 16px; }
}

/* ─── 404: playable space invaders ───────────────────────────────────────── */

.wsi-404 {
	padding-block: 110px 80px;
}
.wsi-404__stage {
	position: relative;
	color: var(--wsi-ink);
	touch-action: none; /* dragging steers the cannon, not the page */
	user-select: none;
	-webkit-user-select: none;
}
.wsi-404__canvas {
	display: block;
	width: 100%;
	cursor: crosshair;
}
.wsi-404__text {
	max-width: 640px;
	margin-top: 48px;
}
.wsi-404__text .wsi-eyebrow { margin-bottom: 10px; }
.wsi-404__text .wsi-lead { margin-top: 16px; }
.wsi-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 28px;
}
/* Margins instead of gap, so spacing holds in every browser. */
.wsi-404__actions > * { margin: 0 28px 12px 0; }
.wsi-404__link {
	display: inline-flex;
	align-items: center;
	min-height: 31px; /* same height as the button, text centred on it */
	font-size: 15px;
	line-height: 1;
	text-underline-offset: 4px;
}
.wsi-404__hint {
	margin-top: 12px;
	font-size: 12px;
	letter-spacing: var(--wsi-ls-label);
	text-transform: uppercase;
	opacity: .55;
}
.wsi-404__hint-touch { display: none; }
@media (pointer: coarse) {
	.wsi-404__hint-keys { display: none; }
	.wsi-404__hint-touch { display: inline; }
}
@media (min-width: 1024px) {
	.wsi-404 { padding-block: 140px 120px; }
	.wsi-404__text { margin-top: 64px; }
}

/* Dark "Press start" (light backgrounds): same button as the footer, inverted. */
.wsi-press--dark .wsi-press__label { border-color: #000; color: #000; }
.wsi-press--dark .wsi-press__key { border-color: #000; background-color: #000; color: #fff; animation-name: wsi-blink-dark; }
.wsi-press--dark:hover .wsi-press__label { background: #000; color: #fff; }
.wsi-press--dark:hover .wsi-press__key { background-color: #fff; color: #000; }
@keyframes wsi-blink-dark {
	0%, 100% { background-color: #000; }
	50%      { background-color: rgba(0, 0, 0, .3); }
}

/* ─── Micro-interactions ─────────────────────────────────────────────────────
   Small, quick and quiet. All disabled under prefers-reduced-motion (bottom). */

/* Header slides in on load. */
@keyframes wsi-drop-in {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
.wsi-header { animation: wsi-drop-in .7s var(--wsi-ease) both; }

/* Nav + footer links: underline sweeps in from the left. */
.wsi-header__nav a,
.wsi-footer__links a:not(.wsi-footer__social),
.wsi-breadcrumbs a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size .3s var(--wsi-ease);
}
.wsi-header__nav a { padding-bottom: 3px; }
.wsi-header__nav a:hover,
.wsi-header__nav .is-current a,
.wsi-footer__links a:not(.wsi-footer__social):hover,
.wsi-breadcrumbs a:hover {
	text-decoration: none;
	background-size: 100% 1px;
}

/* Desktop menu items cascade in when the burger opens. */
.wsi-header__nav li {
	transform: translateY(-6px);
	opacity: 0;
	transition: transform .35s var(--wsi-ease), opacity .35s ease;
}
.wsi-header.is-open .wsi-header__nav li { transform: none; opacity: 1; }
.wsi-header.is-open .wsi-header__nav li:nth-child(2) { transition-delay: .04s; }
.wsi-header.is-open .wsi-header__nav li:nth-child(3) { transition-delay: .08s; }
.wsi-header.is-open .wsi-header__nav li:nth-child(4) { transition-delay: .12s; }
.wsi-header.is-open .wsi-header__nav li:nth-child(5) { transition-delay: .16s; }
.wsi-header.is-open .wsi-header__nav li:nth-child(6) { transition-delay: .2s; }
.wsi-header.is-open .wsi-header__nav li:nth-child(7) { transition-delay: .24s; }

/* Mobile menu links slide in one after another. */
.wsi-mobile-menu li {
	transform: translateX(24px);
	opacity: 0;
	transition: transform .45s var(--wsi-ease), opacity .45s ease;
}
.wsi-mobile-open .wsi-mobile-menu li { transform: none; opacity: 1; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(2) { transition-delay: .05s; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(3) { transition-delay: .1s; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(4) { transition-delay: .15s; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(5) { transition-delay: .2s; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(6) { transition-delay: .25s; }
.wsi-mobile-open .wsi-mobile-menu li:nth-child(7) { transition-delay: .3s; }

/* Burger: bars shift on hover. */
/* Pivot right only while closed; the open × must rotate around the centre. */
.wsi-header:not(.is-open) .wsi-burger span { transform-origin: right center; }
.wsi-header:not(.is-open) .wsi-burger:hover span:nth-child(2) { transform: scaleX(.6); }
.wsi-header:not(.is-open) .wsi-burger:hover span:nth-child(3) { transform: scaleX(.8); }

/* Logo: a tiny 1px "glitch" nudge on hover. */
.wsi-header__logo img { transition: transform .2s steps(2); }
.wsi-header__logo:hover img { transform: translateX(1px); }

/* Buttons: lift on hover, press down on click — like an arcade button. */
.wsi-btn {
	transition: background-color .3s ease, transform .2s var(--wsi-ease), box-shadow .2s var(--wsi-ease);
}
.wsi-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
.wsi-btn:active {
	transform: translateY(1px);
	box-shadow: none;
	transition-duration: .05s;
}
.wsi-press__label { transition: background-color .25s ease, color .25s ease; }
.wsi-press:hover .wsi-press__label { background: #fff; color: #000; }
.wsi-press:active .wsi-press__key { transform: translateY(1px); }

/* Footer LinkedIn: fills on hover. */
.wsi-footer__social { transition: background-color .25s ease, transform .25s var(--wsi-ease); }
.wsi-footer__social svg { transition: fill .25s ease; }
.wsi-footer__social:hover { background: #fff; transform: translateY(-2px); }
.wsi-footer__social:hover svg { fill: #000; }

/* Cards: soft shadow on hover. */
.wsi-card,
.wsi-news-card {
	transition: box-shadow .3s var(--wsi-ease), transform .3s var(--wsi-ease);
}
@media (min-width: 1120px) {
	.wsi-card:hover,
	.wsi-news-card:hover { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .35); }
}
.wsi-card-text:active,
.wsi-card:active { transform: scale(.99); }

/* Prose links: underline thickens on hover. */
.wsi-prose a,
.wsi-case-content a {
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness .2s ease, text-underline-offset .2s ease;
}
.wsi-prose a:hover,
.wsi-case-content a:hover {
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Form fields: a black line grows along the bottom on focus. */
.wsi-form input[type="text"],
.wsi-form input[type="email"],
.wsi-form input[type="tel"],
.wsi-form textarea {
	background-image: linear-gradient(#000, #000);
	background-position: left bottom;
	background-size: 0 2px;
	background-repeat: no-repeat;
	transition: background-size .35s var(--wsi-ease), background-color .2s ease;
}
.wsi-form input:focus,
.wsi-form textarea:focus {
	outline: none;
	background-color: #fff;
	background-size: 100% 2px;
}
.wsi-form input[type="checkbox"] { transition: background-color .15s ease, transform .15s var(--wsi-ease); }
.wsi-form input[type="checkbox"]:checked { transform: scale(1.1); }
.wsi-form input:focus-visible[type="checkbox"] { outline: 2px solid #000; outline-offset: 2px; }
.wsi-form.is-sent .wsi-form__status { animation: wsi-fade-up .5s var(--wsi-ease) both; }
@keyframes wsi-fade-up {
	from { transform: translateY(10px); opacity: 0; }
	to   { transform: none; opacity: 1; }
}


/* Keyboard focus that fits the style. */
:where(a, button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */

.wsi-form {
	display: grid;
	gap: 16px;
}
.wsi-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 24px;
}
.wsi-form input[type="text"],
.wsi-form input[type="email"],
.wsi-form input[type="tel"],
.wsi-form textarea {
	width: 100%;
	height: 50px;
	padding: 12px 16px;
	border: 0;
	border-radius: 4px;
	background: var(--wsi-field);
	color: #000;
	font: inherit;
	font-size: 16px;
}
.wsi-form textarea {
	height: 100px;
	resize: vertical;
}
.wsi-form__consent {
	display: flex;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
}
.wsi-form__consent label { margin: 0; padding-block: 2px; font-size: inherit; line-height: inherit; cursor: pointer; }
@media (pointer: coarse) {
	.wsi-form input[type="checkbox"] { width: 22px; height: 22px; margin-top: 0; }
}
.wsi-form input[type="checkbox"] {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin: 3px 0 0;
	border: 1.5px solid var(--wsi-ink-2);
	border-radius: 4px;
	background: #fff;
	appearance: none;
	cursor: pointer;
}
.wsi-form input[type="checkbox"]:checked { background: #000; }
.wsi-form__hp {
	position: absolute;
	left: -9999px;
}
.wsi-form__status { font-size: 16px; }
.wsi-form__status.is-error { color: #b91c1c; }
.wsi-form.is-sent .wsi-form__field,
.wsi-form.is-sent .wsi-form__consent,
.wsi-form.is-sent button { display: none; }
.wsi-form button[type="submit"] { justify-self: start; min-width: 128px; height: 50px; }
.wsi-form button[disabled] { opacity: .6; cursor: progress; }

/* ─── Editor ─────────────────────────────────────────────────────────────── */

.editor-styles-wrapper {
	background-color: var(--wsi-bg);
	font-family: var(--wsi-font);
}
.editor-styles-wrapper :is(.js-typeon, .js-pixel-title) { visibility: visible; }

/* Editor: articles, jobs and cases look like their front-end templates. */
.editor-styles-wrapper .editor-post-title,
.editor-styles-wrapper .wp-block-post-title {
	font-family: var(--wsi-font-cond);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.1;
	text-transform: uppercase;
}
.editor-styles-wrapper:is(.post-type-post, .post-type-job) .is-root-container,
.editor-styles-wrapper:is(.post-type-post, .post-type-job) .editor-post-title {
	max-width: 800px;
	margin-inline: auto;
}
.editor-styles-wrapper.post-type-work .is-root-container { max-width: 1240px; margin-inline: auto; }
.editor-styles-wrapper.post-type-work .editor-post-title { max-width: 1240px; margin-inline: auto; font-size: 64px; line-height: 1; }
.editor-styles-wrapper.post-type-work .is-root-container > :is(p, h2, h3, h4, ul, ol, blockquote, .wp-block-image, .wp-block-embed, .wp-block-video) { max-width: 760px; margin-left: 0; }
.editor-styles-wrapper:is(.post-type-post, .post-type-job, .post-type-work) .is-root-container :is(p, li) {
	font-size: 18px;
	line-height: 1.75;
	letter-spacing: var(--wsi-ls-text);
}
.editor-styles-wrapper.post-type-job .is-root-container :is(p, li) { font-size: 24px; line-height: 2; }
.editor-styles-wrapper:is(.post-type-post, .post-type-job, .post-type-work) .is-root-container :is(h2, h3, h4) {
	font-family: var(--wsi-font-cond);
	font-size: 22px;
	line-height: 1.3;
	text-transform: uppercase;
}
.editor-styles-wrapper.post-type-work .is-root-container > :is(h2, h3) { font-size: 40px; line-height: 1.05; }
.editor-styles-wrapper.post-type-job .is-root-container :is(h2, h3) { font-size: 30px; line-height: 1.13; }
.editor-styles-wrapper:is(.post-type-post, .post-type-job, .post-type-work) .is-root-container :is(img, video, iframe) { border-radius: var(--wsi-radius); }
.editor-styles-wrapper.post-type-post .is-root-container > p:first-child:has(> strong:only-child) { font-size: 26px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.wsi-press__key { animation: none; }
}

/* ─── Smooth scrolling ───────────────────────────────────────────────────── */
/* Lenis (blocks/_site/view.js) handles wheel scrolling; these are its required
   base styles plus a native fallback for keyboard/anchor jumps. */
html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}