:root {
	--primary: #B7410E;
	--primary-100: #9f370b;
	--primary-200: #8c300a;
	--primary--100: #c65c2d;
	--primary-rgba-20: rgba(183, 65, 14, .2);
	--secondary: #151A2E;
	--secondary-100: #0e1221;
	--secondary--100: #202743;
	--tertiary: #C7FF3F;
	--tertiary-100: #b7ed35;
	--light: #F5F0E8;
	--light-100: #eee7dc;
	--dark: #151A2E;
}

body { background: #F5F0E8; }

::selection { background: #C7FF3F; color: #151A2E; }

a,
button,
.form-control { transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease; }

a:focus-visible,
button:focus-visible,
.form-control:focus-visible {
	outline: 3px solid #C7FF3F;
	outline-offset: 4px;
}

#header {
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 1000;
	background: rgba(21, 26, 46, .93);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(245, 240, 232, .12);
}

.studio-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #F5F0E8;
	font-size: 18px;
	letter-spacing: -.5px;
}

.studio-logo:hover { color: #F5F0E8; }
.studio-logo:hover .studio-logo-symbol { transform: rotate(-4deg); }

.studio-logo-symbol {
	display: block;
	width: 38px;
	height: 37px;
	overflow: hidden;
	transition: transform .2s ease;
}

.studio-logo-symbol img {
	display: block;
	width: 38px;
	height: auto;
	filter: brightness(0) invert(1);
}

.studio-principle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	font-weight: 600;
	letter-spacing: -.2px;
}

.studio-principle i { color: #B7410E; font-size: 11px; font-style: normal; letter-spacing: .08em; }

.studio-menu-toggle { display: none; }
.studio-mobile-nav { display: none; }

.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	min-width: 205px;
	padding: 15px 18px;
	background: #C7FF3F;
	color: #151A2E;
	font-weight: 700;
	text-align: left;
}
.hero-cta:hover { background: #F5F0E8; color: #151A2E; }
.hero-cta:hover i { transform: translateX(4px); }
.hero-cta i { transition: transform .2s ease; }
.horizontal-hint { display: none; }
#home .custom-hero-font-2 { -webkit-text-stroke: 2px #151A2E; text-shadow: 0 2px 10px rgba(21,26,46,.45); }
#home .text-4 { background: rgba(21,26,46,.82); border-left: 3px solid #C7FF3F; padding: 12px 16px !important; box-shadow: 0 16px 40px rgba(7,10,20,.18); }

#about p:not(.lead), #work p:not(.lead) { color: #4F5363; }
#about .lead, #work .lead { color: #B7410E; }

.about-art {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background: #C7FF3F;
	border-radius: 4px;
	display: grid;
	place-items: center;
	box-shadow: 16px 16px 0 #151A2E;
}
.about-art-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(21,26,46,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(21,26,46,.12) 1px,transparent 1px); background-size: 54px 54px; }
.about-art-orbit { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(21,26,46,.35); border-radius: 50%; right: -110px; top: -80px; box-shadow: 0 0 0 55px rgba(21,26,46,.05),0 0 0 110px rgba(21,26,46,.04); }
.about-art img { position: relative; z-index: 2; width: min(58%, 330px); height: auto; }
.about-art-label { position: absolute; z-index: 3; left: 28px; bottom: 24px; color: #151A2E; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

#services {
	display: grid !important;
	grid-template-rows: auto minmax(0, 1fr);
	width: 100vw;
	min-width: 100vw;
	height: 100vh;
	min-height: 100vh;
}
#services .service-intro { min-width: 0; background: #151A2E; white-space: normal !important; }
#services .service-intro > .p-5 { display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(280px, .85fr) auto; align-items: end; gap: 32px; padding-top: 92px !important; padding-bottom: 24px !important; }
#services .service-intro .lead { max-width: 430px; font-size: 18px; line-height: 1.5; }
#services .service-intro .custom-link-1 { margin-bottom: 8px; white-space: nowrap; }
#services .service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; min-height: 0; white-space: normal !important; }
#services .service-panel { position: relative; display: flex; min-width: 0; min-height: 0; align-items: center; overflow: hidden; isolation: isolate; border-right: 1px solid rgba(21,26,46,.16); white-space: normal !important; }
#services .service-panel:before,
#services .service-panel:after { content: ""; position: absolute; z-index: -1; pointer-events: none; }

#services .service-strategy {
	background-color: #CB6B3C;
	background-image: linear-gradient(135deg, transparent 48%, rgba(21,26,46,.18) 49%, rgba(21,26,46,.18) 51%, transparent 52%);
	background-size: 150px 150px;
}
#services .service-strategy:before { width: 260px; height: 260px; border: 1px solid rgba(21,26,46,.3); transform: rotate(45deg); border-radius: 42px; top: 8%; right: -42%; }
#services .service-strategy,
#services .service-strategy .text-color-light { color: #151A2E !important; }
#services .service-strategy svg path,
#services .service-strategy svg line,
#services .service-strategy svg polyline,
#services .service-strategy svg circle { stroke: #151A2E !important; }

#services .service-development {
	background-color: #C7FF3F;
	background-image: linear-gradient(rgba(21,26,46,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(21,26,46,.14) 1px, transparent 1px);
	background-size: 62px 62px;
}
#services .service-development:before { inset: 8%; border: 1px solid rgba(21,26,46,.4); border-radius: 42% 8% 42% 8%; }
#services .service-development .text-color-light,
#services .service-development { color: #151A2E !important; }
#services .service-development svg path,
#services .service-development svg line,
#services .service-development svg polyline,
#services .service-development svg circle { stroke: #151A2E !important; }

#services .service-marketing {
	background-color: #7254D8;
	background-image: radial-gradient(circle at 72% 18%, transparent 0 54px, rgba(0,245,196,.55) 55px 56px, transparent 57px 104px, rgba(0,245,196,.38) 105px 106px, transparent 107px);
}
#services .service-marketing:before { width: 150px; height: 150px; border: 1px solid rgba(0,245,196,.65); border-radius: 50%; top: 9%; right: -50px; }
#services .service-marketing .opacity-8 { opacity: 1 !important; }

#services .service-seo {
	background-color: #1E385B;
	background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
	background-size: 48px 48px;
}
#services .service-seo:before { width: 170px; height: 170px; border: 16px solid rgba(245,139,57,.72); border-radius: 50%; top: 8%; right: -70px; }
#services .service-seo:after { width: 120px; height: 4px; background: #00F5C4; transform: rotate(-38deg); top: 29%; right: -5px; }
#services .service-panel > .p-5 { position: relative; width: 100%; margin-top: 0; padding: 70px clamp(22px, 2.5vw, 42px) 28px !important; }
#services .service-panel > .p-5:before { position: absolute; top: 26px; left: clamp(22px, 2.5vw, 42px); font-size: 10px; font-weight: 700; letter-spacing: .14em; opacity: .68; }
#services .service-strategy > .p-5:before { content: "01 / STRATEGY"; }
#services .service-development > .p-5:before { content: "02 / WEB"; }
#services .service-marketing > .p-5:before { content: "03 / MARKETING"; }
#services .service-seo > .p-5:before { content: "04 / SEARCH"; }
#services .service-panel svg { width: 68px !important; height: 68px !important; padding: 12px; border: 1px solid currentColor; }
#services .service-panel h3 { font-size: clamp(30px, 2.6vw, 42px); }
#services .service-panel p { font-size: 14px; line-height: 1.55; }
#services .service-panel li { font-size: 13px; line-height: 1.35; }

.service-progress { color: rgba(245,240,232,.72); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.service-progress strong { color: #C7FF3F; margin-left: 5px; }

#work { display: grid !important; grid-template-rows: auto minmax(0, 1fr); width: 100vw; min-width: 100vw; height: 100vh; min-height: 100vh; padding: 0 !important; }
#work .work-intro { min-width: 0; white-space: normal !important; }
#work .work-intro > .p-5 { display: grid; grid-template-columns: minmax(320px, 1.15fr) minmax(280px, .85fr) auto; align-items: end; gap: 32px; padding-top: 92px !important; padding-bottom: 24px !important; }
#work .work-intro .lead { max-width: 430px; font-size: 18px; line-height: 1.5; }
#work .work-intro .custom-link-1 { margin-bottom: 8px; white-space: nowrap; }
#work .project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; min-height: 0; white-space: normal !important; }
.project-item { min-width: 0; min-height: 0; cursor: default; }
.project-visual { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; display: flex; align-items: flex-end; padding: 24px; color: #151A2E; border: 1px solid rgba(21,26,46,.12); box-shadow: none; }
.project-visual span { position: relative; z-index: 2; font-family: Cormorant, Georgia, serif; font-size: clamp(34px,3vw,54px); line-height: .86; }
.project-visual i { position: absolute; display: block; }
.project-visual-1 { background: #CB6B3C; color: #151A2E; background-image: linear-gradient(135deg, transparent 48%, rgba(21,26,46,.18) 49%, rgba(21,26,46,.18) 51%, transparent 52%); background-size: 100px 100px; }
.project-visual-1 i { width: 260px; height: 260px; border: 1px solid rgba(21,26,46,.45); border-radius: 50%; top: -60px; right: -90px; }
.project-visual-2 { background: #C7FF3F; background-image: linear-gradient(rgba(21,26,46,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(21,26,46,.14) 1px,transparent 1px); background-size: 38px 38px; }
.project-visual-2 i { inset: 18px; border: 1px solid rgba(21,26,46,.42); border-radius: 40% 7% 40% 7%; }
.project-visual-3 { background: #7254D8; color: #F5F0E8; }
.project-visual-3:before,.project-visual-3:after { content:""; position:absolute; border:1px solid #00F5C4; border-radius:50%; right:-35px; top:-50px; }
.project-visual-3:before { width:180px;height:180px; }.project-visual-3:after { width:120px;height:120px;right:-5px;top:-20px; }
.project-visual-4 { background: #1E385B; color: #F5F0E8; background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size: 42px 42px; }
.project-visual-4 i { width: 210px; height: 210px; border: 18px solid #F58B39; border-radius: 50%; top: 35px; right: -85px; }

.studio-contact-form label {
	display: block;
	margin-bottom: 7px;
	color: #F5F0E8;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.studio-contact-form { padding: 24px; border: 1px solid rgba(245,240,232,.16); background: rgba(245,240,232,.035); }
.studio-contact-form label span { opacity: .6; font-weight: 400; text-transform: none; letter-spacing: 0; }
.studio-contact-form .form-control {
	min-height: 49px;
	border: 1px solid rgba(245,240,232,.44);
	border-radius: 0;
	background: rgba(245,240,232,.06);
	color: #F5F0E8;
	box-shadow: none;
}
.studio-contact-form .form-control::placeholder { color: rgba(245,240,232,.5); opacity: 1; }
.studio-contact-form textarea.form-control { min-height: 115px; }
.studio-contact-form .form-control:focus { border-color: #C7FF3F; background: rgba(245,240,232,.11); }
.studio-contact-form select option { color: #151A2E; }
.studio-contact-form .is-invalid { border-color: #C7FF3F; }
.studio-submit { padding: 13px 20px; border-radius: 0; background: #C7FF3F; color: #151A2E; font-weight: 700; }
.studio-submit:hover { background: #F5F0E8; color: #151A2E; }
.studio-submit:disabled { opacity: .65; cursor: wait; }
#form-status.is-success { color: #C7FF3F; }
#form-status.is-error { color: #F5F0E8; font-weight: 600; }
#contact .container-fluid { padding-top: 64px; }
.contact-intro { max-width: 620px; color: rgba(245,240,232,.72); }

@media (max-width: 1199px) {
	html,
	body { width: 100%; height: 100%; overflow: hidden; }
	.smoothScroll { height: 100dvh; }
	.site-track {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: stretch;
		width: max-content !important;
		height: 100dvh;
	}
	.site-track > section {
		display: flex !important;
		flex: 0 0 auto;
		flex-flow: row nowrap !important;
		align-items: stretch !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		padding-bottom: 0 !important;
		overflow: hidden;
	}
	#home { width: 100vw; min-width: 100vw; }
	#about { width: 200vw; min-width: 200vw; margin-right: 0 !important; margin-left: 0 !important; --bs-gutter-x: 0; }
	#services { width: 100vw; min-width: 100vw; grid-template-rows: auto minmax(0, 1fr); }
	#work { width: 100vw; min-width: 100vw; grid-template-rows: auto minmax(0, 1fr); }
	.studio-process { width: 100vw; min-width: 100vw; }
	#contact { width: 100vw; min-width: 100vw; }
	#about > div {
		flex: 0 0 100vw !important;
		width: 100vw !important;
		min-width: 100vw !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#contact > div { align-items: flex-start !important; }
	.studio-process > div,
	#contact > div {
		flex: 0 0 100vw !important;
		width: 100vw !important;
		min-width: 100vw !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#home > div { height: 100dvh; min-height: 100dvh !important; }
	.horizontal-hint { display: flex; position: absolute; z-index: 3; right: 24px; bottom: 108px; align-items: center; gap: 10px; color: rgba(245,240,232,.72); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
	.horizontal-hint span { color: #C7FF3F; font-size: 16px; }
	#header .header-body { background: transparent !important; }
	#header .header-row { min-height: 54px; }
	.studio-menu-toggle { position: relative; z-index: 1002; display: grid; grid-template-columns: auto 22px; align-items: center; gap: 8px; border: 0; background: transparent; color: #F5F0E8; padding: 8px; }
	.studio-menu-toggle span { grid-row: 1 / 3; font-size: 12px; font-weight: 600; }
	.studio-menu-toggle i { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .2s; }
	#header.menu-open .studio-menu-toggle i:first-of-type { transform: translateY(3px) rotate(45deg); }
	#header.menu-open .studio-menu-toggle i:last-of-type { transform: translateY(-3px) rotate(-45deg); }
	#header .header-nav { position: static; }
	#header.menu-open .header-nav,
	#header.menu-open .header-nav-main { display: block !important; visibility: visible !important; }
	#header .header-nav-main nav.collapse { display: none !important; }
	#header.menu-open .header-nav-main nav.collapse { display: flex !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; min-width: 100vw !important; height: 100vh !important; min-height: 100vh !important; z-index: 1001; background: #151A2E; align-items: center; justify-content: center; overflow: hidden; }
	#header.menu-open #mainNav { display: flex; flex-direction: column; align-items: stretch; width: min(86vw,420px); }
	#header.menu-open #mainNav > li > a { display: flex; justify-content: space-between; color: #F5F0E8 !important; font-family: Cormorant,Georgia,serif; font-size: 42px; font-weight: 400; padding: 12px 0 !important; border-bottom: 1px solid rgba(245,240,232,.18); }
	#header.menu-open #mainNav .btn { display: inline-grid; place-items:center; }
	#services .service-intro > .p-5 { grid-template-columns: minmax(260px, 1fr) minmax(240px, .8fr) auto; padding-top: 112px !important; }
	#services .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#services .service-panel { min-height: 0; }
	#work .work-intro > .p-5 { grid-template-columns: minmax(260px, 1fr) minmax(240px, .8fr) auto; padding-top: 112px !important; }
	.studio-contact-form { margin-bottom: 30px; }
	.about-art { min-height: 520px; }
}

@media (max-width: 991px) {
	#services { overflow-y: auto; }
	#services .service-intro > .p-5 { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 104px 24px 18px !important; }
	#services .service-intro > .p-5 > div { grid-column: 1 / -1; }
	#services .service-intro h2 { font-size: 42px; }
	#services .service-intro .lead { max-width: 310px; font-size: 15px; line-height: 1.35; }
	#services .service-intro .custom-link-1 { align-self: center; margin: 0; font-size: 13px; }
	#services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(250px, 1fr)); }
	#services .service-panel > .p-5 { padding: 48px 20px 16px !important; }
	#services .service-panel > .p-5:before { top: 16px; left: 20px; font-size: 9px; }
	#services .service-panel svg { width: 50px !important; height: 50px !important; padding: 9px; }
	#services .service-panel h3 { margin-top: 12px !important; font-size: clamp(26px, 5vw, 34px); }
	#services .service-panel p { margin-bottom: 0; padding-top: 6px !important; font-size: 13px; line-height: 1.4; }
	#services .service-panel ul { display: none; }
	#work .work-intro > .p-5 { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 104px 24px 18px !important; }
	#work .work-intro > .p-5 > div { grid-column: 1 / -1; }
	#work .work-intro h2 { font-size: 42px; }
	#work .work-intro .lead { max-width: 310px; font-size: 15px; line-height: 1.35; }
	#work .work-intro .custom-link-1 { align-self: center; margin: 0; font-size: 13px; }
	#work .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(250px, 1fr)); }
	#work .project-visual { min-height: 0 !important; padding: 18px; }
	#work .project-visual span { font-size: clamp(30px, 6vw, 42px); }
}

@media (max-width: 1199px) {
	#header.menu-open .header-nav-main nav.collapse { display: none !important; }
	.studio-mobile-nav {
		position: fixed;
		inset: 0;
		z-index: 999;
		margin: 0;
		padding: 110px 28px 40px;
		background: #151A2E;
		list-style: none;
		flex-direction: column;
		justify-content: center;
		transform: translateX(100%);
		transition: transform .32s ease;
	}
	.studio-mobile-nav.open { display: flex; transform: translateX(0); }
	.studio-mobile-nav li { display: block; }
	.studio-mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(245,240,232,.18); color: #F5F0E8; font-family: Cormorant,Georgia,serif; font-size: 44px; line-height: 1; }
	.studio-mobile-nav .btn { display: inline-grid; place-items: center; width: 42px; height: 42px; }
}

@media (max-width: 767px) {
	.studio-logo { font-size: 16px; }
	.studio-logo-symbol { width: 31px; height: 30px; }
	.studio-logo-symbol img { width: 31px; }
	.custom-hero-font-1 { font-size: 64px !important; }
	.custom-hero-font-2 { display: block; font-size: clamp(42px,13vw,56px) !important; line-height: .95 !important; white-space: normal; padding-inline: 16px; }
	#home .text-4 { max-width: 330px; margin-inline: auto !important; padding: 12px 16px !important; color: #F5F0E8 !important; text-shadow: 0 1px 8px rgba(21,26,46,.65); }
	.hero-cta-wrap { margin-top: 24px !important; }
	.hero-cta { min-width: 190px; }
	.about-art { min-height: 420px; }
	.about-art { box-shadow: 10px 10px 0 #151A2E; }
	#about > div:first-child > .p-5 { padding-top: 108px !important; }
	.about-art img { width: 56%; }
	#services { overflow-y: auto; }
	#services .service-intro > .p-5 { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 104px 20px 18px !important; }
	#services .service-intro > .p-5 > div { grid-column: 1 / -1; }
	#services .service-intro h2 { font-size: 40px; }
	#services .service-intro .lead { max-width: 230px; font-size: 14px; line-height: 1.35; }
	#services .service-intro .custom-link-1 { align-self: center; margin: 0; font-size: 13px; }
	#services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(250px, 1fr)); }
	#services .service-panel > .p-5 { padding: 44px 15px 14px !important; }
	#services .service-panel > .p-5:before { top: 14px; left: 15px; font-size: 8px; }
	#services .service-panel svg { width: 46px !important; height: 46px !important; padding: 8px; }
	#services .service-panel h3 { margin-top: 12px !important; font-size: clamp(24px, 7.4vw, 30px); }
	#services .service-panel p { margin-bottom: 0; padding-top: 6px !important; font-size: 12px; line-height: 1.35; }
	#services .service-panel ul { display: none; }
	#work .project-visual { min-height: 0 !important; }
	#services .service-panel > .p-5 { margin-top: 0; }
	#contact .container-fluid { padding-top: 82px; }
	#contact .p-5 { padding-left: 24px !important; padding-right: 24px !important; }
	.studio-contact-form { padding: 20px; }
	.studio-contact-form .d-flex.gap-3 { align-items: flex-start !important; }
}

@media (max-width: 479px) {
	.hero-cta { width: calc(100% - 48px); max-width: 330px; }
	.studio-submit { width: 100%; justify-content: center; min-height: 50px; }
	.studio-contact-form .d-flex.gap-3 { display: block !important; }
	#form-status { margin-top: 12px !important; }
	.studio-mobile-nav a { font-size: 39px; }
}

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