:root {
	--a-ink: #f8f5ed;
	--a-muted: rgba(248, 245, 237, .68);
	--a-line: rgba(248, 245, 237, .18);
	--a-red: #ff3b30;
	--a-cyan: #76f7ff;
	--a-green: #b7ff4a;
	--a-bg: #080807;
	--a-panel: #141311;
	--a-max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.artio-home-page {
	margin: 0;
	background: var(--a-bg);
	color: var(--a-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
	overflow-x: hidden;
}

body.artio-home-page.admin-bar .artio-nav { top: 32px; }
.artio-site a { color: inherit; text-decoration: none; }
.artio-wrap { width: min(calc(100% - 40px), var(--a-max)); margin: 0 auto; }

.artio-nav {
	position: fixed;
	z-index: 50;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: min(calc(100% - 32px), 1180px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 24px;
	padding: 10px 10px 10px 18px;
	border: 1px solid rgba(255,255,255,.16);
	background: rgba(8,8,7,.72);
	backdrop-filter: blur(18px);
}

.artio-brand { display: flex; align-items: baseline; gap: 10px; text-transform: uppercase; font-weight: 900; }
.artio-brand span { font-size: 18px; }
.artio-brand small { color: var(--a-muted); font-size: 11px; font-weight: 700; }
.artio-nav nav { display: flex; justify-content: center; gap: 8px; }
.artio-nav nav a {
	padding: 9px 12px;
	color: var(--a-muted);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}
.artio-nav nav a:hover { color: var(--a-ink); }
.artio-nav-cta {
	padding: 11px 16px;
	background: var(--a-ink);
	color: #0a0908 !important;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}

.artio-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	padding: 150px 0 90px;
	overflow: hidden;
	isolation: isolate;
}
.artio-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(8,8,7,.16), #080807 94%),
		radial-gradient(circle at 20% 30%, rgba(255,59,48,.42), transparent 32%),
		radial-gradient(circle at 76% 18%, rgba(118,247,255,.28), transparent 28%),
		radial-gradient(circle at 82% 72%, rgba(183,255,74,.18), transparent 30%);
}
.artio-hero__backdrop { position: absolute; inset: 0; z-index: -2; }
.artio-orbit {
	position: absolute;
	width: 48vw;
	aspect-ratio: 1;
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 50%;
	animation: artio-spin 22s linear infinite;
}
.artio-orbit:before,
.artio-orbit:after {
	content: "";
	position: absolute;
	width: 14px;
	aspect-ratio: 1;
	background: var(--a-ink);
	border-radius: 999px;
}
.artio-orbit:before { top: 12%; left: 18%; }
.artio-orbit:after { right: 24%; bottom: 8%; background: var(--a-red); }
.artio-orbit--one { top: 12%; right: -12%; }
.artio-orbit--two { width: 32vw; left: -10%; bottom: 18%; animation-direction: reverse; }

.artio-frame-grid {
	position: absolute;
	inset: 17% 5% auto auto;
	width: min(520px, 48vw);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	transform: rotate(-5deg);
}
.artio-frame-grid span {
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255,255,255,.2);
	background:
		linear-gradient(135deg, rgba(255,255,255,.14), transparent 50%),
		linear-gradient(160deg, #1f1d19, #090908);
	box-shadow: 0 24px 70px rgba(0,0,0,.45);
	animation: artio-float 4s ease-in-out infinite;
}
.artio-frame-grid span:nth-child(2n) { transform: translateY(34px); animation-delay: -.7s; }
.artio-frame-grid span:nth-child(3n) { background: linear-gradient(160deg, rgba(255,59,48,.65), #111); animation-delay: -1.3s; }

.artio-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--a-max);
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
	align-items: end;
	gap: clamp(28px, 5vw, 72px);
}
.artio-hero__content { min-width: 0; }
.artio-kicker {
	margin: 0 0 18px;
	color: var(--a-green);
	font-size: clamp(12px, 1.4vw, 14px);
	font-weight: 900;
	text-transform: uppercase;
}
.artio-hero h1 {
	max-width: 1040px;
	margin: 0;
	font-size: clamp(54px, 9.3vw, 132px);
	line-height: .82;
	font-weight: 950;
	text-transform: uppercase;
}
.artio-hero__copy {
	max-width: 700px;
	margin: 28px 0 0;
	color: var(--a-muted);
	font-size: clamp(18px, 2.1vw, 25px);
	line-height: 1.35;
}
.artio-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.artio-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	background: var(--a-red);
	color: #fff !important;
	font-weight: 950;
	text-transform: uppercase;
	border: 1px solid transparent;
}
.artio-button--ghost { background: transparent; border-color: var(--a-line); }
.artio-button:hover { transform: translateY(-2px); }

.artio-hero-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border: 1px solid rgba(255,255,255,.22);
	background: #111;
	box-shadow: 0 34px 100px rgba(0,0,0,.46);
}
.artio-hero-media:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 45%, rgba(8,8,7,.68));
	pointer-events: none;
}
.artio-hero-media video,
.artio-hero-media img,
.artio-panel--media img,
.artio-card img,
.artio-media-strip img,
.artio-services__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.artio-hero-media video { transform: scale(1.02); }
.artio-hero-media__caption {
	position: absolute;
	z-index: 2;
	left: 16px;
	right: 16px;
	bottom: 16px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: end;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
}
.artio-hero-media__caption span { color: var(--a-muted); }
.artio-hero-media__caption strong { color: var(--a-green); }

.artio-ticker {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	overflow: hidden;
	border-top: 1px solid var(--a-line);
	border-bottom: 1px solid var(--a-line);
	background: rgba(8,8,7,.88);
}
.artio-ticker div {
	display: flex;
	flex: 0 0 auto;
	animation: artio-marquee 22s linear infinite;
}
.artio-ticker span {
	padding: 16px 28px;
	font-size: 14px;
	font-weight: 950;
	text-transform: uppercase;
	white-space: nowrap;
}

.artio-proof { border-bottom: 1px solid var(--a-line); background: #0d0c0b; }
.artio-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.artio-proof__grid div {
	padding: 34px 24px;
	border-left: 1px solid var(--a-line);
}
.artio-proof__grid div:last-child { border-right: 1px solid var(--a-line); }
.artio-proof strong { display: block; font-size: clamp(34px, 5vw, 72px); line-height: 1; }
.artio-proof span { color: var(--a-muted); font-size: 13px; font-weight: 800; text-transform: uppercase; }

.artio-media-strip {
	display: grid;
	grid-template-columns: 1.2fr .86fr 1fr;
	gap: 1px;
	background: var(--a-line);
	border-bottom: 1px solid var(--a-line);
}
.artio-media-strip figure {
	position: relative;
	min-height: clamp(260px, 38vw, 520px);
	margin: 0;
	overflow: hidden;
	background: #111;
}
.artio-media-strip figure:nth-child(2) { transform: translateY(42px); z-index: 2; }
.artio-media-strip figure:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.58));
}
.artio-media-strip figcaption {
	position: absolute;
	z-index: 2;
	left: 18px;
	bottom: 18px;
	font-size: 13px;
	font-weight: 950;
	text-transform: uppercase;
}

.artio-section { padding: clamp(78px, 10vw, 140px) 0; }
.artio-split__inner,
.artio-process__inner,
.artio-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 6vw, 84px);
	align-items: start;
}
.artio-copy h2,
.artio-section-head h2,
.artio-contact h2 {
	margin: 0;
	font-size: clamp(38px, 6.5vw, 94px);
	line-height: .92;
	text-transform: uppercase;
}
.artio-panel {
	padding: clamp(24px, 4vw, 46px);
	border: 1px solid var(--a-line);
	background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.artio-panel--media {
	display: grid;
	gap: 22px;
	padding: 12px;
}
.artio-panel--media img {
	aspect-ratio: 16 / 10;
	height: auto;
	border: 1px solid var(--a-line);
}
.artio-panel--media p { margin-inline: 12px; }
.artio-panel p,
.artio-card p,
.artio-service-list p,
.artio-steps span {
	color: var(--a-muted);
	font-size: 17px;
	line-height: 1.55;
}

.artio-work { background: #f4f0e6; color: #11100e; }
.artio-work .artio-kicker { color: #d12c23; }
.artio-work-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: 42px;
	background: rgba(17,16,14,.22);
	border: 1px solid rgba(17,16,14,.22);
}
.artio-card {
	min-height: 390px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 16px;
	padding: 24px;
	background:
		linear-gradient(160deg, rgba(255,255,255,.74), rgba(255,255,255,.18)),
		linear-gradient(135deg, rgba(255,59,48,.22), transparent 45%),
		#f4f0e6;
	transition: transform .35s ease, background .35s ease;
}
.artio-card:hover { transform: translateY(-8px); background-color: #fff; }
.artio-card img {
	aspect-ratio: 4 / 3;
	height: auto;
	margin: -24px -24px 4px;
	width: calc(100% + 48px);
	filter: saturate(.96) contrast(1.04);
}
.artio-card span { font-weight: 950; color: #d12c23; }
.artio-card h3 { margin: auto 0 0; font-size: clamp(28px, 3.3vw, 48px); line-height: .92; text-transform: uppercase; }
.artio-card p { color: rgba(17,16,14,.68); margin: 0; }

.artio-archive {
	position: relative;
	overflow: hidden;
	background: #080807;
}
.artio-archive__head {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(280px, .7fr);
	gap: clamp(24px, 5vw, 70px);
	align-items: end;
	margin-bottom: 44px;
}
.artio-archive__head h2 {
	grid-column: 1 / -1;
	max-width: 1180px;
	margin: 0;
	font-size: clamp(42px, 6.6vw, 96px);
	line-height: .94;
	text-transform: uppercase;
}
.artio-archive-marquee {
	display: flex;
	gap: 12px;
	margin: 0 0 56px;
	overflow: hidden;
	transform: rotate(-1.2deg);
}
.artio-archive-marquee div {
	display: flex;
	flex: 0 0 auto;
	gap: 12px;
	animation: artio-marquee 44s linear infinite;
}
.artio-archive-marquee img {
	width: clamp(180px, 22vw, 360px);
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--a-line);
	filter: saturate(.92) contrast(1.05);
}
.artio-archive-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 12px;
}
.artio-archive-tile {
	position: relative;
	grid-column: span 4;
	min-height: 270px;
	margin: 0;
	overflow: hidden;
	background: #12110f;
	border: 1px solid var(--a-line);
}
.artio-archive-tile:nth-child(6n + 1),
.artio-archive-tile:nth-child(9n + 5) {
	grid-column: span 7;
	min-height: 520px;
}
.artio-archive-tile:nth-child(6n + 2),
.artio-archive-tile:nth-child(8n + 6) {
	grid-column: span 5;
	min-height: 390px;
}
.artio-archive-tile:nth-child(11n + 8) {
	grid-column: span 8;
	min-height: 440px;
}
.artio-archive-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease;
}
.artio-archive-tile:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,.62));
	opacity: .72;
	pointer-events: none;
}
.artio-archive-tile:hover img {
	transform: scale(1.045);
	filter: saturate(1.06) contrast(1.08);
}
.artio-archive-tile figcaption {
	position: absolute;
	z-index: 2;
	left: 14px;
	bottom: 12px;
	color: rgba(255,255,255,.76);
	font-size: 12px;
	font-weight: 950;
	text-transform: uppercase;
}

.artio-services { background: #0b1615; }
.artio-services__layout {
	display: grid;
	grid-template-columns: 1fr minmax(280px, .72fr);
	gap: clamp(26px, 5vw, 68px);
	align-items: end;
}
.artio-services__image {
	margin: 0;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--a-line);
	overflow: hidden;
	background: #111;
}
.artio-service-list {
	margin-top: 48px;
	border-top: 1px solid var(--a-line);
}
.artio-service-list div {
	display: grid;
	grid-template-columns: .9fr 1.4fr;
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--a-line);
}
.artio-service-list span { font-size: clamp(24px, 4vw, 56px); font-weight: 950; line-height: .94; text-transform: uppercase; }
.artio-service-list p { margin: 0; }

.artio-process { background: #080807; }
.artio-steps {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--a-line);
}
.artio-steps li {
	display: grid;
	grid-template-columns: .6fr 1fr;
	gap: 22px;
	padding: 26px 0;
	border-bottom: 1px solid var(--a-line);
}
.artio-steps strong { font-size: 22px; text-transform: uppercase; }

.artio-contact {
	min-height: 72svh;
	display: grid;
	align-items: center;
	background:
		linear-gradient(rgba(8,8,7,.72), rgba(8,8,7,.9)),
		repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 90px),
		linear-gradient(135deg, #260b08, #08211f 58%, #161008);
}
.artio-contact__inner { align-items: end; }
.artio-contact__meta { display: grid; gap: 8px; margin: 22px 0 30px; color: var(--a-muted); font-weight: 800; }

body.artio-animate .reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);
}
body.artio-animate .reveal.is-visible,
.reveal {
	opacity: 1;
	transform: none;
}

@keyframes artio-marquee { to { transform: translateX(-100%); } }
@keyframes artio-spin { to { transform: rotate(360deg); } }
@keyframes artio-float {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -14px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
	.reveal { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
	body.artio-home-page.admin-bar .artio-nav { top: 46px; }
	.artio-nav { grid-template-columns: 1fr auto; }
	.artio-nav nav { display: none; }
	.artio-frame-grid { width: 78vw; opacity: .42; right: -16%; }
	.artio-hero { padding-top: 130px; }
	.artio-proof__grid,
	.artio-work-grid,
	.artio-split__inner,
	.artio-hero__inner,
	.artio-media-strip,
	.artio-archive__head,
	.artio-services__layout,
	.artio-process__inner,
	.artio-contact__inner {
		grid-template-columns: 1fr;
	}
	.artio-hero-media {
		aspect-ratio: 16 / 10;
		order: -1;
	}
	.artio-media-strip figure:nth-child(2) { transform: none; }
	.artio-archive-grid { grid-template-columns: repeat(6, 1fr); }
	.artio-archive-tile,
	.artio-archive-tile:nth-child(6n + 1),
	.artio-archive-tile:nth-child(9n + 5),
	.artio-archive-tile:nth-child(6n + 2),
	.artio-archive-tile:nth-child(8n + 6),
	.artio-archive-tile:nth-child(11n + 8) {
		grid-column: span 3;
		min-height: 300px;
	}
	.artio-proof__grid div { border-right: 1px solid var(--a-line); }
	.artio-work-grid { gap: 1px; }
	.artio-card { min-height: 280px; }
	.artio-service-list div,
	.artio-steps li { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.artio-wrap { width: min(calc(100% - 28px), var(--a-max)); }
	.artio-nav {
		width: calc(100% - 20px);
		top: 10px;
		padding-left: 12px;
		gap: 12px;
	}
	.artio-brand small { display: none; }
	.artio-nav-cta { padding: 10px 12px; font-size: 11px; }
	.artio-hero {
		min-height: auto;
		padding: 106px 0 68px;
	}
	.artio-hero__inner {
		gap: 22px;
	}
	.artio-hero-media {
		order: initial;
		aspect-ratio: 16 / 9;
	}
	.artio-kicker {
		margin-bottom: 12px;
		font-size: 11px;
		line-height: 1.25;
	}
	.artio-hero h1 {
		max-width: 100%;
		font-size: clamp(40px, 13.2vw, 50px);
		line-height: .88;
		overflow-wrap: normal;
	}
	.artio-hero__copy {
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.42;
	}
	.artio-actions { display: grid; }
	.artio-button { width: 100%; }
	.artio-section { padding: 72px 0; }
	.artio-archive {
		padding-top: 56px;
	}
	.artio-archive__head {
		margin-bottom: 22px;
	}
	.artio-archive__head h2 {
		font-size: clamp(34px, 13vw, 48px);
		line-height: .9;
	}
	.artio-archive-marquee {
		margin-bottom: 28px;
	}
	.artio-archive-marquee img {
		width: 170px;
		aspect-ratio: 4 / 3;
	}
	.artio-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
		width: calc(100% + 18px);
		margin-left: -9px;
	}
	.artio-archive-tile,
	.artio-archive-tile:nth-child(6n + 1),
	.artio-archive-tile:nth-child(9n + 5),
	.artio-archive-tile:nth-child(6n + 2),
	.artio-archive-tile:nth-child(8n + 6),
	.artio-archive-tile:nth-child(11n + 8) {
		grid-column: span 1;
		min-height: 178px;
		border: 0;
	}
	.artio-archive-tile:nth-child(1),
	.artio-archive-tile:nth-child(4),
	.artio-archive-tile:nth-child(9),
	.artio-archive-tile:nth-child(14),
	.artio-archive-tile:nth-child(19) {
		grid-column: 1 / -1;
		min-height: 380px;
	}
	.artio-archive-tile:nth-child(3n + 2) {
		min-height: 228px;
	}
	.artio-archive-tile:nth-child(4n + 3) {
		min-height: 265px;
	}
}