/* ==========================================================================
   Monetiq Studio — design system
   Premium neo-brutalism: hard edges, hard shadows, bold wide type,
   orange + electric blue accents on warm paper and deep ink.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	--ink: #0d0d0d;
	--ink-2: #171717;
	--paper: #f2f0eb;
	--paper-2: #e7e3da;
	--white: #ffffff;
	--orange: #ff5f1f;
	--orange-deep: #d9440a;
	--blue: #7df9ff;
	--yellow: #ffd23f;
	--purple: #b78cff;
	--green: #4ade80;
	--red: #ff6b5b;

	--muted: #5a564e;
	--text-2: #3b3832;
	--shade: #0d0d0d;
	--cream: #f2f0eb;
	--black: #0d0d0d;
	--muted-light: rgba(255, 255, 255, 0.62);
	--line: rgba(13, 13, 13, 0.14);
	--line-light: rgba(255, 255, 255, 0.14);

	--font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--hand: 'Architects Daughter', 'Comic Sans MS', cursive;

	--bw: 2px;
	--shadow-sm: 4px 4px 0 var(--shade);
	--shadow: 6px 6px 0 var(--shade);
	--shadow-lg: 10px 10px 0 var(--shade);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);

	--wrap: 1320px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(72px, 9vw, 128px);
	--header-h: 72px;

	interpolate-size: allow-keywords;
	color-scheme: light;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	line-height: 1.55;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--orange); color: var(--ink); }

:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: fixed;
	top: 12px; left: 12px;
	z-index: 1000;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	font-weight: 800;
	text-decoration: none;
	transform: translateY(-150%);
	transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Typography ---------- */
.display {
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	font-weight: 900;
	font-stretch: 125%;
	text-transform: uppercase;
	line-height: 0.9;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
.display--md { font-size: clamp(2.1rem, 4.6vw, 4.25rem); }
.display--sm { font-size: clamp(1.9rem, 3.5vw, 3.25rem); line-height: 0.95; }
.display--xl { font-size: clamp(3rem, 9vw, 8.5rem); line-height: 0.86; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.eyebrow::before {
	content: "";
	width: 10px; height: 10px;
	background: var(--orange);
	border: 1.5px solid var(--ink);
}
.eyebrow--light { color: var(--muted-light); }
.eyebrow--light::before { border-color: var(--paper); }
.eyebrow--ink { color: var(--ink); }
.eyebrow--ink::before { background: var(--ink); }

.mono { font-family: var(--mono); }

.hand {
	font-family: var(--hand);
	font-size: clamp(1.2rem, 1.9vw, 1.6rem);
	line-height: 1.3;
	color: var(--muted);
	transform: rotate(-3deg);
}
.hand--light { color: var(--blue); }

.text-orange { color: var(--orange); }
.text-muted { color: var(--muted); }
.text-ink-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--ink);
}

.hl {
	font-style: normal;
	padding-inline: 0.06em;
	background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 88% / 0% var(--hl-h, 34%);
	animation: hl-draw 1s var(--ease) 1.1s forwards;
}
@keyframes hl-draw { to { background-size: 100% var(--hl-h, 34%); } }

.hl-block {
	background: var(--ink);
	color: var(--paper);
	padding: 0 0.12em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.lead {
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 40em;
}

/* ---------- Buttons, chips, tags, tiles ---------- */
.btn {
	--btn-bg: var(--white);
	--btn-fg: var(--ink);
	--btn-fill: var(--orange);
	--btn-fill-fg: var(--ink);
	--btn-shadow: var(--shade);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.45em;
	font-family: var(--font);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--btn-fg);
	background: var(--btn-bg);
	border: var(--bw) solid var(--ink);
	box-shadow: 4px 4px 0 var(--btn-shadow);
	cursor: pointer;
	translate: var(--mx, 0) var(--my, 0);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.3s, translate 0.3s var(--ease);
}
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--btn-fill);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--btn-shadow); color: var(--btn-fill-fg); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--btn-shadow); }
.btn .icon { transition: transform 0.3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-shadow: var(--orange); }
.btn--orange { --btn-bg: var(--orange); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--paper); }
.btn--ghost { --btn-bg: transparent; --btn-fill: var(--ink); --btn-fill-fg: var(--paper); box-shadow: none; }
.btn--ghost:hover { box-shadow: 4px 4px 0 var(--orange); }
.btn--light { --btn-bg: var(--paper); --btn-shadow: var(--orange); border-color: var(--paper); }
.btn--lg { font-size: clamp(0.95rem, 1.2vw, 1.1rem); padding: 1.1em 1.7em; }
.btn--sm { font-size: 0.8rem; padding: 0.8em 1.15em; }
.btn--block { width: 100%; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	font-family: var(--font);
	font-size: clamp(0.85rem, 1.1vw, 1rem);
	font-weight: 900;
	font-stretch: 112%;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	background: var(--white);
	cursor: pointer;
	rotate: -3deg;
	transition: rotate 0.35s var(--ease), transform 0.2s;
}
.chip:hover { rotate: 2deg; }
.chip:active { transform: scale(0.95); }
.chip--blue { background: var(--blue); }
.chip__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--orange);
	border: 1.5px solid var(--ink);
	animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { transform: scale(1.4); } }

.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	white-space: nowrap;
}
.tag--orange { background: var(--orange); }
.tag--paper { background: var(--paper); }
.tag--blue { background: var(--blue); }
.tag--yellow { background: var(--yellow); }
.tag--ink { background: var(--ink); color: var(--paper); }

.tile {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	color: var(--ink);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
	background: var(--white);
}
.tile--sm { width: 32px; height: 32px; box-shadow: 2px 2px 0 var(--shade); }
.tile--lg { width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); box-shadow: var(--shadow); }
.tile--blue, .tone--blue { background: var(--blue); }
.tile--orange, .tone--orange { background: var(--orange); }
.tile--yellow, .tone--yellow { background: var(--yellow); }
.tile--purple, .tone--purple { background: var(--purple); }
.tile--green, .tone--green { background: var(--green); }
.tile--red, .tone--red { background: var(--red); }
.tile--white, .tone--white { background: var(--white); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px;
	transition: background-size 0.4s var(--ease), color 0.2s;
}
.link-arrow:hover { background-size: 0% 2px; background-position: 100% 100%; color: var(--orange-deep); }
.link-arrow .icon { transition: transform 0.3s var(--ease); }
.link-arrow:hover .icon { transform: rotate(45deg); }

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: clamp(24px, 4vw, 40px);
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s, gap 0.3s var(--ease);
}
.back-link:hover { color: var(--orange-deep); gap: 12px; }

.card {
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
}

/* ---------- Sections ---------- */
.section { position: relative; padding-block: var(--section); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--orange { background: var(--orange); color: var(--ink); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

.section-head { margin-bottom: clamp(36px, 5vw, 72px); }
.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
}
.section-head--center { text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: var(--header-h);
	transition: transform 0.45s var(--ease), background-color 0.3s, border-color 0.3s, backdrop-filter 0.3s;
	border-bottom: var(--bw) solid transparent;
}
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--paper) 86%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom-color: var(--ink);
}
.site-header.is-hidden { transform: translateY(-100%); }
.has-dark-hero .site-header:not(.is-scrolled) { color: var(--cream); }
.has-dark-hero .site-header:not(.is-scrolled) .brand__mark,
.has-dark-hero .site-header:not(.is-scrolled) .theme-switch__track { border-color: var(--cream); }
body.has-dark-hero.menu-open .site-header { color: var(--ink); }
.contact-page .contact { padding-top: calc(var(--header-h) + var(--section) * 0.75); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	text-decoration: none;
}
.brand__mark {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	background: var(--orange);
	color: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
	transition: transform 0.6s var(--ease);
}
.brand__mark--lg { width: 56px; height: 56px; }
.brand:hover .brand__mark { transform: rotate(180deg); }
.brand__word {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	font-weight: 900;
	font-stretch: 125%;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	line-height: 1;
	transition: color 0.2s;
}
.brand__word span { margin-left: 0.3em; }
.brand:hover .brand__word { color: var(--orange-deep); }

.site-nav { display: none; }
.site-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__item { display: flex; align-items: center; }
.site-nav__link {
	position: relative;
	padding: 10px 12px;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}
.site-nav__link::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 4px;
	height: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }

.site-nav__caret {
	display: grid;
	place-items: center;
	width: 28px; height: 28px;
	margin-left: -8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: transform 0.3s var(--ease);
}
.has-dropdown.is-open .site-nav__caret { transform: rotate(180deg); }

.mega {
	position: absolute;
	top: calc(100% + 2px);
	left: 50%;
	width: min(940px, calc(100vw - var(--gutter) * 2));
	display: grid;
	grid-template-columns: 1fr 250px;
	gap: 16px;
	padding: 16px;
	background: var(--paper);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s 0.35s;
}
.mega::before { /* hover bridge */
	content: "";
	position: absolute;
	inset: -24px 0 100%;
}
.has-dropdown.is-open .mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.25s, transform 0.35s var(--ease), visibility 0s;
}
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mega__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1.5px solid transparent;
	text-decoration: none;
	opacity: 0;
	transform: translateY(6px);
	transition: background 0.2s, border-color 0.2s, opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.has-dropdown.is-open .mega__item {
	opacity: 1;
	transform: none;
	transition-delay: 0s, 0s, calc(var(--i) * 25ms), calc(var(--i) * 25ms);
}
.mega__item:hover { background: var(--white); border-color: var(--ink); }
.mega__item:hover .tile { transform: rotate(-8deg); }
.mega__item .tile { transition: transform 0.3s var(--ease); }
.mega__text { display: grid; gap: 3px; }
.mega__title { font-size: 0.8125rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.mega__price { font-size: 0.6875rem; color: var(--muted); }
.mega__promo {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 24px;
	background: var(--ink);
	color: var(--paper);
	text-decoration: none;
	transition: background 0.3s;
}
.mega__promo .hand { color: var(--blue); font-size: 1.15rem; }
.mega__promo strong { font-size: 1.25rem; font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; }
.mega__promo-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.75rem; color: var(--orange); text-transform: uppercase; }
.mega__promo:hover { background: var(--orange); color: var(--ink); }
.mega__promo:hover .hand, .mega__promo:hover .mega__promo-cta { color: var(--ink); }

.site-header__cta { display: none; }

.menu-toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	padding: 0;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
	cursor: pointer;
}
.menu-toggle__bars { position: relative; width: 22px; height: 12px; }
.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	background: var(--ink);
	transition: transform 0.4s var(--ease), top 0.3s var(--ease);
}
.menu-toggle__bars span:first-child { top: 0; }
.menu-toggle__bars span:last-child { top: calc(100% - 2.5px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: calc(50% - 1.25px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: calc(50% - 1.25px); transform: rotate(-45deg); }

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 90;
	overflow-y: auto;
	padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
	background: var(--paper);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path 0.6s var(--ease), visibility 0s 0.6s;
}
.mobile-menu.is-open {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path 0.6s var(--ease), visibility 0s;
}
.mobile-menu__inner { display: flex; flex-direction: column; gap: 28px; min-height: 100%; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; border-top: var(--bw) solid var(--ink); }
.mobile-menu__list li {
	border-bottom: 1px solid var(--line);
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.mobile-menu.is-open .mobile-menu__list li {
	opacity: 1;
	transform: none;
	transition-delay: calc(0.15s + var(--i) * 60ms);
}
.mobile-menu__link {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 0;
	font-size: clamp(2rem, 9vw, 3.25rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}
.mobile-menu__link .mono { font-size: 0.75rem; color: var(--orange-deep); }
.mobile-menu__link[aria-current="page"] { color: var(--orange-deep); }
.mobile-menu__label { margin: 0 0 10px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.mobile-menu__services { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 16px; }
.mobile-menu__services a { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-weight: 700; text-decoration: none; }

@media (min-width: 560px) {
	.mobile-menu__services { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 640px) {
	.site-header__cta { display: inline-flex; }
}
@media (min-width: 1080px) {
	:root { --header-h: 84px; }
	.site-nav { display: block; }
	.menu-toggle, .mobile-menu { display: none; }
	.site-header__inner { gap: 24px; }

	/* Desktop: mirrored header — navigation on the left, logo on the right */
	.site-nav { order: 1; margin-right: auto; }
	.site-nav__list { margin-left: -12px; }
	.site-header__cta, .theme-switch { order: 2; }
	.brand {
		order: 3;
		flex-direction: row-reverse;
		margin-right: 0;
		padding-left: 24px;
		border-left: var(--bw) solid var(--ink);
	}
	.has-dark-hero .site-header:not(.is-scrolled) .brand { border-left-color: var(--cream); }
	.mega { left: var(--gutter); transform: translate(0, 12px); }
	.has-dropdown.is-open .mega { transform: translate(0, 0); }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(100svh, 1000px);
	padding: calc(var(--header-h) + clamp(28px, 6vw, 72px)) 0 clamp(56px, 7vw, 96px);
	overflow: hidden;
}
.hero__grid-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 15%, transparent 75%);
}
.hero__inner {
	position: relative;
	display: grid;
	gap: clamp(40px, 6vw, 64px);
	align-items: center;
}
.hero__chip { margin-bottom: clamp(20px, 3vw, 32px); animation: fade-up 0.8s var(--ease) both; }

.hero__title {
	font-size: clamp(2.5rem, 11.4vw, 4.6rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 0.9;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
/* each word rises out of its own mask, so the title wraps naturally at any width */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.05em 0.04em 0.07em 0; margin: -0.05em 0 -0.07em; }
.hero__title .w > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.hero__title .w:nth-child(2) > span { animation-delay: 0.08s; }
.hero__title .w:nth-child(3) > span { animation-delay: 0.16s; }
.hero__title .w:nth-child(4) > span { animation-delay: 0.24s; }
.hero__title .dot { color: var(--orange); }
@keyframes rise { to { transform: translateY(0); } }

.hero__lead {
	max-width: 34em;
	font-size: clamp(1.05rem, 1.35vw, 1.22rem);
	line-height: 1.6;
	color: var(--text-2);
	margin-bottom: clamp(28px, 3.5vw, 40px);
	animation: fade-up 0.9s var(--ease) 0.35s both;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px 18px; animation: fade-up 0.9s var(--ease) 0.45s both; }

.hero__proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(36px, 5vw, 56px);
	padding-top: 20px;
	border-top: var(--bw) solid var(--ink);
	animation: fade-up 0.9s var(--ease) 0.55s both;
}
.hero__proof dt {
	font-size: clamp(1.45rem, 2.5vw, 2.3rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: -0.02em;
}
.hero__proof dd {
	margin-top: 8px;
	font-family: var(--mono);
	font-size: clamp(0.625rem, 0.9vw, 0.75rem);
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted);
}

@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero__visual {
	position: relative;
	width: 100%;
	max-width: 520px;
	aspect-ratio: 5 / 6;
	justify-self: center;
}
.hero__card {
	position: absolute;
	margin: 0;
	padding: 10px 10px 0;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
	transition: translate 0.6s var(--ease);
	animation: card-in 1.1s var(--ease) both;
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; border: 1.5px solid var(--ink); }
.hero__card figcaption { padding: 9px 2px 10px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hero__card--front { left: 2%; top: 4%; width: 58%; rotate: -5deg; z-index: 2; animation-delay: 0.3s; }
.hero__card--front img { aspect-ratio: 720 / 1024; }
.hero__card--back { right: 0; bottom: 6%; width: 64%; rotate: 5deg; z-index: 1; animation-delay: 0.45s; }
.hero__card--back img { aspect-ratio: 3 / 2; }
@keyframes card-in { from { opacity: 0; scale: 0.88; } to { opacity: 1; scale: 1; } }

.badge-spin {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 6%;
	width: clamp(104px, 11vw, 140px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--orange);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	transition: translate 0.6s var(--ease);
	animation: card-in 1s var(--ease) 0.7s both;
}
.badge-spin svg { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge-spin text {
	font-family: var(--mono);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	fill: var(--ink);
}
.badge-spin__core {
	position: absolute;
	inset: 30%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ink);
	color: var(--orange);
}
@keyframes spin { to { transform: rotate(360deg); } }

.sticker {
	position: absolute;
	z-index: 4;
	padding: 0.55em 0.95em;
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
	transition: translate 0.6s var(--ease);
	animation: card-in 0.9s var(--ease) both;
}
.sticker--white {
	left: -2%;
	bottom: 22%;
	rotate: -8deg;
	background: var(--white);
	font-family: var(--hand);
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	color: #c81e1e;
	animation-delay: 0.9s;
}
.sticker--yellow {
	right: 2%;
	bottom: -1%;
	rotate: 4deg;
	background: var(--yellow);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	animation-delay: 1.05s;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	color: var(--muted);
	transform: translateX(-50%);
}
.hero__scroll i { width: 2px; height: 36px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--ink); animation: scroll-line 2s var(--ease-io) infinite; }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

@media (min-width: 768px) {
	.hero__title { font-size: clamp(4rem, 9vw, 5.6rem); }
}
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); row-gap: clamp(28px, 3.5vw, 48px); }
	.hero__head { grid-column: 1 / -1; }
	.hero__title { font-size: clamp(4.5rem, 7.5vw, 6.9rem); }
	.hero__visual { justify-self: end; align-self: start; aspect-ratio: 1 / 0.92; max-width: 540px; margin-top: -24px; }
	.hero__card--front { width: 46%; top: 0; }
	.hero__card--back { width: 60%; bottom: 4%; }
	.badge-spin { right: 2%; top: -6%; }
}
@media (min-width: 1024px) and (min-height: 760px) {
	.hero__scroll { display: flex; }
}
@media (max-width: 1023px) {
	.hero { min-height: 0; }
	.hero__visual { max-width: 440px; }
}
@media (max-width: 480px) {
	.hero__visual { width: 92%; }
	.sticker--white { left: 0; }
	.hero__proof { gap: 8px; }
}

/* Money rain easter egg */
.money {
	position: fixed;
	top: 0;
	left: var(--x0, 50vw);
	z-index: 300;
	font-size: calc(clamp(1.8rem, 3.4vw, 2.8rem) * var(--s, 1));
	line-height: 1;
	pointer-events: none;
	will-change: transform, opacity;
	animation: money-fall var(--dur, 4s) cubic-bezier(0.3, 0.1, 0.45, 1) var(--delay, 0s) both;
}
@keyframes money-fall {
	0% { transform: translate(-50%, -12vh) rotate(0deg); opacity: 0; }
	6% { opacity: 1; }
	30% { transform: translate(calc(-50% + var(--dx) * 0.35), 24vh) rotate(calc(var(--r) * 0.3)); }
	60% { transform: translate(calc(-50% - var(--dx) * 0.2), 58vh) rotate(calc(var(--r) * 0.65)); }
	88% { opacity: 1; }
	100% { transform: translate(calc(-50% + var(--dx)), 108vh) rotate(var(--r)); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee {
	overflow: hidden;
	padding: 18px 0;
	background: var(--ink);
	color: var(--paper);
	border-block: var(--bw) solid var(--ink);
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
	display: flex;
	align-items: center;
	gap: clamp(20px, 3vw, 36px);
	padding-right: clamp(20px, 3vw, 36px);
	font-size: clamp(1.4rem, 3vw, 2.6rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.marquee__star { color: var(--orange); }
.marquee__star.is-blue { color: var(--blue); }
.marquee__star svg { fill: currentColor; width: 0.8em; height: 0.8em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Manifest ---------- */
.manifest__grid { display: grid; gap: 40px; }
.manifest__photo {
	position: relative;
	overflow: hidden;
	margin-top: 8px;
	aspect-ratio: 3 / 2;
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
}
.manifest__photo img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.6s; }
.manifest__photo:hover img { filter: none; }
.manifest__text {
	font-size: clamp(1.55rem, 3.2vw, 2.9rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: pretty;
}
.manifest__text .w { color: color-mix(in srgb, var(--ink) 16%, transparent); transition: color 0.35s; }
.manifest__text .w.is-lit { color: var(--ink); }

.pillars {
	display: grid;
	margin-top: clamp(40px, 5vw, 64px);
	border-top: var(--bw) solid var(--ink);
}
.pillars li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 16px;
	padding: 22px 16px 22px 0;
	border-bottom: 1px solid var(--line);
}
.pillars__icon { grid-row: span 2; transition: transform 0.4s var(--ease); }
.pillars li:hover .pillars__icon { transform: rotate(-10deg) scale(1.08); }
.pillars h3 { font-size: 1.1rem; font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: 1.15; }
.pillars p { color: var(--muted); font-size: 0.95rem; }

@media (min-width: 640px) {
	.pillars { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
@media (min-width: 1024px) {
	.manifest__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; }
	.manifest__side { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
}

/* ---------- Services menu ---------- */
.menu .display { color: var(--paper); }
.menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.menu__link {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) 44px;
	grid-template-areas: "num title arrow" ". desc desc" ". price price";
	align-items: center;
	gap: 8px 16px;
	padding: 24px 8px;
	color: var(--paper);
	text-decoration: none;
	border-bottom: 1px solid var(--line-light);
	transition: color 0.35s;
}
.menu__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--orange);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.5s var(--ease);
}
.menu__link:hover, .menu__link:focus-visible { color: var(--ink); }
.menu__link:hover::before, .menu__link:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.menu__num { grid-area: num; font-size: 0.75rem; color: var(--muted-light); transition: color 0.3s; }
.menu__title {
	grid-area: title;
	font-size: clamp(1.3rem, 2.2vw, 2rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	transition: transform 0.5s var(--ease);
}
.menu__desc { grid-area: desc; font-size: 0.95rem; color: var(--muted-light); transition: color 0.3s; }
.menu__price { grid-area: price; font-size: 0.8125rem; font-weight: 700; color: var(--blue); text-transform: uppercase; transition: color 0.3s; }
.menu__arrow {
	grid-area: arrow;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	transition: transform 0.45s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}
.menu__link:hover .menu__num, .menu__link:hover .menu__desc, .menu__link:hover .menu__price { color: var(--ink); }
.menu__link:hover .menu__arrow { transform: rotate(45deg); background: var(--ink); color: var(--orange); border-color: var(--ink); }

.menu__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(32px, 4vw, 48px);
}
.menu__foot p { font-size: 0.75rem; text-transform: uppercase; color: var(--muted-light); }

.menu-preview { display: none; }

@media (min-width: 900px) {
	.menu__link {
		grid-template-columns: 48px minmax(0, 1.5fr) minmax(0, 1fr) 150px 44px;
		grid-template-areas: "num title desc price arrow";
		gap: 28px;
		padding: 30px 12px;
	}
	.menu__link:hover .menu__title { transform: translateX(10px); }
	.menu__price { text-align: right; }
}

@media (min-width: 1080px) and (hover: hover) and (pointer: fine) {
	.menu-preview {
		display: block;
		position: fixed;
		top: 0; left: 0;
		z-index: 60;
		width: 270px;
		pointer-events: none;
		opacity: 0;
		scale: 0.6;
		rotate: -6deg;
		transition: opacity 0.3s, scale 0.45s var(--ease), rotate 0.45s var(--ease);
	}
	.menu-preview.is-visible { opacity: 1; scale: 1; rotate: -3deg; }
	.menu-preview__card {
		display: none;
		padding: 24px;
		color: var(--ink);
		border: var(--bw) solid var(--ink);
		box-shadow: 8px 8px 0 var(--shade);
	}
	.menu-preview__card.is-active { display: block; }
	.menu-preview__icon { display: block; margin-bottom: 18px; }
	.menu-preview__card strong { display: block; margin-bottom: 14px; font-size: 1.3rem; font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; }
	.menu-preview__card ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1.5px dashed var(--ink); display: grid; gap: 8px; }
	.menu-preview__card li { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
	/* Orange rows need a contrasting card tone */
	.menu-preview__card.tone--orange { background: var(--blue); }
}

/* ---------- Work / portfolio cards ---------- */
.work__grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.work-card { min-width: 0; }
.work-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.work-card__link:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--orange); }
.work-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-bottom: var(--bw) solid var(--ink);
	background: var(--paper-2);
}
.work-card__media img {
	position: absolute;
	left: 0; top: -8%;
	width: 100%; height: 116%;
	object-fit: cover;
	transition: scale 0.9s var(--ease);
}
.work-card__link:hover .work-card__media img { scale: 1.06; }
.work-card__cat { position: absolute; top: 16px; left: 16px; z-index: 1; }
.work-card__body { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 22px; }
.work-card__title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 900; font-stretch: 112%; line-height: 1.1; text-transform: uppercase; transition: color 0.2s; }
.work-card__link:hover .work-card__title { color: var(--orange-deep); }
.work-card__meta { margin-top: 6px; font-size: 0.9rem; color: var(--muted); }
.work-card__year { padding: 4px 8px; font-size: 0.75rem; border: 1.5px solid var(--ink); }

.work-card--cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	min-height: 260px;
	padding: clamp(28px, 4vw, 56px);
	background: var(--orange);
	color: var(--ink);
	text-decoration: none;
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
	transition: background 0.4s, color 0.4s, transform 0.4s var(--ease);
}
.work-card--cta .hand { color: var(--ink); }
.work-card--cta strong { font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 900; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; }
.work-card__cta-btn { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding-bottom: 4px; font-weight: 800; text-transform: uppercase; border-bottom: var(--bw) solid currentColor; }
.work-card--cta:hover { background: var(--ink); color: var(--paper); transform: translate(-4px, -4px); }
.work-card--cta:hover .hand { color: var(--blue); }
.work-card--cta .icon { transition: transform 0.4s var(--ease); }
.work-card--cta:hover .icon { transform: rotate(45deg); }

@media (min-width: 760px) {
	.work__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
	.work-card--1 { grid-column: 1 / span 7; }
	.work-card--2 { grid-column: 8 / span 5; margin-top: clamp(0px, 7vw, 112px); }
	.work-card--2 .work-card__media { aspect-ratio: 4 / 5; }
	.work-card--3 { grid-column: 1 / span 5; margin-top: calc(clamp(0px, 7vw, 112px) * -1); }
	.work-card--3 .work-card__media { aspect-ratio: 4 / 3; }
	.work-card--cta { grid-column: 6 / span 7; align-self: stretch; }
	.work__grid--even .work-card { grid-column: span 6; margin-top: 0; }
}

/* ---------- Process ---------- */
.process__grid { display: grid; gap: 48px; }
.process__lead { margin: 24px 0 32px; max-width: 30em; color: var(--muted); font-size: 1.1rem; }
.steps { position: relative; list-style: none; margin: 0; padding: 0; }
.steps__line { position: absolute; left: 27px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.steps__line i { display: block; width: 100%; height: var(--p, 0%); background: var(--orange); }
.steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 24px;
	padding-bottom: clamp(36px, 5vw, 64px);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	font-size: 1rem;
	font-weight: 700;
	background: var(--paper-2);
	border: var(--bw) solid var(--ink);
	transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}
.steps__item.is-in .steps__num { background: var(--ink); color: var(--orange); box-shadow: var(--shadow-sm); }
.steps__item h3 { margin: 10px 0 10px; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; }
.steps__item p { max-width: 36em; color: var(--muted); margin-bottom: 14px; }

@media (min-width: 1024px) {
	.process__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; }
	.process__intro { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
}

/* ---------- Do / don't ---------- */
.contrast .display { color: var(--ink); }
.contrast__grid { display: grid; gap: 24px; }
.dont-card {
	position: relative;
	padding: clamp(26px, 3vw, 40px);
	padding-top: clamp(64px, 6vw, 80px);
	background: var(--ink);
	color: var(--paper);
	border: var(--bw) solid var(--ink);
	box-shadow: 8px 8px 0 var(--paper);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.dont-card:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 12px 12px 0 var(--paper); }
.dont-card__x {
	position: absolute;
	top: 20px; left: clamp(26px, 3vw, 40px);
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--orange);
	color: var(--ink);
}
.dont-card h3 { margin-bottom: 14px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; }
.dont-card s {
	text-decoration: none;
	background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 56% / 0% 4px;
	transition: background-size 0.8s var(--ease) 0.4s;
}
.dont-card.is-in s { background-size: 100% 4px; }
.dont-card p { color: var(--muted-light); }
.contrast__cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }
.contrast .btn--dark { --btn-shadow: var(--paper); --btn-fill: var(--paper); --btn-fill-fg: var(--ink); }

@media (min-width: 900px) {
	.contrast__grid { grid-template-columns: repeat(3, 1fr); }
	.dont-card:nth-child(2) { margin-top: 40px; }
}

/* ---------- Pricing compare ---------- */
.pricing__grid { display: grid; gap: 48px; align-items: center; }
.pricing__lead { margin: 24px 0 28px; max-width: 32em; color: var(--muted); font-size: 1.1rem; }
.compare {
	padding: clamp(20px, 3vw, 36px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
}
.compare__legend { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 12px; font-size: 0.75rem; text-transform: uppercase; }
.compare__legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border: 1.5px solid var(--ink); }
.sw--us { background: var(--orange); }
.sw--avg { background: repeating-linear-gradient(-45deg, var(--paper-2) 0 4px, color-mix(in srgb, var(--ink) 22%, var(--paper-2)) 4px 6px); }
.compare__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 64px;
	grid-template-areas: "name name" "bars save";
	align-items: center;
	gap: 10px 16px;
	padding: 18px 0;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}
.compare__row:last-child { border-bottom: 0; padding-bottom: 0; }
.compare__name { grid-area: name; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; transition: color 0.2s; }
.compare__row:hover .compare__name { color: var(--orange-deep); }
.compare__bars { grid-area: bars; display: grid; gap: 6px; }
.compare__bar {
	position: relative;
	display: flex;
	align-items: center;
	height: 30px;
	width: 0;
	min-width: 0;
	border: 1.5px solid var(--ink);
	transition: width 1.3s var(--ease);
	overflow: visible;
}
.compare__bar.is-in { width: var(--w); }
.compare__bar b { position: absolute; left: 10px; font-size: 0.75rem; white-space: nowrap; }
.compare__bar--avg { background: repeating-linear-gradient(-45deg, var(--paper-2) 0 6px, color-mix(in srgb, var(--ink) 12%, var(--paper-2)) 6px 9px); color: var(--muted); }
.compare__bar--avg b { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.compare__bar--us { background: var(--orange); transition-delay: 0.25s; }
.compare__save { grid-area: save; padding: 6px 0; text-align: center; font-size: 0.8125rem; font-weight: 700; background: var(--blue); border: 1.5px solid var(--ink); }

@media (min-width: 640px) {
	.compare__row { grid-template-columns: 170px minmax(0, 1fr) 64px; grid-template-areas: "name bars save"; }
}
@media (min-width: 1024px) {
	.pricing__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}

/* ---------- Testimonials ---------- */
.quotes { display: grid; gap: 20px; }
.quote {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	padding: clamp(24px, 3vw, 40px);
	background: var(--ink-2);
	border: 1px solid var(--line-light);
	transition: border-color 0.3s, transform 0.4s var(--ease);
}
.quote:hover { border-color: var(--orange); transform: translateY(-4px); }
.quote__mark { color: var(--orange); }
.quote blockquote { font-size: 1.1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.quote--lg blockquote { font-size: clamp(1.45rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.015em; color: var(--paper); }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote figcaption img { width: 56px; height: 56px; object-fit: cover; border: var(--bw) solid var(--paper); }
.quote figcaption strong { display: block; font-weight: 900; text-transform: uppercase; }
.quote figcaption .mono { font-size: 0.6875rem; color: var(--muted-light); text-transform: uppercase; }

@media (min-width: 900px) {
	.quotes { grid-template-columns: 1.35fr 1fr; }
	.quote--lg { grid-row: span 2; }
}

/* ---------- Receipts (blog cards) ---------- */
.receipts { display: grid; gap: 36px 28px; padding: 12px 0; }
.receipts--scroll {
	grid-auto-flow: column;
	grid-auto-columns: min(82%, 340px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-inline: calc(var(--gutter) * -1);
	padding: 12px var(--gutter) 24px;
	scrollbar-width: none;
}
.receipts--scroll::-webkit-scrollbar { display: none; }
.receipt {
	scroll-snap-align: start;
	filter: drop-shadow(8px 8px 0 var(--blue));
	rotate: -1deg;
}
.receipt:nth-child(even) { rotate: 1deg; }
.receipt__link {
	--s: 8px;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 420px;
	padding: 32px 26px;
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	-webkit-mask:
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%,
		conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
	-webkit-mask-composite: source-in;
	mask:
		conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%,
		conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--s)) 100%;
	mask-composite: intersect;
	transition: transform 0.45s var(--ease);
}
.receipt:hover .receipt__link { transform: translateY(-6px) rotate(0.0001deg); }
.receipt:hover { rotate: 0deg; transition: rotate 0.45s var(--ease); }
.receipt__head { display: grid; gap: 2px; padding-bottom: 16px; margin-bottom: 14px; text-align: center; border-bottom: 2px dashed var(--ink); }
.receipt__brand { font-weight: 900; font-stretch: 125%; font-size: 1.05rem; }
.receipt__meta { font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; color: var(--muted); }
.receipt__row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; }
.receipt .tag { align-self: flex-start; }
.receipt__title { flex-grow: 1; margin: 14px 0 10px; font-size: 1.35rem; font-weight: 900; font-stretch: 112%; line-height: 1.1; text-transform: uppercase; transition: color 0.2s; }
.receipt:hover .receipt__title { color: var(--orange-deep); }
.receipt__excerpt { margin-bottom: 18px; font-size: 0.9rem; color: var(--muted); }
.receipt__total { display: flex; justify-content: space-between; padding-top: 14px; border-top: 2px dashed var(--ink); font-size: 0.75rem; font-weight: 700; }
.receipt__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: center;
	margin-top: 18px;
	padding: 8px 14px;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	transition: background 0.2s, color 0.2s;
}
.receipt:hover .receipt__cta { background: var(--orange); color: var(--ink); }

@media (min-width: 900px) {
	.receipts, .receipts--scroll {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow: visible;
		margin-inline: 0;
		padding: 12px 0;
	}
}

/* ---------- FAQ accordion ---------- */
.faq__grid { display: grid; gap: 40px; }
.faq__aside { margin-top: 28px; }
.accordion { display: grid; gap: 14px; }
.accordion__item {
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.3s var(--ease), translate 0.9s var(--ease) var(--d, 0ms), opacity 0.9s var(--ease) var(--d, 0ms);
}
.accordion__item[open] { box-shadow: 6px 6px 0 var(--orange); }
.accordion__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	cursor: pointer;
	list-style: none;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__q { display: flex; align-items: flex-start; gap: 12px; font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.3; }
.accordion__q .mono, .accordion__a .mono {
	flex: none;
	margin-top: 1px;
	padding: 3px 7px;
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--orange);
	border: 1.5px solid var(--ink);
}
.accordion__a .mono { background: var(--ink); color: var(--paper); }
.accordion__q .mono { color: var(--black); }
.accordion__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid var(--ink); border-radius: 50%; transition: transform 0.4s var(--ease), background 0.3s; }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.accordion__a { display: flex; align-items: flex-start; gap: 12px; padding: 0 22px 22px; color: var(--muted); }
.accordion__q { align-items: flex-start; }
.accordion__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
}
.accordion__item[open]::details-content { block-size: auto; }

@media (min-width: 1024px) {
	.faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
	.faq__grid > div:first-child { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
}

/* ---------- Contact ---------- */
.contact { overflow: hidden; }
.contact__glow {
	position: absolute;
	top: -30vw; right: -25vw;
	width: 70vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 95, 31, 0.32), transparent 62%);
	pointer-events: none;
}
.contact__grid { position: relative; display: grid; gap: 48px; }
.contact .display { color: var(--paper); }
.contact__lead { margin: 24px 0 32px; max-width: 30em; font-size: 1.15rem; color: var(--muted-light); }
.contact__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.contact__list li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-light); }
.contact__list small { display: block; margin-bottom: 2px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-light); }
.contact__list a, .contact__list span > span { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--orange); }

.form-card {
	padding: clamp(20px, 3vw, 40px);
	background: var(--paper);
	color: var(--ink);
	border: var(--bw) solid var(--paper);
	box-shadow: 10px 10px 0 var(--orange);
}
.form-card__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 14px;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 2px dashed var(--line);
}
.form-card__status { display: inline-flex; align-items: center; gap: 8px; }
.form-card__status i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }

@media (min-width: 1024px) {
	.contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
}

/* ---------- Contact Form 7 ---------- */
.wpcf7-form { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.wpcf7-form label { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 15px 16px;
	font: 500 1rem/1.4 var(--font);
	color: var(--ink);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	border-radius: 0;
	box-shadow: 4px 4px 0 var(--shade);
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form ::placeholder { color: #9a958b; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { outline: none; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--orange); }
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
	width: 100%;
	margin-top: 6px;
	padding: 19px 24px;
	font: 800 1.05rem/1 var(--font);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	border: var(--bw) solid var(--ink);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--orange);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.25s, color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover { background: var(--orange); color: var(--ink); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shade); }
.wpcf7-form input[type="submit"]:active { transform: translate(2px, 2px); box-shadow: none; }
.wpcf7-not-valid-tip { margin-top: 6px; font-family: var(--mono); font-size: 0.75rem; color: #b91c1c; }
.wpcf7 form .wpcf7-response-output { margin: 8px 0 0; padding: 12px 16px; font-weight: 600; border: var(--bw) solid var(--ink); background: var(--white); }
.wpcf7 form.sent .wpcf7-response-output { border-color: #16a34a; }
.wpcf7-spinner { margin: 12px auto 0; }
.wpcf7-list-item { margin: 0 12px 0 0; }
.wpcf7-acceptance label, .wpcf7-checkbox label { font-family: var(--font); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--section); background: var(--ink); color: var(--paper); overflow: hidden; }
.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: clamp(40px, 5vw, 56px);
	border-bottom: 1px solid var(--line-light);
}
.site-footer__claim { max-width: 22em; font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; }
.site-footer__claim span { color: var(--orange); }
.site-footer .btn--orange { --btn-fill: var(--paper); --btn-shadow: var(--paper); }
.site-footer__grid { display: grid; gap: 40px; padding-block: clamp(40px, 5vw, 64px); }
.site-footer__heading { margin-bottom: 18px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-light); }
.site-footer__links, .site-footer__contact { list-style: none; margin: 0; padding: 0; }
.site-footer__links li { break-inside: avoid; }
.site-footer__links a, .site-footer__contact a, .site-footer__contact span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-weight: 600;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.86);
	transition: color 0.2s, transform 0.3s var(--ease);
}
.site-footer__links a:hover, .site-footer__contact a:hover { color: var(--orange); transform: translateX(4px); }
.site-footer__links--2col { columns: 2; column-gap: 24px; }
.site-footer__social { display: flex; gap: 12px; }
.site-footer__social a {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	border: 1.5px solid var(--line-light);
	transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.site-footer__social a:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); transform: rotate(-8deg); }

.site-footer__wordmark {
	display: flex;
	justify-content: center;
	gap: 0.14em;
	padding-inline: var(--gutter);
	font-size: clamp(2rem, 8.2vw, 12rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 0.8;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.24);
	user-select: none;
	translate: 0 0.08em;
}
.site-footer__wordmark span:last-child { -webkit-text-stroke-color: var(--orange); }

.site-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	padding-block: 22px 28px;
	border-top: 1px solid var(--line-light);
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-light);
}
.site-footer__bottom p span { opacity: 0.55; }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.site-footer__bottom a { text-decoration: none; transition: color 0.2s; }
.site-footer__bottom a:hover { color: var(--orange); }
.to-top {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 1.5px solid var(--line-light);
	color: var(--paper);
	cursor: pointer;
	transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.to-top svg { transform: rotate(90deg); }
.to-top:hover { background: var(--orange); color: var(--ink); border-color: var(--orange); }

@media (min-width: 640px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
	.site-footer__grid { grid-template-columns: 1.15fr 0.8fr 1.6fr 0.8fr; }
}
@media (max-width: 420px) {
	.site-footer__links--2col { columns: 1; }
}

/* ---------- Custom cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
	html.has-cursor .cursor { display: block; }
	html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor summary, html.has-cursor [role="button"] { cursor: none; }
}
.cursor__dot, .cursor__ring {
	position: fixed;
	top: 0; left: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s;
}
.cursor.is-visible .cursor__dot, .cursor.is-visible .cursor__ring { opacity: 1; }
.cursor__dot {
	width: 10px; height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--orange);
	border: 1px solid var(--ink);
}
.cursor__ring {
	display: grid;
	place-items: center;
	width: 30px; height: 30px;
	margin: -15px 0 0 -15px;
	border: 1.5px solid var(--ink);
	background: rgba(125, 249, 255, 0.35);
	transition: opacity 0.3s, width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.3s, rotate 0.35s var(--ease);
}
.cursor.is-hover .cursor__ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; rotate: 45deg; background: rgba(255, 95, 31, 0.4); }
.cursor.is-label .cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; rotate: 0deg; border-radius: 50%; background: var(--orange); border-color: var(--ink); }
.cursor__ring::after {
	content: attr(data-label);
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0;
	transition: opacity 0.2s;
}
.cursor.is-label .cursor__ring::after { opacity: 1; }
.cursor.is-down .cursor__dot { scale: 0.6; }

/* ---------- Connect FAB + business card ---------- */
.connect-fab {
	position: fixed;
	right: clamp(14px, 2vw, 24px);
	bottom: clamp(14px, 2vw, 24px);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--orange);
	color: var(--ink);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s, visibility 0.3s;
}
.connect-fab:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.connect-fab .icon { animation: pulse-dot 2s ease-in-out infinite; }
.connect-fab__ping { position: absolute; top: -5px; right: -5px; width: 11px; height: 11px; border-radius: 50%; background: #4def8e; border: 1.5px solid var(--ink); }
.connect-fab__ping::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: #4def8e; animation: ping 1.6s ease-out infinite; }
@keyframes ping { to { transform: scale(2.4); opacity: 0; } }
body.menu-open .connect-fab, body.fab-hidden .connect-fab { opacity: 0; visibility: hidden; }

.connect-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(13, 13, 13, 0.86);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity 0.3s;
}
.connect-modal[hidden] { display: none; }
.connect-modal.is-open { opacity: 1; }
.connect-modal__panel {
	position: relative;
	width: min(480px, 100%);
	padding-top: 56px;
	text-align: center;
	transform: translateY(20px) scale(0.96);
	transition: transform 0.45s var(--ease);
}
.connect-modal.is-open .connect-modal__panel { transform: none; }
.connect-modal__close {
	position: absolute;
	top: 0; right: 0;
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	padding: 0;
	background: var(--white);
	color: var(--ink);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--orange);
	cursor: pointer;
}
.connect-modal__hint { display: grid; gap: 4px; margin-bottom: 24px; }
.connect-modal__hint .mono { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-light); }
.connect-modal__hint strong { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.875rem; font-weight: 900; text-transform: uppercase; color: var(--yellow); }
.connect-modal__hint .icon { animation: spin 12s linear infinite; }
.connect-modal__note {
	display: inline-block;
	margin-top: 32px;
	padding: 10px 14px;
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: 4px 4px 0 var(--orange);
}

.vcard { height: 260px; perspective: 1100px; cursor: pointer; text-align: left; }
.vcard__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s var(--ease); }
.vcard.is-flipped .vcard__inner { transform: rotateY(180deg); }
.vcard__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 22px;
	border: 3px solid var(--ink);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.vcard__front { background: #faf9f6; color: var(--ink); box-shadow: 8px 8px 0 var(--orange); }
.vcard__back { background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 var(--white); transform: rotateY(180deg); border-color: var(--ink); }
.vcard__dots { position: absolute; top: 16px; left: 16px; display: flex; gap: 4px; }
.vcard__dots i { width: 8px; height: 8px; background: var(--ink); }
.vcard__dots i:nth-child(2) { background: var(--orange); }
.vcard__live { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 6px; font-size: 0.625rem; font-weight: 700; color: #71717a; text-transform: uppercase; }
.vcard__live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.vcard__logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.vcard__name { display: grid; font-size: 1.5rem; font-weight: 900; font-stretch: 112%; line-height: 1; text-transform: uppercase; letter-spacing: -0.03em; }
.vcard__name span { color: var(--orange); font-size: 1.2rem; }
.vcard__sub { text-align: center; font-size: 0.75rem; font-weight: 700; color: #52525b; }
.vcard__strip { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 12px; border-top: 2px solid rgba(0, 0, 0, 0.1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.vcard__strip b { padding: 2px 8px; background: var(--ink); color: var(--white); }
.vcard__back .vcard__strip { border-top-color: #27272a; color: #a1a1aa; }
.vcard__back .vcard__strip b { background: none; color: var(--orange); padding: 0; }
.vcard__strip--top { padding: 0; border: 0; }
.vcard__strip--top span { display: inline-flex; align-items: center; gap: 6px; color: var(--paper); font-family: var(--font); font-weight: 900; font-size: 0.75rem; }
.vcard__back .vcard__strip--top b { background: var(--orange); color: var(--white); padding: 2px 8px; }
.vcard__person strong { display: block; font-size: 1.4rem; font-weight: 900; color: var(--yellow); letter-spacing: -0.02em; }
.vcard__person .mono { font-size: 0.75rem; color: #a1a1aa; }
.vcard__links { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 8px; font-size: 0.8125rem; border-top: 2px solid #27272a; }
.vcard__links a { display: inline-flex; align-items: center; gap: 8px; color: #e4e4e7; text-decoration: none; font-weight: 700; }
.vcard__links a .icon { color: var(--orange); }
.vcard__links a:hover { color: var(--orange); }

/* ---------- Inner pages ---------- */
.page-hero {
	position: relative;
	padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 clamp(40px, 6vw, 80px);
	overflow: hidden;
}
.page-hero .hero__grid-bg { -webkit-mask-image: radial-gradient(ellipse 60% 80% at 85% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 80% at 85% 20%, #000 10%, transparent 70%); }
.page-hero__inner { position: relative; }
.page-hero h1 { margin-bottom: clamp(20px, 3vw, 32px); }
.page-hero .lead { animation: fade-up 0.9s var(--ease) 0.2s both; }
.page-hero h1 { animation: fade-up 0.9s var(--ease) 0.05s both; }
.page-hero__split { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) {
	.page-hero__split { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
}
.page-hero .hand { display: inline-block; margin-bottom: 16px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips a {
	padding: 8px 14px;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--white);
	border: 1.5px solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
	transition: background 0.2s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.filter-chips a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--orange); }
.filter-chips a.is-active { background: var(--ink); color: var(--paper); }

.cta-band {
	position: relative;
	overflow: hidden;
	padding: clamp(40px, 6vw, 80px);
	background: var(--orange);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
	display: grid;
	gap: 28px;
	align-items: center;
}
.cta-band h2 { font-size: clamp(2rem, 5vw, 4.25rem); font-weight: 900; font-stretch: 125%; line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase; }
.cta-band .hand { color: var(--ink); }
.cta-band::after {
	content: "";
	position: absolute;
	right: -60px; bottom: -60px;
	width: 220px; height: 220px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	opacity: 0.25;
	pointer-events: none;
}
@media (min-width: 900px) {
	.cta-band { grid-template-columns: minmax(0, 1fr) auto; }
}

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px; height: 44px;
	padding: 0 12px;
	font-family: var(--mono);
	font-weight: 700;
	text-decoration: none;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
}
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); }
.pagination a.page-numbers:hover { background: var(--orange); }

.empty-state { grid-column: 1 / -1; padding: 64px 0; text-align: center; }
.empty-state h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; text-transform: uppercase; opacity: 0.3; }

/* Service cards (services page) */
.service-grid { display: grid; gap: 24px; }
.service-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.6vw, 32px);
	color: inherit;
	text-decoration: none;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--orange); }
.service-card .tile { margin-bottom: 28px; transition: transform 0.4s var(--ease); }
.service-card:hover .tile { transform: rotate(-8deg) scale(1.06); }
.service-card h2, .service-card h3 { margin-bottom: 10px; font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 900; font-stretch: 112%; line-height: 1.05; text-transform: uppercase; transition: color 0.2s; }
.service-card:hover h2, .service-card:hover h3 { color: var(--orange-deep); }
.service-card__tagline { margin-bottom: 20px; color: var(--muted); }
.service-card ul { flex-grow: 1; list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.service-card li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.service-card li::before { content: ""; width: 8px; height: 8px; background: var(--orange); border: 1.5px solid var(--ink); }
.service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 2px solid var(--line); }
.service-card__price { font-weight: 900; font-size: 1.15rem; }
.service-card__arrow { display: grid; place-items: center; width: 40px; height: 40px; background: var(--ink); color: var(--paper); transition: background 0.3s, color 0.3s, transform 0.4s var(--ease); }
.service-card:hover .service-card__arrow { background: var(--orange); color: var(--ink); transform: rotate(-45deg); }
@media (min-width: 680px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

/* Service detail */
.service-hero__grid { display: grid; gap: 40px; align-items: start; }
.service-hero .tile--lg { margin-bottom: 28px; animation: card-in 0.8s var(--ease) both; }
.service-hero .display { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.service-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.price-card {
	position: relative;
	padding: clamp(24px, 3vw, 40px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
	animation: fade-up 0.9s var(--ease) 0.3s both;
}
.price-card__badge { position: absolute; top: -14px; right: 18px; }
.price-card__label { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.price-card__amount { margin: 10px 0 4px; font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 900; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.03em; color: var(--orange-deep); }
.price-card__unit { font-weight: 800; text-transform: uppercase; }
.price-card__note { margin: 18px 0 24px; font-size: 0.9rem; color: var(--muted); }
.price-card__list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 2px dashed var(--line); display: grid; gap: 10px; }
.price-card__list li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 600; }
.price-card__list .icon { color: #16a34a; flex: none; }
@media (min-width: 1024px) {
	.service-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; }
	.price-card { position: sticky; top: calc(var(--header-h) + 32px); }
}

.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; }
.roadmap li {
	position: relative;
	padding: 24px;
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.roadmap li:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--orange); }
.roadmap__step { display: block; margin-bottom: 14px; font-size: 2rem; font-weight: 900; font-stretch: 125%; line-height: 1; color: var(--orange-deep); }
.roadmap h3 { margin-bottom: 8px; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; }
.roadmap p { font-size: 0.92rem; color: var(--muted); }
@media (min-width: 640px) { .roadmap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.roadmap { grid-template-columns: repeat(var(--cols, 5), 1fr); }
	.roadmap li:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 42px; right: -18px;
		width: 20px; height: 2px;
		background: var(--ink);
	}
}

.benefits { display: grid; gap: 20px; }
.benefit {
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.benefit:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--shade); }
.benefit .tile { margin-bottom: 20px; }
.benefit h3 { margin-bottom: 8px; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; }
.benefit p { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 640px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits { grid-template-columns: repeat(3, 1fr); } }

.specs { display: grid; gap: 18px 32px; list-style: none; margin: 0; padding: 0; }
.specs li { display: flex; align-items: flex-start; gap: 12px; font-weight: 700; font-size: 1rem; line-height: 1.35; text-transform: uppercase; }
.specs .icon { flex: none; padding: 3px; color: var(--ink); background: var(--orange); border-radius: 50%; }
@media (min-width: 640px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .specs { grid-template-columns: repeat(4, 1fr); } }

/* Price chart */
.price-chart {
	padding: clamp(24px, 3.5vw, 44px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
}
.price-chart__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 92px; }
.price-chart__head .eyebrow { margin-bottom: 8px; }
.price-chart__title { font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 900; font-stretch: 112%; text-transform: uppercase; line-height: 1; }
.price-chart__saved { display: grid; justify-items: end; gap: 4px; }
.price-chart__saved .mono { font-size: 0.6875rem; text-transform: uppercase; color: var(--muted); }
.price-chart__saved strong { padding: 6px 14px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; font-stretch: 125%; line-height: 1; background: var(--green); border: var(--bw) solid var(--ink); }
.price-chart__track { position: relative; height: 22px; background: var(--paper-2); border: var(--bw) solid var(--ink); }
.price-chart__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--green) 0 45%, var(--yellow) 45% 75%, var(--red) 75%);
	transition: width 1.4s var(--ease);
}
.price-chart__bar.is-in { width: var(--w); }
.price-chart__pin {
	position: absolute;
	bottom: calc(100% + 10px);
	left: var(--x);
	display: grid;
	gap: 2px;
	padding: 6px 10px;
	font-family: var(--mono);
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
	background: var(--white);
	border: 1.5px solid var(--ink);
	transform: translateX(-50%);
}
.price-chart__pin::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 12px; background: var(--ink); }
.price-chart__pin b { font-size: 0.625rem; text-transform: uppercase; color: var(--muted); }
.price-chart__pin--us { background: var(--ink); color: var(--paper); z-index: 1; }
.price-chart__pin--us b { color: var(--orange); }
.price-chart__pin s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.price-chart__legend { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.6875rem; text-transform: uppercase; color: var(--muted); }
.price-chart__note { margin-top: 24px; font-size: 0.92rem; color: var(--muted); }

/* Portfolio detail */
.project-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.project-cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	margin-top: clamp(32px, 5vw, 56px);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
	background: var(--paper-2);
}
.project-cover img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.project-grid { display: grid; gap: 40px; align-items: start; }
.project-aside { padding: clamp(22px, 3vw, 32px); }
.project-aside h2 { margin-bottom: 14px; font-size: 1.3rem; font-weight: 900; text-transform: uppercase; }
.project-aside p { color: var(--muted); }
.project-aside h3 { margin: 24px 0 12px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-deep); }
.project-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.project-aside li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.project-aside li::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.project-quote { margin-top: 24px; padding: 22px; background: var(--ink); color: var(--paper); }
.project-quote blockquote { font-style: italic; color: rgba(255, 255, 255, 0.85); }
.project-quote figcaption { margin-top: 12px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--blue); }
.pdf-frame {
	position: relative;
	height: clamp(520px, 80vh, 820px);
	overflow: hidden;
	background: var(--ink);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
}
.pdf-frame iframe { width: 100%; height: 100%; border: 0; }
.pdf-frame__open { position: absolute; right: 16px; bottom: 16px; }
.pdf-note { margin-top: 18px; font-size: 0.8125rem; color: var(--muted); text-align: center; }
.project-next { display: grid; gap: 16px; margin-top: var(--section); }
@media (min-width: 1024px) {
	.project-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
	.project-aside { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* Article */
.article-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 24px; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.article-meta span { display: inline-flex; align-items: center; gap: 8px; }
.article-title { font-size: clamp(2rem, 4.2vw, 3.75rem); max-width: 24ch; line-height: 0.95; }
.article-grid { display: grid; gap: 40px; align-items: start; }
.article-body {
	position: relative;
	padding: clamp(24px, 4.5vw, 64px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
}
.article-body > .tag { position: absolute; top: -14px; left: clamp(24px, 4.5vw, 64px); }
.article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--line); }
.author { display: flex; align-items: center; gap: 14px; }
.author__avatar { display: grid; place-items: center; width: 56px; height: 56px; font-weight: 900; font-size: 1.3rem; background: var(--ink); color: var(--orange); border: var(--bw) solid var(--ink); }
.author strong { display: block; font-weight: 900; text-transform: uppercase; }
.author span { font-size: 0.8125rem; color: var(--muted); }
.article-foot__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sidebar { display: grid; gap: 24px; }
.widget { padding: 24px; background: var(--white); border: var(--bw) solid var(--ink); box-shadow: var(--shadow); }
.widget__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; border-bottom: var(--bw) solid var(--ink); }
.widget__title::before { content: ""; width: 10px; height: 10px; background: var(--orange); }
.widget p { margin-bottom: 18px; font-size: 0.92rem; color: var(--muted); }
.widget dl { display: grid; gap: 12px; margin-bottom: 20px; }
.widget dt { font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; color: var(--muted); }
.widget dd a, .widget dd { font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.widget dd a:hover { color: var(--orange-deep); }
.recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.recent a { display: block; padding: 14px; border: 1.5px solid var(--line); text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.recent a:hover { border-color: var(--ink); background: var(--paper); }
.recent span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.625rem; text-transform: uppercase; color: var(--muted); }
.recent strong { font-size: 0.95rem; font-weight: 800; line-height: 1.25; }
@media (min-width: 1024px) {
	.article-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; }
	.sidebar { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* Long-form content */
.prose { max-width: 70ch; font-size: clamp(1.05rem, 1.2vw, 1.15rem); line-height: 1.75; color: var(--text-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2, .prose h3, .prose h4 { margin-top: 1.9em; margin-bottom: 0.2em; font-weight: 900; font-stretch: 112%; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.prose h2 { font-size: 1.75em; }
.prose h3 { font-size: 1.35em; }
.prose h4 { font-size: 1.1em; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-deep); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--orange-deep); font-weight: 800; }
.prose blockquote { padding: 0.4em 0 0.4em 1.1em; border-left: 4px solid var(--orange); font-weight: 700; font-size: 1.1em; color: var(--ink); }
.prose img, .prose figure { border: var(--bw) solid var(--ink); }
.prose figure img { border: 0; }
.prose figcaption { padding: 8px 12px; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.prose code { padding: 0.15em 0.4em; font-family: var(--mono); font-size: 0.88em; background: var(--paper-2); }
.prose pre { padding: 1.2em; overflow-x: auto; background: var(--ink); color: var(--paper); }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.prose th, .prose td { padding: 0.6em 0.8em; border: 1.5px solid var(--ink); text-align: left; }
.prose th { background: var(--paper-2); }
.prose hr { border: 0; border-top: 2px dashed var(--line); }
.prose .alignleft { float: left; margin: 0.4em 1.5em 1em 0; }
.prose .alignright { float: right; margin: 0.4em 0 1em 1.5em; }
.prose .aligncenter { margin-inline: auto; }
.content-card { padding: clamp(24px, 4.5vw, 64px); }

/* 404 + competitor watch */
.error-page { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 48px) 0 80px; }
.error-page__code {
	display: inline-block;
	margin-bottom: 36px;
	padding: 0.1em 0.3em;
	font-size: clamp(5rem, 16vw, 11rem);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	background: var(--orange);
	border: 4px solid var(--ink);
	box-shadow: var(--shadow-lg);
	rotate: 3deg;
	animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble { 50% { rotate: -2deg; } }
.error-page .lead { margin: 24px auto 36px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.alert-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 12px 16px;
	font-weight: 900;
	font-size: clamp(0.8rem, 1.4vw, 1rem);
	text-transform: uppercase;
	text-align: center;
	background: var(--orange);
	border-bottom: var(--bw) solid var(--ink);
}
.alert-bar .icon { flex: none; animation: pulse-dot 1.2s ease-in-out infinite; }
.choice-grid { display: grid; gap: 20px; margin-top: 40px; }
.choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 32px 24px;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	border: var(--bw) solid var(--ink);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.3s;
}
.choice--yes { background: var(--ink); color: var(--paper); box-shadow: 8px 8px 0 var(--blue); }
.choice--no { background: var(--white); opacity: 0.55; box-shadow: var(--shadow-sm); }
.choice:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shade); opacity: 1; }
.choice--yes .icon { color: var(--blue); }
@media (min-width: 760px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.fear-grid { display: grid; gap: 16px; margin-top: 32px; }
.fear-grid li { display: flex; align-items: center; gap: 14px; padding: 18px; font-weight: 900; font-size: 0.9rem; text-transform: uppercase; background: var(--white); border: var(--bw) solid var(--ink); box-shadow: var(--shadow-sm); }
@media (min-width: 760px) { .fear-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Zaigraj (Snake) ---------- */
.page-hero--compact { padding-bottom: clamp(32px, 4vw, 56px); }
.site-nav__link--play::before {
	content: "";
	position: absolute;
	top: 8px; right: 4px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--orange);
	animation: pulse-dot 1.6s ease-in-out infinite;
}
.game-layout { display: grid; gap: 28px; align-items: start; }
.game {
	min-width: 0;
	padding: clamp(12px, 2vw, 20px);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	box-shadow: var(--shadow-lg);
}
.game__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 14px;
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--muted);
}
.game__bar b { margin-left: 6px; font-size: 1rem; color: var(--ink); }
.game__stage {
	position: relative;
	aspect-ratio: 1;
	/* the whole board always fits on screen together with the header and score bar */
	width: min(100%, max(280px, calc(100svh - var(--header-h) - 150px)));
	margin-inline: auto;
	border: var(--bw) solid var(--ink);
	overflow: hidden;
}
.game__canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.game__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--orange); }
.game__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transform: scale(1.03);
	transition: opacity 0.35s, transform 0.45s var(--ease), visibility 0s 0.35s;
}
.game__overlay.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s, transform 0.45s var(--ease), visibility 0s; }
.game__overlay h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; font-stretch: 125%; line-height: 0.95; text-transform: uppercase; }
.game__overlay p { max-width: 30em; color: var(--muted); }
.game__overlay .hand { color: var(--ink); }
.game__hint { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; }
.game__form { display: grid; gap: 8px; width: min(100%, 380px); text-align: left; }
.game__form[hidden] { display: none; }
.game__form label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.game__form-row { display: flex; gap: 8px; }
.game__form input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	font: 600 1rem var(--font);
	color: var(--ink);
	background: var(--white);
	border: var(--bw) solid var(--ink);
	border-radius: 0;
	box-shadow: 3px 3px 0 var(--shade);
}
.game__form input:focus { outline: none; box-shadow: 4px 4px 0 var(--orange); }
.game__form.is-done .game__form-row { display: none; }
.game__msg { min-height: 1.2em; font-size: 0.75rem; font-weight: 700; color: var(--ink); }

.dpad {
	display: none;
	grid-template-columns: repeat(3, 60px);
	grid-template-rows: repeat(2, 60px);
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}
.dpad__btn {
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--ink);
	background: var(--paper);
	border: var(--bw) solid var(--ink);
	box-shadow: 3px 3px 0 var(--shade);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}
.dpad__btn:active { transform: translate(2px, 2px); box-shadow: none; background: var(--orange); color: var(--black); }
.dpad__up { grid-column: 2; grid-row: 1; }
.dpad__up svg { transform: rotate(180deg); }
.dpad__left { grid-column: 1; grid-row: 2; }
.dpad__left svg { transform: rotate(90deg); }
.dpad__down { grid-column: 2; grid-row: 2; }
.dpad__right { grid-column: 3; grid-row: 2; }
.dpad__right svg { transform: rotate(-90deg); }
@media (pointer: coarse), (max-width: 760px) { .dpad { display: grid; } }
@media (max-width: 520px) {
	.game__overlay { gap: 10px; padding: 16px; }
	.game__overlay .tile { display: none; }
	.game__overlay h2 { font-size: 1.6rem; }
	.game__overlay p { font-size: 0.875rem; }
	.game__overlay .btn--lg { font-size: 0.9rem; padding: 0.85em 1.2em; }
	.game__form label { display: none; }
}
body.no-fab .connect-fab { display: none; }

.game-side { display: grid; gap: 24px; }
.leaderboard__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.leaderboard__row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1.5px solid var(--line);
	transition: border-color 0.2s, transform 0.3s var(--ease);
}
.leaderboard__row:hover { border-color: var(--ink); transform: translateX(3px); }
.leaderboard__row.is-top { border-color: var(--ink); }
.leaderboard__row.is-top:first-child { background: var(--yellow); color: var(--black); border-color: var(--black); }
.leaderboard__row.is-me { box-shadow: 4px 4px 0 var(--orange); border-color: var(--ink); }
.leaderboard__rank { font-weight: 700; font-size: 0.875rem; text-align: center; }
.leaderboard__name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard__score { font-weight: 700; font-size: 0.875rem; }
.leaderboard__empty { padding: 12px 0; font-size: 0.8125rem; color: var(--muted); }
.leaderboard__note { margin: 0 !important; font-size: 0.6875rem !important; line-height: 1.5; }
.game-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.9rem; color: var(--muted); }
kbd {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	margin-right: 3px;
	padding: 0 6px;
	font: 700 0.75rem var(--mono);
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--ink);
	box-shadow: 2px 2px 0 var(--shade);
}
.game-cta { min-height: 0; grid-column: auto !important; }
.game-cta strong { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }

@media (min-width: 1024px) {
	.game-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; }
	.game-side { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* CF7: "while you wait" nudge after a successful send */
.wait-nudge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 14px 16px;
	color: var(--black);
	background: var(--yellow);
	border: var(--bw) solid var(--black);
	box-shadow: 4px 4px 0 var(--black);
	font-weight: 800;
	text-decoration: none;
	animation: fade-up 0.6s var(--ease) both;
}
.wait-nudge:hover { background: var(--orange); }

/* ---------- Scroll reveal ---------- */
html.js [data-reveal] {
	opacity: 0;
	translate: 0 36px;
	/* keep the elements' own hover transitions alongside the reveal */
	transition:
		opacity 0.9s var(--ease) var(--d, 0ms),
		translate 0.9s var(--ease) var(--d, 0ms),
		transform 0.4s var(--ease),
		box-shadow 0.4s var(--ease),
		border-color 0.3s,
		rotate 0.45s var(--ease);
}
html.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
	html.js [data-reveal] { opacity: 1; translate: none; }
	.marquee__track { animation: none; }
	.hero__title .w > span { transform: none; }
}

/* ==========================================================================
   Dark theme
   Semantic tokens flip; elements that are "objects" in the brand (polaroids,
   receipts, stickers, accent tiles, ink/orange sections) keep their light-mode
   token set so they look identical in both themes.
   ========================================================================== */
html[data-theme="dark"] {
	--ink: #f2f0eb;
	--paper: #111113;
	--paper-2: #19191d;
	--white: #1f1f24;
	--muted: #a6a197;
	--text-2: #d4d0c7;
	--line: rgba(242, 240, 235, 0.13);
	--shade: #000000;
	--orange-deep: #ff7a45;
	--shadow-sm: 4px 4px 0 var(--shade);
	--shadow: 6px 6px 0 var(--shade);
	--shadow-lg: 10px 10px 0 var(--shade);
	color-scheme: dark;
}

html[data-theme="dark"] :is(
	.section--ink, .site-footer, .section--orange, .cta-band, .work-card--cta,
	.hero__card, .sticker, .badge-spin, .chip, .receipt, .mega__promo, .project-quote,
	.tile, .tag--orange, .tag--blue, .tag--yellow, .tag--paper,
	.btn--orange, .connect-fab, .connect-modal__panel,
	.compare__save, .compare__bar--us, .price-chart__saved strong, .error-page__code, .alert-bar
) {
	--ink: #0d0d0d;
	--paper: #f2f0eb;
	--paper-2: #e7e3da;
	--white: #ffffff;
	--muted: #5a564e;
	--text-2: #3b3832;
	--line: rgba(13, 13, 13, 0.14);
	--shade: #0d0d0d;
	--orange-deep: #d9440a;
	--shadow-sm: 4px 4px 0 var(--shade);
	--shadow: 6px 6px 0 var(--shade);
	--shadow-lg: 10px 10px 0 var(--shade);
}
html[data-theme="dark"] :is(.chip, .sticker:not(.sticker--white), .hero__card, .cta-band, .compare__save, .compare__bar--us, .price-chart__saved strong, .error-page__code, .alert-bar) { color: var(--ink); }

/* Dark sections sit one step below the page so the rhythm survives */
html[data-theme="dark"] .section--ink,
html[data-theme="dark"] .site-footer { background: #060607; }
html[data-theme="dark"] .section--ink { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* Accent cards in the ink sections get a warm edge instead of a black shadow */
html[data-theme="dark"] .hero__card,
html[data-theme="dark"] .work-card__link,
html[data-theme="dark"] .compare,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .price-chart { box-shadow: 8px 8px 0 #000, 0 0 0 1px rgba(255, 255, 255, 0.02); }

/* Highlighted hero word: thin neon underline instead of a marker behind light text */
html[data-theme="dark"] .hl { color: var(--blue); --hl-h: 9%; background-position: 0 100%; }
html[data-theme="dark"] .steps__item.is-in .steps__num { background: var(--orange); color: var(--black); }
html[data-theme="dark"] .hero__grid-bg { opacity: 0.55; }
html[data-theme="dark"] .manifest__photo img { filter: grayscale(1) contrast(1.1) brightness(0.85); }
html[data-theme="dark"] .contact__glow { background: radial-gradient(circle, rgba(255, 95, 31, 0.24), transparent 62%); }
html[data-theme="dark"] .cursor__ring { background: rgba(125, 249, 255, 0.18); }
html[data-theme="dark"] .text-ink-outline { -webkit-text-stroke-color: var(--ink); }
html[data-theme="dark"] img { transition: filter 0.4s; }

/* Smooth colour change when the browser has no View Transitions support */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
	transition: background-color 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), fill 0.5s var(--ease) !important;
}

/* Circular reveal from the switch (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* ---------- Theme switch (iOS-style) ---------- */
.theme-switch {
	flex: none;
	position: relative;
	display: inline-flex;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.theme-switch:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.theme-switch__track {
	position: relative;
	display: block;
	width: 64px;
	height: 34px;
	overflow: hidden;
	border-radius: 999px;
	border: var(--bw) solid var(--ink);
	background: linear-gradient(160deg, #c9f6ff 0%, #fff1cc 100%);
	box-shadow: 3px 3px 0 var(--shade), inset 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: background 0.5s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.theme-switch:hover .theme-switch__track { box-shadow: 4px 4px 0 var(--orange), inset 0 1px 2px rgba(0, 0, 0, 0.12); }
.theme-switch__cloud {
	position: absolute;
	right: 8px;
	top: 13px;
	width: 16px;
	height: 6px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 5px -3px 0 1px #fff;
	transition: transform 0.5s var(--ease), opacity 0.4s;
}
.theme-switch__stars i {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.4s, transform 0.5s var(--ease);
}
.theme-switch__stars i:nth-child(1) { left: 10px; top: 8px; }
.theme-switch__stars i:nth-child(2) { left: 20px; top: 18px; width: 2px; height: 2px; }
.theme-switch__stars i:nth-child(3) { left: 28px; top: 7px; width: 2px; height: 2px; }
.theme-switch__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	color: var(--black);
	background: var(--yellow);
	border: 2px solid var(--black);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform 0.55s cubic-bezier(0.68, -0.4, 0.27, 1.4), width 0.25s var(--ease), background 0.4s;
}
.theme-switch__knob .icon { position: absolute; transition: opacity 0.35s, transform 0.55s var(--ease); }
.theme-switch__moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-switch:active .theme-switch__knob { width: 32px; }

/* checked = dark */
.theme-switch[aria-checked="true"] .theme-switch__track { background: linear-gradient(160deg, #262250 0%, #08080f 100%); }
.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(30px); background: #ece8ff; }
.theme-switch[aria-checked="true"]:active .theme-switch__knob { transform: translateX(24px); }
.theme-switch[aria-checked="true"] .theme-switch__sun { opacity: 0; transform: rotate(90deg) scale(0.5); }
.theme-switch[aria-checked="true"] .theme-switch__moon { opacity: 1; transform: none; }
.theme-switch[aria-checked="true"] .theme-switch__cloud { opacity: 0; transform: translateX(14px); }
.theme-switch[aria-checked="true"] .theme-switch__stars i { opacity: 1; transform: none; animation: twinkle 2.4s ease-in-out infinite; }
.theme-switch[aria-checked="true"] .theme-switch__stars i:nth-child(2) { transition-delay: 0.08s; animation-delay: 0.6s; }
.theme-switch[aria-checked="true"] .theme-switch__stars i:nth-child(3) { transition-delay: 0.16s; animation-delay: 1.2s; }
@keyframes twinkle { 50% { opacity: 0.35; } }

@media (max-width: 420px) {
	.site-header__inner { gap: 10px; }
	.brand__word { font-size: 0.88rem; }
	.brand__mark { width: 34px; height: 34px; }
	.theme-switch__track { width: 56px; height: 30px; }
	.theme-switch__knob { width: 22px; height: 22px; }
	.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(26px); }
	.theme-switch__cloud { top: 11px; }
}