@font-face {
	font-family: "Neue Haas";
	src: url("NHaasGroteskDSPro-55Rg.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Haas";
	src: url("NHaasGroteskDSPro-65Md.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: "Neue Haas";
	src: url("NHaasGroteskDSPro-75Bd.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Haas";
	src: url("NHaasGroteskDSPro-95Blk.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #202020;
	--text: #f8f8f6;
	--muted: #e9e9e5;
	--line: rgba(248, 248, 246, 0.82);
	--cloud: #443a3d;
	--shadow: rgba(16, 16, 16, 0.52);
	--page-gutter: 36px;
	--display-title-size: clamp(64px, 6.4vw, 122px);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: auto;
	/* Section padding already clears the fixed, transparent header. */
	scroll-padding-top: 0;
	scroll-snap-type: y proximity;
}

body {
	margin: 0;
	min-width: 320px;
	background: var(--bg);
	color: var(--text);
	font-family: "Neue Haas", Arial, sans-serif;
}

html.loader-pending body {
	overflow: hidden;
}

html:not(.loader-pending) #loader {
	display: none;
}

html.custom-scrollbar-ready {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html.custom-scrollbar-ready::-webkit-scrollbar,
html.custom-scrollbar-ready body::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.site-scrollbar {
	position: fixed;
	top: 7px;
	right: 0;
	bottom: 7px;
	z-index: 90;
	display: flex;
	justify-content: center;
	width: 16px;
	opacity: 0.9;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.site-scrollbar.is-hidden,
body.is-contact-dialog-open .site-scrollbar {
	opacity: 0;
	pointer-events: none;
}

.site-scrollbar-track {
	position: relative;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	cursor: pointer;
}

.site-scrollbar-track::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 5px;
	border: 1px solid rgba(17, 17, 17, 0.55);
	border-radius: 999px;
	background: rgba(248, 248, 246, 0.24);
	box-shadow: 0 0 0 1px rgba(248, 248, 246, 0.18);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	transform: translateX(-50%);
}

.site-scrollbar-thumb {
	position: absolute;
	left: 50%;
	top: 0;
	width: 9px;
	min-height: 44px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #ffcf25;
	box-shadow: 1px 1px 0 #111;
	transform: translate3d(-50%, 0, 0);
	transform-origin: center;
	will-change: height, transform;
	cursor: grab;
	touch-action: none;
}

.site-scrollbar-thumb:hover {
	width: 11px;
}

.site-scrollbar-thumb.is-dragging {
	cursor: grabbing;
}

main > section {
	min-height: 100svh;
	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

main > section.scroll-snap-exempt {
	scroll-snap-align: none;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
}

img {
	display: block;
	max-width: 100%;
}

#loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: clamp(22px, 4vw, 64px);
	overflow: hidden;
	background: var(--bg);
	color: var(--text);
	transition: opacity 520ms ease, visibility 520ms ease;
}

#loader::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(248, 248, 246, 0.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(248, 248, 246, 0.026) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

#loader.is-leaving {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loader-shell {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 18px;
	width: min(720px, 100%);
	transition: transform 520ms cubic-bezier(.2, .8, .2, 1), opacity 420ms ease;
}

#loader.is-leaving .loader-shell {
	opacity: 0;
	transform: translateY(-22px) scale(0.98);
}

.loader-progress-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-family: "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.loader-logo {
	width: 122px;
	height: auto;
}

.loader-progress-row strong {
	min-width: 42px;
	font: inherit;
	text-align: right;
}

.loader-track {
	position: relative;
	height: 5px;
	overflow: hidden;
	border: 1px solid rgba(248, 248, 246, 0.78);
	border-radius: 999px;
	background: rgba(248, 248, 246, 0.08);
}

.loader-track span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: #ffcf25;
	box-shadow: 0 0 18px rgba(255, 207, 37, 0.45);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

@media (max-width: 620px) {
	.loader-shell {
		gap: 15px;
	}

	.loader-logo {
		width: 104px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#loader,
	.loader-shell {
		transition-duration: 180ms;
	}
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 35px var(--page-gutter) 0;
	pointer-events: none;
}

.site-header-blend {
	z-index: 70;
	mix-blend-mode: normal;
}

.site-header-blend.is-blending {
	mix-blend-mode: difference;
}

.brand,
.header-controls,
.btn-menu,
.btn-talk {
	pointer-events: auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	width: 103px;
}

.brand img {
	width: 100%;
	height: auto;
}

.header-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.btn-talk,
.btn-menu {
	height: 34px;
	border-radius: 999px;
	font-size: 15px;
	line-height: 1;
}

.btn-talk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.28em;
	padding: 0 20px;
	background: #f4f4f1;
	color: #5f5f5f;
	font-weight: 700;
}

.btn-menu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 14px 0 17px;
	border: 1px solid rgba(248, 248, 246, 0.88);
	background: transparent;
	color: var(--text);
	cursor: pointer;
}

.menu-icon {
	position: relative;
	width: 16px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}

.menu-icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	border-top: 2px solid currentColor;
}

body.is-menu-open {
	overflow: hidden;
}

body.is-menu-open .site-scrollbar {
	opacity: 0;
	pointer-events: none;
}

.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	pointer-events: none;
}

.menu-overlay.is-open,
.menu-overlay.is-closing {
	visibility: visible;
}

.menu-overlay.is-open {
	pointer-events: auto;
}

.menu-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 8, 0.7);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	opacity: 0;
	transition: opacity 420ms ease;
}

.menu-overlay.is-open .menu-backdrop {
	opacity: 1;
}

.menu-panel {
	position: absolute;
	top: 14px;
	right: 14px;
	bottom: 14px;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: min(660px, calc(100vw - 28px));
	padding: clamp(24px, 2.8vw, 42px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid rgba(17, 17, 17, 0.78);
	border-radius: 20px;
	background: #f4f1ec;
	color: #202020;
	box-shadow: 10px 10px 0 #ffcf25;
	opacity: 0;
	clip-path: inset(0 0 100% 0 round 20px);
	transform: translate3d(0, -12px, 0) scale(0.985);
	transform-origin: right top;
	transition:
		clip-path 700ms cubic-bezier(.22, 1, .36, 1),
		transform 700ms cubic-bezier(.22, 1, .36, 1),
		opacity 220ms ease;
	wil-change: clip-path, transform, opacity;
}

.menu-overlay.is-open .menu-panel {
	opacity: 1;
	clip-path: inset(0 0 0 0 round 20px);
	transform: translate3d(0, 0, 0) scale(1);
}

.menu-overlay.is-closing .menu-panel {
	clip-path: inset(0 0 100% 0 round 20px);
	transform: translate3d(0, -9px, 0) scale(0.99);
	transition-duration: 470ms, 470ms, 180ms;
	transition-timing-function: cubic-bezier(.55, .06, .68, .19), cubic-bezier(.55, .06, .68, .19), ease;
}

.menu-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.menu-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(32, 32, 32, 0.18);
}

.menu-panel-brand {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.04em;
}

.menu-panel-brand sup {
	position: relative;
	top: -0.35em;
	margin-left: 2px;
	font-family: "Courier New", monospace;
	font-size: 7px;
	letter-spacing: 0;
}

.menu-panel-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.menu-panel-talk,
.menu-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.menu-panel-talk {
	padding: 0 18px;
	background: #202020;
	color: #f8f8f6;
}

.menu-panel-close {
	gap: 9px;
	padding: 0 14px 0 17px;
	border: 1px solid rgba(32, 32, 32, 0.72);
	background: transparent;
	color: #202020;
	cursor: pointer;
}

.menu-panel-close span:last-child {
	font-size: 19px;
	font-weight: 400;
	transition: transform 260ms ease;
}

.menu-panel-close:hover span:last-child,
.menu-panel-close:focus-visible span:last-child {
	transform: rotate(90deg);
}

.menu-panel-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 0;
	padding: clamp(38px, 7.5vh, 86px) 0 clamp(28px, 5vh, 56px);
}

.menu-primary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.menu-primary-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-size: clamp(48px, 4.55vw, 70px);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.055em;
}

.menu-primary-link::after {
	content: "↗";
	font-size: 0.3em;
	font-weight: 400;
	opacity: 0;
	transform: translate(-7px, 7px);
	transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.menu-primary-link span {
	transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.menu-primary-link:hover span,
.menu-primary-link:focus-visible span {
	transform: translateX(8px);
}

.menu-primary-link:hover::after,
.menu-primary-link:focus-visible::after {
	opacity: 1;
	transform: translate(0, 0);
}

.menu-availability {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: clamp(25px, 4vh, 42px) 0 0;
	padding: 9px 13px;
	border: 1px solid rgba(32, 32, 32, 0.28);
	border-radius: 999px;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.menu-availability > span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #36b55a;
	box-shadow: 0 0 0 3px rgba(54, 181, 90, 0.16);
}

.menu-panel-footer {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(145px, 0.65fr);
	gap: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(32, 32, 32, 0.18);
}

.menu-footer-group > p {
	margin: 0 0 9px;
	color: rgba(32, 32, 32, 0.48);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.menu-footer-group a {
	font-size: clamp(14px, 1.3vw, 18px);
	line-height: 1.25;
}

.menu-footer-group a span {
	display: inline-block;
	transition: transform 240ms ease;
}

.menu-footer-group a:hover span,
.menu-footer-group a:focus-visible span {
	transform: translate(3px, -3px);
}

.menu-social-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.menu-reveal {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity 420ms ease,
		transform 600ms cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(105ms + (var(--menu-order, 0) * 48ms));
}

.menu-overlay.is-open .menu-reveal {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.menu-overlay.is-closing .menu-reveal {
	opacity: 0;
	transform: translate3d(0, -10px, 0);
	transition-duration: 150ms, 230ms;
	transition-delay: 0ms;
}

@media (min-width: 721px) and (max-height: 760px) {
	.menu-panel-main {
		padding-top: 26px;
		padding-bottom: 22px;
	}

	.menu-primary-link {
		font-size: clamp(42px, 7vh, 56px);
	}

	.menu-availability {
		margin-top: 22px;
	}
}

@media (max-width: 720px) {
	.menu-panel {
		top: 8px;
		right: 8px;
		bottom: 8px;
		width: calc(100vw - 16px);
		padding: 18px;
		border-radius: 15px;
		box-shadow: 5px 5px 0 #ffcf25;
		clip-path: inset(0 0 100% 0 round 15px);
	}

	.menu-overlay.is-open .menu-panel {
		clip-path: inset(0 0 0 0 round 15px);
	}

	.menu-overlay.is-closing .menu-panel {
		clip-path: inset(0 0 100% 0 round 15px);
	}

	.menu-panel-top {
		gap: 10px;
		padding-bottom: 15px;
	}

	.menu-panel-brand {
		font-size: 17px;
	}

	.menu-panel-actions {
		gap: 6px;
	}

	.menu-panel-talk,
	.menu-panel-close {
		height: 32px;
		font-size: 11px;
	}

	.menu-panel-talk {
		padding: 0 13px;
	}

	.menu-panel-close {
		gap: 7px;
		padding: 0 10px 0 12px;
	}

	.menu-panel-main {
		justify-content: center;
		padding: clamp(28px, 6vh, 54px) 0 clamp(22px, 4.2vh, 38px);
	}

	.menu-primary-link {
		font-size: clamp(40px, 12vw, 56px);
		line-height: 0.94;
	}

	.menu-availability {
		margin-top: clamp(22px, 4vh, 32px);
		padding: 8px 10px;
		font-size: 8px;
	}

	.menu-panel-footer {
		grid-template-columns: 1fr;
		gap: 17px;
		padding-top: 16px;
	}

	.menu-footer-group > p {
		margin-bottom: 5px;
		font-size: 8px;
	}

	.menu-footer-group a {
		font-size: 14px;
	}

	.menu-social-links {
		flex-direction: row;
		gap: 24px;
	}
}

@media (max-width: 380px), (max-height: 650px) {
	.menu-panel-main {
		padding-top: 20px;
		padding-bottom: 18px;
	}

	.menu-primary-link {
		font-size: clamp(34px, 9vh, 44px);
	}

	.menu-availability {
		margin-top: 17px;
	}

	.menu-panel-footer {
		gap: 12px;
		padding-top: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-backdrop,
	.menu-panel,
	.menu-reveal,
	.menu-primary-link::after,
	.menu-primary-link span,
	.menu-panel-close span:last-child,
	.menu-footer-group a span {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	padding: clamp(118px, 11vh, 145px) var(--page-gutter) 46px;
	isolation: isolate;
}

.hero-copy {
	position: relative;
	z-index: 5;
	width: min(34vw, 520px);
}

.hero-copy h1 {
	margin: 0;
	color: var(--text);
	font-size: var(--display-title-size);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 0;
}

.hero-actions {
	margin-top: 34px;
}

.start-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	min-width: 191px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(248, 248, 246, 0.72);
	color: var(--muted);
	font-family: "Courier New", monospace;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.02em;
	transition: color 180ms ease, border-color 180ms ease;
}

.start-link-arrow {
	display: inline-block;
	will-change: transform, opacity;
}

.start-link-label {
	display: inline-block;
	transition: letter-spacing 260ms ease;
}

.start-link:hover,
.start-link:focus-visible {
	color: var(--text);
	border-color: currentColor;
}

.start-link:hover .start-link-label,
.start-link:focus-visible .start-link-label {
	letter-spacing: 0.015em;
}

.start-link:hover .start-link-arrow,
.start-link:focus-visible .start-link-arrow {
	animation: start-link-arrow 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.start-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
}

@keyframes start-link-arrow {
	0% {
		transform: translateX(0);
		opacity: 1;
	}

	42% {
		transform: translateX(12px);
		opacity: 0;
	}

	43% {
		transform: translateX(-8px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.start-link-label {
		transition: none;
	}

	.start-link:hover .start-link-arrow,
	.start-link:focus-visible .start-link-arrow {
		animation: none;
		transform: translateX(4px);
	}
}

.hero-background,
.duck-scene {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.duck-card {
	--duck-scale: 0.95;
	position: absolute;
	left: 52%;
	top: 53%;
	width: 720px;
	aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(var(--duck-scale));
	transform-origin: center center;
}

.duck-hop {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
	will-change: transform;
}

.duck-mascot {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.duck-mascot img {
	position: relative;
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}

.duck-head-nod,
.duck-head-track {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	transform-origin: 50.5% 38.5%;
	will-change: transform;
}

.duck-head-track .duck-head {
	width: 100%;
}

.duck-shadow {
	position: absolute;
	left: 48%;
	bottom: 9.5%;
	z-index: 1;
	width: 55%;
	height: 8%;
	border-radius: 50%;
	background: var(--shadow);
	filter: blur(10px);
	transform: translateX(-50%);
}

.cloud {
	position: absolute;
	width: var(--w);
	height: auto;
	top: var(--top);
	left: -36vw;
	opacity: var(--opacity, 0.92);
	animation: cloud-drift var(--duration) linear infinite;
	animation-delay: var(--delay);
	will-change: transform;
}

.cloud-left {
	--w: min(34vw, 478px);
	--top: 47%;
	--duration: 44s;
	--delay: -31s;
}

.cloud-right {
	--w: min(26vw, 365px);
	--top: 27%;
	--duration: 52s;
	--delay: -12s;
}

.cloud-third {
	--w: min(22vw, 310px);
	--top: 36%;
	--duration: 48s;
	--delay: -43s;
	--opacity: 0.84;
}

@keyframes cloud-drift {
	from {
		transform: translate3d(-8vw, 0, 0);
	}

	to {
		transform: translate3d(142vw, 0, 0);
	}
}

.about-panel {
	position: absolute;
	right: var(--page-gutter);
	bottom: calc(57px + var(--section-index-height));
	z-index: 5;
	width: min(340px, 26vw);
	text-align: right;
	color: var(--text);
}

.about-panel h2 {
	margin: 0 0 13px;
	font-size: clamp(28px, 2.4vw, 43px);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: 0;
}

.about-panel p {
	margin: 0;
	color: var(--muted);
	font-size: clamp(15px, 1.1vw, 22px);
	line-height: 1.04;
}

.footer-center {
	position: absolute;
	left: 50%;
	bottom: calc(55px + var(--section-index-height));
	z-index: 5;
	margin: 0;
	transform: translateX(-50%);
	color: var(--muted);
	font-family: "Courier New", monospace;
	font-size: clamp(14px, 1vw, 18px);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.scroll-down {
	position: absolute;
	left: var(--page-gutter);
	bottom: calc(37px + var(--section-index-height));
	z-index: 5;
	display: grid;
	width: 58px;
	height: 58px;
	place-items: center;
	border: 1px solid rgba(248, 248, 246, 0.78);
	border-radius: 50%;
}

.scroll-down span {
	position: relative;
	width: 2px;
	height: 28px;
	background: var(--text);
	border-radius: 2px;
}

.scroll-down span::before,
.scroll-down span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 12px;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transform-origin: right center;
}

.scroll-down span::before {
	transform: translateX(-100%) rotate(45deg);
}

.scroll-down span::after {
	transform: translateX(-2px) rotate(-45deg);
}

/* Persistent section index */
.section-index {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 12;
}

.hero .section-index {
	background: var(--bg);
}

.services-sticky .section-index,
.skills-sticky .section-index {
	background: #00435b;
}

.work-sticky .section-index {
	background: #f3f0ea;
}

.contact-section .section-index {
	background: #7544df;
}

.services-section {
	position: relative;
	min-height: 370vh;
	background: #00435b;
	color: var(--text);
	overflow: clip;
}

.services-section::before,
.services-section::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: min(35vw, 500px);
	aspect-ratio: 2.7;
	background: url("duck1/cloud.png") center / contain no-repeat;
	opacity: 0.9;
	pointer-events: none;
}

.services-section::before {
	left: -7vw;
	top: 26vh;
}

.services-section::after {
	right: -6vw;
	top: 54vh;
	transform: scaleX(-1);
}

.services-cloud-field {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.services-cloud {
	--cloud-float-y: 0px;
	position: absolute;
	width: var(--cloud-size);
	opacity: var(--cloud-alpha, 0.78);
	transform: translate3d(0, calc(var(--cloud-y, 0px) + var(--cloud-float-y)), 0) scaleX(var(--cloud-flip, 1));
	will-change: transform;
}

@property --cloud-float-y {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@keyframes service-cloud-rise {
	0% {
		--cloud-float-y: 110px;
		opacity: 0;
	}

	18% {
		opacity: var(--cloud-alpha, 0.78);
	}

	82% {
		opacity: var(--cloud-alpha, 0.78);
	}

	100% {
		--cloud-float-y: -230px;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-cloud {
		animation: none;
	}
}

.services-cloud-c,
.services-cloud-g,
.services-cloud-h,
.services-cloud-i,
.services-cloud-l,
.services-cloud-m,
.services-cloud-n,
.services-cloud-o,
.services-cloud-p,
.services-cloud-q,
.services-cloud-r {
	animation: service-cloud-rise var(--rise-duration, 14s) linear infinite;
	animation-delay: var(--rise-delay, 0s);
}

.services-cloud-k {
	display: none;
}

.services-cloud-a {
	--cloud-size: min(31vw, 440px);
	--cloud-alpha: 0.76;
	left: -10vw;
	top: 18vh;
}

.services-cloud-b {
	--cloud-size: min(23vw, 330px);
	--cloud-alpha: 0.68;
	--cloud-flip: -1;
	right: 5vw;
	top: 34vh;
}

.services-cloud-c {
	--cloud-size: min(28vw, 390px);
	--cloud-alpha: 0.72;
	--rise-duration: 14s;
	--rise-delay: -6s;
	left: 12vw;
	top: 118vh;
}

.services-cloud-d {
	--cloud-size: min(36vw, 520px);
	--cloud-alpha: 0.64;
	--cloud-flip: -1;
	right: -11vw;
	top: 170vh;
}

.services-cloud-e {
	--cloud-size: min(20vw, 290px);
	--cloud-alpha: 0.58;
	left: 47vw;
	top: 250vh;
}

.services-cloud-f {
	--cloud-size: min(25vw, 360px);
	--cloud-alpha: 0.62;
	--cloud-flip: -1;
	left: 28vw;
	top: 76vh;
}

.services-cloud-g {
	--cloud-size: min(30vw, 430px);
	--cloud-alpha: 0.56;
	--rise-duration: 15s;
	--rise-delay: -10s;
	right: 18vw;
	top: 228vh;
}

.services-cloud-h {
	--cloud-size: min(18vw, 260px);
	--cloud-alpha: 0.52;
	--rise-duration: 12s;
	--rise-delay: -3s;
	left: 4vw;
	top: 280vh;
}

.services-cloud-i {
	--cloud-size: min(33vw, 470px);
	--cloud-alpha: 0.6;
	--cloud-flip: -1;
	--rise-duration: 16s;
	--rise-delay: -12s;
	right: -10vw;
	top: 300vh;
}

.services-cloud-j {
	--cloud-size: min(22vw, 315px);
	--cloud-alpha: 0.66;
	left: 66vw;
	top: 48vh;
}

.services-cloud-k {
	--cloud-size: min(27vw, 385px);
	--cloud-alpha: 0.54;
	--cloud-flip: -1;
	left: -8vw;
	top: 142vh;
}

.services-cloud-l {
	--cloud-size: min(24vw, 340px);
	--cloud-alpha: 0.56;
	--rise-duration: 13s;
	--rise-delay: -8s;
	right: 39vw;
	top: 270vh;
}

.services-cloud-m {
	--cloud-size: min(28vw, 410px);
	--cloud-alpha: 0.5;
	--rise-duration: 15s;
	--rise-delay: -5s;
	left: 24vw;
	top: 322vh;
}

.services-cloud-n {
	--cloud-size: min(24vw, 350px);
	--cloud-alpha: 0.58;
	--cloud-flip: -1;
	--rise-duration: 13s;
	--rise-delay: -9s;
	right: 14vw;
	top: 362vh;
}

.services-cloud-o {
	--cloud-size: min(29vw, 420px);
	--cloud-alpha: 0.62;
	--rise-duration: 14s;
	--rise-delay: -2s;
	left: -6vw;
	top: 370vh;
}

.services-cloud-p {
	--cloud-size: min(25vw, 360px);
	--cloud-alpha: 0.54;
	--cloud-flip: -1;
	--rise-duration: 12s;
	--rise-delay: -7s;
	right: 29vw;
	top: 348vh;
}

.services-cloud-q {
	--cloud-size: min(18vw, 265px);
	--cloud-alpha: 0.58;
	--rise-duration: 13s;
	--rise-delay: -1s;
	left: 38vw;
	top: 358vh;
}

.services-cloud-r {
	--cloud-size: min(31vw, 455px);
	--cloud-alpha: 0.46;
	--cloud-flip: -1;
	--rise-duration: 16s;
	--rise-delay: -11s;
	right: -9vw;
	top: 364vh;
}

.services-sticky {
	position: sticky;
	top: 0;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(320px, 44%) minmax(360px, 56%);
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 112px var(--page-gutter) calc(var(--section-index-height) + 24px);
}

.services-copy {
	position: relative;
	z-index: 2;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 620px;
}

.services-copy h2 {
	position: relative;
	z-index: 3;
	margin: 0 0 26px;
	font-size: clamp(56px, 5.6vw, 72px);
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: 0;
}

.services-duck {
	position: relative;
	width: min(48vw, 650px);
	aspect-ratio: 1;
	margin-left: clamp(12px, 3vw, 48px);
	margin-top: -44px;
	pointer-events: none;
}

.services-speed-lines {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	top: 0%;
	left: 10%;
}

.services-speed-lines span {
	position: absolute;
	width: 18%;
	height: 4px;
	border-radius: 999px;
	background: rgba(248, 248, 246, 0.86);
	opacity: 0;
	transform-origin: center;
	will-change: transform, opacity;
}

.services-speed-lines span:nth-child(1) {
	left: 12%;
	top: 6%;
	width: 14%;
}

.services-speed-lines span:nth-child(2) {
	left: 28%;
	top: 2%;
	width: 20%;
}

.services-speed-lines span:nth-child(3) {
	right: 18%;
	top: 13%;
	width: 15%;
}

.services-speed-lines span:nth-child(4) {
	left: 4%;
	top: 29%;
	width: 12%;
}

.services-speed-lines span:nth-child(5) {
	right: 4%;
	top: 34%;
	width: 18%;
}

.services-duck-inner {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	transform-origin: 48% 72%;
}

.services-duck-part {
	position: relative;
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	user-select: none;
}

.services-arm-left {
	transform-origin: 35% 58%;
}

.services-arm-right {
	transform-origin: 61% 54%;
}

.services-leg-left {
	transform-origin: 43% 68%;
}

.services-leg-right {
	transform-origin: 57% 68%;
}

.services-card-stage {
	position: relative;
	z-index: 3;
	width: min(36vw, 475px);
	aspect-ratio: 0.78;
	justify-self: center;
	perspective: 1200px;
}

.service-card {
	--x: 0px;
	--y: 0px;
	--r: 0deg;
	--s: 1;
	--opacity: 1;
	position: absolute;
	inset: 0;
	border-radius: 26px;
	transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s));
	transform-origin: 50% 50%;
	opacity: var(--opacity);
	will-change: transform, opacity;
}

.service-card-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: clamp(34px, 4.4vw, 58px) clamp(28px, 3.4vw, 48px) clamp(30px, 3.5vw, 46px);
	border-radius: inherit;
	text-align: center;
}

.service-card h3 {
	margin: 0;
	max-width: 100%;
	font-size: clamp(34px, 3.65vw, 50px);
	font-weight: 900;
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.service-card p {
	max-width: 360px;
	margin: 0;
	font-size: clamp(17px, 1.35vw, 24px);
	font-weight: 500;
	line-height: 1.18;
}

.service-card-back {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.service-back-yellow {
	z-index: 0;
	background: #ffd21f;
	transform: none;
}

.service-back-blue {
	z-index: 1;
	background: #21a9ee;
	transform: none;
}

.service-card-purple .service-card-content {
	background: #7337bc;
	color: #fff3a7;
}

.service-card-yellow .service-card-content {
	background: #ffce00;
	color: #ff3b0a;
}

.service-card-blue .service-card-content {
	background: #1db1f4;
	color: #ffd142;
}

.service-card-white .service-card-content {
	background: #f8f8f4;
	color: #202020;
}

.service-card-yellow p,
.service-card-white p {
	color: #111;
}

.service-card-blue p {
	color: #fff;
}

.service-glyph {
	position: relative;
	width: min(42%, 170px);
	aspect-ratio: 1.05;
	margin: 20px 0;
	color: currentColor;
}

.glyph-playable span:first-child {
	position: absolute;
	left: 31%;
	top: 3%;
	width: 0;
	height: 0;
	border-left: 72px solid currentColor;
	border-top: 53px solid transparent;
	border-bottom: 53px solid transparent;
	transform: rotate(104deg);
}

.glyph-playable span:nth-child(2) {
	position: absolute;
	left: 38%;
	top: 50%;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: #f8f8f4;
}

.glyph-playable span:nth-child(3) {
	position: absolute;
	left: 25%;
	bottom: 2%;
	width: 112px;
	height: 48px;
	background: currentColor;
}

.glyph-html span:first-child {
	position: absolute;
	left: 9%;
	top: 29%;
	width: 82%;
	height: 19px;
	background: #fff4b4;
	transform: rotate(-13deg);
}

.glyph-html span:nth-child(2),
.glyph-html span:nth-child(3) {
	position: absolute;
	top: 15%;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: currentColor;
}

.glyph-html span:nth-child(2) {
	left: 14%;
}

.glyph-html span:nth-child(3) {
	right: 14%;
}

.glyph-web span:first-child {
	position: absolute;
	inset: 28% 8% 26%;
	border-radius: 999px;
	background: currentColor;
}

.glyph-web span:nth-child(2),
.glyph-web span:nth-child(3) {
	position: absolute;
	top: 43%;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ff3b0a;
}

.glyph-web span:nth-child(2) {
	left: 22%;
}

.glyph-web span:nth-child(3) {
	right: 22%;
}

.glyph-ai span:first-child {
	position: absolute;
	left: 9%;
	top: 18%;
	width: 82%;
	height: 82%;
	border: 18px solid #ff3b0a;
	border-radius: 36px;
	transform: rotate(9deg);
}

.glyph-ai span:nth-child(2) {
	position: absolute;
	left: 38%;
	top: 8%;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #2869f6;
}

.glyph-ai span:nth-child(3) {
	position: absolute;
	left: 46%;
	top: 46%;
	width: 54px;
	height: 54px;
	background: #ffd142;
	transform: rotate(45deg);
}

.skills-section {
	position: relative;
	height: 155vh;
	height: 155svh;
	padding: 0;
	overflow: visible;
	background: #00435b;
	color: var(--text);
	isolation: isolate;
}

.skills-sticky {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	height: 100vh;
	height: 100svh;
	min-height: 660px;
	padding: clamp(96px, 10vh, 112px) 0 calc(var(--section-index-height) + 24px);
	overflow: hidden;
	background: #00435b;
}

.skills-heading {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: end;
	justify-content: space-between;
	padding: 0 var(--page-gutter) 48px;
}

.skills-heading h2 {
	margin: 0;
	font-size: clamp(56px, 5.6vw, 72px);
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: 0;
}

.skills-rope-viewport {
	--skill-rope-height: 12px;
	--skill-rope-top: clamp(66px, 7.4vw, 94px);
	position: relative;
	z-index: 1;
	width: 100%;
	height: clamp(519px, calc(35vw + 34px), 604px);
	min-height: 0;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.skills-rope-viewport.is-dragging {
	cursor: grabbing;
}

@media (prefers-reduced-motion: reduce) {
	.skills-section {
		height: auto !important;
	}

	.skills-sticky {
		position: relative;
		height: auto;
		min-height: 660px;
	}
}

.skills-rope,
.skills-rope-shadow {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--skill-rope-top);
	height: var(--skill-rope-height);
	pointer-events: none;
}

.skills-rope {
	z-index: 1;
	border-top: 1px solid #777;
	border-bottom: 1px solid #111;
	background: linear-gradient(180deg, #5e5e5e 0%, #2c2c2c 46%, #111 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.skills-rope-shadow {
	z-index: 0;
	transform: translateY(8px);
	background: rgba(0, 0, 0, 0.36);
	filter: blur(7px);
}

.skills-rail {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: flex;
	gap: clamp(16px, 1.4vw, 22px);
	width: max-content;
	padding: 0 clamp(var(--page-gutter), 6vw, 88px);
	will-change: transform;
}

.skills-rope-segment-layer {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.skill-rope-segment {
	position: absolute;
	top: var(--skill-rope-top);
	height: var(--skill-rope-height);
	border-top: 1px solid #777;
	border-bottom: 1px solid #111;
	background: linear-gradient(180deg, #5e5e5e 0%, #2c2c2c 46%, #111 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	will-change: transform, width;
}

.skill-tag {
	--tag-bg: #ffce00;
	--tag-head: clamp(124px, 11vw, 164px);
	--tag-soft: color-mix(in srgb, var(--tag-bg) 72%, white 28%);
	position: relative;
	display: flex;
	flex-direction: column;
	width: clamp(390px, 27vw, 450px);
	min-height: clamp(485px, 35vw, 570px);
	padding: var(--tag-head) clamp(28px, 2.25vw, 36px) clamp(26px, 2.2vw, 34px);
	border: 2px solid #050505;
	border-radius: 24px;
	background: linear-gradient(180deg, #050505 0 var(--tag-head), var(--tag-bg) var(--tag-head) 100%);
	box-shadow: 0 26px 0 rgba(0, 0, 0, 0.34);
	color: #050505;
	transform-origin: 50% calc(var(--skill-rope-top) + (var(--skill-rope-height) / 2));
	will-change: transform;
}

.skill-tag::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 20px;
	z-index: 4;
	width: 86px;
	height: 112px;
	border: 2px solid #050505;
	border-radius: 16px;
	background: var(--tag-bg);
	pointer-events: none;
	transform: translateX(-50%);
}

.skill-pin {
	position: absolute;
	left: 50%;
	top: calc(var(--skill-rope-top) + (var(--skill-rope-height) / 2));
	z-index: 6;
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 2px solid #050505;
	border-radius: 50%;
	background: #202020;
	box-shadow: 0 0 0 5px var(--tag-bg);
	overflow: visible;
	transform: translate(-50%, -50%);
}

.skill-pin::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #202020;
	transform: translate(-50%, -50%);
}

.skill-pin span {
	position: relative;
	z-index: 3;
	display: block;
	width: 14px;
	height: 14px;
	border: 2px solid #050505;
	border-radius: 50%;
	background: transparent;
}

.skill-tag h3::before,
.skill-capabilities::after {
	content: "";
	position: absolute;
	left: calc(clamp(26px, 2.7vw, 38px) * -1);
	right: calc(clamp(26px, 2.7vw, 38px) * -1);
	border-top: 2px solid rgba(5, 5, 5, 0.72);
}

.skill-tag h3::before {
	top: calc(-18px - 1px);
}

.skill-capabilities::after {
	bottom: -16px;
}

.skill-label {
	position: absolute;
	left: 50%;
	top: 40px;
	z-index: 4;
	margin: 0;
	transform: translateX(-50%);
	font-family: "Courier New", monospace;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: rgba(5, 5, 5, 0.84);
	text-align: center;
}

.skill-label span {
	display: block;
	margin-top: 8px;
	font-size: 9px;
}

.skill-card-symbol {
	position: absolute;
	left: clamp(22px, 2.1vw, 30px);
	top: calc(var(--tag-head) - 64px);
	z-index: 2;
	display: grid;
	width: 44px;
	height: 44px;
	place-items: center;
	border: 2px solid currentColor;
	border-radius: 10px;
	color: var(--tag-bg);
	font-family: "Courier New", monospace;
	font-size: 13px;
	font-weight: 700;
}

.skill-tag h3 {
	position: relative;
	z-index: 2;
	margin: 18px 0 18px;
	font-size: clamp(36px, 2.95vw, 48px);
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: 0;
	text-transform: uppercase;
	opacity: 0.6;
}

.skill-capabilities,
.skill-tools {
	position: relative;
	z-index: 2;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Courier New", monospace;
	font-weight: 700;
	line-height: 1.05;
}

.skill-capabilities {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	padding: 0 0 18px;
	font-size: 12px;
}

.skill-capabilities li::before {
	content: none;
}

.skill-capabilities li {
	display: flex;
	align-items: center;
	min-height: 30px;
	padding: 8px 11px;
	border: 1px solid rgba(5, 5, 5, 0.42);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
}

.skill-tools {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 8px;
	padding-top: 28px;
	font-size: 11px;
}

.skill-tag li {
	overflow-wrap: anywhere;
}

.skill-tools li {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	padding: 6px 9px;
	border: 1px solid rgba(5, 5, 5, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
	white-space: nowrap;
}

.skill-tools li:not(:nth-child(4n + 1))::before {
	content: none;
}

.skill-barcode {
	position: relative;
	z-index: 2;
	width: 82px;
	height: 22px;
	margin-top: auto;
	margin-top: 10px;
	background: repeating-linear-gradient(90deg, #050505 0 2px, transparent 2px 4px, #050505 4px 5px, transparent 5px 8px);
}

.skill-tag small {
	position: absolute;
	right: clamp(22px, 2.1vw, 30px);
	bottom: 29px;
	z-index: 2;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* Creative Development */
.skill-tag-yellow {
	--tag-bg: #FFD12A;
}

/* Front-End */
.skill-tag-blue {
	--tag-bg: #2DAEF5;
}

/* Motion Systems */
.skill-tag-purple {
	--tag-bg: #7B3FE4;
}

/* Playable Ads */
.skill-tag-white {
	--tag-bg: #F5F5F0;
}

/* HTML5 Ads / Email */
.skill-tag-cyan {
	--tag-bg: #35D7E7;
}

/* Digital Advertising */
.skill-tag-red {
	--tag-bg: #FF5A4E;
}

/* AI & Automation */
.skill-tag-violet {
	--tag-bg: #8E63FF;
}

/* UI / UX */
.skill-tag-pink {
	--tag-bg: #FF73B5;
}

/* Creative Suite */
.skill-tag-orange {
	--tag-bg: #FF9F1C;
}

/* Languages */
.skill-tag-green {
	--tag-bg: #63D96B;
}

@media (max-width: 1050px) {
	.hero {
		padding-top: 112px;
	}

	.hero-copy {
		width: 60vw;
	}

	.duck-card {
		--duck-scale: 0.86;
		left: 58%;
		top: 56%;
	}

	.footer-center {
		bottom: calc(104px + var(--section-index-height));
	}

	.about-panel {
		width: 320px;
	}

	.services-sticky {
		grid-template-columns: minmax(270px, 40%) minmax(330px, 60%);
		padding-top: 104px;
	}

	.services-card-stage {
		width: min(44vw, 430px);
	}

	.services-duck {
		width: min(48vw, 500px);
		margin-left: 0;
	}

	.skill-tag {
		width: clamp(350px, 42vw, 400px);
		border-radius: 24px;
	}
}

@media (max-width: 720px) {
	:root {
		--display-title-size: clamp(54px, 16vw, 76px);
	}

	.site-header {
		padding: 22px 18px 0;
	}

	.brand {
		width: 92px;
	}

	.btn-talk {
		display: none;
	}

	.btn-menu {
		height: 32px;
		font-size: 13px;
	}

	.hero {
		min-height: 820px;
		padding: 96px 18px 34px;
	}

	.hero-copy {
		width: 100%;
	}

	.hero-copy h1 {
		font-size: var(--display-title-size);
	}

	.start-link {
		gap: 42px;
		min-width: 174px;
		font-size: 14px;
	}

	.duck-card {
		--duck-scale: 0.56;
		left: 50%;
		top: calc(49% + 12px);
		width: min(720px, 150vw);
	}

	.cloud-left {
		--w: 270px;
		--top: 48%;
	}

	.cloud-right {
		--w: 220px;
		--top: 28%;
	}

	.cloud-third {
		--w: 190px;
		--top: 39%;
	}

	.about-panel {
		right: 18px;
		bottom: calc(96px + var(--section-index-height));
		width: min(290px, calc(100vw - 36px));
	}

	.about-panel h2 {
		font-size: 30px;
	}

	.about-panel p {
		font-size: 16px;
		line-height: 1.08;
	}

	.footer-center {
		left: 18px;
		right: 18px;
		bottom: calc(34px + var(--section-index-height));
		transform: none;
		font-size: 13px;
		white-space: normal;
	}

	.scroll-down {
		left: 18px;
		bottom: calc(88px + var(--section-index-height));
		width: 48px;
		height: 48px;
	}

	.services-section {
		min-height: 380vh;
	}

	.services-section::before,
	.services-section::after {
		width: 320px;
	}

	.services-cloud-a {
		--cloud-size: 260px;
		left: -110px;
	}

	.services-cloud-b {
		--cloud-size: 210px;
		right: -52px;
	}

	.services-cloud-c {
		--cloud-size: 250px;
		left: -42px;
	}

	.services-cloud-d {
		--cloud-size: 310px;
		right: -130px;
	}

	.services-cloud-e {
		--cloud-size: 190px;
		left: 42vw;
	}

	.services-cloud-f {
		--cloud-size: 220px;
		left: 38vw;
	}

	.services-cloud-g {
		--cloud-size: 260px;
		right: 18vw;
	}

	.services-cloud-h {
		--cloud-size: 170px;
		left: -70px;
	}

	.services-cloud-i {
		--cloud-size: 290px;
		right: -140px;
	}

	.services-cloud-j {
		--cloud-size: 200px;
		left: 58vw;
	}

	.services-cloud-k {
		--cloud-size: 240px;
		left: -105px;
	}

	.services-cloud-l {
		--cloud-size: 175px;
		right: 36vw;
	}

	.services-cloud-m {
		--cloud-size: 245px;
		left: 12vw;
	}

	.services-cloud-n {
		--cloud-size: 220px;
		right: -12px;
	}

	.services-cloud-o {
		--cloud-size: 245px;
		left: -92px;
	}

	.services-cloud-p {
		--cloud-size: 225px;
		right: 18vw;
	}

	.services-cloud-q {
		--cloud-size: 170px;
		left: 34vw;
	}

	.services-cloud-r {
		--cloud-size: 260px;
		right: -110px;
	}

	.services-sticky {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		align-content: normal;
		gap: clamp(8px, 1.8svh, 14px);
		padding: clamp(72px, 10svh, 86px) 18px calc(var(--section-index-height) + 18px);
	}

	.services-copy {
		display: grid;
		grid-template-columns: minmax(150px, 1fr) minmax(108px, 36vw);
		align-items: center;
		column-gap: 4px;
		min-height: 0;
	}

	.services-copy h2 {
		margin: 0;
		font-size: clamp(40px, 12vw, 54px);
	}

	.services-duck {
		width: min(38vw, 24svh, 190px);
		margin: 0;
		justify-self: end;
	}

	.services-card-stage {
		width: min(72vw, 38svh, 300px);
		align-self: center;
		justify-self: center;
	}

	.service-card {
		border-radius: 20px;
	}

	.service-card-content {
		padding: clamp(18px, 3svh, 26px) clamp(16px, 5vw, 22px);
	}

	.service-card h3 {
		font-size: clamp(24px, 7.5vw, 34px);
	}

	.service-card p {
		font-size: clamp(12px, 3.4vw, 15px);
		line-height: 1.12;
	}

	.service-glyph {
		width: 112px;
		margin: -2px 0;
		transform: scale(0.82);
	}

	.skills-section {
		height: 150vh;
		height: 150svh;
	}

	.skills-sticky {
		grid-template-rows: auto auto minmax(0, 1fr);
		min-height: 620px;
		padding-top: clamp(88px, 11svh, 96px);
	}

	.skills-heading {
		padding: 0 18px 56px;
	}

	.skills-rope-viewport {
		--skill-rope-top: 62px;
		height: 480px;
	}

	.skills-rail {
		gap: 18px;
		padding: 0 18px;
	}

	.skill-tag {
		--tag-head: 110px;
		width: min(318px, calc(100vw - 48px));
		height: 452px;
		min-height: 0;
		padding: var(--tag-head) 20px 24px;
		border-radius: 20px;
		box-shadow: 0 20px 0 rgba(0, 0, 0, 0.34);
	}

	.skill-tag::after {
		top: 16px;
		width: 74px;
		height: 96px;
		border-radius: 14px;
	}

	.skill-label {
		top: 32px;
		font-size: 12px;
	}

	.skill-card-symbol {
		left: 20px;
		top: calc(var(--tag-head) - 58px);
		width: 40px;
		height: 40px;
		font-size: 12px;
	}

	.skill-tag h3 {
		margin: 14px 0;
		font-size: 31px;
	}

	.skill-tag h3::before,
	.skill-capabilities::after {
		left: -20px;
		right: -20px;
	}

	.skill-tag h3::before {
		top: -15px;
	}

	.skill-capabilities::after {
		bottom: -15px;
	}

	.skill-capabilities {
		gap: 7px;
		padding-bottom: 15px;
		font-size: 10px;
	}

	.skill-tools {
		gap: 5px;
		padding-top: 24px;
		font-size: 9px;
	}

	.skill-capabilities li {
		min-height: 27px;
		padding: 7px 9px;
	}

	.skill-tools li {
		min-height: 22px;
		padding: 5px 7px;
	}

	.skill-tag small {
		right: 20px;
		bottom: 22px;
	}

	.skill-tools li:not(:nth-child(4n + 1))::before {
		content: none;
	}
}

/* Portfolio / selected work */
.portfolio-section {
	position: relative;
	padding: clamp(110px, 12vw, 190px) 36px clamp(120px, 13vw, 200px);
	background: #f3f0ea;
	color: #121212;
	overflow: hidden;
}

.portfolio-heading {
	display: grid;
	grid-template-columns: minmax(180px, 0.65fr) minmax(480px, 1.7fr) minmax(240px, 0.65fr);
	align-items: end;
	gap: 32px;
	max-width: 1800px;
	margin: 0 auto;
}

.section-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: "Courier New", monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.section-eyebrow span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.portfolio-heading h2,
.campaigns-heading h2 {
	margin: 0;
	font-size: clamp(76px, 10.4vw, 184px);
	font-weight: 900;
	line-height: 0.76;
	letter-spacing: -0.075em;
}

.portfolio-intro {
	max-width: 330px;
	margin: 0 0 8px;
	font-size: clamp(18px, 1.35vw, 24px);
	line-height: 1.12;
}

.website-case {
	max-width: 1800px;
	margin: clamp(90px, 9vw, 150px) auto 0;
}

.case-topline {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 0 0 16px;
	border-bottom: 1px solid #121212;
	font-family: "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.case-topline p {
	margin: 0;
}

.case-browser {
	margin-top: 22px;
	overflow: hidden;
	border: 2px solid #121212;
	border-radius: 26px;
	background: #121212;
	box-shadow: 0 22px 0 rgba(18, 18, 18, 0.08);
}

.browser-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: 54px;
	padding: 0 18px;
	color: #f8f8f6;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.browser-bar p {
	margin: 0;
}

.browser-dots {
	display: flex;
	gap: 6px;
}

.browser-dots span {
	width: 8px;
	height: 8px;
	border: 1px solid #f8f8f6;
	border-radius: 50%;
}

.browser-dots span:first-child {
	background: #ff5ca7;
}

.browser-status {
	justify-self: end;
	color: #70e979;
}

.browser-status::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
}

.case-visual {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #242424;
}

.case-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.45));
}

.case-visual > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.1s cubic-bezier(.2, .75, .25, 1);
}

.case-browser:hover .case-visual > video {
	transform: scale(1.018);
}

.walkthrough-badge {
	position: absolute;
	left: 26px;
	bottom: 26px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 15px 10px 10px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 999px;
	background: rgba(18, 18, 18, 0.78);
	color: #fff;
	backdrop-filter: blur(10px);
}

.walkthrough-badge > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: "Courier New", monospace;
	font-size: 8px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.walkthrough-badge strong {
	font-family: "Neue Haas", Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 0;
}

.walkthrough-icon {
	position: relative;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #ffcf25;
}

.walkthrough-icon::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 10px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #121212;
}

.case-story {
	display: grid;
	grid-template-columns: minmax(170px, 0.65fr) minmax(380px, 1.5fr) minmax(250px, 0.7fr);
	gap: clamp(28px, 4vw, 70px);
	padding: clamp(44px, 5vw, 76px) 0 clamp(70px, 7vw, 120px);
}

.case-number {
	margin: 7px 0 0;
	font-family: "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.case-copy h3 {
	max-width: 780px;
	margin: 0 0 24px;
	font-size: clamp(40px, 4.2vw, 74px);
	font-weight: 700;
	line-height: 0.93;
	letter-spacing: -0.045em;
}

.case-copy p {
	max-width: 680px;
	margin: 0;
	font-size: clamp(18px, 1.35vw, 24px);
	line-height: 1.2;
}

.case-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.case-actions ul {
	margin: 5px 0 0;
	padding: 0;
	list-style: none;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.case-actions li::before {
	content: "— ";
}

.case-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 42px;
	min-width: 205px;
	padding: 15px 18px;
	border: 1px solid #121212;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.case-cta:hover {
	background: #121212;
	color: #fff;
	transform: translateY(-2px);
}

.case-gallery {
	display: grid;
	grid-template-columns: 1.35fr 0.8fr 0.62fr;
	align-items: stretch;
	gap: 20px;
}

.case-shot {
	min-width: 0;
	margin: 0;
}

.shot-image,
.case-shot-mobile {
	overflow: hidden;
	border-radius: 22px;
	background: #dfd7ce;
}

.shot-image {
	height: clamp(380px, 43vw, 690px);
}

.shot-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.case-shot-wide .shot-image img {
	object-position: 30% center;
}

.case-shot-detail .shot-image img {
	width: 180%;
	max-width: none;
	object-position: 58% center;
}

.case-shot-mobile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 11% 9% 0;
	background: #7646df;
}

.shot-device {
	width: min(83%, 290px);
	height: 88%;
	overflow: hidden;
	border: 7px solid #111;
	border-bottom: 0;
	border-radius: 30px 30px 0 0;
	background: #222;
}

.shot-device img {
	width: 300%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 22% center;
}

.case-shot figcaption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 3px 0;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Live campaign lab */
.campaigns-section {
	position: relative;
	padding: clamp(110px, 12vw, 190px) 36px 80px;
	background: #ffcf25;
	color: #111;
	overflow: hidden;
}

.campaigns-heading {
	display: grid;
	grid-template-columns: minmax(550px, 1.35fr) minmax(260px, 0.65fr);
	align-items: end;
	gap: 60px;
	max-width: 1800px;
	margin: 0 auto clamp(80px, 8vw, 130px);
}

.section-eyebrow-dark {
	margin-bottom: 42px;
}

.campaigns-heading > p {
	max-width: 470px;
	margin: 0 0 8px;
	font-size: clamp(20px, 1.65vw, 30px);
	line-height: 1.08;
}

.campaign-lab,
.campaign-index,
.portfolio-endnote {
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
}

.campaign-lab {
	overflow: hidden;
	border: 2px solid #111;
	border-radius: 24px;
	background: #111;
	box-shadow: 10px 10px 0 rgba(17, 17, 17, 0.18);
}

.campaign-toolbar,
.campaign-browser-footer {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 58px;
	padding: 0 18px;
	color: #fff;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.campaign-live {
	margin-right: auto;
}

.campaign-live > span {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 8px;
	border-radius: 50%;
	background: #70e979;
	box-shadow: 0 0 9px #70e979;
}

.campaign-sizes {
	display: flex;
	gap: 4px;
}

.campaign-sizes button,
.campaign-replay {
	min-height: 32px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.campaign-sizes button:hover,
.campaign-sizes button.is-active,
.campaign-replay:hover {
	border-color: #ffcf25;
	background: #ffcf25;
	color: #111;
}

.campaign-stage {
	--ad-width: 300px;
	--ad-ratio: 300 / 250;
	display: grid;
	place-items: center;
	min-height: clamp(430px, 50vw, 720px);
	padding: clamp(32px, 6vw, 92px);
	background-color: #252525;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 24px 24px;
}

.campaign-stage[data-size="728x90"] {
	--ad-width: 728px;
	--ad-ratio: 728 / 90;
}

.campaign-stage[data-size="320x100"] {
	--ad-width: 320px;
	--ad-ratio: 320 / 100;
}

.campaign-frame-shell {
	position: relative;
	width: min(var(--ad-width), 100%);
	aspect-ratio: var(--ad-ratio);
	border: 1px solid rgba(255, 255, 255, 0.55);
	background: #fff;
	box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
	transition: width 380ms cubic-bezier(.2, .8, .2, 1), aspect-ratio 380ms ease;
}

.campaign-frame-shell iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.campaign-browser-footer {
	justify-content: space-between;
	min-height: 44px;
	color: rgba(255, 255, 255, 0.62);
}

.campaign-browser-footer p {
	margin: 0;
}

.campaign-index {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	padding-top: 26px;
}

.campaign-item {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 24px 22px;
	border: 1px solid #111;
	border-radius: 18px;
	background: transparent;
	color: #111;
	text-align: left;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.campaign-item:hover,
.campaign-item.is-active {
	background: #111;
	color: #fff;
	transform: translateY(-3px);
}

.campaign-item-number {
	font-family: "Courier New", monospace;
	font-size: 11px;
}

.campaign-item > span:nth-child(2) {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.campaign-item strong {
	font-size: clamp(18px, 1.5vw, 24px);
	line-height: 1;
}

.campaign-item small {
	font-family: "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.campaign-item-arrow {
	font-size: 20px;
}

.portfolio-endnote {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-top: clamp(100px, 12vw, 180px);
	padding-top: 26px;
	border-top: 2px solid #111;
}

.portfolio-endnote p {
	margin: 0;
	font-family: "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.portfolio-endnote a {
	display: flex;
	align-items: center;
	gap: clamp(30px, 8vw, 140px);
	font-size: clamp(38px, 5vw, 84px);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.portfolio-endnote a span {
	display: grid;
	place-items: center;
	width: clamp(60px, 7vw, 110px);
	aspect-ratio: 1;
	border: 2px solid #111;
	border-radius: 50%;
	font-size: 0.6em;
	transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}

.portfolio-endnote a:hover span {
	transform: translateX(6px) rotate(-12deg);
	background: #111;
	color: #ffcf25;
}

@media (max-width: 1050px) {
	.portfolio-heading {
		grid-template-columns: 160px 1fr;
	}

	.portfolio-intro {
		grid-column: 2;
	}

	.case-story {
		grid-template-columns: 150px 1fr;
	}

	.case-actions {
		grid-column: 2;
		flex-direction: row;
		align-items: flex-end;
	}

	.case-gallery {
		grid-template-columns: 1.25fr 0.75fr;
	}

	.case-shot-mobile {
		grid-column: 1 / -1;
		min-height: 580px;
	}

	.campaigns-heading {
		grid-template-columns: 1fr;
	}

	.campaigns-heading > p {
		margin-left: 30%;
	}
}

@media (max-width: 720px) {
	.portfolio-section,
	.campaigns-section {
		padding-left: 18px;
		padding-right: 18px;
	}

	.portfolio-heading {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.portfolio-heading h2,
	.campaigns-heading h2 {
		font-size: clamp(62px, 22vw, 92px);
	}

	.portfolio-intro,
	.campaigns-heading > p {
		grid-column: auto;
		margin-left: 0;
	}

	.case-topline p:last-child {
		text-align: right;
	}

	.case-browser {
		border-radius: 15px;
	}

	.browser-bar {
		grid-template-columns: 1fr 1fr;
		height: 42px;
		padding: 0 12px;
	}

	.browser-bar p {
		display: none;
	}

	.walkthrough-badge {
		left: 12px;
		bottom: 12px;
		padding: 6px;
	}

	.walkthrough-badge > span:last-child {
		display: none;
	}

	.walkthrough-icon {
		width: 28px;
		height: 28px;
	}

	.walkthrough-icon::after {
		left: 12px;
		top: 9px;
	}

	.case-story {
		grid-template-columns: 1fr;
		padding-top: 36px;
	}

	.case-actions {
		grid-column: auto;
		flex-direction: column;
		align-items: flex-start;
	}

	.case-gallery {
		grid-template-columns: 1fr;
	}

	.shot-image {
		height: 110vw;
		max-height: 590px;
	}

	.case-shot-detail .shot-image img {
		width: 160%;
	}

	.case-shot-mobile {
		grid-column: auto;
		min-height: 530px;
	}

	.section-eyebrow-dark {
		margin-bottom: 30px;
	}

	.campaigns-heading {
		gap: 36px;
	}

	.campaign-toolbar {
		flex-wrap: wrap;
		gap: 10px;
		padding: 12px;
	}

	.campaign-live {
		width: calc(100% - 86px);
	}

	.campaign-sizes {
		order: 3;
		width: 100%;
	}

	.campaign-sizes button {
		flex: 1;
		padding: 0 5px;
	}

	.campaign-stage {
		min-height: 430px;
		padding: 24px;
	}

	.campaign-browser-footer p:last-child {
		display: none;
	}

	.campaign-index {
		grid-template-columns: 1fr;
	}

	.campaign-item {
		padding: 20px 16px;
	}

	.portfolio-endnote {
		align-items: flex-start;
		flex-direction: column;
	}

	.portfolio-endnote a {
		width: 100%;
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case-visual > video,
	.campaign-frame-shell,
	.campaign-item,
	.case-cta,
	.portfolio-endnote a span {
		transition: none;
	}
}

/* Scroll / drag selected work rail */
.portfolio-section {
	height: auto;
	padding: 0;
	overflow: visible;
	background: #f3f0ea;
	color: #111;
}

.work-sticky {
	position: relative;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(16px, 2.4vh, 28px);
	height: 100vh;
	height: 100svh;
	min-height: 660px;
	padding: clamp(76px, 9vh, 108px) 0 calc(var(--section-index-height) + 24px);
	overflow: hidden;
}

.work-sticky .portfolio-heading {
	display: grid;
	grid-template-columns: minmax(430px, 1fr) minmax(260px, 0.72fr);
	align-items: end;
	gap: 28px;
	width: 100%;
	max-width: none;
	padding: 0 var(--page-gutter);
}

.work-sticky .portfolio-heading h2 {
	margin: 0;
	font-size: clamp(56px, 5.6vw, 72px);
	font-weight: 900;
	line-height: 0.86;
	letter-spacing: 0;
}

.work-heading-side {
	justify-self: end;
	width: min(100%, 390px);
	text-align: right;
}

.work-heading-side p {
	margin: 0 0 18px;
	font-size: clamp(16px, 1.15vw, 21px);
	line-height: 1.12;
}

.work-progress {
	position: relative;
	height: 2px;
	overflow: hidden;
	background: rgba(17, 17, 17, 0.2);
}

.work-progress span {
	position: absolute;
	inset: 0;
	background: #111;
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.work-viewport {
	min-height: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.work-viewport:focus-visible {
	outline: 2px solid #7544df;
	outline-offset: -2px;
}

.work-viewport.is-dragging {
	cursor: grabbing;
}

.work-rail {
	display: flex;
	align-items: stretch;
	gap: clamp(14px, 1.2vw, 22px);
	width: max-content;
	height: 100%;
	padding: 0 var(--page-gutter);
}

.work-card {
	flex: 0 0 auto;
	height: 100%;
	min-height: 0;
}

.work-card-wide {
	width: clamp(620px, 48vw, 900px);
}

.work-card-detail {
	width: clamp(450px, 34vw, 640px);
}

.work-card-phone {
	width: clamp(330px, 23vw, 430px);
}

.work-card-banners {
	width: clamp(500px, 38vw, 720px);
}

.work-card-inner {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	height: 100%;
}

.work-card-visual {
	position: relative;
	min-height: 0;
	overflow: hidden;
	border-radius: clamp(18px, 1.5vw, 28px);
	background: #222;
}

.work-card-visual > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: transform 700ms cubic-bezier(.2, .75, .25, 1);
}

.work-card-inner:hover .work-card-visual > img {
	transform: scale(1.025);
}

.work-card-home img {
	object-position: 48% center;
}

.work-card-crop img {
	width: 100%;
	max-width: none;
	object-position: 100% center;
}

.work-card-mobile {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 13% 9% 0;
	background: #7544df;
}

.work-phone {
	width: min(84%, 300px);
	height: 94%;
	overflow: hidden;
	border: clamp(6px, 0.6vw, 10px) solid #111;
	border-bottom: 0;
	border-radius: clamp(28px, 2.4vw, 46px) clamp(28px, 2.4vw, 46px) 0 0;
	background: #202020;
	box-shadow: 0 18px 0 rgba(0, 0, 0, 0.14);
}

.work-phone img {
	width: 310%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: 20% center;
	pointer-events: none;
}

.work-banner-cover {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(28px, 3vw, 54px);
	background: #ffcf25;
	color: #111;
}

.work-banner-cover > p {
	margin: 0;
	font-family: "Courier New", monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.work-banner-cover h3 {
	position: relative;
	z-index: 2;
	margin: auto 0 20px;
	font-size: clamp(48px, 4.6vw, 84px);
	font-weight: 900;
	line-height: 0.82;
	letter-spacing: -0.06em;
}

.work-banner-cover > strong {
	position: relative;
	z-index: 2;
	display: inline-flex;
	padding: 10px 14px;
	border: 1px solid #111;
	border-radius: 999px;
	font-size: 11px;
	text-transform: uppercase;
}

.banner-cover-stack {
	position: absolute;
	top: 13%;
	right: 8%;
	width: 45%;
	height: 44%;
}

.banner-cover-stack span {
	position: absolute;
	inset: 0;
	border: 3px solid #111;
	border-radius: 15px;
	background: #ff5ca7;
	box-shadow: 7px 7px 0 #111;
	transform: rotate(7deg);
}

.banner-cover-stack span:nth-child(2) {
	background: #2daef5;
	transform: translate(-20%, 18%) rotate(-5deg);
}

.banner-cover-stack span:nth-child(3) {
	display: grid;
	place-items: center;
	background: #7544df;
	transform: translate(-42%, 38%) rotate(4deg);
}

.banner-cover-stack span:nth-child(3)::after {
	content: "▶";
	font-size: clamp(24px, 3vw, 54px);
	color: #fff;
}

.work-card footer {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 12px 3px 0;
	font-family: "Courier New", monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.work-card footer span:last-child {
	text-align: right;
}

.work-instruction,
.skills-instruction {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0 var(--page-gutter);
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.work-instruction span,
.skills-instruction span {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid currentColor;
	border-radius: 50%;
}

.skills-instruction {
	position: relative;
	z-index: 6;
}

/* Standalone campaign page */
.banners-page {
	background: #ffcf25;
	color: #111;
}

.banners-page .brand img {
	filter: invert(1);
}

.standalone-back {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 36px;
	padding: 0 18px;
	border-radius: 999px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	pointer-events: auto;
}

.standalone-back span {
	font-size: 16px;
	transition: transform 180ms ease;
}

.standalone-back:hover span {
	transform: translateX(-4px);
}

.banners-page .campaigns-section {
	min-height: 100vh;
	padding-top: clamp(150px, 14vw, 220px);
}

.campaigns-heading h1 {
	margin: 0;
	font-size: clamp(76px, 10.4vw, 184px);
	font-weight: 900;
	line-height: 0.76;
	letter-spacing: -0.075em;
}

@media (max-width: 1050px) {
	.work-sticky .portfolio-heading {
		grid-template-columns: 1fr minmax(240px, 0.65fr);
	}

	.work-heading-side {
		justify-self: end;
		width: min(100%, 520px);
	}

	.work-card-wide {
		width: 72vw;
	}

	.work-card-detail {
		width: 53vw;
	}

	.work-card-phone {
		width: 38vw;
	}

	.work-card-banners {
		width: 60vw;
	}
}

@media (max-width: 720px) {
	.work-sticky {
		min-height: 620px;
		padding-top: 74px;
		padding-bottom: calc(var(--section-index-height) + 16px);
	}

	.work-sticky .portfolio-heading {
		grid-template-columns: 1fr auto;
		gap: 14px;
		padding: 0 18px;
	}

	.work-sticky .section-eyebrow {
		grid-column: 1 / -1;
		margin: 0;
	}

	.work-sticky .portfolio-heading h2 {
		font-size: clamp(56px, 5.6vw, 72px);
		line-height: 0.86;
		letter-spacing: 0;
	}

	.work-heading-side {
		grid-column: auto;
		align-self: end;
		width: 92px;
	}

	.work-heading-side p {
		display: none;
	}

	.work-heading-side .work-progress {
		margin-bottom: 5px;
	}

	.work-rail {
		gap: 12px;
		padding: 0 18px;
	}

	.work-card-wide {
		width: 88vw;
	}

	.work-card-detail {
		width: 76vw;
	}

	.work-card-phone {
		width: 70vw;
	}

	.work-card-banners {
		width: 84vw;
	}

	.work-card-visual {
		border-radius: 18px;
	}

	.work-banner-cover {
		padding: 26px;
	}

	.work-banner-cover h3 {
		font-size: clamp(46px, 14vw, 66px);
	}

	.work-card footer {
		grid-template-columns: 1fr;
		font-size: 8px;
	}

	.work-card footer span:last-child {
		display: none;
	}

	.work-instruction,
	.skills-instruction {
		padding: 0 18px;
	}

	.standalone-header {
		padding-top: 22px;
	}

	.standalone-back {
		height: 32px;
		padding: 0 12px;
		font-size: 10px;
	}

	.banners-page .campaigns-section {
		padding-top: 118px;
	}

	.campaigns-heading h1 {
		font-size: clamp(62px, 22vw, 92px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.work-card-inner,
	.work-card-visual > img,
	.standalone-back span {
		transition: none;
	}
}

/* Contact / site footer */
.contact-section {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	background: #7544df;
	color: #f8f8f6;
	isolation: isolate;
}

.contact-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 36vw);
	align-items: center;
	gap: clamp(30px, 4vw, 76px);
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	padding: clamp(84px, 10vh, 120px) var(--page-gutter) calc(clamp(52px, 7vh, 88px) + var(--section-index-height));
}

.contact-copy {
	position: relative;
	z-index: 2;
}

.contact-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp(28px, 4vh, 50px);
	font-family: "Courier New", monospace;
	font-size: clamp(10px, 0.8vw, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-kicker > span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #70e979;
	box-shadow: 0 0 0 6px rgba(112, 233, 121, 0.16), 0 0 18px rgba(112, 233, 121, 0.7);
	animation: contact-status 1.7s ease-in-out infinite;
}

@keyframes contact-status {
	50% {
		box-shadow: 0 0 0 10px rgba(112, 233, 121, 0), 0 0 24px rgba(112, 233, 121, 0.9);
	}
}

.contact-copy h2 {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.015em;
	width: fit-content;
	margin: 0;
	font-size: clamp(160px, 12.3vw, 232px);
	font-weight: 900;
	line-height: 0.74;
	letter-spacing: -0.045em;
	white-space: nowrap;
}

.contact-line {
	display: inline-block;
	overflow: visible;
	padding: 0 0.08em 0.09em 0;
	vertical-align: bottom;
}

[data-contact-title]:not(.is-word-morph-ready) .contact-line {
	overflow: hidden;
}

.contact-line > span {
	display: block;
	transform-origin: left bottom;
}

.contact-line:last-child {
	color: #ffcf25;
}

.contact-word-switch {
	position: relative;
	display: inline-block;
	overflow: visible;
}

.contact-word-switch > [data-word-default] {
	display: block;
}

.contact-word-switch > [data-word-alternate] {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
}

.talk-word-switch {
	display: grid;
	overflow: hidden;
}

.talk-word-switch > span {
	grid-area: 1 / 1;
}

[data-word-alternate] {
	visibility: hidden;
	opacity: 0;
}

[data-contact-section]:has([data-magnetic-button]:is(:hover, :focus-visible)) [data-contact-title]:not(.has-gsap-word-morph) [data-word-default],
[data-talk-label]:not(.has-gsap-word-morph):is(:hover, :focus-visible) [data-word-default] {
	visibility: hidden;
	opacity: 0;
}

[data-contact-section]:has([data-magnetic-button]:is(:hover, :focus-visible)) [data-contact-title]:not(.has-gsap-word-morph) [data-word-alternate],
[data-talk-label]:not(.has-gsap-word-morph):is(:hover, :focus-visible) [data-word-alternate] {
	visibility: visible;
	opacity: 1;
}

.talk-label-lead,
[data-contact-lead],
[data-word-default],
[data-word-alternate] {
	display: inline-block;
	transform-origin: 50% 100%;
}

.contact-title-letter,
.talk-label-letter {
	display: inline-block;
	transform-origin: 50% 100%;
}

.contact-title-letter.is-space,
.talk-label-letter.is-space {
	width: 0.28em;
}

.contact-intro {
	max-width: 590px;
	margin: clamp(30px, 5vh, 56px) 0 0;
	font-size: clamp(19px, 1.45vw, 27px);
	line-height: 1.08;
}

.contact-cta-scene {
	--scene-x: 0px;
	--scene-y: 0px;
	position: relative;
	z-index: 2;
	display: grid;
	width: min(36vw, 560px);
	height: min(53vw, 590px);
	min-height: 420px;
	place-items: center;
	justify-self: end;
	overflow: visible;
}

.contact-cue {
	--cue-shift-x: 0px;
	position: absolute;
	left: 55%;
	top: 46%;
	z-index: 1;
	width: clamp(320px, 23vw, 440px);
	overflow: visible;
	fill: none;
	stroke: #f8f8f6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.25;
	opacity: 0.96;
	transform: translate(calc(-50% + var(--cue-shift-x)), -50%);
	pointer-events: none;
}

.contact-cue path {
	vector-effect: non-scaling-stroke;
}

.contact-cta {
	--button-x: 0px;
	--button-y: 0px;
	--button-rotate: 0deg;
	position: relative;
	display: block;
	width: clamp(220px, 22vw, 326px);
	aspect-ratio: 1.08;
	color: #111;
	transform: translate(var(--button-x), var(--button-y)) rotate(var(--button-rotate));
	will-change: transform;
}

.contact-cta-base,
.contact-cta-top {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
}

.contact-cta-base {
	z-index: 0;
}

.contact-cta-top {
	z-index: 0;
	transition: transform 280ms cubic-bezier(.2, .8, .2, 1), filter 260ms ease;
}

.contact-cta:hover .contact-cta-top,
.contact-cta:focus-visible .contact-cta-top {
	filter: brightness(1.035);
	transform: translateY(10px);
}

.contact-cta:active .contact-cta-top {
	filter: brightness(0.99);
	transform: translateY(19px);
	transition-duration: 90ms;
}

.contact-cta:focus-visible {
	outline: 3px solid #f8f8f6;
	outline-offset: 14px;
}

.contact-spark {
	position: absolute;
	z-index: 4;
	display: block;
	height: auto;
	pointer-events: none;
	filter: drop-shadow(2px 3px 0 rgba(17, 17, 17, 0.2));
	transform-origin: 50% 50%;
	will-change: transform, opacity;
}

.contact-spark-one {
	left: -3%;
	top: 4%;
	width: clamp(44px, 4.2vw, 64px);
}

.contact-spark-two {
	right: -2%;
	top: 28%;
	width: clamp(24px, 2.4vw, 36px);
}

.contact-section.is-pointer-active .contact-spark {
	filter: drop-shadow(3px 5px 0 rgba(17, 17, 17, 0.24));
}

.contact-section.is-ready:not(.is-visible) .contact-kicker,
.contact-section.is-ready:not(.is-visible) .contact-intro,
.contact-section.is-ready:not(.is-visible) .contact-cta-scene {
	opacity: 0;
}

.contact-section.is-ready .contact-kicker,
.contact-section.is-ready .contact-intro {
	transition: opacity 650ms ease 360ms;
}

.contact-section.is-ready .contact-cta-scene {
	transition: opacity 700ms ease 460ms;
}

body.is-contact-dialog-open {
	overflow: hidden;
}

.contact-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(20, 11, 39, 0.76);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 280ms ease, visibility 0s linear 280ms;
}

.contact-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.contact-dialog {
	position: fixed;
	inset: 0;
	z-index: 120;
	width: min(940px, calc(100% - 48px));
	max-width: none;
	max-height: calc(100svh - 48px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 2px solid #111;
	border-radius: 24px;
	background: #f8f8f6;
	color: #111;
	box-shadow: 14px 14px 0 #ffcf25;
	font-family: "Neue Haas", Arial, sans-serif;
}

.contact-dialog::backdrop {
	background: transparent;
}

.contact-dialog-shell {
	display: grid;
	grid-template-columns: minmax(260px, 0.82fr) minmax(360px, 1.18fr);
	gap: 38px clamp(38px, 5vw, 72px);
	max-height: calc(100svh - 52px);
	padding: clamp(26px, 3.2vw, 42px);
	overflow-y: auto;
}

.contact-dialog-topline {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(17, 17, 17, 0.25);
}

.contact-dialog-topline p,
.contact-dialog-index {
	margin: 0;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-dialog-topline p {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact-dialog-topline p > span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #70e979;
	box-shadow: 0 0 0 5px rgba(112, 233, 121, 0.16);
}

.contact-dialog-close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 34px;
	padding: 0 14px;
	border: 1px solid #111;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
}

.contact-dialog-close span:last-child {
	font-family: Arial, sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 1;
	transition: transform 180ms ease;
}

.contact-dialog-close:hover span:last-child {
	transform: rotate(90deg);
}

.contact-dialog-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.contact-dialog-heading h2 {
	margin: 22px 0 28px;
	font-size: clamp(54px, 5vw, 78px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.05em;
}

.contact-dialog-heading h2 em {
	color: #7544df;
	font-style: normal;
}

.contact-dialog-heading > p:last-child {
	max-width: 330px;
	margin: auto 0 0;
	font-size: 18px;
	line-height: 1.08;
}

.contact-dialog-form,
.contact-dialog-message,
.contact-dialog-fields label {
	display: flex;
	flex-direction: column;
}

.contact-dialog-form {
	gap: 28px;
}

.contact-dialog-form[hidden] {
	display: none;
}

.contact-dialog-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.contact-dialog-form label > span {
	margin-bottom: 9px;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.contact-dialog-form input,
.contact-dialog-form textarea {
	width: 100%;
	padding: 12px 0;
	border: 0;
	border-bottom: 2px solid #111;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: #111;
	font: inherit;
	font-size: 17px;
}

.contact-dialog-form textarea {
	min-height: 116px;
	resize: vertical;
}

.contact-dialog-form input::placeholder,
.contact-dialog-form textarea::placeholder {
	color: rgba(17, 17, 17, 0.42);
}

.contact-dialog-form input:focus,
.contact-dialog-form textarea:focus {
	border-color: #7544df;
}

.contact-field-error {
	display: none;
	margin-top: 7px;
	color: #cc2f51;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.contact-dialog-form label.has-error .contact-field-error {
	display: block;
}

.contact-dialog-form label.has-error input,
.contact-dialog-form label.has-error textarea {
	border-color: #cc2f51;
}

.contact-form-honeypot {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	pointer-events: none;
}

.contact-form-status {
	margin: -10px 0 0;
	color: #b42346;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.contact-form-status:empty {
	display: none;
}

.contact-dialog-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 4px;
}

.contact-dialog-submit {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	min-width: 190px;
	height: 48px;
	padding: 0 18px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #ffcf25;
	color: #111;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 4px 4px 0 #111;
	transition: box-shadow 180ms ease, transform 180ms ease;
}

.contact-dialog-submit:hover {
	box-shadow: 2px 2px 0 #111;
	transform: translate(2px, 2px);
}

.contact-dialog-submit:disabled {
	cursor: wait;
	opacity: 0.72;
}

.contact-submit-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(17, 17, 17, 0.3);
	border-top-color: #111;
	border-radius: 50%;
	animation: contact-submit-spin 650ms linear infinite;
}

.contact-dialog-form.is-submitting .contact-submit-arrow {
	display: none;
}

.contact-dialog-form.is-submitting .contact-submit-spinner {
	display: block;
}

@keyframes contact-submit-spin {
	to {
		transform: rotate(360deg);
	}
}

.contact-dialog-actions > a {
	border-bottom: 1px solid currentColor;
	font-size: 13px;
}

.contact-dialog-feedback {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 390px;
	padding: clamp(28px, 4vw, 48px);
	border: 2px solid #111;
	border-radius: 20px;
	background: #7544df;
	color: #f8f8f6;
	box-shadow: 7px 7px 0 #ffcf25;
}

.contact-dialog-feedback[hidden] {
	display: none;
}

.contact-feedback-icon {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: 24px;
	border: 2px solid #111;
	border-radius: 50%;
	background: #ffcf25;
	color: #111;
	box-shadow: 4px 4px 0 #111;
	font-size: 28px;
	font-weight: 900;
}

.contact-feedback-kicker {
	margin: 0;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.contact-dialog-feedback h3 {
	margin: 16px 0 20px;
	font-size: clamp(48px, 4.5vw, 68px);
	font-weight: 900;
	line-height: 0.84;
	letter-spacing: -0.045em;
}

.contact-dialog-feedback > p:not(.contact-feedback-kicker) {
	max-width: 390px;
	margin: 0;
	font-size: 17px;
	line-height: 1.12;
}

.contact-feedback-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 34px;
}

.contact-feedback-primary {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-width: 190px;
	height: 46px;
	padding: 0 16px;
	border: 1px solid #111;
	border-radius: 999px;
	background: #ffcf25;
	color: #111;
	box-shadow: 4px 4px 0 #111;
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
}

.contact-feedback-actions button {
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.contact-dialog-close:focus-visible,
.contact-dialog-submit:focus-visible,
.contact-dialog-actions > a:focus-visible,
.contact-feedback-actions a:focus-visible,
.contact-feedback-actions button:focus-visible {
	outline: 3px solid #7544df;
	outline-offset: 3px;
}

.contact-feedback-actions a:focus-visible,
.contact-feedback-actions button:focus-visible {
	outline-color: #ffcf25;
}

.site-footer {
	position: relative;
	background: #111;
	color: #f8f8f6;
	border-top: 1px solid rgba(248, 248, 246, 0.22);
}

.site-footer-inner {
	display: grid;
	grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr);
	gap: clamp(70px, 9vw, 160px);
	padding: clamp(72px, 8vw, 120px) var(--page-gutter) 34px;
}

.site-footer-brand > a {
	display: inline-block;
	width: clamp(115px, 11vw, 176px);
}

.site-footer-brand img {
	width: 100%;
}

.site-footer-brand p {
	max-width: 430px;
	margin: 32px 0 0;
	color: rgba(248, 248, 246, 0.62);
	font-size: clamp(20px, 1.7vw, 30px);
	line-height: 1.08;
}

.site-footer-links {
	display: flex;
	flex-direction: column;
	align-self: start;
	border-top: 1px solid rgba(248, 248, 246, 0.32);
}

.site-footer-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 2px;
	border-bottom: 1px solid rgba(248, 248, 246, 0.32);
	font-size: clamp(17px, 1.3vw, 23px);
	transition: padding 220ms ease, color 220ms ease;
}

.site-footer-links a:hover {
	padding-left: 10px;
	color: #ffcf25;
}

.site-footer-links span {
	font-size: 0.85em;
}

.site-footer-meta {
	display: flex;
	grid-column: 1 / -1;
	justify-content: space-between;
	gap: 24px;
	padding-top: clamp(54px, 8vw, 120px);
	border-top: 1px solid rgba(248, 248, 246, 0.22);
	color: rgba(248, 248, 246, 0.55);
	font-family: "Courier New", monospace;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.site-footer-meta p {
	margin: 0;
}

@media (max-width: 900px) {
	.contact-inner {
		grid-template-columns: 1fr;
		align-content: center;
		gap: 24px;
	}

	.contact-copy h2 {
		font-size: clamp(112px, 20vw, 170px);
	}

	.contact-cta-scene {
		width: min(78vw, 520px);
		height: 360px;
		min-height: 0;
		justify-self: end;
		margin-right: 4vw;
	}

	.contact-cue {
		left: 50%;
		top: 58%;
		width: 220px;
		transform: translate(calc(-50% + var(--cue-shift-x)), -50%) rotate(10deg);
	}
}

@media (max-width: 780px) {
	.contact-dialog {
		width: calc(100% - 24px);
		max-height: calc(100svh - 24px);
		border-radius: 18px;
		box-shadow: 8px 8px 0 #ffcf25;
	}

	.contact-dialog-shell {
		grid-template-columns: 1fr;
		gap: 28px;
		max-height: calc(100svh - 28px);
		padding: 24px;
	}

	.contact-dialog-heading h2 {
		margin: 18px 0 22px;
		font-size: clamp(48px, 11vw, 68px);
	}

	.contact-dialog-heading > p:last-child {
		max-width: 470px;
		margin-top: 0;
	}
}

@media (max-width: 720px) {
	.contact-inner {
		grid-template-rows: auto 148px 252px;
		align-content: center;
		gap: 0;
		min-height: max(100svh, 860px);
		padding: 100px 18px calc(30px + var(--section-index-height));
	}

	.contact-copy {
		align-self: end;
	}

	.contact-kicker {
		margin-bottom: 32px;
		font-size: 9px;
	}

	.contact-copy h2 {
		font-size: clamp(82px, 25vw, 124px);
		line-height: 0.76;
	}

	.contact-intro {
		max-width: 390px;
		margin-top: 28px;
		font-size: 18px;
	}

	.contact-cta-scene {
		align-self: start;
		justify-self: end;
		width: 100%;
		max-width: 390px;
		height: 252px;
		margin-right: 0;
		padding-right: clamp(4px, 2vw, 12px);
		place-items: center end;
	}

	.contact-cta {
		width: clamp(180px, 56vw, 230px);
	}

	.contact-cue {
		position: relative;
		left: -8vw;
		top: 18px;
		align-self: center;
		justify-self: center;
		width: 174px;
		margin-left: 0;
		transform: translateX(var(--cue-shift-x)) rotate(72deg);
		transform-origin: center;
	}

	.contact-dialog-topline p {
		max-width: 190px;
		font-size: 8px;
	}

	.contact-dialog-close {
		padding: 0 10px;
	}

	.contact-dialog-close span:first-child {
		display: none;
	}

	.contact-dialog-fields {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.contact-dialog-form {
		gap: 24px;
	}

	.contact-dialog-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.contact-dialog-submit {
		width: 100%;
	}

	.contact-dialog-actions > a {
		align-self: flex-start;
	}

	.contact-dialog-feedback {
		min-height: 0;
		padding: 26px 22px 28px;
	}

	.contact-dialog-feedback h3 {
		font-size: clamp(46px, 14vw, 60px);
	}

	.contact-feedback-actions {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.contact-feedback-primary {
		width: 100%;
	}

	.contact-feedback-actions button {
		align-self: flex-start;
	}

	.site-footer-inner {
		grid-template-columns: 1fr;
		gap: 58px;
		padding: 68px 18px 26px;
	}

	.site-footer-brand p {
		max-width: 300px;
		margin-top: 24px;
	}

	.site-footer-meta {
		grid-column: auto;
		flex-direction: column;
		gap: 10px;
		padding-top: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-submit-spinner {
		animation: none;
	}

	.contact-overlay {
		transition: none;
	}

	.contact-kicker > span {
		animation: none;
	}

	.contact-section.is-ready:not(.is-visible) .contact-kicker,
	.contact-section.is-ready:not(.is-visible) .contact-intro,
	.contact-section.is-ready:not(.is-visible) .contact-cta-scene {
		opacity: 1;
	}

	.contact-kicker,
	.contact-intro,
	.contact-cta-scene,
	.contact-cta-top,
	.site-footer-links a {
		transition: none !important;
	}
}

/* Compact desktop: laptops and Windows displays using 125% or 150% UI scaling. */
@media (min-width: 721px) and (max-width: 1900px) and (max-height: 850px) {
	body.dark {
		--page-gutter: clamp(24px, 1.875vw, 30px);
		--section-index-height: clamp(36px, 2.7vw, 44px);
		--display-title-size: clamp(48px, 6.4vw, 98px);
	}

	.section-index {
		gap: clamp(14px, 1.25vw, 20px);
		font-size: clamp(7px, 0.52vw, 8px);
	}

	.site-header {
		padding-top: clamp(18px, 3.25vh, 28px);
	}

	.hero {
		padding-top: clamp(64px, 11vh, 96px);
		padding-bottom: clamp(28px, 4.4vh, 38px);
	}

	.hero-copy {
		width: min(34vw, 440px);
	}

	.hero-copy h1 {
		font-size: var(--display-title-size);
	}

	.hero-actions {
		margin-top: clamp(18px, 2.8vh, 24px);
	}

	.duck-card {
		--duck-scale: 0.92;
		left: 52%;
		width: min(620px, 68svh);
		top: 52%;
	}

	.about-panel {
		bottom: calc(clamp(24px, 4.4vh, 38px) + var(--section-index-height));
		width: min(300px, 26vw);
	}

	.about-panel h2 {
		margin-bottom: clamp(6px, 0.65vw, 8px);
		font-size: clamp(22px, 2.25vw, 34px);
	}

	.about-panel p {
		font-size: clamp(10px, 1.1vw, 17px);
		line-height: 1.08;
	}

	.footer-center {
		bottom: calc(clamp(24px, 4.4vh, 38px) + var(--section-index-height));
		font-size: clamp(9px, 0.73vw, 11px);
	}

	.scroll-down {
		bottom: calc(clamp(17px, 2.9vh, 25px) + var(--section-index-height));
		width: clamp(40px, 3.25vw, 50px);
		height: clamp(40px, 3.25vw, 50px);
	}

	.services-sticky {
		grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
		height: 100vh;
		height: 100svh;
		min-height: 0;
		padding-top: clamp(72px, 10svh, 84px);
		padding-right: var(--page-gutter);
		padding-bottom: calc(var(--section-index-height) + clamp(12px, 2vh, 18px));
		padding-left: var(--page-gutter);
	}

	.services-copy {
		min-height: 0;
	}

	.services-copy h2 {
		margin-bottom: clamp(8px, 1.4vh, 12px);
		font-size: clamp(40px, 3.75vw, 58px);
	}

	.services-duck {
		width: min(520px, 65svh);
		margin-top: calc(min(35px, 4.4svh) * -1);
		margin-left: min(100px, 12.5svh);
	}

	.services-card-stage {
		width: min(380px, 47.5svh);
		justify-self: start;
		margin-left: min(48px, 6svh);
	}

	.service-card-content {
		padding: min(46px, 5.75svh) min(38px, 4.75svh) min(37px, 4.63svh);
	}

	.service-card h3 {
		font-size: min(40px, 5svh);
	}

	.service-card p {
		font-size: min(19px, 2.38svh);
	}

	.skills-sticky {
		min-height: 0;
		padding-top: clamp(72px, 10svh, 84px);
		padding-bottom: calc(var(--section-index-height) + clamp(10px, 2vh, 18px));
	}

	.skills-heading {
		padding-bottom: clamp(20px, 3svh, 24px);
	}

	.skills-heading h2 {
		font-size: clamp(40px, 3.75vw, 58px);
	}

	.skills-rope-viewport {
		--skill-rope-top: min(75px, 9.4svh);
		height: min(490px, calc(60.25svh + 8px));
	}

	.skill-tag {
		--tag-head: min(132px, 16.5svh);
		width: min(360px, 45svh);
		height: min(456px, 57svh);
		min-height: 0;
		padding: var(--tag-head) min(29px, 3.6svh) min(27px, 3.4svh);
		border-radius: min(24px, 3svh);
		box-shadow: 0 min(26px, 3.25svh) 0 rgba(0, 0, 0, 0.34);
		overflow: hidden;
	}

	.skill-tag::after {
		top: min(16px, 2svh);
		width: min(69px, 8.65svh);
		height: min(90px, 11.25svh);
		border-radius: min(16px, 2svh);
	}

	.skill-label {
		top: min(32px, 4svh);
		font-size: min(11px, 1.38svh);
	}

	.skill-label span {
		margin-top: min(6px, 0.75svh);
		font-size: min(7px, 0.9svh);
	}

	.skill-card-symbol {
		left: min(24px, 3svh);
		top: calc(var(--tag-head) - min(51px, 6.4svh));
		width: min(35px, 4.4svh);
		height: min(35px, 4.4svh);
		border-radius: min(10px, 1.25svh);
		font-size: min(10px, 1.25svh);
	}

	.skill-tag h3 {
		margin: min(14px, 1.75svh) 0;
		font-size: min(38px, 4.75svh);
		line-height: 0.88;
		overflow-wrap: anywhere;
	}

	.skill-tag h3::before {
		left: calc(min(29px, 3.6svh) * -1);
		right: calc(min(29px, 3.6svh) * -1);
		top: calc(min(14px, 1.75svh) * -1);
	}

	.skill-capabilities {
		gap: min(7px, 0.9svh);
		padding-bottom: min(14px, 1.75svh);
		font-size: min(10px, 1.25svh);
	}

	.skill-capabilities::after {
		left: calc(min(29px, 3.6svh) * -1);
		right: calc(min(29px, 3.6svh) * -1);
		bottom: calc(min(14px, 1.75svh) * -1);
	}

	.skill-capabilities li {
		min-height: min(24px, 3svh);
		padding: min(6px, 0.75svh) min(9px, 1.15svh);
	}

	.skill-tools {
		gap: min(6px, 0.75svh);
		padding-top: min(22px, 2.75svh);
		font-size: min(9px, 1.13svh);
	}

	.skill-tools li {
		min-height: min(20px, 2.5svh);
		padding: min(5px, 0.63svh) min(7px, 0.9svh);
	}

	.skill-barcode {
		height: clamp(12px, 1.15vw, 18px);
		margin-top: clamp(5px, 0.52vw, 8px);
	}

	.skill-tag small {
		right: min(24px, 3svh);
		bottom: min(23px, 2.9svh);
		font-size: min(8px, 1svh);
	}

	.work-sticky {
		gap: clamp(10px, 1.6vh, 14px);
		min-height: 0;
		padding-top: clamp(42px, 8vh, 70px);
		padding-bottom: calc(var(--section-index-height) + clamp(10px, 2vh, 18px));
	}

	.work-sticky .portfolio-heading h2 {
		font-size: clamp(40px, 3.75vw, 58px);
	}

	.work-heading-side p {
		font-size: clamp(11px, 1.1vw, 17px);
	}

	/* Keep desktop card ratios when Windows scaling crosses the 1050px breakpoint. */
	.work-card-wide {
		width: 48vw;
	}

	.work-card-detail {
		width: 34vw;
	}

	.work-card-phone {
		width: 23vw;
	}

	.work-card-banners {
		width: 38vw;
	}

	.work-banner-cover h3 {
		font-size: clamp(34px, 4.4vw, 67px);
	}

	.work-card footer {
		font-size: clamp(7px, 0.47vw, 8px);
	}

	.work-instruction,
	.skills-instruction {
		font-size: min(8px, 1svh);
	}

	.work-instruction span,
	.skills-instruction span {
		width: min(24px, 3svh);
		height: min(24px, 3svh);
	}

	.contact-inner {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 36vw);
		align-content: normal;
		gap: clamp(22px, 4vw, 60px);
		padding-top: clamp(56px, 10vh, 86px);
		padding-right: var(--page-gutter);
		padding-bottom: calc(clamp(34px, 8.15vh, 71px) + var(--section-index-height));
		padding-left: var(--page-gutter);
	}

	.contact-kicker {
		margin-bottom: clamp(14px, 3vh, 26px);
		font-size: clamp(9px, 0.68vw, 10px);
	}

	.contact-copy h2 {
		font-size: clamp(112px, 12.1vw, 186px);
	}

	.contact-intro {
		margin-top: clamp(16px, 3vh, 26px);
		font-size: clamp(15px, 1.4vw, 22px);
	}

	.contact-cta-scene {
		width: min(29.2vw, 448px);
		height: min(31vw, 472px, calc(100svh - 128px));
		min-height: 0;
		justify-self: end;
		margin-right: 0;
	}

	.contact-cta {
		width: clamp(174px, 17vw, 262px);
	}

	/* Restore the desktop cue after the narrow-width contact layout has fired. */
	.contact-cue {
		left: 55%;
		top: 46%;
		width: min(23vw, 352px);
		transform: translate(calc(-50% + var(--cue-shift-x)), -50%);
	}

	.site-footer-inner {
		gap: clamp(64px, 8.33vw, 128px);
		padding-top: clamp(52px, 6.25vw, 96px);
		padding-bottom: clamp(23px, 1.77vw, 27px);
	}

	.site-footer-brand > a {
		width: clamp(92px, 9.17vw, 141px);
	}

	.site-footer-brand p {
		margin-top: clamp(21px, 1.67vw, 26px);
		font-size: clamp(16px, 1.56vw, 24px);
	}

	.site-footer-links a {
		padding-top: clamp(12px, 1.25vw, 19px);
		padding-bottom: clamp(12px, 1.25vw, 19px);
		font-size: clamp(14px, 1.2vw, 18px);
	}

	.site-footer-meta {
		padding-top: clamp(42px, 6.25vw, 96px);
	}
}

/* Extra-short desktop viewport, typical of 150% scaling on 768px-tall screens. */
@media (min-width: 721px) and (max-width: 1600px) and (max-height: 700px) {
	.hero-copy {
		width: min(36vw, 400px);
	}

	.duck-card {
		left: 53%;
	}

	.services-sticky {
		grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
	}

	.skills-heading h2,
	.work-sticky .portfolio-heading h2 {
		font-size: clamp(36px, 3.75vw, 45px);
	}

	.work-heading-side p {
		margin-bottom: 10px;
	}

	.contact-copy h2 {
		font-size: clamp(96px, 12.1vw, 138px);
	}

	.contact-intro {
		max-width: 500px;
		line-height: 1.04;
	}
}