:root {
	--dark:#0d0e13;
	--dark2:#15151e;
	--paper:#f5f4f0;
	--ink:#14151a;
	--muted:#77777c;
	--lime:#baff52;
	--line:rgba(255,255,255,.13);
	--font-head:'Space Grotesk',sans-serif;
	--font-body:'DM Sans',sans-serif;
	--font-display:'Syne',sans-serif
}

* {
	box-sizing:border-box
}

html {
	scroll-behavior:smooth;
	scroll-padding-top:85px
}

body {
	margin:0;
	background:var(--dark);
	font-family:var(--font-body);
	color:var(--ink);
	-webkit-font-smoothing:antialiased
}

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

button,input,textarea {
	font:inherit
}

button {
	cursor:pointer
}

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

h1,h2,h3,p {
	margin-top:0
}

h1,h2,h3 {
	font-family:var(--font-head);
	letter-spacing:-.055em
}

h2 {
	font-size:clamp(2.35rem,4.7vw,5rem);
	line-height:1.06;
	margin-bottom:0
}

p {
	line-height:1.7
}

.container {
	width:min(1320px,calc(100% - 100px));
	margin-inline:auto
}

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

.skip-link {
	position:fixed;
	top:-90px;
	left:10px;
	z-index:99;
	background:var(--lime);
	color:#000;
	padding:12px
}

.skip-link:focus {
	top:10px
}

.site-header {
	height:88px;
	position:absolute;
	inset:0 0 auto;
	z-index:20;
	color:white;
	border-bottom:1px solid rgba(255,255,255,.075)
}

.nav-wrap {
	height:100%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px
}

.brand {
	display:inline-flex;
	align-items:center;
	flex-shrink:0
}

.brand img {
	width:174px;
	height:auto
}

.nav {
	display:flex;
	align-items:center;
	gap:clamp(16px,2.9vw,40px)
}

.nav a {
	font-size:.95rem;
	font-weight:600;
	color:#ddd;
	transition:color .25s;
	text-transform:uppercase;
	letter-spacing:.045em
}

.nav a:hover {
	color:var(--lime)
}

.btn {
	min-height:60px;
	display:inline-flex;
	gap:18px;
	justify-content:center;
	align-items:center;
	border:1px solid transparent;
	border-radius:100px;
	padding:0 32px;
	font-weight:800;
	font-size:.92rem;
	letter-spacing:.008em;
	transition:transform .25s,background .25s,color .25s
}

.btn:hover {
	transform:translateY(-3px)
}

.btn i {
	font-size:1.05rem
}

.btn-small {
	min-height:50px;
	padding:0 24px;
	font-size:.85rem
}

.btn-lime {
	background:var(--lime);
	color:#0e1109
}

.btn-lime:hover {
	background:#d0ff88
}

.btn-outline {
	border-color:rgba(255,255,255,.4);
	color:white
}

.btn-outline:hover {
	background:white;
	color:#111
}

.btn-dark {
	background:var(--dark);
	color:white
}

.menu-toggle {
	display:none
}

.hero {
	position:relative;
	min-height:790px;
	overflow:hidden;
	background:#0b0c12;
	color:#fff;
	padding-top:88px
}

.hero::before {
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:1;
	background:linear-gradient(90deg,#0b0c12 3%,rgba(11,12,18,.97) 26%,rgba(11,12,18,.5) 55%,rgba(11,12,18,0) 90%)
}

.hero-art {
	position:absolute;
	inset:0 0 45px 27%;
	background-image:url('../img/hero-crystal.webp');
	background-repeat:no-repeat;
	background-position:70% center;
	background-size:cover;
	opacity:.96
}

.hero-grid {
	position:relative;
	z-index:2;
	min-height:652px;
	display:flex;
	align-items:center;
	justify-content:space-between
}

.hero-content {
	max-width:760px;
	padding:45px 0 35px
}

.eyebrow {
	display:flex;
	align-items:center;
	gap:12px;
	font-size:.65rem;
	letter-spacing:.25em;
	font-weight:800;
	color:#dad9df;
	margin-bottom:28px
}

.eyebrow-icon {
	width:29px;
	height:29px;
	border:1px solid var(--lime);
	border-radius:50%;
	display:grid;
	place-items:center;
	color:var(--lime);
	font-size:12px
}

.eyebrow-dark {
	color:#64656a
}

.eyebrow-dark i {
	color:#8bc934
}

.hero h1 {
	font-size:clamp(3.75rem,6.1vw,6.7rem);
	line-height:1.04;
	font-weight:700;
	margin:0 0 27px
}

.hero h1 em {
	font-style:normal;
	color:var(--lime)
}

.hero-content>p {
	font-size:1.02rem;
	max-width:540px;
	color:#c9c8d0;
	line-height:1.8;
	margin-bottom:31px
}

.hero-actions {
	display:flex;
	align-items:center
}

.scroll-cue {
	display:inline-flex;
	align-items:center;
	gap:17px;
	color:#9b9ba4;
	font-size:.62rem;
	letter-spacing:.21em;
	font-weight:700;
	margin-top:76px
}

.scroll-cue i {
	font-size:1rem;
	color:#fafafa
}

.hero-side-note {
	display:flex;
	flex-direction:column;
	align-self:flex-start;
	gap:5px;
	margin-top:75px;
	font-size:.68rem;
	font-weight:800;
	letter-spacing:.18em;
	white-space:nowrap;
}

.hero-side-note span {
	display:block;
	width:max-content;
	color:#c8c7d2;
	background-image:linear-gradient(100deg, #c8c7d2 0%, #c8c7d2 36%, #baff52 46%, #efffc7 49%, #b89aff 52%, #c8c7d2 62%, #c8c7d2 100%);
	background-size:350% 100%;
	background-position:100% 50%;
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	animation:hero-note-wave 5.5s linear infinite;
}

.hero-side-note span:nth-child(2) {
	animation-delay:.5s;
}

.hero-side-note span:nth-child(3) {
	animation-delay:1s;
}

@keyframes hero-note-wave {
	0% {
		background-position:100% 50%;
	}

	30%, 100% {
		background-position:0% 50%;
	}
}

@media (prefers-reduced-motion:reduce) {
	.hero-side-note span {
		animation:none;
		background:none;
		-webkit-text-fill-color:#d9d8e1;
	}
}

.ticker {
	height:50px;
	border-top:1px solid #34343d;
	border-bottom:1px solid #34343d;
	background:#111218;
	overflow:hidden;
	display:flex;
	align-items:center;
	color:#ddd;
	font-family:var(--font-display);
	font-size:1.02rem
}

.ticker-track {
	white-space:nowrap;
	word-spacing:44px;
	animation:marquee 27s linear infinite
}

.ticker span {
	color:var(--lime);
	margin:0 23px
}

@keyframes marquee {
	to {
		transform:translateX(-20%)
	}
}

.section {
	padding:115px 0
}

.section-light {
	background:var(--paper)
}

.section-dark {
	background:var(--dark);
	color:#fff
}

.section-heading {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:60px;
	margin-bottom:30px
}

.section-heading h2 {
	max-width:700px
}

.section-heading h2 span,.services h2 span {
	color:#86868b
}

.section-heading>p {
	max-width:320px;
	color:#73737a;
	font-size:.89rem;
	margin:0 0 8px
}

.portfolio-notice {
	font-size:.79rem;
	color:#6d6c70;
	background:#eae9e4;
	border:1px solid #deddd7;
	border-radius:10px;
	padding:12px 16px;
	margin-bottom:24px;
	display:flex;
	align-items:center;
	gap:10px
}

.filters {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:28px
}

.filter {
	padding:10px 18px;
	border-radius:30px;
	background:#e7e7e3;
	border:0;
	font-size:.77rem;
	font-weight:700;
	color:#444
}

.filter.is-active,.filter:hover {
	background:var(--lime);
	color:#10120e
}

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

.project-card {
	min-width:0;
	background:#fff;
	border:1px solid #e8e7e1;
	border-radius:12px;
	overflow:hidden
}

.project-card[hidden] {
	display:none!important
}

.project-visual {
	height:355px;
	padding:40px 21px 0;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:flex-end;
	justify-content:center
}

.visual-architecture {
	background:linear-gradient(140deg,#d2c9bd,#f2eee5 55%,#bdb1a1)
}

.visual-commerce {
	background:radial-gradient(circle at 75% 15%,#e68e5d,transparent 55%),linear-gradient(135deg,#7c2a15,#b44924)
}

.visual-creative {
	background:radial-gradient(circle at 80% 25%,#008b86,transparent 50%),linear-gradient(130deg,#022e33,#053e40)
}

.browser-mock {
	width:100%;
	height:95%;
	border:7px solid #24252b;
	border-radius:13px 13px 0 0;
	box-shadow:0 20px 45px rgba(0,0,0,.27);
	background:white;
	overflow:hidden;
	transform:perspective(1100px) rotateX(2deg);
	transition:transform .6s
}

.project-card:hover .browser-mock {
	transform:perspective(1100px) rotateX(0) translateY(-10px)
}

.browser-top {
	height:27px;
	display:flex;
	align-items:center;
	gap:5px;
	padding:0 12px;
	background:#191b21;
	color:#fff
}

.browser-top span {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#515159
}

.browser-top b {
	margin-left:auto;
	font-size:6px;
	letter-spacing:.24em;
	font-weight:500;
	color:#c1c0c7
}

.mock-content {
	height:calc(100% - 27px);
	padding:43px 27px;
	position:relative;
	overflow:hidden
}

.mock-content small {
	font-size:8px;
	font-weight:800;
	letter-spacing:.15em;
	position:relative;
	z-index:2
}

.mock-content strong {
	display:block;
	font-family:var(--font-head);
	letter-spacing:-.06em;
	font-size:clamp(24px,2.5vw,42px);
	line-height:1.05;
	margin:18px 0;
	position:relative;
	z-index:2
}

.mock-pill {
	border:1px solid currentColor;
	border-radius:20px;
	padding:7px 10px;
	font-size:7px;
	font-weight:800;
	letter-spacing:.06em;
	position:relative;
	z-index:3;
	display:inline-block
}

.architecture-content {
	background:linear-gradient(150deg,#fffdf8,#dbd0bf);
	color:#24201b
}

.architecture-shape {
	position:absolute;
	width:58%;
	height:64%;
	right:-12px;
	bottom:-26px;
	background:linear-gradient(45deg,#cbb9a1,#f9f4e9 65%);
	clip-path:polygon(12% 40%,55% 4%,100% 35%,100% 100%,12% 100%);
	box-shadow:-15px 5px 20px #9d917d
}

.architecture-shape:after {
	content:"";
	position:absolute;
	width:35%;
	height:60%;
	background:#837764;
	left:33%;
	bottom:0
}

.commerce-content {
	color:#fff;
	background:radial-gradient(circle at 75% 65%,#cc986f,transparent 45%),#1b211e
}

.product-object {
	height:185px;
	width:99px;
	right:36px;
	bottom:-18px;
	position:absolute;
	border-radius:22px 22px 18px 18px;
	background:linear-gradient(90deg,#30382f 0,#8b9d82 25%,#334538 65%,#17241e);
	transform:rotate(12deg);
	box-shadow:14px 16px 22px #040b08
}

.bottle-cap {
	position:absolute;
	width:59px;
	height:26px;
	left:20px;
	top:-22px;
	border-radius:5px;
	background:#151d17
}

.bottle-text {
	font-family:var(--font-display);
	color:#e9e6d0;
	font-size:17px;
	letter-spacing:.25em;
	position:absolute;
	top:70px;
	left:14px
}

.creative-content {
	color:white;
	background:radial-gradient(circle at 55% 60%,#1a878b,transparent 50%),#091a2e
}

.creative-content strong {
	font-family:var(--font-display)
}

.creative-orb {
	width:184px;
	height:184px;
	position:absolute;
	right:-35px;
	top:88px;
	border-radius:50%;
	background:radial-gradient(circle at 30% 20%,white 0,#9efcff 8%,#785fff 30%,#0d376d 65%,#021421 80%);
	box-shadow:0 0 75px #73f2ff66
}

.project-bottom {
	min-height:124px;
	padding:23px 24px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:15px
}

.project-index {
	font-size:.62rem;
	color:#7c7b7c;
	font-weight:800;
	letter-spacing:.14em
}

.project-bottom h3 {
	font-size:1.28rem;
	letter-spacing:-.04em;
	margin:10px 0 0
}

.circle-arrow {
	width:46px;
	height:46px;
	border:1px solid #b4b4b3;
	background:transparent;
	border-radius:50%;
	display:grid;
	place-items:center;
	font-size:1.1rem;
	flex-shrink:0;
	transition:background .2s,transform .2s
}

.circle-arrow:hover {
	background:var(--lime);
	transform:rotate(45deg)
}

.portfolio-caption {
	font-size:.78rem;
	color:#777;
	line-height:1.6;
	margin:20px 0 0
}

.about {
	overflow:hidden;
	background:radial-gradient(circle at 84% 55%,#34304f,#111118 55%,#0d0e13 78%)
}

.about-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	min-height:490px;
	gap:9%
}

.about-left {
	align-self:center;
	position:relative
}

.outline-number {
	position:absolute;
	top:-70px;
	left:-26px;
	color:rgba(255,255,255,.07);
	font:800 8rem var(--font-display)
}

.about .eyebrow {
	position:relative
}

.about h2 {
	font-size:clamp(2.5rem,4.25vw,4.8rem)
}

.about h2 span,.process h2 span,.process-statement span {
	color:var(--lime)
}

.about p {
	color:#aeadb8;
	max-width:510px;
	font-size:.95rem;
	margin:24px 0 29px
}

.about-feature {
	display:grid;
	place-items:center
}

.about-feature-inner {
	width:min(100%,520px);
	aspect-ratio:1.18;
	border:1px solid #464456;
	border-radius:15px;
	background:radial-gradient(circle at 40% 30%,#3b3056,#181922 65%);
	box-shadow:0 20px 90px #0009;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-end;
	padding:38px;
	position:relative;
	overflow:hidden
}

.about-feature-inner:before {
	content:"";
	position:absolute;
	inset:12%;
	border:1px solid rgba(255,255,255,.08);
	transform:rotate(20deg);
	border-radius:40px
}

.about-feature-inner>i {
	font-size:2.2rem;
	color:var(--lime);
	position:absolute;
	top:40px;
	right:44px
}

.feature-squares {
	position:absolute;
	top:70px;
	left:85px;
	display:grid;
	grid-template-columns:60px 60px;
	gap:8px;
	transform:rotate(-22deg)
}

.feature-squares i {
	height:60px;
	background:linear-gradient(135deg,#a5a2c5,#272638);
	border:1px solid #ded8ff88;
	box-shadow:0 0 20px #b2a3ff22;
	border-radius:10px
}

.feature-squares i:nth-child(2) {
	background:linear-gradient(140deg,#c9ff71,#555a73)
}

.feature-squares i:nth-child(3) {
	background:linear-gradient(120deg,#8c72db,#cfc1ff)
}

.about-feature-inner span {
	position:relative;
	color:#aeacb9;
	font-size:.6rem;
	font-weight:800;
	letter-spacing:.19em
}

.about-feature-inner strong {
	position:relative;
	font:700 clamp(2rem,3vw,3rem)/1.1 var(--font-display);
	margin-top:12px;
	letter-spacing:-.055em
}

.services-layout {
	display:grid;
	grid-template-columns:.85fr 1.25fr;
	gap:10%
}

.services-intro p {
	color:#78777b;
	max-width:320px;
	margin-top:23px
}

.services-list {
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:32px
}

.service {
	display:grid;
	grid-template-columns:55px 1fr 23px;
	gap:15px;
	border-top:1px solid #dcdad4;
	padding:25px 0;
	align-items:start
}

.service-icon {
	width:48px;
	height:48px;
	border-radius:50%;
	border:1px solid #cecec8;
	display:grid;
	place-items:center;
	font-size:1.15rem
}

.service h3 {
	letter-spacing:-.04em;
	font-size:1.06rem;
	margin-bottom:8px
}

.service p {
	font-size:.75rem;
	line-height:1.55;
	color:#7b7a7a;
	margin:0
}

.service>span:last-child {
	color:#adada9;
	font-size:.72rem
}

.process {
	background:radial-gradient(ellipse at 85% 100%,#282441,transparent 48%),var(--dark)
}

.process-heading {
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:40px
}

.process-heading p {
	color:#a6a4af;
	max-width:280px
}

.steps {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
	margin-top:70px
}

.step {
	position:relative;
	border-top:1px solid #42414c;
	padding:28px 12px 18px 0
}

.step:not(:last-child):after {
	content:'→';
	position:absolute;
	right:10px;
	top:38px;
	color:#b4b3bd;
	font-size:1.6rem
}

.step>span {
	width:58px;
	height:58px;
	border:1px dashed #797783;
	border-radius:50%;
	display:grid;
	place-items:center;
	color:var(--lime);
	font-size:.85rem;
	margin-bottom:26px
}

.step h3 {
	font-size:1.3rem;
	letter-spacing:-.025em
}

.step p {
	font-size:.78rem;
	color:#a4a2ae;
	max-width:175px
}

.process-statement {
	margin-top:62px;
	padding:32px 0;
	border-top:1px solid #44434c;
	font:700 clamp(2rem,4vw,4.3rem)/1.15 var(--font-head);
	letter-spacing:-.05em;
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap
}

.process-statement i {
	margin-left:auto;
	color:var(--lime)
}

.contact-layout {
	display:grid;
	grid-template-columns:.83fr 1fr;
	gap:10%;
	align-items:start
}

.contact h2 {
	font-size:clamp(2.7rem,4.35vw,5rem)
}

.contact h2 span {
	color:#92c946
}

.contact-intro p {
	color:#7c7b7d;
	max-width:385px;
	margin-top:25px
}

.contact-meta {
	margin-top:55px;
	display:flex;
	align-items:center;
	gap:15px;
	color:#6a6a6a;
	font-size:.91rem
}

.contact-meta i {
	color:#90c934
}


.contact-details {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:15px;
	margin-top:28px;
}

.contact-details-link {
	display:inline-flex;
	align-items:center;
	gap:15px;
	color:var(--ink);
	font-size:1.125rem;
	font-weight:700;
	word-break:break-word;
	transition:color .2s;
}

.contact-details-link:hover {
	color:#719c27;
}

.contact-details-icon {
	width:47px;
	height:47px;
	flex:0 0 47px;
	border-radius:50%;
	background:#e8eedf;
	color:#719c27;
	display:grid;
	place-items:center;
	font-size:1.125rem;
}

.contact-form {
	background:#fff;
	padding:35px;
	border:1px solid #e4e4df;
	border-radius:14px;
	box-shadow:0 18px 35px rgba(10,10,10,.04)
}

.form-title {
	display:flex;
	justify-content:space-between;
	margin-bottom:25px;
	font-weight:800;
	letter-spacing:.15em;
	font-size:.875rem
}

.form-title i {
	font-size:1.1rem
}

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

.field {
	margin-bottom:19px
}

.field label:not(.consent-label) {
	display:block;
	margin-bottom:9px;
	color:#3f3f43;
	font-size:.875rem;
	font-weight:800
}

.field label b {
	color:#88b937
}

.field input:not([type=checkbox]),.field textarea {
	width:100%;
	min-width:0;
	border:1px solid #dddcd9;
	border-radius:8px;
	padding:16px 17px;
	background:#fafaf8;
	outline:0;
	color:#17171a;
	font-size:.975rem;
	transition:border-color .2s,box-shadow .2s
}

.field textarea {
	resize:vertical;
	min-height:135px
}

.field input:focus,.field textarea:focus {
	border-color:#8abd35;
	box-shadow:0 0 0 3px #baff5245
}

.captcha-entry {
	display:flex;
	align-items:center;
	gap:9px
}

.captcha-entry>span {
	padding:13px 10px;
	border-radius:8px;
	border:1px solid #deddcf;
	white-space:nowrap;
	font:700 1rem var(--font-head);
	background:#f4f3ed
}

.captcha-entry input {
	max-width:105px
}

.check-field {
	display:flex;
	align-items:center
}

.consent-label {
	display:flex;
	align-items:flex-start;
	gap:10px;
	font-size:.875rem;
	line-height:1.6;
	color:#666
}

.consent-label input {
	accent-color:#91d13e;
	margin-top:4px;
	flex-shrink:0
}

.form-footer {
	display:flex;
	justify-content:space-between;
	gap:15px;
	align-items:center;
	margin-top:2px
}

.form-hint {
	font-size:.8rem;
	color:#999
}

.form-status {
	min-height:0;
	font-size:.92rem;
	font-weight:700;
	margin-top:12px
}

.form-status.is-success {
	color:#2b782f
}

.form-status.is-error {
	color:#af3030
}

.honeypot {
	position:absolute;
	left:-9999px;
	opacity:0;
	pointer-events:none
}

.footer {
	background:#0b0c10;
	color:white;
	padding:36px 0
}

.footer-inner {
	display:flex;
	align-items:center;
	gap:40px
}

.footer p {
	font-size:.77rem;
	color:#aaa;
	margin:0
}

.footer-right {
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:25px;
	font-size:.72rem;
	color:#bbb
}

.footer-right a:hover {
	color:var(--lime)
}

.footer-right span {
	color:#787782
}

.project-modal {
	width:min(540px,calc(100% - 30px));
	border:0;
	border-radius:14px;
	padding:45px;
	background:var(--paper);
	color:var(--ink);
	box-shadow:0 40px 140px #0007
}

.project-modal::backdrop {
	background:#030406cc;
	backdrop-filter:blur(5px)
}

.project-modal h2 {
	font-size:2.6rem;
	margin-bottom:20px
}

.project-modal p {
	color:#666
}

.modal-close {
	position:absolute;
	right:16px;
	top:16px;
	border:0;
	background:#e1e0da;
	width:36px;
	height:36px;
	border-radius:50%
}


.modal-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 25px;
	padding: 20px;
	background: #e7e5df;
	border-radius: 12px;
}

.modal-label #project-modal-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #555;
	font-size: 15px;
	line-height: 1.6;
}

.modal-label .btn {
	flex-shrink: 0;
	margin-left: auto;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.modal-label {
		flex-direction: column;
		align-items: stretch;
	}

	.modal-label .btn {
		align-self: flex-end;
		margin-left: 0;
	}
}


[data-reveal] {
	opacity:0;
	transform:translateY(24px);
	transition:opacity .75s,transform .75s
}

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

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

	*,*:before,*:after {
		animation-duration:.01ms!important;
		transition-duration:.01ms!important
	}

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

@media(max-width:1100px) {
	.container {
		width:calc(100% - 64px)
	}

	.nav {
		gap:18px
	}

	.hero {
		min-height:740px
	}

	.hero-grid {
		min-height:610px
	}

	.hero h1 {
		font-size:clamp(3.65rem,6.4vw,5.3rem)
	}

	.hero-art {
		inset:0 0 45px 18%;
		opacity:.82
	}

	.project-visual {
		height:290px;
		padding:30px 13px 0
	}

	.mock-content {
		padding:30px 18px
	}

	.services-layout {
		gap:5%
	}

	.services-list {
		column-gap:18px
	}

	.footer-inner {
		flex-wrap:wrap
	}

	.footer-right {
		flex-wrap:wrap
	}
}

@media(max-width:760px) {
	html {
		scroll-padding-top:72px
	}

	.container {
		width:calc(100% - 38px)
	}

	.site-header {
		height:72px
	}

	.brand img {
		width:148px
	}

	.nav-cta {
		display:none
	}

	.menu-toggle {
		display:flex;
		flex-direction:column;
		justify-content:center;
		gap:5px;
		width:44px;
		height:44px;
		border:0;
		background:transparent;
		z-index:5;
		padding:9px
	}

	.menu-toggle>span:not(.sr-only) {
		display:block;
		width:26px;
		height:2px;
		background:#fff;
		transition:transform .2s,opacity .2s
	}

	.menu-toggle[aria-expanded=true]>span:nth-child(1) {
		transform:translateY(7px) rotate(45deg)
	}

	.menu-toggle[aria-expanded=true]>span:nth-child(2) {
		opacity:0
	}

	.menu-toggle[aria-expanded=true]>span:nth-child(3) {
		transform:translateY(-7px) rotate(-45deg)
	}

	.nav {
		display:none;
		position:absolute;
		left:0;
		right:0;
		top:72px;
		flex-direction:column;
		align-items:stretch;
		background:#12131a;
		padding:23px 22px 28px;
		border-bottom:1px solid #333;
		box-shadow:0 25px 50px #0007
	}

	.nav.is-open {
		display:flex
	}

	.nav a {
		padding:13px 0;
		font-size:1.05rem
	}

	.hero {
		min-height:780px;
		padding-top:72px
	}

	.hero::before {
		background:linear-gradient(0deg,#0b0c12 0%,#0b0c12 13%,#0b0c12e8 28%,#0b0c1260 75%,#0b0c1200 100%)
	}

	.hero-art {
		inset:25px -40% auto -12%;
		height:480px;
		background-size:auto 100%;
		background-position:72% center;
		opacity:.87
	}

	.hero-grid {
		min-height:654px;
		align-items:flex-end
	}

	.hero-content {
		padding:230px 0 45px
	}

	.hero h1 {
		font-size:clamp(3.1rem,10.2vw,5.1rem);
		max-width:590px
	}

	.hero-content>p {
		font-size:.92rem;
		max-width:490px
	}

	.hero-side-note {
		display:none
	}

	.scroll-cue {
		margin-top:45px
	}

	.ticker {
		height:45px;
		font-size:.85rem
	}

	.section {
		padding:76px 0
	}

	.section-heading,.process-heading {
		display:block
	}

	.section-heading>p,.process-heading>p {
		margin-top:23px
	}

	.projects-grid {
		grid-template-columns:1fr 1fr
	}

	.project-visual {
		height:300px
	}

	.about-grid,.services-layout,.contact-layout {
		grid-template-columns:1fr;
		gap:42px
	}

	.about-feature-inner {
		max-width:470px;
		aspect-ratio:1.4
	}

	.services-list {
		grid-template-columns:1fr 1fr
	}

	.steps {
		grid-template-columns:1fr 1fr;
		gap:22px;
		margin-top:42px
	}

	.step:not(:last-child):after {
		display:none
	}

	.contact-meta {
		margin-top:30px
	}

	.footer-inner {
		gap:20px
	}

	.footer-right {
		width:100%;
		margin:0
	}
}

@media(max-width:520px) {
	.hero {
		min-height:730px
	}

	.hero-grid {
		min-height:613px
	}

	.hero-content {
		padding-top:210px
	}

	.hero-art {
		height:405px;
		inset:25px -65% auto -28%;
		background-position:70% center
	}

	.hero h1 {
		font-size:clamp(2.9rem,11vw,3.8rem)
	}

	.hero-content>p {
		font-size:.85rem
	}

	.eyebrow {
		letter-spacing:.16em;
		font-size:.57rem
	}

	.section-heading h2,.services h2 {
		font-size:2.6rem
	}

	.projects-grid {
		grid-template-columns:1fr
	}

	.project-visual {
		height:340px;
		padding:35px 30px 0
	}

	.mock-content strong {
		font-size:40px
	}

	.project-bottom {
		min-height:105px
	}

	.services-list {
		grid-template-columns:1fr
	}

	.service {
		grid-template-columns:48px 1fr 20px
	}

	.steps {
		gap:12px
	}

	.step {
		padding-top:20px
	}

	.step h3 {
		font-size:1.12rem
	}

	.step>span {
		width:47px;
		height:47px
	}

	.process-statement {
		font-size:2.15rem
	}

	.contact h2 {
		font-size:clamp(2.65rem,10vw,3.4rem)
	}

	.contact-form {
		padding:24px 19px
	}

	.form-row {
		grid-template-columns:1fr;
		gap:0
	}

	.check-field {
		margin-top:4px
	}

	.form-footer {
		align-items:stretch;
		flex-direction:column-reverse
	}

	.footer-right {
		gap:14px
	}

	.footer-right span {
		width:100%
	}
}


/* PORTFOLIO - oryginalne zrzuty PNG wypelniajace okna podgladowe */
.project-visual.project-screenshot {
	height:355px;
	padding:28px 21px 0;
	background:linear-gradient(130deg,#d9d5e7,#aea7c6);
}

.project-visual.project-screenshot--ecommerce {
	background:linear-gradient(130deg,#b4d6c8,#448c7e);
}
.project-visual.project-screenshot--yamaha {
	background:linear-gradient(130deg,#e3c6b3,#ac816f);
}
.project-visual.project-screenshot--budmar {
	background:linear-gradient(130deg,#c6cfd2,#657782);
}
.project-visual.project-screenshot--espol {
	background:linear-gradient(130deg,#b5d0dd,#617c99);
}
.project-visual.project-screenshot--events {
	background:linear-gradient(130deg,#d7b7d8,#74638b);
}

.browser-mock.browser-mock--screenshot {
	height:100%;
	min-height:0;
	position:relative;
	display:flex;
	flex-direction:column;
}

.browser-mock--screenshot .browser-top {
	flex:0 0 27px;
}

.screenshot-stage {
	position:relative;
	flex:1 1 auto;
	min-height:0;
	width:100%;
	overflow:hidden;
	background:#fff;
}

.screenshot-stage > img {
	display:block;
	width:100%;
	height:100%;
	max-width:none;
	object-fit:fill;
}

.project-excerpt {
	margin:8px 0 0;
	color:#78777d;
	font-size:.86rem;
	line-height:1.5;
}

/* Szczegoly realizacji - opis i przycisk we wspolnym panelu */
.project-modal .modal-label {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	margin-top:24px;
	padding:20px;
	background:#e7e5df;
	border-radius:12px;
}

.project-modal .modal-label p {
	flex:1 1 auto;
	min-width:0;
	margin:0;
	font-size:15px;
	line-height:1.55;
	color:#666;
}

.project-modal .modal-label .btn {
	flex:0 0 auto;
	margin:0 0 0 auto;
	white-space:nowrap;
}

@media (max-width:1100px) {
	.project-visual.project-screenshot {
		height:290px;
		padding:24px 13px 0;
	}
}

@media (max-width:760px) {
	.project-visual.project-screenshot {
		height:300px;
		padding:24px 13px 0;
	}
}

@media (max-width:520px) {
	.project-visual.project-screenshot {
		height:340px;
		padding:30px 24px 0;
	}

	.project-modal .modal-label {
		flex-direction:column;
		align-items:stretch;
		gap:16px;
	}

	.project-modal .modal-label .btn {
		align-self:flex-end;
		margin-left:0;
	}
}