@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,800&family=DM+Sans:wght@400;500;600;700&display=swap');
	
:root {
	--ink:#08090b;
	--panel:#101217;
	--line:#272a31;
	--white:#f5f2eb;
	--muted:#a6a8ae;
	--c:#00bce7;
	--m:#ec168c;
	--y:#ffd21f;
}

* {
	box-sizing:border-box;
}

html {
	scroll-behavior:smooth;
}

body {
	margin:0;
	background:var(--ink);
	color:var(--white);
	font-family:'DM Sans',Arial,sans-serif;
}

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

.nav-shell {
    height: 82px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff17;
    position: sticky;
    z-index: 20;
    width: 100%;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.wordmark {
	font:700 18px 'Barlow Condensed';
	letter-spacing:.14em;
	display:flex;
	align-items:center;
	gap:10px;
}

.wordmark span {
	font-size:26px;
	font-style:italic;
	color:var(--c);
}

nav {
	display:flex;
	gap:34px;
	font-size:13px;
}

nav a {
	color:#d7d7d8;
}
nav a:nth-last-of-type(n+1):hover {
    color: var(--c);
}
nav a:nth-last-of-type(n+2):hover {
    color: var(--m);
}
nav a:nth-last-of-type(n+3):hover {
    color: var(--y);
}
.nav-cta,.button.primary {
	background-color:var(--white);
	color:#0a0b0e;
	padding:13px 18px;
	font-size:13px;
	font-weight:700;	
    border-radius: 7px;
    display: inline-grid;
    place-items: center;
	transition: 300ms ease;
}
.nav-cta:hover, .button.primary:hover {
    background-color: var(--c);
    color: #FFF;
}
.nav-cta span,.button span {
	margin-left:10px;
	display: contents;
}

.hero {
	min-height:790px;
	display:grid;
	grid-template-columns:49% 51%;
	align-items:center;
	position:relative;
	overflow:hidden;
	padding:110px 5vw 35px;
	    translate: 0 -75px;
}

.hero:before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,#08090b 0 45%,#08090bdc 58%,transparent 77%),radial-gradient(circle at 72% 48%,#26303b 0,transparent 48%);
}

.hero-copy {
	position:relative;
	z-index:3;
	max-width:720px;
}

.eyebrow {
	text-transform:uppercase;
	font-size:11px;
	letter-spacing:.2em;
	font-weight:700;
	color:#c8c9cc;
}

.eyebrow i {
	display:inline-block;
	width:28px;
	height:3px;
	background:linear-gradient(90deg,var(--c),var(--m),var(--y));
	margin-right:10px;
	vertical-align:middle;
}

.hero h1,.section h2,.about h2,.contact h2 {
	font:800 clamp(55px,6vw,112px)/.82 'Barlow Condensed';
	letter-spacing:-.035em;
	text-transform:uppercase;
	margin:30px 0;
}

.hero h1 em {
    font-style: italic;
    color: rgba(0, 0, 0, 0.7);
    -webkit-text-stroke: 1px var(--white);
    position: relative;
    font: 800 clamp(78px, 7vw, 133px) / .82 'Barlow Condensed';
    transform: rotate(4deg) scale(1.3) translateX(56px);
    display: inline-block;
    z-index: 9;
    padding-bottom: 21px;
}

.hero h1 em:after {
	content:"";
	position:absolute;
	left:1%;
	right:-2%;
	bottom:7%;
	height:7px;
	background:linear-gradient(90deg,var(--c) 0 34%,var(--m) 34% 68%,var(--y) 68%);
	transform:skew(-18deg);
}

.hero-lede {
	max-width:600px;
	color:#bdc0c5;
	font-size:18px;
	line-height:1.7;
}

.hero-actions {
	display:flex;
	gap:12px;
	margin:34px 0 58px;
}

.button {
	padding:16px 20px;
	font-size:13px;
}

.button.ghost {
	border:1px solid #4d5057;
	background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
    border-radius: 7px;
    display: inline-grid;
    place-items: center;transition: 300ms ease;
}

.button.ghost:hover {
	background-color: rgba(100, 0, 100, 0.7);
}

.trust-row {
	display:flex;
	align-items:center;
	gap:16px;
	font:700 10px 'DM Sans';
	letter-spacing:.12em;
	color:#81848b;
}

.trust-row b {
	color:var(--m);
}

.hero-art {
	position:absolute;
	z-index:2;
	right:-2vw;
	top:85px;
	width:58vw;
	height:680px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.hero-art img {
	width:100%;
	height:100%;
	object-fit:contain;
	filter:drop-shadow(0 35px 70px #000);
}

.registration-mark {
	position:absolute;
	font-size:28px;
	color:#ffffff55;
}

.registration-mark.top {
	right:12%;
	top:8%;
}

.registration-mark.bottom {
	left:21%;
	bottom:7%;
}

.ink-orb {
	position:absolute;
	border-radius:50%;
	filter:blur(80px);
	opacity:.16;
}

.ink-orb.cyan {
	width:320px;
	height:320px;
	background:var(--c);
	right:54%;
	top:18%;
}

.ink-orb.magenta {
	width:240px;
	height:240px;
	background:var(--m);
	right:46%;
	top:8%;
}

.ink-orb.yellow {
	width:270px;
	height:270px;
	background:var(--y);
	right:38%;
	bottom:31%;
}

.marquee {
	overflow:hidden;
	background:var(--y);
	color:#090a0c;
	padding:15px 0;
	transform:rotate(-3deg);
	width:101%;
	margin-left:-.5%;
}

.marquee div {
	font:800 24px 'Barlow Condensed';
	letter-spacing:.08em;
	white-space:nowrap;
}

.marquee i {
	font-style:normal;
	margin:0 25px;
}

.section {
	padding:120px 5vw;
}

.section-intro {
	display:grid;
	grid-template-columns:1fr 2fr 1fr;
	gap:40px;
	align-items:end;
	margin-bottom:65px;
}

.section h2,.about h2,.contact h2 {
	font-size:clamp(52px,5.6vw,82px);
	margin:0;
}

.section h2 span,.about h2 span,.contact h2 span {
	color:#81848a;
}

.section-intro>p:last-child {
	color:var(--muted);
	line-height:1.7;
	font-size:14px;
}

.service-grid {
	display:grid;
	grid-template-columns:repeat(6,1fr);
	border-top:1px solid var(--line);
	border-left:1px solid var(--line);
}

.service-card {
	grid-column:span 2;
	min-height:320px;
	padding:30px;
	border-right:1px solid var(--line);
	border-bottom:1px solid var(--line);
	transition:.25s;
	background:linear-gradient(145deg,#14161b,#0d0f13);
}

.service-card:nth-child(4),.service-card:nth-child(5) {
	grid-column:span 3;
}

.service-card:hover {
	transform:translateY(-5px);
	background:#171a20;
}

.service-top {
	display:flex;
	justify-content:space-between;
	color:#6f7279;
	font:700 11px 'DM Sans';
	letter-spacing:.14em;
}

.service-top small {
	border:1px solid #35383f;
	padding:5px 8px;
}

.service-card h3 {
	font:700 30px 'Barlow Condensed';
	text-transform:uppercase;
	margin-top:60px;
}

.service-card p {
	color:var(--muted);
	font-size:14px;
	line-height:1.65;
	max-width:400px;
}

.service-card a {
	display:block;
	margin-top:24px;
	font-size:12px;
	font-weight:700;
}

.service-card a span {
	float:right;
	color:var(--c);
}

.about {
	display:grid;
	grid-template-columns:1fr 1fr;
	background:#eeeae2;
	color:#111319;
}

.about-panel {
	padding:100px 7vw;
}

.about-panel.visual {
	min-height:760px;
	background:#111319;
	position:relative;
	overflow:hidden;
	color:white;
	display:flex;
	align-items:flex-end;
}

.about-panel.visual:before {
	content:"";
	position:absolute;
	width:480px;
	height:480px;
	border-radius:50%;
	background:conic-gradient(var(--c) 0 25%,var(--m) 25% 50%,var(--y) 50% 75%,#181818 75%);
	filter:blur(2px);
	top:80px;
	left:50%;
	transform:translateX(-50%);
}

.cmyk-stack {
	position:absolute;
	top:190px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	mix-blend-mode:screen;
}

.cmyk-stack span {
	font:800 150px 'Barlow Condensed';
	margin-left:-22px;
}

.cmyk-stack span:nth-child(1) {
	color:var(--c);
}

.cmyk-stack span:nth-child(2) {
	color:var(--m);
}

.cmyk-stack span:nth-child(3) {
	color:var(--y);
}

.cmyk-stack span:nth-child(4) {
	color:#ddd;
}

.about-panel.visual p {
	position:relative;
	font:700 32px 'Barlow Condensed';
	text-transform:uppercase;
}

.about .eyebrow {
	color:#545860;
}

.about .copy>p:nth-of-type(2) {
	color:#60636a;
	line-height:1.75;
}

.about ul {
	list-style:none;
	padding:20px 0 0;
}

.about li {
	display:grid;
	grid-template-columns:45px 1fr;
	gap:20px;
	padding:21px 0;
	border-top:1px solid #c7c5c0;
}

.about li b {
	color:var(--m);
	font-size:11px;
}

.about li strong,.about li span {
	display:block;
}

.about li strong {
	font:700 20px 'Barlow Condensed';
	text-transform:uppercase;
	margin-bottom:6px;
}

.about li span {
	color:#61646a;
	font-size:13px;
}

.about li span strong {
	color:#111319;
}

.process .section-intro {
	grid-template-columns:1fr 3fr;
}

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

.steps article {
	background:var(--ink);
	padding:44px;
}

.steps b {
	font:800 70px 'Barlow Condensed';
	color:#25282e;
}

.steps article:nth-child(2) b {
	color:#51253c;
}

.steps article:nth-child(3) b {
	color:#4a4620;
}

.steps h3 {
	font:700 26px 'Barlow Condensed';
	text-transform:uppercase;
}

.steps p {
	color:var(--muted);
	line-height:1.7;
	font-size:14px;
}

.contact {
	padding:120px 7vw;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:9vw;
	background:radial-gradient(circle at 4% 100%,#083d4c 0,transparent 28%),radial-gradient(circle at 52% 0,#45142f 0,transparent 28%),#0d0f13;
}

.contact-copy>p:nth-of-type(2) {
	color:var(--muted);
	max-width:550px;
	line-height:1.7;
}

.location {
	margin-top:50px;
	border-left:3px solid var(--c);
	padding-left:18px;
}

.location * {
	display:block;
}

.location small {
	font-size:9px;
	letter-spacing:.2em;
	color:#777b82;
}

.location strong {
	margin:6px 0;
}

.location span {
	font-size:12px;
	color:#888b91;
}

.quote-form {
	background:#f0ede6;
	color:#111319;
	padding:38px;
	border-radius: 7px;
}

.field-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}

.quote-form label {
	display:block;
	font:700 10px 'DM Sans';
	letter-spacing:.12em;
	text-transform:uppercase;
	margin-bottom:22px;
}

.quote-form input, .quote-form select, .quote-form textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #bbb8b2;
    background: transparent;
    padding: 12px 5px;
    font: 400 14px 'DM Sans';
    outline: none;
    margin-top: 5px;
    color: #191b20;
    border-radius: 7px;
}
.quote-form input:hover,.quote-form select:hover,.quote-form textarea:hover,
.quote-form input:active,.quote-form select:active,.quote-form textarea:active,
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus {
	background:#FFF;
}
.quote-form select:active, .quote-form select:focus {
	border-radius: 7px 7px 0 0;
}

.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus {
	border-color:var(--m);
}

.quote-form button {
	width:100%;
	border:0;
	background:#111319;
	color:white;
	padding:17px;
	text-align:left;
	font-weight:700;
	cursor:pointer;	
    border-radius: 7px;
    display: inline-grid;
    place-items: center;
}

.quote-form button:hover {
    background: linear-gradient(14deg, black, #034);
}

.quote-form button span {
	float:right;
	display: contents;
}

.form-status {
	font-size:11px;
	color:#74767b;
	text-align:center;
	margin:14px 0 0;
}

.form-status.success {
	color:#08746d;
}

.form-status.error {
	color:#b31c54;
}

footer {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:36px 5vw;
	border-top:1px solid var(--line);
	color:#8d9097;
}

footer p {
	font:700 12px 'DM Sans';
	letter-spacing:.14em;
	text-transform:uppercase;
}

footer small {
	font-size:10px;
}

@media(max-width:900px) {
	.nav-shell nav {
		display:none;
	}
	.hero-art img {
    opacity: 0.3;
}

	.hero {
		display:block;
		padding-top:140px;
		min-height:900px;
	}

	.hero:before {
		background:linear-gradient(#08090b 0 46%,#08090b99 70%,#08090b);
	}

	.hero-copy {
		z-index:4;
	}

	.hero-art {
		width:100%;
		height:520px;
		top:auto;
		bottom:-45px;
		right:-10%;
	}
 .hero h1 {
        font-size: 70px;
        max-width: 521px;
        display: block;
        position: relative;
        text-align: center;
        margin: 30px auto;
    }
.hero h1 em {
    transform: rotate(4deg) scale(1.3) translateX(0px);
}
	.trust-row {
		display:none;
	}

	.section-intro {
		grid-template-columns:1fr;
	}

	.service-grid {
		grid-template-columns:1fr;
	}

	.service-card,.service-card:nth-child(4),.service-card:nth-child(5) {
		grid-column:auto;
	}

	.about,.contact {
		grid-template-columns:1fr;
	}

	.about-panel {
		padding:70px 7vw;
	}

	.steps {
		grid-template-columns:1fr;
	}

	.contact {
		padding:80px 6vw;
	}

	footer {
		gap:20px;
		flex-wrap:wrap;
	}
}

@media(max-width:560px) {
	
   

	.nav-shell {
		height:70px;
	}

	.nav-cta {
		padding:11px;
	}

	.hero {
		min-height:800px;
		padding-left:6vw;
		padding-right:6vw;
	}

	.hero h1 {
		font-size:55px;
	}

	.hero-lede {
		font-size:15px;
	}

	.hero-actions {
		flex-direction:column;
		align-items:flex-start;
	}

	.hero-art {
		height:390px;
		bottom:-25px;
		width:120%;
	}

	.section {
		padding:85px 6vw;
	}

	.section h2,.about h2,.contact h2 {
		font-size:50px;
	}

	.about-panel.visual {
		min-height:520px;
	}

	.about-panel.visual:before {
		width:340px;
		height:340px;
	}

	.cmyk-stack {
		top:155px;
	}

	.cmyk-stack span {
		font-size:105px;
	}

	.field-row {
		grid-template-columns:1fr;
	}

	.quote-form {
		padding:25px;
	}

	footer {
		display:block;
		text-align:center;
	}

	footer .wordmark {
		justify-content:center;
	}

	footer>* {
		margin:12px;
	}
}



.gallery-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}

.gallery-card {
	position:relative;
	overflow:hidden;
	aspect-ratio:4/3;
	background:#15171c;
	color:white;
	border:0;
	padding:0;
	text-align:left;
	cursor:pointer;
}

.gallery-card img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .35s ease;
}

.gallery-card:hover img {
	transform:scale(1.04);
}

.gallery-card span {
	position:absolute;
	inset:auto 0 0;
	padding:34px 18px 16px;
	background:linear-gradient(transparent,#090a0ddd);
	font:700 18px 'Barlow Condensed';
	text-transform:uppercase;
}

.lightbox {
	position:fixed;
	inset:0;
	z-index:100;
	background:#050609ed;
	display:none;
	align-items:center;
	justify-content:center;
	padding:4vw;
}

.lightbox.open {
	display:flex;
}

.lightbox img {
	max-width:92vw;
	max-height:86vh;
	object-fit:contain;
}

.lightbox button {
	
	position:absolute;
	right:24px;
	top:20px;
	background:none;
	border:0;
	color:white;
	font-size:36px;
	cursor:pointer;
}

.hp-field {
	position:absolute!important;
	left:-9999px!important;
	width:1px!important;
	height:1px!important;
	overflow:hidden!important;
}

.quote-form button:disabled {
	opacity:.65;
	cursor:wait;
}

@media(max-width:900px) {
	.gallery-grid {
		grid-template-columns:repeat(2,1fr);
	}
}

@media(max-width:560px) {
	.gallery-grid {
		grid-template-columns:1fr;
	}
}