:root {
	--km-black: #050505;
	--km-ink: #0b0b0b;
	--km-panel: #111111;
	--km-panel-2: #171717;
	--km-line: rgba(255, 255, 255, 0.14);
	--km-text: #ffffff;
	--km-muted: rgba(255, 255, 255, 0.68);
	--km-soft: rgba(255, 255, 255, 0.08);
	--km-gold: #f1c15d;
	--km-red: #ff3d32;
	--km-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--km-width: min(1120px, calc(100vw - 40px));
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--km-black);
	color: var(--km-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
}

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

body::before {
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		var(--km-black);
	background-size: 72px 72px;
	content: "";
}

body::after {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 61, 50, 0.13), transparent 36%, rgba(241, 193, 93, 0.08));
	content: "";
	opacity: 0.58;
}

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

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

.skip-link {
	position: fixed;
	left: 16px;
	top: 16px;
	z-index: 50;
	padding: 10px 14px;
	background: var(--km-text);
	color: var(--km-black);
	transform: translateY(-160%);
	transition: transform 180ms ease;
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	border-bottom: 1px solid var(--km-line);
	background: rgba(5, 5, 5, 0.84);
	backdrop-filter: blur(22px);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	width: var(--km-width);
	min-height: 82px;
	margin: 0 auto;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	font-weight: 900;
	text-transform: uppercase;
}

.site-logo img,
.site-logo__image {
	width: 54px;
	height: 54px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	object-fit: cover;
}

.km-logo {
	display: block;
	background: var(--km-black);
	color: var(--km-text);
	overflow: hidden;
	transform-origin: center;
	transition: color 260ms ease, filter 260ms ease, transform 260ms var(--km-ease);
}

.km-logo__bg {
	fill: var(--km-black);
}

.km-logo__piece {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: km-logo-piece-loop 5s var(--km-ease) infinite;
}

.km-logo__piece--frame-top {
	animation-delay: 60ms;
}

.km-logo__piece--frame-bottom {
	animation-delay: 170ms;
}

.km-logo__piece--k {
	animation-delay: 270ms;
}

.km-logo__piece--m {
	animation-delay: 370ms;
}

.site-logo:hover .km-logo,
.site-logo:focus-visible .km-logo,
.mobile-menu__logo:hover .km-logo,
.mobile-menu__logo:focus-visible .km-logo,
.footer-hero__brand:hover .km-logo {
	color: var(--km-gold);
	filter: drop-shadow(0 0 14px rgba(241, 193, 93, 0.28));
	transform: rotate(-2deg) scale(1.04);
}

.site-logo__text {
	white-space: nowrap;
}

.menu-toggle {
	position: relative;
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--km-text);
	font: inherit;
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
	cursor: pointer;
}

.menu-toggle__icon {
	display: grid;
	gap: 4px;
	width: 22px;
}

.menu-toggle__line {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
	transition: opacity 180ms ease, transform 220ms var(--km-ease);
}

.menu-toggle__label {
	line-height: 1;
}

.site-header.is-menu-open .menu-toggle__line:first-child {
	transform: translateY(6px) rotate(45deg);
}

.site-header.is-menu-open .menu-toggle__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.site-header.is-menu-open .menu-toggle__line:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.site-nav {
	justify-self: center;
}

.mobile-menu__top,
.mobile-menu__contact {
	display: none;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	color: var(--km-muted);
	font-size: 0.92rem;
	transition: color 180ms ease, background 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
	background: var(--km-soft);
	color: var(--km-text);
	outline: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-width: 0;
}

.contact-context-label {
	color: var(--km-gold);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.header-actions .contact-context-label {
	margin-right: 4px;
}

.contact-action {
	--action-bg: rgba(255, 255, 255, 0.08);
	--action-border: rgba(255, 255, 255, 0.18);
	--action-fg: var(--km-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--action-border);
	background: var(--action-bg);
	color: var(--action-fg);
	font-size: 0.78rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	transition: transform 220ms var(--km-ease), border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.contact-action svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex: 0 0 auto;
}

.contact-action--phone {
	--action-bg: rgba(255, 255, 255, 0.08);
	--action-border: rgba(255, 255, 255, 0.2);
	--action-fg: var(--km-text);
}

.contact-action--whatsapp {
	--action-bg: rgba(37, 211, 102, 0.16);
	--action-border: rgba(37, 211, 102, 0.42);
	--action-fg: #25d366;
}

.contact-action--instagram {
	--action-bg: linear-gradient(135deg, rgba(245, 133, 41, 0.22), rgba(221, 42, 123, 0.2), rgba(81, 91, 212, 0.22));
	--action-border: rgba(221, 42, 123, 0.42);
	--action-fg: var(--km-text);
}

.contact-action:hover,
.contact-action:focus-visible {
	outline: 0;
	transform: translateY(-2px);
}

.contact-action--phone:hover,
.contact-action--phone:focus-visible {
	border-color: rgba(255, 255, 255, 0.72);
	background: var(--km-text);
	color: var(--km-black);
	box-shadow: 0 16px 38px rgba(255, 255, 255, 0.12);
}

.contact-action--whatsapp:hover,
.contact-action--whatsapp:focus-visible {
	border-color: #25d366;
	background: #25d366;
	color: #041b0d;
	box-shadow: 0 16px 38px rgba(37, 211, 102, 0.24);
}

.contact-action--instagram:hover,
.contact-action--instagram:focus-visible {
	border-color: rgba(255, 255, 255, 0.34);
	background: linear-gradient(135deg, #f58529, #dd2a7b 46%, #8134af 72%, #515bd4);
	color: var(--km-text);
	box-shadow: 0 16px 38px rgba(221, 42, 123, 0.24);
}

.button,
.showcase-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: var(--km-text);
	color: var(--km-black);
	font-weight: 900;
	text-transform: uppercase;
	transition: transform 220ms var(--km-ease), border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.button--ghost {
	background: transparent;
	color: var(--km-text);
}

.button:hover,
.button:focus-visible,
.showcase-card__cta:hover,
.showcase-card__cta:focus-visible {
	border-color: var(--km-gold);
	background: var(--km-gold);
	color: var(--km-black);
	outline: 0;
	transform: translateY(-2px);
}

.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.56fr);
	align-items: center;
	gap: clamp(34px, 6vw, 86px);
	width: var(--km-width);
	min-height: min(730px, calc(100svh - 112px));
	margin: 0 auto;
	padding: 96px 0 70px;
}

.hero::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw);
	z-index: -2;
	background-image: url("../images/kasper-hero.jpg");
	background-position: right 42% center;
	background-repeat: no-repeat;
	background-size: min(820px, 62vw) auto;
	content: "";
	filter: grayscale(0.82) contrast(1.22) brightness(0.58);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 34%, #000 62%, #000 100%);
	opacity: 0.9;
}

.hero::after {
	position: absolute;
	inset: 0 calc(50% - 50vw);
	z-index: -1;
	background:
		linear-gradient(115deg, rgba(255, 61, 50, 0.2), transparent 38%),
		linear-gradient(90deg, rgba(5, 5, 5, 0.98) 0%, rgba(5, 5, 5, 0.86) 45%, rgba(5, 5, 5, 0.44) 72%, rgba(5, 5, 5, 0.94) 100%),
		linear-gradient(180deg, rgba(5, 5, 5, 0.16), rgba(5, 5, 5, 0.96));
	content: "";
}

.hero__watermark {
	position: absolute;
	right: clamp(-220px, -9vw, -70px);
	top: 48%;
	z-index: 0;
	width: clamp(360px, 54vw, 760px);
	color: var(--km-text);
	opacity: 0.055;
	pointer-events: none;
	transform: translate3d(0, var(--km-parallax-y, 0), 0) rotate(-8deg);
	will-change: transform;
}

.hero__watermark .km-logo {
	width: 100%;
	height: auto;
	border: 0;
	background: transparent;
}

.hero__watermark .km-logo__bg {
	fill: transparent;
}

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 820px;
	padding: 2vh 0 5vh;
}

.hero__content::before {
	position: absolute;
	left: -18px;
	top: 8%;
	width: 3px;
	height: 76%;
	background: linear-gradient(180deg, var(--km-red), var(--km-gold), transparent);
	content: "";
	opacity: 0.78;
}

.hero__content::after {
	position: absolute;
	left: min(44vw, 520px);
	top: 2%;
	z-index: -1;
	width: min(42vw, 540px);
	height: 70%;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	content: "";
	transform: skewX(-14deg);
	opacity: 0.6;
}

.eyebrow {
	margin: 0 0 14px;
	color: var(--km-gold);
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
}

.hero h1 {
	position: relative;
	max-width: 9.8ch;
	margin: 0;
	font-size: clamp(5rem, 14vw, 12.5rem);
	line-height: 0.78;
	text-transform: uppercase;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero h1 {
		background:
			linear-gradient(95deg, #ffffff 0%, #ffffff 30%, #b8b8b8 43%, #f1c15d 52%, #ffffff 62%, #ffffff 100%);
		background-clip: text;
		background-size: 260% 100%;
		color: transparent;
		-webkit-background-clip: text;
		animation: km-title-sheen 9s var(--km-ease) infinite;
	}
}

.hero p:not(.eyebrow) {
	max-width: 560px;
	margin: 30px 0 24px;
	color: var(--km-muted);
	font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	max-width: 620px;
	background: var(--km-line);
}

.hero__tags span {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 14px;
	background: rgba(5, 5, 5, 0.72);
	color: var(--km-text);
	font-size: 0.74rem;
	font-weight: 900;
	text-transform: uppercase;
	backdrop-filter: blur(14px);
}

.hero__reel {
	position: relative;
	z-index: 1;
	min-height: clamp(360px, 43vw, 520px);
	transform: rotate(-2deg);
}

.hero__reel::before {
	position: absolute;
	inset: 6% 10% 10% 6%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 34px 34px;
	content: "";
	opacity: 0.46;
}

.hero__cut {
	position: absolute;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-position: center;
	background-size: cover;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
	animation: km-reel-drift 8s var(--km-ease) infinite;
}

.hero__cut::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.54)),
		linear-gradient(45deg, rgba(255, 61, 50, 0.18), transparent 44%);
	content: "";
}

.hero__cut--one {
	left: 4%;
	top: 14%;
	width: 42%;
	height: 56%;
}

.hero__cut--two {
	right: 0;
	top: 0;
	width: 52%;
	height: 72%;
	animation-delay: -2.4s;
}

.hero__cut--three {
	bottom: 0;
	left: 23%;
	width: 48%;
	height: 44%;
	animation-delay: -4.8s;
}

.work-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.7fr);
	align-items: end;
	gap: 32px;
	width: var(--km-width);
	margin: 0 auto;
	padding: 76px 0 28px;
}

.work-intro h2 {
	margin: 0;
	font-size: clamp(2.2rem, 6vw, 5rem);
	line-height: 0.92;
	text-transform: uppercase;
}

.work-intro p:last-child {
	margin: 0;
	color: var(--km-muted);
}

.showcase {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	border-top: 1px solid var(--km-line);
	border-bottom: 1px solid var(--km-line);
}

.showcase__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--km-line);
}

.showcase-card {
	position: relative;
	min-height: clamp(360px, 42vw, 620px);
	overflow: hidden;
	background: var(--km-ink);
	isolation: isolate;
}

.showcase-card:focus-visible {
	outline: 2px solid var(--km-gold);
	outline-offset: -2px;
}

.showcase-card__media,
.showcase-card__poster,
.showcase-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.showcase-card__poster,
.showcase-card__video {
	object-fit: cover;
	transform: scale(1.01);
	transition: opacity 260ms ease, transform 650ms var(--km-ease), filter 420ms ease;
}

.showcase-card__video {
	z-index: 1;
	opacity: 0;
}

.showcase-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.58)),
		linear-gradient(45deg, rgba(255, 61, 50, 0.22), transparent 42%);
	opacity: 0.78;
	transition: opacity 260ms ease;
}

.showcase-card__tap-cue {
	appearance: none;
	position: absolute;
	top: clamp(14px, 2vw, 22px);
	right: clamp(14px, 2vw, 22px);
	z-index: 4;
	display: none;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(5, 5, 5, 0.72);
	color: var(--km-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	touch-action: manipulation;
	backdrop-filter: blur(16px);
	transition: opacity 220ms ease, transform 220ms var(--km-ease);
}

.showcase-card__tap-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--km-text);
	color: var(--km-black);
	flex: 0 0 auto;
}

.showcase-card__tap-icon::before {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-bottom: 5px solid transparent;
	border-left: 7px solid currentColor;
	border-top: 5px solid transparent;
	content: "";
}

.showcase-card__content {
	position: absolute;
	left: clamp(18px, 2.4vw, 34px);
	right: clamp(18px, 2.4vw, 34px);
	bottom: clamp(18px, 2.8vw, 38px);
	z-index: 3;
	display: grid;
	gap: 10px;
	transform: translateY(48px);
	transition: transform 360ms var(--km-ease);
}

.showcase-card__content p,
.showcase-card__content h3 {
	margin: 0;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.54);
}

.showcase-card__content p {
	color: var(--km-gold);
	font-size: 0.78rem;
	font-weight: 900;
	text-transform: uppercase;
}

.showcase-card__content h3 {
	max-width: min(100%, 12ch);
	font-size: clamp(2.1rem, 4.6vw, 4.6rem);
	line-height: 0.9;
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
	text-transform: uppercase;
}

.showcase-card__cta {
	width: max-content;
	max-width: 100%;
	margin-top: 10px;
	opacity: 0;
	transform: translateY(14px);
	pointer-events: none;
	transition: opacity 260ms ease, transform 320ms var(--km-ease), background 220ms ease;
}

.showcase-card:is(:hover, :focus-within, .is-active) .showcase-card__poster {
	filter: saturate(1.08) contrast(1.08);
	transform: scale(1.08);
}

.showcase-card:is(:hover, :focus-within, .is-active) .showcase-card__video {
	opacity: 1;
	transform: scale(1.04);
}

.showcase-card:is(:hover, :focus-within, .is-active) .showcase-card__content {
	transform: translateY(0);
}

.showcase-card:is(:hover, :focus-within, .is-active) .showcase-card__cta {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.showcase-card.is-active .showcase-card__tap-cue {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-8px);
}

.site-footer {
	border-top: 1px solid var(--km-line);
	background: #030303;
}

.site-footer__inner {
	width: var(--km-width);
	margin: 0 auto;
	padding: 84px 0 34px;
}

.footer-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
	gap: 42px;
	align-items: end;
}

.footer-hero__brand {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.footer-hero__brand img,
.footer-hero__brand .site-logo__image {
	width: 96px;
	height: 96px;
	border: 1px solid var(--km-line);
	object-fit: cover;
}

.site-footer h2 {
	margin: 0;
	font-size: clamp(2.25rem, 6vw, 5.2rem);
	line-height: 0.92;
	text-transform: uppercase;
}

.footer-hero__copy p {
	margin: 0 0 24px;
	color: var(--km-muted);
}

.footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.footer-actions__label {
	flex: 0 0 100%;
	margin: 0 0 2px;
}

.footer-info-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 56px 0;
	background: var(--km-line);
}

.footer-card {
	min-height: 250px;
	padding: 24px;
	background: var(--km-panel);
}

.footer-card:nth-child(even) {
	background: var(--km-panel-2);
}

.footer-card h3 {
	margin: 0 0 20px;
	color: var(--km-gold);
	font-size: 0.82rem;
	text-transform: uppercase;
}

.footer-card ul {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-card li,
.footer-card p,
.footer-card dd {
	color: var(--km-muted);
}

.footer-card li::before {
	margin-right: 8px;
	color: var(--km-gold);
	content: "/";
}

.footer-card p {
	margin: 0;
}

.footer-card dl {
	display: grid;
	gap: 18px;
	margin: 0;
}

.footer-card dt {
	margin-bottom: 4px;
	color: var(--km-text);
	font-weight: 800;
}

.footer-card dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.footer-card a:hover,
.footer-card a:focus-visible {
	color: var(--km-gold);
	outline: 0;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-top: 1px solid var(--km-line);
	padding-top: 24px;
	color: var(--km-muted);
	font-size: 0.9rem;
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
	color: var(--km-text);
	outline: 0;
}

.site-main--default {
	width: var(--km-width);
	margin: 0 auto;
	padding: 90px 0;
}

.entry {
	max-width: 780px;
}

.entry h1 {
	font-size: clamp(2.8rem, 8vw, 6rem);
	line-height: 0.92;
	text-transform: uppercase;
}

.entry__content {
	color: var(--km-muted);
}

.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms var(--km-ease);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes km-reel-drift {
	0%,
	100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(0, -10px, 0) scale(1.025);
	}
}

@keyframes km-title-sheen {
	0%,
	28% {
		background-position: 100% 50%;
	}
	62%,
	100% {
		background-position: 0% 50%;
	}
}

@keyframes km-logo-piece-loop {
	0% {
		opacity: 0;
		transform: translateY(22px) scale(0.96);
	}
	11%,
	86% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(-10px) scale(0.985);
	}
}

@media (max-width: 1100px) {
	.header-actions .contact-action {
		width: 44px;
		padding: 0;
	}

	.header-actions .contact-action span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.header-actions .contact-context-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.footer-info-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.site-header__inner {
		position: relative;
		grid-template-columns: auto auto;
		gap: 14px;
		justify-content: space-between;
	}

	.menu-toggle {
		display: inline-flex;
		justify-self: end;
	}

	.header-actions {
		display: none;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: grid;
		grid-template-rows: auto 1fr auto;
		gap: 26px;
		width: 100vw;
		min-height: 100dvh;
		padding: max(24px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
		background:
			linear-gradient(180deg, rgba(255, 61, 50, 0.13), transparent 34%),
			linear-gradient(135deg, rgba(241, 193, 93, 0.1), transparent 52%),
			rgba(3, 3, 3, 0.98);
		overflow-y: auto;
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transform: scale(0.98);
		transition: opacity 240ms ease, visibility 240ms ease, transform 240ms var(--km-ease);
	}

	.site-header.is-menu-open .site-nav {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
		transform: scale(1);
	}

	.mobile-menu__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		padding-right: 64px;
	}

	.mobile-menu__top p {
		margin: 0;
		color: var(--km-muted);
		font-size: 0.78rem;
		font-weight: 900;
		text-transform: uppercase;
	}

	.mobile-menu__logo {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		font-weight: 900;
		text-transform: uppercase;
	}

	.mobile-menu__logo img,
	.mobile-menu__logo .site-logo__image {
		width: 50px;
		height: 50px;
		border: 1px solid rgba(255, 255, 255, 0.22);
		object-fit: cover;
	}

	.site-nav__menu {
		display: grid;
		align-self: center;
		gap: 2px;
		padding: 0;
	}

	.site-nav__menu a {
		display: flex;
		align-items: center;
		min-height: clamp(68px, 13vh, 108px);
		padding: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		color: var(--km-text);
		font-size: clamp(2.6rem, 15vw, 5.8rem);
		font-weight: 900;
		line-height: 0.9;
		text-transform: uppercase;
	}

	.site-nav__menu li:last-child a {
		border-bottom: 0;
	}

	.mobile-menu__contact {
		display: block;
	}

	.mobile-menu__actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1px;
		background: var(--km-line);
	}

	.mobile-menu__actions .contact-action {
		min-height: 62px;
		padding: 0 12px;
		border: 0;
		background: var(--action-bg);
		color: var(--action-fg);
		font-size: 0.82rem;
	}

	.mobile-menu__actions .contact-action span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}

	.mobile-menu__actions .contact-action:hover,
	.mobile-menu__actions .contact-action:focus-visible {
		outline: 0;
		transform: translateY(-2px);
	}

	.mobile-menu__actions .contact-action--phone:hover,
	.mobile-menu__actions .contact-action--phone:focus-visible {
		background: var(--km-text);
		color: var(--km-black);
	}

	.mobile-menu__actions .contact-action--whatsapp:hover,
	.mobile-menu__actions .contact-action--whatsapp:focus-visible {
		background: #25d366;
		color: #041b0d;
	}

	.mobile-menu__actions .contact-action--instagram:hover,
	.mobile-menu__actions .contact-action--instagram:focus-visible {
		background: linear-gradient(135deg, #f58529, #dd2a7b 46%, #8134af 72%, #515bd4);
		color: var(--km-text);
	}

	.hero,
	.footer-hero,
	.work-intro {
		grid-template-columns: 1fr;
	}

	.hero {
		align-items: start;
		min-height: auto;
		padding: 58px 0 56px;
	}

	.hero::before {
		background-position: center top;
		background-size: min(720px, 110vw) auto;
		mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.78) 42%, transparent 82%);
		opacity: 0.48;
	}

	.hero::after {
		background:
			linear-gradient(180deg, rgba(5, 5, 5, 0.2), rgba(5, 5, 5, 0.88) 58%, rgba(5, 5, 5, 0.98)),
			linear-gradient(90deg, rgba(5, 5, 5, 0.72), rgba(5, 5, 5, 0.28), rgba(5, 5, 5, 0.84));
	}

	.hero__watermark {
		right: -150px;
		top: 30%;
		width: min(560px, 86vw);
		opacity: 0.04;
	}

	.hero__content {
		padding: 0;
	}

	.hero__content::before {
		left: -12px;
		top: 4%;
		height: 86%;
	}

	.hero__content::after {
		left: auto;
		right: 0;
		width: 54vw;
		height: 54%;
	}

	.hero__reel {
		order: -1;
		width: min(100%, 440px);
		min-height: 290px;
		margin-left: auto;
	}

	.hero__tags {
		max-width: 100%;
	}

	.showcase__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (hover: none) {
	.showcase-card__tap-cue {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	:root {
		--km-width: min(100% - 28px, 1120px);
	}

	.site-header__inner {
		min-height: 72px;
	}

	.site-logo__text {
		display: none;
	}

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

	.mobile-menu__actions {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 38px 0 48px;
		gap: 28px;
	}

	.hero__watermark {
		right: -132px;
		top: 18%;
		width: 86vw;
		opacity: 0.032;
	}

	.hero h1 {
		font-size: clamp(3.75rem, 22vw, 6rem);
	}

	.hero__content::after {
		display: none;
	}

	.hero__reel {
		width: 100%;
		min-height: 230px;
	}

	.hero__cut--one {
		left: 0;
		top: 18%;
		width: 44%;
		height: 55%;
	}

	.hero__cut--two {
		right: 0;
		width: 56%;
		height: 68%;
	}

	.hero__cut--three {
		left: 20%;
		width: 52%;
		height: 42%;
	}

	.hero__tags span {
		flex: 1 1 112px;
		justify-content: center;
	}

	.work-intro {
		padding-top: 50px;
	}

	.showcase__grid,
	.footer-info-grid {
		grid-template-columns: 1fr;
	}

	.showcase-card {
		min-height: 420px;
	}

	.showcase-card__content {
		left: clamp(16px, 5vw, 22px);
		right: clamp(16px, 5vw, 22px);
		bottom: clamp(20px, 6vw, 30px);
	}

	.showcase-card__content h3 {
		max-width: min(100%, 11.5ch);
		font-size: clamp(2rem, 11.5vw, 3.25rem);
		line-height: 0.94;
	}

	.footer-hero__brand {
		grid-template-columns: 1fr;
	}

	.site-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}