:root {
	--cr: #A01040;
	--cr-dk: #7a0c2e;
	--cr-lt: #c41650;
	--cr-pale: #f9eaef;
	--gold: #C9A84C;
	--gold-lt: #e8c97a;
	--ink: #1a1012;
	--ink-s: #3d2430;
	--paper: #faf7f5;
	--paper-w: #f3ede8;
	--g-mid: #8a7278;
	--g-lt: #e8e0e2;
	--px: clamp(16px, 5vw, 56px);
}

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%
}

body {
	font-family: 'DM Sans', sans-serif;
	background: var(--paper);
	color: var(--ink);
	overflow-x: hidden;
	line-height: 1.6
}

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

a {
	color: inherit
}

::-webkit-scrollbar {
	width: 4px
}

::-webkit-scrollbar-track {
	background: var(--paper-w)
}

::-webkit-scrollbar-thumb {
	background: var(--cr);
	border-radius: 2px
}

/* REVEAL */
.rv,
.rv-l,
.rv-r {
	opacity: 0;
	transition: opacity .7s ease, transform .7s ease
}

.rv {
	transform: translateY(32px)
}

.rv-l {
	transform: translateX(-32px)
}

.rv-r {
	transform: translateX(32px)
}

.rv.on,
.rv-l.on,
.rv-r.on {
	opacity: 1;
	transform: none
}

/* ── NAV ── */
nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--px);
	height: 62px;
	background: transparent;
	transition: background .35s, box-shadow .35s
}

nav.sc {
	background: rgba(250, 247, 245, .97);
	box-shadow: 0 1px 0 var(--g-lt);
	backdrop-filter: blur(10px)
}

.logo {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	flex-shrink: 0
}

.logo-mk {
	width: 36px;
	height: 36px;
	border-radius: 7px;
	background: var(--cr);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 18px;
	flex-shrink: 0
}

.logo-tx {
	display: flex;
	flex-direction: column;
	line-height: 1.2
}

.logo-tx b {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	letter-spacing: .05em;
	transition: color .3s
}

nav.sc .logo-tx b {
	color: var(--ink)
}

.logo-tx small {
	font-size: 9px;
	color: rgba(255, 255, 255, .6);
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .3s
}

nav.sc .logo-tx small {
	color: var(--g-mid)
}

.nav-links {
	display: none;
	gap: 28px;
	list-style: none
}

.nav-links a {
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	position: relative;
	transition: color .3s
}

nav.sc .nav-links a {
	color: var(--ink-s)
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	right: 0;
	height: 1.5px;
	background: var(--cr);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s
}

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

.nav-links a:hover::after {
	transform: scaleX(1)
}

.nav-cta {
	background: var(--cr) !important;
	color: #fff !important;
	padding: 8px 18px;
	border-radius: 6px;
	font-size: 12px !important
}

.nav-cta::after {
	display: none !important
}

.ham {
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	border: none;
	background: none;
	flex-shrink: 0
}

.ham span {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: all .3s
}

nav.sc .ham span {
	background: var(--ink)
}

.ham.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg)
}

.ham.open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0)
}

.ham.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg)
}

/* DRAWER */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 800;
	background: var(--cr-dk);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	transform: translateX(100%);
	transition: transform .4s cubic-bezier(.77, 0, .18, 1);
	padding: 80px 24px 48px
}

.drawer.open {
	transform: none
}

.drawer a {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 7vw, 36px);
	color: #fff;
	text-decoration: none;
	transition: color .2s;
	text-align: center
}

.drawer a:hover {
	color: var(--gold-lt)
}

.drw-ph {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px
}

.drw-ph a {
	font-family: 'DM Sans', sans-serif;
	font-size: 15px !important;
	color: rgba(255, 255, 255, .55) !important
}

.drw-ph a:hover {
	color: #fff !important
}

/* ── HERO ── */
#hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 80px var(--px) 48px
}

.hero-bg-img {
	position: absolute;
	inset: 0;
	background: url('images/cover.png') 
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, rgba(122, 12, 46, .92) 0%, rgba(160, 16, 64, .82) 50%, rgba(90, 10, 28, .88) 100%)
}

.hero-pat {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 36px, rgba(255, 255, 255, .02) 36px, rgba(255, 255, 255, .02) 37px)
}

.hero-blob {
	position: absolute;
	right: -20vw;
	top: -15vh;
	width: 100vw;
	height: 100vw;
	max-width: 600px;
	max-height: 600px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .07);
	animation: spin 70s linear infinite
}

.hero-blob2 {
	position: absolute;
	right: -10vw;
	top: -8vh;
	width: 75vw;
	height: 75vw;
	max-width: 460px;
	max-height: 460px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .05);
	animation: spin 100s linear infinite reverse
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

.hero-inner {
	position: relative;
	z-index: 2;
	max-width: 680px
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--gold-lt);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 18px;
	opacity: 0;
	animation: fu .7s .3s forwards
}

.eyebrow::before {
	content: '';
	display: block;
	width: 22px;
	height: 1px;
	background: var(--gold-lt)
}

.h1 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(36px, 10vw, 80px);
	font-weight: 700;
	color: #fff;
	line-height: 1.06;
	letter-spacing: -.02em;
	margin-bottom: 16px;
	opacity: 0;
	animation: fu .8s .5s forwards
}

.h1 em {
	font-style: italic;
	color: var(--gold-lt)
}

.hero-p {
	font-size: clamp(14px, 4vw, 17px);
	font-weight: 300;
	color: rgba(255, 255, 255, .78);
	line-height: 1.75;
	max-width: 480px;
	margin-bottom: 28px;
	opacity: 0;
	animation: fu .8s .7s forwards
}

.hero-btns {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	opacity: 0;
	animation: fu .8s .9s forwards
}

.btn-w {
	background: #fff;
	color: var(--cr);
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: all .3s;
	white-space: nowrap
}

.btn-w:hover {
	background: var(--gold-lt);
	transform: translateY(-2px)
}

.btn-o {
	background: transparent;
	color: #fff;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	border: 1.5px solid rgba(255, 255, 255, .4);
	text-decoration: none;
	transition: all .3s;
	white-space: nowrap
}

.btn-o:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
	transform: translateY(-2px)
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 36px;
	background: rgba(255, 255, 255, .12);
	border-radius: 12px;
	overflow: hidden;
	opacity: 0;
	animation: fu .8s 1.1s forwards
}

.stat {
	padding: 14px 10px;
	text-align: center;
	background: rgba(0, 0, 0, .2)
}

.stat-n {
	font-family: 'Playfair Display', serif;
	font-size: clamp(20px, 5vw, 30px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	display: block;
	margin-bottom: 4px
}

.stat-l {
	font-size: 9px;
	color: rgba(255, 255, 255, .5);
	letter-spacing: .1em;
	text-transform: uppercase
}

@keyframes fu {
	from {
		opacity: 0;
		transform: translateY(20px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

/* MARQUEE */
.marquee {
	background: var(--cr);
	padding: 12px 0;
	overflow: hidden
}

.marq-inner {
	display: flex;
	gap: 36px;
	width: max-content;
	animation: marq 28s linear infinite
}

.marq-inner span {
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap
}

.marq-inner .dot {
	color: var(--gold-lt);
	font-size: 15px
}

@keyframes marq {
	to {
		transform: translateX(-50%)
	}
}

/* SECTIONS */
section {
	padding: 60px var(--px)
}

.sec-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--cr);
	margin-bottom: 10px
}

.sec-label::before {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background: var(--cr)
}

.sec-title {
	font-family: 'Playfair Display', serif;
	font-size: clamp(26px, 7vw, 46px);
	font-weight: 700;
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin-bottom: 10px
}

.sec-sub {
	font-size: 14px;
	font-weight: 300;
	color: var(--g-mid);
	line-height: 1.75;
	max-width: 480px
}

/* ── ABOUT ── */
#about {
	background: #fff
}

.about-wrap {
	display: flex;
	flex-direction: column;
	gap: 36px
}

.about-img-wrap {
	position: relative
}

.about-photo {
	width: 100%;
	border-radius: 16px;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block
}

/* fallback if image fails */
.about-photo-fb {
	width: 100%;
	border-radius: 16px;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	background: linear-gradient(135deg, var(--cr), var(--cr-dk))
}

.badge {
	position: absolute;
	bottom: -14px;
	right: 14px;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--gold);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	box-shadow: 0 6px 24px rgba(201, 168, 76, .4)
}

.badge strong {
	font-family: 'Playfair Display', serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1
}

.badge small {
	font-size: 8px;
	letter-spacing: .08em;
	text-transform: uppercase
}

.about-txt p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink-s);
	margin-bottom: 14px
}

.feat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 24px
}

.feat {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 12px 10px;
	border-radius: 10px;
	background: var(--paper);
	border: 1px solid var(--g-lt);
	transition: border-color .3s, transform .3s
}

.feat:hover {
	border-color: var(--cr);
	transform: translateY(-2px)
}

.feat-ico {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	background: var(--cr-pale);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px
}

.feat h4 {
	font-size: 11px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 2px
}

.feat p {
	font-size: 10px;
	color: var(--g-mid);
	line-height: 1.5;
	margin: 0
}

/* ── SERVICES ── */
#services {
	background: var(--paper)
}

.svc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 28px
}

.svc-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--g-lt);
	cursor: pointer;
	position: relative;
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s, border-color .35s
}

.svc-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cr), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s
}

.svc-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(160, 16, 64, .12);
	border-color: transparent
}

.svc-card:hover::after {
	transform: scaleX(1)
}

/* real image on top of each card */
.svc-img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
	transition: transform .5s
}

.svc-card:hover .svc-img {
	transform: scale(1.05)
}

.svc-img-wrap {
	overflow: hidden;
	position: relative
}

.svc-img-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 40%, rgba(160, 16, 64, .08))
}

.svc-body {
	padding: 14px 14px 18px
}

.svc-card h3 {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 5px
}

.svc-card p {
	font-size: 11px;
	color: var(--g-mid);
	line-height: 1.6
}

/* ── PROCESS ── */
#process {
	background: var(--cr-dk)
}

#process .sec-label {
	color: var(--gold-lt)
}

#process .sec-label::before {
	background: var(--gold-lt)
}

#process .sec-title {
	color: #fff
}

#process .sec-sub {
	color: rgba(255, 255, 255, .6)
}

.proc-head {
	text-align: center;
	max-width: 560px;
	margin: 0 auto 40px
}

.proc-steps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px
}

.proc-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
	transition: background .3s, transform .3s
}

.proc-step:hover {
	background: rgba(255, 255, 255, .09);
	transform: translateY(-4px)
}

.step-n {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .15);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	font-family: 'Playfair Display', serif;
	font-size: 24px;
	font-weight: 700;
	color: var(--gold-lt);
	transition: all .35s
}

.proc-step:hover .step-n {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff
}

.proc-step h3 {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 7px
}

.proc-step p {
	font-size: 11px;
	color: rgba(255, 255, 255, .5);
	line-height: 1.7
}

/* ── GALLERY ── */
#work {
	background: #fff
}

.gallery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 28px
}

.gal-item {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	aspect-ratio: 1/1
}

.gal-item:first-child {
	grid-column: span 2;
	aspect-ratio: 16/7
}

.gal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
	display: block
}

.gal-ov {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(90, 8, 34, .88) 0%, rgba(122, 12, 46, .3) 50%, transparent 100%);
	opacity: 0;
	transition: opacity .35s;
	display: flex;
	align-items: flex-end;
	padding: 14px
}

.gal-label {
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	transform: translateY(6px);
	transition: transform .35s
}

.gal-item:hover .gal-img {
	transform: scale(1.07)
}

.gal-item:hover .gal-ov {
	opacity: 1
}

.gal-item:hover .gal-label {
	transform: none
}

/* ── TEAM SECTION ── */
#team {
	background: var(--paper);
	padding: 60px var(--px)
}

.team-inner {
	display: flex;
	flex-direction: column;
	gap: 28px
}

.team-img-wrap {
	position: relative;
	border-radius: 16px;
	overflow: hidden
}

.team-img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center top;
	display: block
}

.team-img-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(90, 8, 34, .9), transparent);
	padding: 20px var(--px) 16px;
	color: #fff
}

.team-img-caption h3 {
	font-family: 'Playfair Display', serif;
	font-size: clamp(18px, 4vw, 26px);
	font-weight: 700;
	margin-bottom: 4px
}

.team-img-caption p {
	font-size: 12px;
	color: rgba(255, 255, 255, .7);
	letter-spacing: .05em
}

.team-copy {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.team-copy p {
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink-s)
}

.team-numbers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 8px
}

.tn {
	text-align: center;
	padding: 14px 8px;
	background: #fff;
	border-radius: 10px;
	border: 1px solid var(--g-lt)
}

.tn-num {
	font-family: 'Playfair Display', serif;
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 700;
	color: var(--cr);
	line-height: 1;
	display: block;
	margin-bottom: 4px
}

.tn-label {
	font-size: 10px;
	color: var(--g-mid);
	text-transform: uppercase;
	letter-spacing: .1em
}

/* ── TESTIMONIALS ── */
#testimonials {
	background: var(--paper-w)
}

.test-head {
	text-align: center;
	margin-bottom: 28px
}

.test-head .sec-label {
	justify-content: center
}

.test-scroll {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none
}

.test-scroll::-webkit-scrollbar {
	display: none
}

.test-card {
	flex: 0 0 min(80vw, 290px);
	scroll-snap-align: start;
	background: #fff;
	border-radius: 14px;
	padding: 22px 18px;
	border: 1px solid var(--g-lt)
}

.stars {
	color: var(--gold);
	font-size: 13px;
	margin-bottom: 12px
}

.test-txt {
	font-size: 13px;
	line-height: 1.8;
	color: var(--ink-s);
	margin-bottom: 16px;
	font-style: italic
}

.test-auth {
	display: flex;
	align-items: center;
	gap: 9px
}

.av {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cr);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 13px;
	flex-shrink: 0
}

.av-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink)
}

.av-role {
	font-size: 10px;
	color: var(--g-mid)
}

.test-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 14px
}

.test-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--g-lt);
	transition: background .3s, width .3s
}

.test-dots span.act {
	background: var(--cr);
	width: 16px;
	border-radius: 3px
}

/* ── CTA ── */
#cta {
	background: linear-gradient(135deg, var(--cr-dk), var(--cr));
	padding: 60px var(--px);
	text-align: center;
	position: relative;
	overflow: hidden
}

#cta::before {
	content: '"';
	position: absolute;
	top: -60px;
	left: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(160px, 35vw, 280px);
	color: rgba(255, 255, 255, .04);
	pointer-events: none;
	line-height: 1
}

#cta .sec-label {
	justify-content: center;
	color: var(--gold-lt)
}

#cta .sec-label::before {
	background: var(--gold-lt)
}

#cta .sec-title {
	color: #fff;
	margin: 0 auto 12px
}

#cta .sec-sub {
	color: rgba(255, 255, 255, .65);
	margin: 0 auto 32px;
	text-align: center
}

.cta-btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap
}

/* ── CONTACT ── */
#contact {
	background: #fff
}

.call-strip {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 24px 0
}

.call-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: var(--cr);
	color: #fff;
	padding: 13px 18px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .3s
}

.call-btn:hover {
	background: var(--cr-dk)
}

.call-btn.alt {
	background: transparent;
	color: var(--cr);
	border: 1.5px solid var(--cr)
}

.call-btn.alt:hover {
	background: var(--cr-pale)
}

.c-info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 32px
}

.c-item {
	display: flex;
	gap: 12px;
	align-items: flex-start
}

.c-ico {
	width: 38px;
	height: 38px;
	border-radius: 9px;
	flex-shrink: 0;
	background: var(--cr-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px
}

.c-item h4 {
	font-size: 10px;
	font-weight: 600;
	color: var(--g-mid);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 3px
}

.c-item p,
.c-item a {
	font-size: 13px;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.6
}

.c-item a:hover {
	color: var(--cr)
}

.map-wrap {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--g-lt);
	margin-bottom: 32px
}

.map-wrap iframe {
	width: 100%;
	height: 200px;
	border: none;
	display: block
}

.cform {
	display: flex;
	flex-direction: column;
	gap: 14px
}

.fg {
	display: flex;
	flex-direction: column;
	gap: 4px
}

.fg label {
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-s)
}

.fg input,
.fg textarea,
.fg select {
	padding: 11px 13px;
	border: 1.5px solid var(--g-lt);
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	color: var(--ink);
	background: var(--paper);
	outline: none;
	transition: border-color .3s;
	width: 100%;
	-webkit-appearance: none
}

.fg input:focus,
.fg textarea:focus,
.fg select:focus {
	border-color: var(--cr);
	background: #fff
}

.fg textarea {
	resize: vertical;
	min-height: 100px
}

.sub-btn {
	background: var(--cr);
	color: #fff;
	padding: 14px 24px;
	border-radius: 8px;
	font-family: 'DM Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	width: 100%;
	transition: all .3s
}

.sub-btn:hover {
	background: var(--cr-dk)
}

/* ── FOOTER ── */
footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .5);
	padding: 48px var(--px) 80px
}

.foot-brand {
	margin-bottom: 28px
}

.foot-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px
}

.foot-logo-mk {
	width: 34px;
	height: 34px;
	background: var(--cr);
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	font-size: 17px
}

.foot-logo-nm b {
	display: block;
	color: #fff;
	font-size: 13px;
	font-weight: 600
}

.foot-logo-nm small {
	font-size: 9px;
	letter-spacing: .12em;
	text-transform: uppercase
}

.foot-brand p {
	font-size: 13px;
	line-height: 1.8;
	max-width: 280px;
	margin-bottom: 16px
}

.socials {
	display: flex;
	gap: 8px
}

.soc {
	width: 32px;
	height: 32px;
	border-radius: 7px;
	background: rgba(255, 255, 255, .07);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	transition: background .3s
}

.soc:hover {
	background: var(--cr)
}

.foot-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	margin-bottom: 20px
}

.foot-col h4 {
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 12px
}

.foot-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 7px
}

.foot-col a {
	color: rgba(255, 255, 255, .4);
	font-size: 12px;
	text-decoration: none;
	transition: color .2s
}

.foot-col a:hover {
	color: #fff
}

.foot-btm {
	font-size: 11px;
	text-align: center;
	line-height: 1.9
}

.foot-btm a {
	color: var(--cr-lt);
	text-decoration: none
}

/* FLOATING */
.float-wa {
	position: fixed;
	bottom: 80px;
	right: 16px;
	z-index: 500;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	text-decoration: none;
	box-shadow: 0 4px 18px rgba(37, 211, 102, .4);
	transition: transform .3s
}

.float-wa:hover {
	transform: scale(1.1)
}

.scroll-top {
	position: fixed;
	bottom: 18px;
	right: 16px;
	z-index: 500;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--cr);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: none;
	font-size: 16px;
	opacity: 0;
	pointer-events: none;
	transition: all .3s;
	box-shadow: 0 4px 16px rgba(160, 16, 64, .3)
}

.scroll-top.on {
	opacity: 1;
	pointer-events: auto
}

.scroll-top:hover {
	background: var(--cr-dk)
}

/* MOBILE BOTTOM BAR */
.mob-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 600;
	background: #fff;
	border-top: 1px solid var(--g-lt);
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 10px 12px 14px;
	box-shadow: 0 -4px 20px rgba(0, 0, 0, .08)
}

.mob-bar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 8px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: all .2s
}

.mb-call {
	background: var(--cr);
	color: #fff;
	margin-right: 6px
}

.mb-call:hover {
	background: var(--cr-dk)
}

.mb-wa {
	background: #e7faf0;
	color: #1a7a3e;
	border: 1px solid #b8e8cb
}

/* ── TABLET 640px ── */
@media(min-width:640px) {
	footer {
		padding-bottom: 40px
	}

	.mob-bar {
		display: none
	}

	.float-wa {
		bottom: 84px;
		right: 24px
	}

	.scroll-top {
		bottom: 24px;
		right: 24px
	}

	.svc-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.proc-steps {
		grid-template-columns: repeat(4, 1fr)
	}

	.gallery-grid {
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 220px 220px
	}

	.gal-item {
		aspect-ratio: auto
	}

	.gal-item:first-child {
		grid-column: 1;
		grid-row: span 2;
		aspect-ratio: auto
	}

	.test-scroll {
		flex-wrap: wrap;
		overflow: visible
	}

	.test-card {
		flex: 1 1 260px
	}

	.contact-wrap {
		display: grid;
		grid-template-columns: 1fr 1.1fr;
		gap: 52px;
		align-items: start
	}

	.about-wrap {
		flex-direction: row;
		align-items: center;
		gap: 52px
	}

	.about-img-wrap {
		flex: 1
	}

	.about-txt-wrap {
		flex: 1
	}

	.team-inner {
		flex-direction: row;
		align-items: center;
		gap: 48px
	}

	.team-img-wrap {
		flex: 1.2
	}

	.team-copy {
		flex: 1
	}

	.foot-cols {
		grid-template-columns: repeat(3, 1fr)
	}
}

/* ── DESKTOP 1024px ── */
@media(min-width:1024px) {
	nav {
		height: 68px
	}

	.ham {
		display: none
	}

	.nav-links {
		display: flex
	}

	section {
		padding: 88px var(--px)
	}

	#team {
		padding: 88px var(--px)
	}

	.svc-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.foot-cols {
		grid-template-columns: repeat(4, 1fr)
	}
}

/* ── TINY 400px ── */
@media(max-width:400px) {
	.feat-grid {
		grid-template-columns: 1fr
	}

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

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

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

	.gal-item:first-child {
		grid-column: auto;
		aspect-ratio: 16/9
	}

	.foot-cols {
		grid-template-columns: 1fr
	}

	.hero-stats {
		grid-template-columns: 1fr 1fr
	}

	.team-numbers {
		grid-template-columns: 1fr 1fr
	}
}

#preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--cr-dk);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  animation:preExit .6s 2.2s ease forwards;
}
#preloader.hide{opacity:0;visibility:hidden;pointer-events:none}
body.loading{overflow:hidden}
@keyframes preExit{
  0%  {opacity:1;visibility:visible;pointer-events:auto}
  99% {opacity:0;visibility:visible;pointer-events:none}
  100%{opacity:0;visibility:hidden;pointer-events:none}
}

/* crimson ink wipe on exit */
.pre-ink{
  position:absolute;inset:0;
  background:var(--cr);
  clip-path:circle(0% at 50% 100%);
  animation:inkWipe .75s 1.8s cubic-bezier(.77,0,.18,1) forwards;
  pointer-events:none;z-index:1;
}
@keyframes inkWipe{
  from{clip-path:circle(0% at 50% 100%)}
  to  {clip-path:circle(170% at 50% 100%)}
}

.pre-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:0 32px;text-align:center;
}

/* spinning decorative rings */
.pre-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
  top:50%;left:50%;
}
.pre-ring-1{width:360px;height:360px;margin:-180px 0 0 -180px;animation:ringSpinA 14s linear infinite}
.pre-ring-2{width:260px;height:260px;margin:-130px 0 0 -130px;animation:ringSpinA 9s linear infinite reverse}
.pre-ring-3{width:160px;height:160px;margin:-80px 0 0 -80px;animation:ringSpinA 6s linear infinite;border-color:rgba(201,168,76,.15)}
@keyframes ringSpinA{to{transform:rotate(360deg)}}

/* logo block */
.pre-logo-wrap{
  display:flex;align-items:center;gap:16px;
  opacity:0;animation:pLogoIn .8s .1s cubic-bezier(.34,1.56,.64,1) forwards;
}
.pre-logo-mk{
  width:68px;height:68px;border-radius:14px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:38px;color:var(--cr);
  animation:logoPulse 2.4s 1s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 0 0 12px rgba(255,255,255,0)}
}
.pre-logo-text{display:flex;flex-direction:column;gap:2px;text-align:left}
.pre-logo-name{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(26px,7vw,38px);font-weight:600;
  color:#fff;letter-spacing:.1em;line-height:1;
}
.pre-logo-sub{
  font-size:clamp(9px,2.5vw,11px);
  color:rgba(255,255,255,.5);
  letter-spacing:.22em;text-transform:uppercase;
}

/* tagline */
.pre-tag{
  font-size:clamp(10px,3vw,12px);
  color:var(--gold-lt);letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:pFadeUp .6s .65s ease forwards;
}
.pre-tag::before,.pre-tag::after{content:'— ';color:rgba(232,201,122,.4)}
.pre-tag::after{content:' —'}

@keyframes pLogoIn{
  from{opacity:0;transform:scale(.65) translateY(24px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes pFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}