/* ==================== CUSTOM FONT WEIGHTS ==================== */
.font-light { font-weight: 300; }      /* Light - for body text, taglines */
.font-regular { font-weight: 400; }    /* Regular - default body text */
.font-medium { font-weight: 500; }     /* Medium - subtle emphasis */
.font-semibold { font-weight: 600; }   /* Semi-bold - emphasis, subheadings */
.font-bold { font-weight: 700; }       /* Bold - section headings */
.font-extrabold { font-weight: 800; }  /* Extra-bold - main headlines, titles */

/* ==================== GLOBAL TYPOGRAPHY ==================== */
html, body {
	font-family: 'Poppins', system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: #333333;
	font-size: 1rem;
	font-weight: 400;  /* Regular weight for body text */
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', system-ui, sans-serif;
	line-height: 1.3;
	color: #2b2b1a;
}

h1 { font-size: 2.5rem; font-weight: 800; }  /* Extra-bold for main headlines */
h2 { font-size: 2rem; font-weight: 700; }    /* Bold for section headings */
h3 { font-size: 1.5rem; font-weight: 700; }  /* Bold for subheadings */
h4 { font-size: 1.25rem; font-weight: 700; } /* Bold for smaller headings */
h5 { font-size: 1.1rem; font-weight: 600; }  /* Semi-bold for emphasis */
h6 { font-size: 1rem; font-weight: 600; }    /* Semi-bold for emphasis */

p {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 400;  /* Regular for paragraph text */
	color: #555555;
}

button, input, textarea, select {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 500;  /* Medium for button/input text for better visibility */
}

/* ==================== SMOOTH SCROLL ==================== */
html {
	scroll-behavior: smooth;
}

/* CSS Variables (color palette + common tokens) */
:root {
	--accent-orange: #d88728;
	--accent-orange-dark: #c96d00;
	--bg-card: #ffffff;
	--text-medium-gray: #666666;
	--input-border: #e6e6e6;
}
/* ABOUT SECTION (consolidated below) - duplicate removed to reduce filesize */

.scroll-to-top {
	position: fixed;
	bottom: 28px;
	right: 28px;
	width: 50px;
	height: 50px;
	background: var(--accent-orange);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	box-shadow: 0 8px 22px rgba(216,135,40,0.18);
}

.scroll-to-top.show {
	display: flex;
	transform: translateY(0);
}

.scroll-to-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(216,135,40,0.22);
}

.scroll-to-top svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 480px) {
	.scroll-to-top {
		width: 44px;
		height: 44px;
		bottom: 20px;
		right: 18px;
	}
	.scroll-to-top svg { width: 18px; height: 18px; }
}

/* ==================== ABOUT SECTION ==================== */
.about-section {
	padding: 80px 0;
	background: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.about-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.about-image {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	height: 500px;
}

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

.about-image:hover .about-img {
	transform: scale(1.05);
}

.about-content {
	background: #f5f1e8;
	padding: 52px 48px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.about-title {
	font-size: 2.4rem;
	font-weight: 600;
	color: #2b2b1a;
	margin: 0 0 8px 0;
	line-height: 1.3;
	letter-spacing: -0.3px;
	font-family: 'Poppins', system-ui, sans-serif;
}

.about-subtitle {
	font-size: 1.1rem;
	color: #d88728;
	font-weight: 600;
	margin: 0 0 24px 0;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-family: 'Poppins', system-ui, sans-serif;
}

.about-description {
	font-size: 1.05rem;
	color: #333;
	line-height: 1.8;
	margin: 0 0 16px 0;
	font-weight: 400;
	font-family: 'Poppins', system-ui, sans-serif;
}

.about-details {
	font-size: 0.95rem;
	color: #555;
	line-height: 1.8;
	margin: 0 0 32px 0;
	font-weight: 400;
	font-family: 'Poppins', system-ui, sans-serif;
}

.about-cta {
	background: #5b7d8f;
	color: white;
	border: none;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	align-self: flex-start;
	box-shadow: 0 4px 12px rgba(91, 125, 143, 0.25);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-family: 'Poppins', system-ui, sans-serif;
}

.about-cta:hover {
	background: #4a6578;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(91, 125, 143, 0.35);
}

/* Responsive: Tablet */
@media (min-width: 481px) and (max-width: 1024px) {
	.about-section { padding: 60px 20px; }
	.about-wrapper { grid-template-columns: 1fr; gap: 40px; }
	.about-image { height: 380px; }
	.about-content { padding: 42px 36px; }
	.about-title { font-size: 2rem; }
	.about-subtitle { font-size: 1rem; margin-bottom: 20px; }
	.about-description { font-size: 0.98rem; margin-bottom: 14px; }
	.about-details { font-size: 0.92rem; margin-bottom: 28px; }
}

/* Responsive: Small phones */
@media (max-width: 480px) {
	.about-section { padding: 50px 16px; }
	.about-wrapper { grid-template-columns: 1fr; gap: 28px; }
	.about-image { height: 300px; border-radius: 6px; }
	.about-content { padding: 32px 20px; background: #f5f1e8; border-radius: 6px; }
	.about-title { font-size: 1.6rem; margin-bottom: 6px; }
	.about-subtitle { font-size: 0.85rem; margin-bottom: 16px; letter-spacing: 1px; }
	.about-description { font-size: 0.92rem; line-height: 1.7; margin-bottom: 12px; }
	.about-details { font-size: 0.88rem; line-height: 1.65; margin-bottom: 24px; }
	.about-cta { padding: 12px 24px; font-size: 13px; }
}

/* Responsive: Large desktop */
@media (min-width: 1441px) {
	.about-section { padding: 100px 0; }
	.about-wrapper { gap: 80px; }
	.about-image { height: 600px; border-radius: 10px; }
	.about-content { padding: 60px 56px; border-radius: 10px; }
	.about-title { font-size: 2.8rem; margin-bottom: 10px; }
	.about-subtitle { font-size: 1.2rem; margin-bottom: 28px; }
	.about-description { font-size: 1.15rem; margin-bottom: 18px; }
	.about-details { font-size: 1.02rem; margin-bottom: 36px; }
	.about-cta { padding: 16px 40px; font-size: 16px; }
}

/* Responsive: 4K */
@media (min-width: 1921px) {
	.about-section { padding: 120px 0; }
	.about-wrapper { gap: 100px; }
	.about-image { height: 700px; border-radius: 12px; }
	.about-content { padding: 68px 64px; border-radius: 12px; }
	.about-title { font-size: 3.2rem; margin-bottom: 12px; }
	.about-subtitle { font-size: 1.3rem; margin-bottom: 32px; }
	.about-description { font-size: 1.25rem; margin-bottom: 20px; }
	.about-details { font-size: 1.1rem; margin-bottom: 40px; }
	.about-cta { padding: 18px 48px; font-size: 17px; }
}

/* ==================== HERO SECTION ==================== */
.hero-section {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1;
	-webkit-filter: brightness(0.7);
	filter: brightness(0.7);
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.hero-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(20px, 5vw, 40px);
}

.hero-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 50px);
	align-items: center;
	min-height: 100vh;
	padding: clamp(20px, 5vw, 60px) 0;
}

@media (max-width: 1024px) {
	.hero-wrapper {
		grid-template-columns: 1fr;
		gap: clamp(24px, 4vw, 40px);
		min-height: auto;
		padding: clamp(40px, 5vw, 60px) 0;
	}
}

@media (max-width: 768px) {
	.hero-wrapper {
		gap: 24px;
		padding: 30px 0;
	}

	.hero-section {
		min-height: auto;
	}
}

.hero-left h1 {
	font-size: clamp(1.8rem, 8vw, 3.5rem);
	font-weight: 700;
	color: rgb(255, 255, 255);
	margin-bottom: clamp(12px, 3vw, 20px);
	line-height: 1.2;
	animation: slideInLeft 0.8s ease-out;
	font-family: 'Poppins', system-ui, sans-serif;
}

.hero-left p {
	font-size: clamp(0.95rem, 2.5vw, 1.2rem);
	color: #ffffff;
	margin-bottom: clamp(16px, 3vw, 24px);
	font-weight: 400;
	line-height: 1.6;
	animation: slideInLeft 0.8s ease-out 0.1s both;
	font-family: 'Poppins', system-ui, sans-serif;
}

.hero-right {
	animation: slideInRight 0.8s ease-out;
}

@media (max-width: 1024px) {
	.hero-left,
	.hero-right {
		animation: slideInUp 0.8s ease-out;
	}
}

/* ==================== ENHANCED FORM STYLES ==================== */

@keyframes formSlideIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Form styles converted to Tailwind in HTML; removed custom form CSS to slim file */

/* ==================== HERO ANIMATION ==================== */
.hero-left {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-left.visible {
	opacity: 1;
	transform: translateX(0);
}

.hero-right {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.hero-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* Navbar styles removed */

/* ==================== RESPONSIVE ==================== */

/* Extra Small (320px - 480px) */
@media (max-width: 480px) {
	html {
		font-size: 14px;
		font-family: 'Poppins', system-ui, sans-serif;
	}
	body {
		line-height: 1.6;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-section { min-height: 100vh; }
	.hero-content {
		padding: 16px;
	}

	.hero-left h1 {
		font-size: 1.8rem;
		margin-bottom: 14px;
		line-height: 1.3;
		font-weight: 700;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-left p {
		font-size: 0.95rem;
		margin-bottom: 16px;
		line-height: 1.6;
		font-weight: 400;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-right {
		padding: 22px 16px;
		background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
		border-radius: 12px;
		box-shadow: 0 8px 20px rgba(12,18,20,0.04);
	}

	.hero-right h2 {
		font-size: 1.4rem;
		margin-bottom: 10px;
		font-weight: 600;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-right .form-subtitle {
		font-size: 0.88rem;
		margin-bottom: 20px;
		color: #666;
		font-weight: 400;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.form-group {
		margin-bottom: 16px;
	}

	.form-group label {
		font-size: 0.9rem;
		margin-bottom: 6px;
		font-weight: 500;
		color: #333;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.form-input {
		padding: 11px 12px;
		font-size: 14px;
		border-radius: 8px;
		border: 1px solid #e6e6e6;
		font-family: 'Poppins', system-ui, sans-serif;
		font-weight: 400;
	}

	.btn-submit {
		padding: 12px 18px;
		font-size: 14px;
		font-weight: 600;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(216,135,40,0.15);
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-wrapper {
		gap: 20px;
	}

	/* How We Work */
	.how-section { padding: 50px 16px; background: #f3f4ea; }
	.how-title { font-size: 2.2rem; line-height: 1.2; margin-bottom: 18px; font-weight: 600; font-family: 'Poppins', system-ui, sans-serif; }
	.how-intro { font-size: 0.95rem; line-height: 1.6; margin-top: 14px; color: #666; font-weight: 400; font-family: 'Poppins', system-ui, sans-serif; }
	.work-card { padding: 14px 0; border: none; border-top: 1px solid rgba(0,0,0,0.05); }
	.work-card:first-child { border-top: none; padding-top: 0; }
	.card-number { font-size: 0.85rem; margin-bottom: 10px; color: #6b6b57; font-weight: 600; font-family: 'Poppins', system-ui, sans-serif; }
	.card-title { font-size: 1.35rem; margin-bottom: 10px; font-weight: 600; line-height: 1.3; font-family: 'Poppins', system-ui, sans-serif; }
	.card-desc { font-size: 0.92rem; line-height: 1.65; color: #555; font-weight: 400; font-family: 'Poppins', system-ui, sans-serif; }

	/* Carousel */
	.gallery-section { padding: 50px 16px; }
	.carousel-track { gap: 16px; padding: 14px 0; }
	.carousel-item { flex:0 0 100%; }
	.carousel-item img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
	.caption { font-size: 0.9rem; margin-top: 10px; font-weight: 500; color: #4c4c42; font-family: 'Poppins', system-ui, sans-serif; }
}

/* Small (480px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
	html {
		font-size: 15px;
		font-family: 'Poppins', system-ui, sans-serif;
	}
	body {
		line-height: 1.6;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-content {
		padding: 20px;
	}

	.hero-left h1 {
		font-size: 2.5rem;
		margin-bottom: 16px;
		line-height: 1.3;
		font-weight: 700;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-left p {
		font-size: 1.05rem;
		line-height: 1.6;
		margin-bottom: 18px;
		font-weight: 400;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-right {
		padding: 32px 28px;
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(12,18,20,0.06);
	}

	.hero-right h2 {
		font-size: 1.55rem;
		margin-bottom: 10px;
		font-weight: 600;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.hero-right .form-subtitle {
		font-size: 0.95rem;
		margin-bottom: 24px;
		color: #666;
		font-weight: 400;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.form-group {
		margin-bottom: 18px;
	}

	.form-group label {
		font-size: 0.95rem;
		margin-bottom: 7px;
		font-weight: 500;
		color: #333;
		font-family: 'Poppins', system-ui, sans-serif;
	}

	.form-input {
		padding: 12px 14px;
		font-size: 15px;
		border-radius: 8px;
		border: 1px solid #e6e6e6;
		font-family: 'Poppins', system-ui, sans-serif;
		font-weight: 400;
	}

	.btn-submit {
		padding: 13px 24px;
		font-size: 15px;
		font-weight: 600;
		border-radius: 8px;
		box-shadow: 0 6px 16px rgba(216,135,40,0.18);
	}

	.hero-wrapper {
		gap: 28px;
	}

	/* How We Work */
	.how-section { padding: 60px 20px; background: #f3f4ea; }
	.how-title { font-size: 3.2rem; line-height: 1.15; margin-bottom: 22px; font-weight: 600; }
	.how-intro { font-size: 0.98rem; line-height: 1.65; color: #666; max-width: 100%; }
	.how-right .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
	.work-card { padding: 18px 0; border: none; border-top: 1px solid rgba(0,0,0,0.05); }
	.work-card:first-child { border-top: none; padding-top: 0; }
	.card-number { font-size: 0.88rem; margin-bottom: 12px; color: #6b6b57; }
	.card-title { font-size: 1.55rem; margin-bottom: 12px; font-weight: 600; line-height: 1.3; }
	.card-desc { font-size: 0.95rem; line-height: 1.7; color: #555; }

	/* Carousel */
	.gallery-section { padding: 60px 20px; }
	.carousel-track { gap: 18px; padding: 16px 0; }
	.carousel-item { flex:0 0 calc(50% - 9px); }
	.carousel-item img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
	.caption { font-size: 0.94rem; margin-top: 12px; font-weight: 500; color: #4c4c42; }
}

/* Medium (768px - 1024px) - TABLET */
@media (min-width: 769px) and (max-width: 1024px) {
	html { font-size: 16px; }
	body { line-height: 1.65; }

	.hero-section { min-height: 100vh; }
	.hero-content {
		padding: 28px;
	}

	.hero-wrapper {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.hero-left h1 {
		font-size: 3rem;
		margin-bottom: 18px;
		line-height: 1.25;
		font-weight: 700;
	}

	.hero-left p {
		font-size: 1.1rem;
		margin-bottom: 20px;
		line-height: 1.65;
	}

	.hero-right {
		padding: 40px 36px;
		border-radius: 14px;
		box-shadow: 0 12px 32px rgba(12,18,20,0.08);
	}

	.hero-right h2 {
		font-size: 1.75rem;
		margin-bottom: 12px;
		font-weight: 600;
	}

	.hero-right .form-subtitle {
		margin-bottom: 28px;
		font-size: 0.98rem;
		color: #666;
	}

	.form-group {
		margin-bottom: 20px;
	}

	.form-group label {
		font-size: 1rem;
		margin-bottom: 8px;
		font-weight: 500;
		color: #333;
	}

	.form-input {
		padding: 13px 15px;
		font-size: 15px;
		border-radius: 8px;
		border: 1px solid #e6e6e6;
	}

	.btn-submit {
		padding: 13px 24px;
		font-size: 15px;
		font-weight: 600;
		border-radius: 8px;
		box-shadow: 0 8px 20px rgba(216,135,40,0.2);
	}

	/* How We Work */
	.how-section { padding: 70px 28px; background: #f3f4ea; }
	.how-title { font-size: 4rem; line-height: 1.15; margin-bottom: 28px; font-weight: 600; }
	.how-intro { font-size: 1.02rem; line-height: 1.7; max-width: 100%; color: #666; margin-top: 16px; }
	.how-right .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
	.work-card { border-left: 1px solid rgba(0,0,0,0.06); border-top: none; padding: 24px 0 24px 28px; }
	.work-card:first-child { border-left: 1px solid rgba(0,0,0,0.06); }
	.card-number { font-size: 0.92rem; margin-bottom: 14px; color: #6b6b57; }
	.card-title { font-size: 1.65rem; margin-bottom: 14px; font-weight: 600; line-height: 1.35; }
	.card-desc { font-size: 0.98rem; line-height: 1.75; color: #555; }

	/* Carousel */
	.gallery-section { padding: 70px 28px; }
	.carousel-track { gap: 22px; padding: 20px 0; }
	.carousel-item { flex:0 0 calc(50% - 11px); }
	.carousel-item img { border-radius: 7px; aspect-ratio: 1; object-fit: cover; }
	.caption { font-size: 0.98rem; margin-top: 14px; font-weight: 500; color: #4c4c42; }
}

/* Large (1024px - 1440px) - DESKTOP */
@media (min-width: 1025px) and (max-width: 1440px) {
	html { font-size: 16px; }
	body { line-height: 1.7; }

	.hero-section { min-height: 100vh; }
	.hero-content {
		padding: 32px 40px;
		max-width: 1280px;
	}

	.hero-left h1 {
		font-size: 3.2rem;
		margin-bottom: 20px;
		line-height: 1.25;
		font-weight: 700;
	}

	.hero-left p {
		font-size: 1.2rem;
		margin-bottom: 24px;
		line-height: 1.7;
	}

	.hero-right {
		padding: 44px 40px;
		border-radius: 14px;
		box-shadow: 0 16px 40px rgba(12,18,20,0.1);
	}

	.hero-right h2 {
		font-size: 1.85rem;
		margin-bottom: 14px;
		font-weight: 600;
	}

	.hero-right .form-subtitle {
		margin-bottom: 32px;
		font-size: 1rem;
		color: #666;
	}

	.form-group {
		margin-bottom: 22px;
	}

	.form-group label {
		font-size: 1.02rem;
		margin-bottom: 8px;
		font-weight: 500;
		color: #333;
	}

	.form-input {
		padding: 14px 16px;
		font-size: 15px;
		border-radius: 8px;
		border: 1px solid #e6e6e6;
	}

	.btn-submit {
		padding: 14px 28px;
		font-size: 15px;
		font-weight: 600;
		border-radius: 8px;
		box-shadow: 0 10px 28px rgba(216,135,40,0.22);
	}

	.hero-wrapper {
		gap: 48px;
	}

	/* How We Work */
	.how-section { padding: 100px 0; background: #f3f4ea; }
	.how-title { font-size: 5.2rem; line-height: 1.1; margin-bottom: 32px; font-weight: 600; }
	.how-intro { font-size: 1.1rem; line-height: 1.75; max-width: 480px; color: #666; margin-top: 20px; }
	.work-card { padding: 36px 32px; border-left: 1px solid rgba(0,0,0,0.06); border-top: none; min-height: 200px; }
	.card-number { font-size: 0.95rem; margin-bottom: 16px; color: #6b6b57; }
	.card-title { font-size: 1.75rem; margin-bottom: 16px; font-weight: 600; line-height: 1.4; }
	.card-desc { font-size: 1.02rem; line-height: 1.8; color: #555; }

	/* Carousel */
	.gallery-section { padding: 80px 0; }
	.carousel-track { gap: 28px; padding: 24px 0; }
	.carousel-item { flex:0 0 calc(25% - 21px); }
	.carousel-item img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; }
	.caption { font-size: 1.02rem; margin-top: 16px; font-weight: 500; color: #4c4c42; }
}

/* Extra Large (1440px - 1920px) - LARGE DESKTOP */
@media (min-width: 1441px) and (max-width: 1920px) {
	html { font-size: 17px; }
	body { line-height: 1.75; }

	.hero-section { min-height: 100vh; }
	.hero-content {
		padding: 36px 48px;
		max-width: 1400px;
	}

	.hero-left h1 {
		font-size: 3.8rem;
		margin-bottom: 22px;
		line-height: 1.25;
		font-weight: 700;
	}

	.hero-left p {
		font-size: 1.3rem;
		margin-bottom: 28px;
		line-height: 1.75;
	}

	.hero-right {
		padding: 48px 44px;
		border-radius: 16px;
		box-shadow: 0 20px 48px rgba(12,18,20,0.12);
	}

	.hero-right h2 {
		font-size: 2rem;
		margin-bottom: 16px;
		font-weight: 600;
	}

	.hero-right .form-subtitle {
		margin-bottom: 36px;
		font-size: 1.05rem;
		color: #666;
	}

	.form-group {
		margin-bottom: 24px;
	}

	.form-group label {
		font-size: 1.05rem;
		margin-bottom: 10px;
		font-weight: 500;
		color: #333;
	}

	.form-input {
		padding: 15px 18px;
		font-size: 16px;
		border-radius: 8px;
		border: 1px solid #e6e6e6;
	}

	.btn-submit {
		padding: 15px 32px;
		font-size: 16px;
		font-weight: 600;
		border-radius: 8px;
		box-shadow: 0 12px 32px rgba(216,135,40,0.25);
	}

	.hero-wrapper { gap: 56px; }

	.how-section { padding: 110px 0; background: #f3f4ea; }
	.how-title { font-size: 5.6rem; margin-bottom: 36px; line-height: 1.1; font-weight: 600; }
	.how-intro { font-size: 1.15rem; max-width: 500px; margin-top: 24px; line-height: 1.8; color: #666; }
	.work-card { padding: 44px 36px; border-left: 1px solid rgba(0,0,0,0.06); min-height: 220px; }
	.card-number { font-size: 0.98rem; margin-bottom: 18px; color: #6b6b57; }
	.card-title { font-size: 1.85rem; margin-bottom: 18px; font-weight: 600; line-height: 1.4; }
	.card-desc { font-size: 1.05rem; line-height: 1.85; color: #555; }

	.gallery-section { padding: 90px 0; }
	.carousel-track { gap: 32px; padding: 28px 0; }
	.carousel-item { flex:0 0 calc(25% - 24px); }
	.carousel-item img { border-radius: 8px; aspect-ratio: 1; object-fit: cover; }
	.caption { font-size: 1.06rem; margin-top: 18px; font-weight: 500; color: #4c4c42; }
}

/* 4K+ (1920px+) - ULTRA HD */
@media (min-width: 1921px) {
	html { font-size: 18px; }
	body { line-height: 1.85; }

	.hero-section { min-height: 120vh; }
	.hero-content {
		padding: 40px 56px;
		max-width: 1600px;
	}

	.hero-left h1 {
		font-size: 4.6rem;
		margin-bottom: 26px;
		line-height: 1.2;
		font-weight: 700;
	}

	.hero-left p {
		font-size: 1.45rem;
		margin-bottom: 32px;
		line-height: 1.8;
	}

	.hero-right {
		padding: 56px 52px;
		border-radius: 18px;
		box-shadow: 0 24px 56px rgba(12,18,20,0.15);
	}

	.hero-right h2 {
		font-size: 2.3rem;
		margin-bottom: 18px;
		font-weight: 600;
	}

	.hero-right .form-subtitle {
		font-size: 1.1rem;
		margin-bottom: 40px;
		color: #666;
	}

	.form-group {
		margin-bottom: 28px;
	}

	.form-group label {
		font-size: 1.1rem;
		margin-bottom: 12px;
		font-weight: 500;
		color: #333;
	}

	.form-input {
		padding: 18px 20px;
		font-size: 17px;
		border-radius: 12px;
		border: 1px solid #e0e0e0;
	}

	.btn-submit {
		padding: 18px 40px;
		font-size: 17px;
		font-weight: 600;
		border-radius: 12px;
		box-shadow: 0 16px 40px rgba(216,135,40,0.3);
	}

	.hero-wrapper { gap: 64px; }

	.how-section { padding: 130px 0; background: #f3f4ea; }
	.how-title { font-size: 6.2rem; margin-bottom: 40px; line-height: 1.05; font-weight: 600; }
	.how-intro { font-size: 1.22rem; max-width: 560px; margin-top: 28px; line-height: 1.85; color: #666; }
	.how-right .grid { gap: 32px !important; }
	.work-card { padding: 52px 44px; border-left: 1px solid rgba(0,0,0,0.06); min-height: 260px; }
	.card-number { font-size: 1.02rem; margin-bottom: 22px; color: #6b6b57; }
	.card-title { font-size: 2.05rem; margin-bottom: 20px; font-weight: 600; line-height: 1.4; }
	.card-desc { font-size: 1.1rem; line-height: 1.9; color: #555; }

	.gallery-section { padding: 100px 0; }
	.carousel-track { gap: 40px; padding: 32px 0; }
	.carousel-item { flex:0 0 calc(25% - 30px); }
	.carousel-item img { border-radius: 10px; aspect-ratio: 1; object-fit: cover; }
	.carousel-item:hover img { transform: scale(1.08); }
	.caption { font-size: 1.15rem; margin-top: 22px; font-weight: 500; color: #4c4c42; }
}

/* Tablet landscape (768px - 1024px landscape) */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
	.hero-section { min-height: auto; padding: 60px 0; }
	.hero-left h1 { font-size: 2.5rem; }
	.hero-wrapper { gap: 28px; }
}

/* Print and accessibility */
@media print {
    header, footer { display: none; }
    .hero-section { min-height: auto; }
}

/* Mobile menu collapse transition for #mobileMenu */
#mobileMenu {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.32s ease-in-out;
}

/* ==================== HOW WE WORK SECTION ==================== */
.how-section {
	--how-bg: #f3f4ea; /* pale background like the screenshot */
	--how-text: #2b2b1a; /* deep olive-ish text */
	background: var(--how-bg);
	padding: 100px 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1024px) {
	.how-section {
		padding: 60px 0;
	}
}

.how-title {
	font-size: 5.2rem;
	line-height: 0.98;
	color: var(--how-text);
	font-weight: 600;
	margin: 0 0 24px 0;
	letter-spacing: -1px;
	max-width: 520px;
	display: flex;
	align-items: center;
	height: 100%;
}

.how-intro {
	color: #66685b;
	max-width: 420px;
	font-size: 1.05rem;
	margin-top: 18px;
}

.work-card {
	padding: 36px 26px;
	background: transparent;
	border-left: 1px solid rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 180px;
	padding-right: 30px;
}

.card-number {
	color: #6b6b57;
	font-size: 0.9rem;
	margin-bottom: 14px;
}

.card-title {
	font-size: 1.6rem;
	color: var(--how-text);
	margin: 0 0 14px 0;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -0.2px;
}

.card-desc {
	color: #575750;
	font-size: 0.96rem;
	line-height: 1.75;
	margin: 0;
}

@media (max-width: 1200px) {
	.how-section { padding: 80px 0; }
	.how-title { font-size: 4.8rem; }
}

@media (max-width: 768px) {
	.how-section { padding: 50px 0; }
	.how-title { font-size: 3.2rem; line-height: 1.1; margin-bottom: 20px; }
	.how-intro { max-width: none; font-size: 0.98rem; }
	/* Stack cards into a single column on mobile and change divider style */
	.how-right .grid { grid-template-columns: 1fr !important; gap: 6px !important; }
	.work-card { border-left: none; border-top: 1px solid rgba(0,0,0,0.06); padding-left: 0; padding-top: 16px; padding: 16px 0; }
	.work-card:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 480px) {
	.how-title { font-size: 2rem; line-height: 1.2; margin-bottom: 16px; }
	.how-intro { font-size: 0.92rem; line-height: 1.5; }
	.work-card { padding: 12px 0; }
	.card-title { font-size: 1.3rem; }
	.card-desc { font-size: 0.9rem; line-height: 1.6; }
	.card-number { font-size: 0.85rem; margin-bottom: 10px; }
}

/* ==================== OUR PROJECTS SECTION ==================== */
.our-projects-section {
	padding: 80px 0;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.projects-title {
	font-size: 3.2rem;
	font-weight: 600;
	color: #2b2b1a;
	text-align: center;
	margin-bottom: 12px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	font-family: 'Playfair Display', serif;
}

.projects-subtitle {
	text-align: center;
	font-size: 1.1rem;
	color: #666;
	margin-bottom: 52px;
	font-weight: 400;
	letter-spacing: 0.3px;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

.project-card {
	background: white;
	padding: 32px;
	border-radius: 8px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.project-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #d88728, #e8985a);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.project-card:hover {
	border-color: #d88728;
	box-shadow: 0 8px 24px rgba(216, 135, 40, 0.12);
	transform: translateY(-4px);
}

.project-card:hover::before {
	transform: scaleX(1);
}

.project-image-wrapper {
	width: calc(100% + 64px);
	margin: -32px -32px 24px -32px;
	height: 240px;
	position: relative;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	background: #f5f5f5;
}

.project-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	filter: brightness(1);
}

.project-card:hover .project-image {
	transform: scale(1.08);
	filter: brightness(0.95);
}

.project-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(216, 135, 40, 0) 0%, rgba(216, 135, 40, 0.15) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.project-card:hover .project-overlay {
	opacity: 1;
}

.project-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	gap: 12px;
}

.project-name {
	font-size: 1.4rem;
	font-weight: 600;
	color: #2b2b1a;
	margin: 0;
	line-height: 1.3;
	flex: 1;
}

.project-status {
	display: inline-block;
	background: #d88728;
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	flex-shrink: 0;
}

.project-description {
	font-size: 0.96rem;
	color: #555;
	line-height: 1.75;
	margin: 0 0 20px 0;
	flex-grow: 1;
}

.project-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.feature-badge {
	display: inline-block;
	background: #f5f5f5;
	color: #d88728;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
	text-transform: capitalize;
	transition: all 0.3s ease;
}

.project-card:hover .feature-badge {
	background: #d88728;
	color: white;
	border-color: #d88728;
}

/* Responsive: Tablet */
@media (min-width: 481px) and (max-width: 1024px) {
	.our-projects-section { padding: 60px 20px; }
	.projects-title { font-size: 2.4rem; margin-bottom: 12px; }
	.projects-subtitle { font-size: 1rem; margin-bottom: 40px; }
	.projects-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.project-card { padding: 24px; }
	.project-image-wrapper { width: calc(100% + 48px); margin: -24px -24px 20px -24px; height: 200px; }
	.project-name { font-size: 1.2rem; }
	.project-description { font-size: 0.9rem; }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
	.our-projects-section { padding: 50px 16px; background: #fafaf9; }
	.projects-title { font-size: 1.8rem; line-height: 1.2; margin-bottom: 8px; }
	.projects-subtitle { font-size: 0.95rem; margin-bottom: 32px; }
	.projects-grid { grid-template-columns: 1fr; gap: 16px; }
	.project-card { padding: 20px; }
	.project-image-wrapper { width: calc(100% + 40px); margin: -20px -20px 16px -20px; height: 180px; }
	.project-name { font-size: 1.1rem; }
	.project-header { flex-direction: column; }
	.project-status { align-self: flex-start; }
	.project-description { font-size: 0.85rem; line-height: 1.6; }
	.feature-badge { font-size: 0.75rem; padding: 4px 10px; }
}

/* ==================== OUR VALUES SECTION ==================== */
.our-values-section {
	padding: 80px 0;
	background: #fafaf9;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.values-title {
	font-size: 3.2rem;
	font-weight: 600;
	color: #2b2b1a;
	text-align: center;
	margin-bottom: 48px;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	align-items: stretch;
}

.value-card {
	background: white;
	padding: 36px 28px;
	border-radius: 8px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
}

.value-card:hover {
	border-color: #d88728;
	box-shadow: 0 8px 24px rgba(216, 135, 40, 0.12);
	transform: translateY(-4px);
}

.value-card-title {
	font-size: 1.5rem;
	font-weight: 600;
	color: #2b2b1a;
	margin: 0 0 8px 0;
	line-height: 1.3;
	letter-spacing: -0.2px;
}

.value-card-subtitle {
	font-size: 0.95rem;
	color: #d88728;
	font-weight: 600;
	margin: 0 0 16px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.value-card-desc {
	font-size: 0.96rem;
	color: #555;
	line-height: 1.75;
	margin: 0;
	flex-grow: 1;
}

/* Responsive: Tablet */
@media (min-width: 481px) and (max-width: 1024px) {
	.our-values-section { padding: 60px 20px; }
	.values-title { font-size: 2.8rem; margin-bottom: 40px; }
	.values-grid { grid-template-columns: 1fr; gap: 24px; }
	.value-card { padding: 32px 24px; }
	.value-card-title { font-size: 1.4rem; margin-bottom: 8px; }
	.value-card-subtitle { font-size: 0.92rem; margin-bottom: 14px; }
	.value-card-desc { font-size: 0.94rem; line-height: 1.7; }
}

/* Responsive: Small phones */
@media (max-width: 480px) {
	.our-values-section { padding: 50px 16px; background: #fafaf9; }
	.values-title { font-size: 2rem; margin-bottom: 32px; line-height: 1.3; }
	.values-grid { grid-template-columns: 1fr; gap: 18px; }
	.value-card { padding: 24px 18px; border-radius: 8px; }
	.value-card-title { font-size: 1.2rem; margin-bottom: 6px; }
	.value-card-subtitle { font-size: 0.85rem; margin-bottom: 12px; }
	.value-card-desc { font-size: 0.9rem; line-height: 1.65; }
}

/* Responsive: Large desktop */
@media (min-width: 1441px) {
	.our-values-section { padding: 100px 0; }
	.values-title { font-size: 3.8rem; margin-bottom: 56px; }
	.values-grid { gap: 40px; }
	.value-card { padding: 42px 36px; border-radius: 10px; }
	.value-card-title { font-size: 1.7rem; margin-bottom: 10px; }
	.value-card-subtitle { font-size: 0.98rem; margin-bottom: 18px; }
	.value-card-desc { font-size: 1rem; line-height: 1.8; }
}

/* Responsive: 4K */
@media (min-width: 1921px) {
	.our-values-section { padding: 120px 0; }
	.values-title { font-size: 4.2rem; margin-bottom: 64px; }
	.values-grid { gap: 48px; }
	.value-card { padding: 48px 40px; border-radius: 12px; }
	.value-card-title { font-size: 1.85rem; margin-bottom: 12px; }
	.value-card-subtitle { font-size: 1.02rem; margin-bottom: 20px; }
	.value-card-desc { font-size: 1.05rem; line-height: 1.85; }
}

/* ==================== TESTIMONIALS SECTION ==================== */
.testimonials-section {
	padding: 80px 0;
	background: #f8f7f5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.testimonials-title {
	font-size: 3rem;
	font-weight: 400;
	color: #2b2b1a;
	text-align: center;
	margin-bottom: 52px;
	letter-spacing: 0;
	line-height: 1.3;
	font-family: 'Playfair Display', serif;
}

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	align-items: stretch;
}

.testimonial-card {
	background: transparent;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.testimonial-quote {
	font-size: 1.05rem;
	color: #333;
	line-height: 1.8;
	margin: 0 0 28px 0;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.2px;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
}

.testimonial-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #d88728;
	display: block;
	flex-shrink: 0;
}

.author-name {
	font-size: 0.95rem;
	color: #2b2b1a;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Responsive: Tablet */
@media (min-width: 481px) and (max-width: 1024px) {
	.testimonials-section { padding: 60px 20px; }
	.testimonials-title { font-size: 2.4rem; margin-bottom: 42px; }
	.testimonials-grid { grid-template-columns: 1fr; gap: 32px; }
	.testimonial-quote { font-size: 0.98rem; line-height: 1.75; margin-bottom: 24px; }
	.testimonial-avatar { width: 52px; height: 52px; }
	.author-name { font-size: 0.92rem; }
}

/* Responsive: Small phones */
@media (max-width: 480px) {
	.testimonials-section { padding: 50px 16px; background: #f8f7f5; }
	.testimonials-title { font-size: 1.8rem; margin-bottom: 36px; line-height: 1.4; font-family: 'Playfair Display', serif; }
	.testimonials-grid { grid-template-columns: 1fr; gap: 24px; }
	.testimonial-quote { font-size: 0.92rem; line-height: 1.7; margin-bottom: 20px; }
	.testimonial-avatar { width: 48px; height: 48px; border-width: 2px; }
	.author-name { font-size: 0.88rem; }
}

/* Responsive: Large desktop */
@media (min-width: 1441px) {
	.testimonials-section { padding: 100px 0; }
	.testimonials-title { font-size: 3.6rem; margin-bottom: 60px; }
	.testimonials-grid { gap: 48px; }
	.testimonial-quote { font-size: 1.15rem; line-height: 1.85; margin-bottom: 32px; }
	.testimonial-avatar { width: 64px; height: 64px; border-width: 3px; }
	.author-name { font-size: 1rem; }
}

/* Responsive: 4K */
@media (min-width: 1921px) {
	.testimonials-section { padding: 120px 0; }
	.testimonials-title { font-size: 4rem; margin-bottom: 72px; }
	.testimonials-grid { gap: 56px; }
	.testimonial-quote { font-size: 1.25rem; line-height: 1.9; margin-bottom: 36px; }
	.testimonial-avatar { width: 72px; height: 72px; border-width: 3px; }
	.author-name { font-size: 1.05rem; }
}

/* ==================== GALLERY CAROUSEL ==================== */
.gallery-section { padding: 60px 0; }

.carousel { position: relative; overflow: hidden; }
.carousel-track-wrap { overflow: hidden; width:100%; }
.carousel-track { display:flex; gap:28px; padding:20px 0; will-change: transform; }
.carousel-item { flex: 0 0 calc(25% - 21px); background: transparent; display:flex; flex-direction:column; align-items:flex-start; overflow: hidden }
.carousel-item img { width:100%; aspect-ratio: 1 / 1; object-fit:cover; border-radius:6px; display:block; transition: transform .6s cubic-bezier(.22,.9,.2,1); transform-origin: center center; }
.carousel-item:hover img { transform: scale(1.06); }
.caption { margin-top:12px; color: #4c4c42; font-size:0.95rem; font-weight: 500; }

/* Remove controls and indicators (auto scroll only) */
.carousel-btn, .carousel-dots { display: none !important }

@media (max-width: 1100px) {
	.carousel-item { flex:0 0 calc(33.333% - 18px); }
	.carousel-track { gap: 24px; }
}

@media (max-width: 768px) {
	.gallery-section { padding: 50px 0; }
	.carousel-item { flex:0 0 calc(50% - 14px); }
	.carousel-track { gap: 20px; padding: 16px 0; }
	.caption { font-size: 0.9rem; margin-top: 10px; }
}

@media (max-width: 480px) {
	.gallery-section { padding: 40px 0; }
	.carousel-item { flex:0 0 100%; }
	.carousel-track { gap: 16px; padding: 12px 0; }
	.caption { font-size: 0.88rem; margin-top: 8px; }
}

/* ==================== FORM & HERO - FIXES ==================== */
/* Improve hero form card appearance and input/button behavior to match design */
.hero-right {
	background: var(--bg-card);
	padding: 36px;
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(12,18,20,0.08);
	border: 1px solid rgba(0,0,0,0.04);
	max-width: 520px;
	width: 100%;
	overflow: hidden;
}

.hero-right .form-subtitle { color: var(--text-medium-gray); margin-bottom: 22px; }

.form-input {
	width: 100%;
	border: 1px solid var(--input-border);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 15px;
	background: #fff;
	transition: box-shadow .18s ease, border-color .12s ease, transform .12s ease;
}
.form-input::placeholder { color: #cfcfcf; }
.form-input:focus { outline: none; border-color: var(--accent-orange); box-shadow: 0 8px 26px rgba(216,135,40,0.12); transform: translateY(-1px); }

.form-group label { font-size: 0.95rem; color: #333; margin-bottom: 8px; display:block; }

.btn-submit {
	display: block;
	width: 100%;
	text-align: center;
	background: linear-gradient(180deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
	color: #fff;
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	border: none;
	box-shadow: 0 14px 40px rgba(216,135,40,0.18), inset 0 -6px 18px rgba(0,0,0,0.06);
	transition: transform .18s ease, box-shadow .18s ease, opacity .12s ease;
}
.btn-submit:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(216,135,40,0.24); }

/* Make submit visually prominent on small screens */
@media (max-width: 768px) {
	.hero-right { padding: 20px; border-radius: 12px; }
	.btn-submit { padding: 12px 14px; font-size: 15px; }
}

/* Accessible focus state for button */
.btn-submit:focus { outline: 3px solid rgba(216,135,40,0.18); outline-offset: 3px; }

/* Ensure form fields stack in a single column when needed */
.hero-right form .form-row { gap: 12px; }

/* Small tweak for labels and spacing to match screenshot proportions */
.hero-right .form-group { margin-bottom: 18px; }

/* ==================== CTA SECTION (Screenshot Style) ==================== */
/* ==================== ADVANCED CTA SECTION ==================== */

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(60px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-60px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes float {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px);
	}
}

@keyframes pulse-glow {
	0%, 100% {
		box-shadow: 0 0 20px rgba(216, 135, 40, 0.4);
	}
	50% {
		box-shadow: 0 0 40px rgba(216, 135, 40, 0.6);
	}
}

.cta-section {
	position: relative;
	/* Image-backed CTA: hero image + warm dark overlay for contrast */
	background-image: linear-gradient(rgba(11,13,15,0.62), rgba(11,13,15,0.62)), url('https://res.cloudinary.com/de7y9vclv/image/upload/v1767018248/steptodown.com726299_bj4z0e.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 80px 20px;
	min-height: 650px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
}

/* subtle textured overlay to add depth without adding images */
.cta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 24px);
	pointer-events: none;
	mix-blend-mode: overlay;
	opacity: 0.06;
}

/* small warm glow for brand accent */
.cta-section::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 80% 20%, rgba(216,135,40,0.06), transparent 18%);
	pointer-events: none;
}

.cta-decoration-circle {
	position: absolute;
	border-radius: 50%;
	opacity: 0.1;
	pointer-events: none;
}

.circle-1 {
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, rgba(216,135,40,0.22), rgba(233,152,90,0.12));
	top: -90px;
	right: -90px;
	animation: float 7s ease-in-out infinite;
}

.circle-2 {
	width: 200px;
	height: 200px;
	background: linear-gradient(135deg, rgba(216,135,40,0.16), rgba(216,135,40,0.06));
	bottom: -50px;
	left: -50px;
	animation: float 9s ease-in-out infinite 1s;
}

.cta-container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	width: 100%;
	z-index: 2;
}

.cta-left {
	display: flex;
	align-items: center;
	animation: slideInLeft 0.8s ease-out;
}

.cta-content-wrapper {
	width: 100%;
}

.cta-title {
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
 	color: #fff;
	margin: 0 0 10px 0;
	animation: slideInUp 0.8s ease-out 0.1s both;
}

.cta-features {
	display: flex;
	flex-direction: column;
	gap: 28px;
	animation: slideInUp 0.8s ease-out 0.3s both;
}

.feature-item {
	display: flex;
	gap: 20px;
	padding: 18px;
	border-radius: 10px;
	background: rgba(255,255,255,0.04);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.06);
	transition: all 0.28s ease;
	cursor: pointer;
}

.feature-item:hover {
	background: rgba(255,255,255,0.075);
	border-color: rgba(255,255,255,0.14);
	transform: translateX(6px);
	box-shadow: 0 18px 48px rgba(0,0,0,0.5);
}

.feature-icon {
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	background: linear-gradient(135deg, #d88728, #e8985a);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.5rem;
	animation: pulse-glow 3s ease-in-out infinite;
}

.feature-title {
	font-size: 1.1rem;
	font-weight: 600;
 	color: #fff;
	margin: 0 0 6px 0;
}

.feature-desc {
 	font-size: 0.95rem;
 	color: rgba(255,255,255,0.82);
	line-height: 1.5;
	margin: 0;
}

.cta-right {
	display: flex;
	align-items: center;
	animation: slideInRight 0.8s ease-out;
}

.cta-form-wrapper {
	width: 100%;
	background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
	padding: clamp(24px, 5vw, 40px);
	border-radius: clamp(12px, 3vw, 18px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(216, 135, 40, 0.1);
	backdrop-filter: blur(10px);
	animation: slideInRight 0.8s ease-out;
}

.cta-form-wrapper input,
.cta-form-wrapper textarea,
.cta-form-wrapper select {
	color: #1a1a1a !important;
	font-weight: 500;
}

.cta-form-wrapper input::placeholder {
	color: #999999;
}

.form-group {
	animation: slideInUp 0.8s ease-out forwards;
	opacity: 0;
}

.form-group:nth-child(1) { animation-delay: 0.4s; }
.form-group:nth-child(2) { animation-delay: 0.5s; }
.form-group:nth-child(3) { animation-delay: 0.6s; }

.cta-form-wrapper h2 {
	animation: slideInUp 0.8s ease-out;
}

.cta-form-wrapper p {
	animation: slideInUp 0.8s ease-out 0.1s both;
}

.cta-btn {
	animation: slideInUp 0.8s ease-out 0.7s both;
	position: relative;
	overflow: hidden;
}

.cta-btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%);
	transition: width 0.6s, height 0.6s;
}

.cta-btn:hover::before {
	width: 300px;
	height: 300px;
}

/* Responsive Design */
@media (max-width: 1024px) {
	.cta-container {
		gap: 40px;
	}

	.cta-title {
		font-size: 2.5rem;
	}

	.cta-form-wrapper {
		padding: 30px;
	}
}

@media (max-width: 768px) {
	.cta-section {
		padding: 60px 20px;
		min-height: auto;
	}

	.cta-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cta-title {
		font-size: 2rem;
	}

	.cta-left,
	.cta-right {
		animation: slideInUp 0.8s ease-out;
	}

	.feature-item {
		padding: 16px;
		gap: 16px;
	}

	.feature-icon {
		width: 40px;
		height: 40px;
	}

	.feature-title {
		font-size: 1rem;
	}

	.feature-desc {
		font-size: 0.9rem;
	}

	.cta-form-wrapper {
		padding: 24px;
	}

	.circle-1 {
		width: 200px;
		height: 200px;
		top: -50px;
		right: -50px;
	}

	.circle-2 {
		width: 150px;
		height: 150px;
		bottom: -30px;
		left: -30px;
	}
}

@media (max-width: 480px) {
	.cta-section {
		padding: 40px 16px;
	}

	.cta-title {
		font-size: 1.6rem;
	}

	.cta-container {
		gap: 32px;
	}

	.cta-form-wrapper {
		padding: 20px;
	}

	.feature-title {
		font-size: 0.95rem;
	}
}

/* ==================== COMPREHENSIVE RESPONSIVE DESIGN ==================== */

/* Extra Large Screens (1920px and above) */
@media (min-width: 1920px) {
	.max-w-7xl {
		max-width: 1400px;
	}

	.form-title {
		font-size: 2.5rem;
	}

	.form-input {
		padding: 16px 18px;
		font-size: 1.05rem;
	}
}

/* Large Screens (1280px - 1919px) */
@media (min-width: 1280px) and (max-width: 1919px) {
	.hero-wrapper {
		gap: 40px;
	}

	.cta-container {
		gap: 50px;
	}
}

/* Medium to Large (1025px - 1279px) */
@media (min-width: 1025px) and (max-width: 1279px) {
	.hero-left h1 {
		font-size: 2.8rem;
	}

	.cta-title {
		font-size: 2.5rem;
	}

	.cta-container {
		gap: 40px;
	}
}

/* Tablets (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.hero-content {
		padding: 20px;
	}

	.hero-wrapper {
		gap: 32px;
		min-height: auto;
		padding: 40px 0;
	}

	.hero-left h1 {
		font-size: 2.2rem;
		margin-bottom: 16px;
	}

	.hero-left p {
		font-size: 1.05rem;
		margin-bottom: 20px;
	}

	.hero-form-container {
		padding: 32px;
	}

	.form-title {
		font-size: 1.8rem;
	}

	.form-subtitle {
		font-size: 0.95rem;
	}

	.cta-section {
		min-height: auto;
		padding: 60px 20px;
	}

	.cta-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cta-title {
		font-size: 2rem;
	}

	.cta-left {
		animation: slideInUp 0.8s ease-out;
	}

	.cta-form-wrapper {
		padding: 32px;
	}

	.feature-item {
		padding: 18px;
		gap: 16px;
	}

	.feature-icon {
		width: 45px;
		height: 45px;
		font-size: 1.3rem;
	}

	.feature-title {
		font-size: 1.05rem;
	}

	.feature-desc {
		font-size: 0.92rem;
	}
}

/* Small Tablets (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
	.hero-section {
		min-height: auto;
	}

	.hero-content {
		padding: 16px;
	}

	.hero-wrapper {
		gap: 28px;
		min-height: auto;
		padding: 30px 0;
	}

	.hero-left h1 {
		font-size: 1.8rem;
		margin-bottom: 12px;
	}

	.hero-left p {
		font-size: 0.95rem;
		margin-bottom: 16px;
		line-height: 1.6;
	}

	.hero-form-container {
		padding: 28px;
	}

	.form-title {
		font-size: 1.6rem;
	}

	.form-subtitle {
		font-size: 0.9rem;
	}

	.form-field {
		gap: 6px;
	}

	.form-label {
		font-size: 0.9rem;
	}

	.form-input {
		padding: 11px 13px;
		font-size: 0.95rem;
		border-radius: 8px;
	}

	.form-submit-btn {
		padding: 12px 16px;
		font-size: 0.95rem;
		margin-top: 6px;
	}

	.cta-section {
		padding: 50px 16px;
	}

	.cta-container {
		gap: 36px;
		padding: 0 8px;
	}

	.cta-title {
		font-size: 1.8rem;
		margin-bottom: 8px;
	}

	.cta-form-wrapper {
		padding: 28px;
	}

	.feature-item {
		padding: 16px;
		gap: 14px;
	}

	.feature-icon {
		width: 42px;
		height: 42px;
		font-size: 1.2rem;
	}

	.feature-title {
		font-size: 1rem;
	}

	.feature-desc {
		font-size: 0.9rem;
	}

	.circle-1 {
		width: 250px;
		height: 250px;
	}

	.circle-2 {
		width: 180px;
		height: 180px;
	}
}

/* Phones (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
	.hero-section {
		min-height: auto;
	}

	.hero-content {
		padding: 12px;
	}

	.hero-wrapper {
		gap: 24px;
		min-height: auto;
		padding: 25px 0;
	}

	.hero-left h1 {
		font-size: 1.5rem;
		margin-bottom: 10px;
		line-height: 1.3;
	}

	.hero-left p {
		font-size: 0.9rem;
		margin-bottom: 14px;
		line-height: 1.5;
	}

	.hero-form-container {
		padding: 24px;
	}

	.form-header {
		margin-bottom: 18px;
	}

	.form-title {
		font-size: 1.4rem;
		margin-bottom: 4px;
	}

	.form-subtitle {
		font-size: 0.85rem;
	}

	.form-field {
		gap: 5px;
	}

	.form-label {
		font-size: 0.85rem;
	}

	.form-input {
		padding: 10px 12px;
		font-size: 0.9rem;
		border-radius: 8px;
	}

	.form-submit-btn {
		padding: 11px 14px;
		font-size: 0.9rem;
		margin-top: 5px;
	}

	.cta-section {
		padding: 40px 14px;
		min-height: auto;
	}

	.cta-container {
		gap: 32px;
		padding: 0 4px;
	}

	.cta-title {
		font-size: 1.6rem;
		margin-bottom: 6px;
	}

	.cta-features {
		gap: 20px;
	}

	.cta-form-wrapper {
		padding: 24px;
	}

	.feature-item {
		padding: 14px;
		gap: 12px;
	}

	.feature-icon {
		width: 38px;
		height: 38px;
		font-size: 1rem;
	}

	.feature-title {
		font-size: 0.95rem;
	}

	.feature-desc {
		font-size: 0.85rem;
	}

	.circle-1 {
		width: 200px;
		height: 200px;
		top: -40px;
		right: -40px;
	}

	.circle-2 {
		width: 140px;
		height: 140px;
		bottom: -20px;
		left: -20px;
	}
}

/* Small Phones (max 480px) */
@media (max-width: 480px) {
	/* Global */
	html {
		font-size: 15px;
	}

	.hero-section {
		min-height: auto;
	}

	.hero-background {
		-webkit-filter: brightness(0.5);
		filter: brightness(0.5);
	}

	.hero-content {
		padding: 10px;
	}

	.hero-wrapper {
		gap: 20px;
		min-height: auto;
		padding: 20px 0;
	}

	.hero-left h1 {
		font-size: 1.8rem;
		margin-bottom: 8px;
		line-height: 1.25;
		font-weight: 700;
	}

	.hero-left p {
		font-size: 0.9rem;
		margin-bottom: 12px;
		line-height: 1.5;
	}

	.hero-form-container {
		padding: 18px;
		border-radius: 10px;
	}

	.form-header {
		margin-bottom: 16px;
	}

	.form-title {
		font-size: 1.25rem;
		margin-bottom: 3px;
		line-height: 1.2;
	}

	.form-subtitle {
		font-size: 0.8rem;
		color: #666;
	}

	.hero-form {
		gap: 14px;
	}

	.form-field {
		gap: 4px;
	}

	.form-label {
		font-size: 0.8rem;
		margin-bottom: 1px;
	}

	.label-text {
		font-weight: 500;
	}

	.required-star {
		font-size: 0.95em;
	}

	.form-input {
		padding: 9px 11px;
		font-size: 0.85rem;
		border-radius: 7px;
		border: 1.5px solid #e5e5e5;
	}

	.form-input::placeholder {
		font-size: 0.8rem;
	}

	.form-submit-btn {
		padding: 10px 12px;
		font-size: 0.85rem;
		border-radius: 7px;
		margin-top: 4px;
		letter-spacing: 0.3px;
	}

	/* CTA Section */
	.cta-section {
		padding: 30px 12px;
		min-height: auto;
	}

	.cta-container {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 0;
	}

	.cta-left {
		animation: slideInUp 0.8s ease-out;
	}

	.cta-right {
		animation: slideInUp 0.8s ease-out 0.1s both;
	}

	.cta-content-wrapper {
		width: 100%;
	}

	.cta-title {
		font-size: 1.4rem;
		margin-bottom: 4px;
		font-weight: 700;
	}

	.cta-features {
		gap: 16px;
	}

	.cta-form-wrapper {
		padding: 18px;
		border-radius: 10px;
	}

	.feature-item {
		padding: 12px;
		gap: 10px;
		border-radius: 8px;
	}

	.feature-item:hover {
		transform: translateX(6px);
	}

	.feature-icon {
		width: 35px;
		height: 35px;
		font-size: 0.9rem;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.feature-title {
		font-size: 0.9rem;
		margin-bottom: 3px;
	}

	.feature-desc {
		font-size: 0.8rem;
		line-height: 1.4;
	}

	/* Decorative circles */
	.circle-1 {
		width: 150px;
		height: 150px;
		top: -30px;
		right: -30px;
		opacity: 0.08;
	}

	.circle-2 {
		width: 100px;
		height: 100px;
		bottom: -15px;
		left: -15px;
		opacity: 0.08;
	}

	/* Animations */
	@media (prefers-reduced-motion: reduce) {
		* {
			animation: none !important;
			transition: none !important;
		}
	}
}