/* ===== DESIGN TOKENS (keeping original project colors but adding gold accents from contracting) ===== */
			:root {
				--gold: #dfa667;
				--gold-light: #e0c26e;
				--gold-dark: #9c7c32;
				--ink: #0d0d0d;
				--ink-mid: #1a1a1a;
				--ash: #2a2a2a;
				--stone: #f5f2ed;
				--stone-mid: #ede9e2;
				--parchment: #faf8f4;
				--muted: #888078;
				--muted-light: #b0a898;
				--font-display:
					"Poppins", sans-serif; /* Keeping Poppins as primary */
				--font-alt:
					"Aldrich", sans-serif; /* Keeping Aldrich as secondary */
				--font-serif:
					"Cormorant Garamond", serif; /* Optional for headings if desired */
				--transition: 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			}

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

			body {
				font-family: "Poppins", sans-serif;
				color: #333;
				background: #fff;
				margin: 0;
			}

			/* ===== HEADER – EXACT REPLICA FROM CONTRACTING (with active state) ===== */
			.header {
				position: fixed;
				top: 20px;
				left: 20px;
				z-index: 1000;
				width: auto;
				max-width: calc(100% - 40px);
			}

			.header__menu {
				background: rgba(13, 13, 13, 0.85);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
				border-radius: 50px;
				padding: 8px 24px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
				border: 1px solid rgba(201, 168, 76, 0.3);
			}

			.header__menu ul {
				list-style: none;
				display: flex;
				align-items: center;
				gap: 8px;
				margin: 0;
				padding: 0;
			}

			.header__menu ul li {
				position: relative;
			}

			.header__menu ul li a {
				color: #fff;
				text-decoration: none;
				font-weight: 500;
				font-size: 14px;
				padding: 8px 16px;
				border-radius: 30px;
				transition: all 0.3s ease;
				display: block;
				white-space: nowrap;
				font-family: "Poppins", sans-serif;
			}

			.header__menu ul li a:hover {
				background: rgba(201, 168, 76, 0.15);
				color: var(--gold);
			}

			.header__menu ul li.active a {
				background: rgba(201, 168, 76, 0.2);
				color: aliceblue;
			}

			.header__menu ul li.dropdown > ul {
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%) translateY(10px);
				background: rgba(13, 13, 13, 0.95);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
				min-width: 180px;
				border-radius: 16px;
				padding: 8px 0;
				opacity: 0;
				visibility: hidden;
				transition: all 0.3s ease;
				box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
				border: 1px solid rgba(201, 168, 76, 0.3);
				display: flex;
				flex-direction: column;
				gap: 4px;
			}

			.header__menu ul li.dropdown:hover > ul {
				opacity: 1;
				visibility: visible;
				transform: translateX(-50%) translateY(5px);
			}

			.header__menu ul li.dropdown > ul li a {
				padding: 8px 20px;
				border-radius: 0;
				text-align: center;
				font-size: 13px;
				white-space: nowrap;
			}

			.header__menu ul li.dropdown > ul li a:hover {
				background: rgba(201, 168, 76, 0.2);
			}

			.header__menu ul li.dropdown > a::after {
				content: "▾";
				margin-left: 6px;
				font-size: 14px;
				color: var(--gold);
				opacity: 0.7;
				transition: transform 0.3s ease;
				display: inline-block;
			}

			.header__menu ul li.dropdown:hover > a::after {
				transform: rotate(180deg);
			}

			.canvas__open {
				display: none;
				color: #fff;
				font-size: 24px;
				cursor: pointer;
			}

			@media (max-width: 991px) {
				.header {
					top: 10px;
					left: 10px;
					right: 10px;
					max-width: calc(100% - 20px);
				}

				.header__menu {
					display: none;
				}

				.canvas__open {
					display: flex;
					align-items: center;
					justify-content: center;
					position: fixed;
					top: 15px;
					right: 15px;
					z-index: 1001;
					background: rgba(13, 13, 13, 0.9);
					backdrop-filter: blur(10px);
					width: 50px;
					height: 50px;
					border-radius: 50%;
					border: 1px solid rgba(201, 168, 76, 0.3);
					color: #fff;
					font-size: 22px;
					cursor: pointer;
				}
				.canvas__open i,
				.canvas__open .fa {
					color: inherit;
					display: inline-block;
				}
				.hamburger-bars {
					display: block;
					width: 24px;
					height: 14px;
					background: repeating-linear-gradient(
						to bottom,
						currentColor 0,
						currentColor 2px,
						transparent 2px,
						transparent 6px
					);
					border-radius: 1px;
				}
			}

			@media (min-width: 992px) {
				.canvas__open {
					display: none !important;
				}
			}

			/* ===== HERO SECTION (adapted to match project style) ===== */
			.hero {
				padding-top: 0;
			}

			.hero__slider .hero__items {
				height: 52vh !important;
				min-height: 420px;
				background-position: center 35% !important;
				background-size: cover !important;
				position: relative;
			}

			.hero__items::after {
				content: "";
				position: absolute;
				inset: 0;
				background: linear-gradient(
					to bottom,
					rgba(13, 13, 13, 0.3) 0%,
					rgba(13, 13, 13, 0.58) 100%
				);
			}

			.hero__text {
				position: relative;
				z-index: 2;
				padding-top: 0;
				text-align: center;
			}

			.hero__text h2 {
				font-family: "Aldrich", sans-serif;
				font-weight: 600;
				font-size: clamp(2.4rem, 6vw, 4.4rem);
				letter-spacing: 0.24em;
				text-transform: uppercase;
				color: #fff;
				margin-bottom: 0;
				animation: heroFade 1.2s ease-out both;
			}

			.hero__text h2::after {
				content: "";
				display: block;
				width: 56px;
				height: 2px;
				background: var(--gold);
				margin: 1.3rem auto 0;
				animation: lineGrow 1.4s ease-out 0.4s both;
			}

			@keyframes heroFade {
				from {
					opacity: 0;
					transform: translateY(28px);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			@keyframes lineGrow {
				from {
					width: 0;
					opacity: 0;
				}

				to {
					width: 56px;
					opacity: 1;
				}
			}

			@media (max-width: 576px) {
				.hero__text h2 {
					font-size: 2rem;
				}

				.hero__text {
					padding-top: 0;
				}
			}

			/* ===== FILTER SECTION ===== */
			.filter-section {
				padding: 60px 0 30px;
				background: #f8f9fa;
			}

			.filter-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 30px;
				background: white;
				padding: 30px;
				border-radius: 12px;
				box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
			}

			.filter-group {
				min-width: 180px;
			}

			.filter-group label {
				display: block;
				font-weight: 600;
				margin-bottom: 8px;
				color: #333;
				font-size: 0.9rem;
				text-transform: uppercase;
				letter-spacing: 0.5px;
			}

			.filter-select {
				width: 100%;
				padding: 10px 15px;
				border: 1px solid #ddd;
				border-radius: 6px;
				font-family: "Poppins", sans-serif;
				background: white;
				cursor: pointer;
				transition: all 0.3s;
			}

			.filter-select:hover,
			.filter-select:focus {
				border-color: var(--gold);
				outline: none;
			}

			.clear-filters {
				display: flex;
				align-items: flex-end;
			}

			.clear-btn {
				background: none;
				border: 1px solid #ccc;
				padding: 10px 25px;
				border-radius: 6px;
				cursor: pointer;
				transition: all 0.3s;
				font-weight: 500;
				color: #666;
			}

			.clear-btn:hover {
				background: var(--gold);
				border-color: var(--gold);
				color: white;
			}

			/* ===== PROJECT CARDS (keeping original style with enhancements) ===== */
			.project-page {
				padding: 50px 0 80px;
			}

			.section-title {
				font-weight: 700;
				text-align: center;
				margin: 60px 0 40px;
				font-size: 2.2rem;
				position: relative;
				font-family: "Poppins", sans-serif;
			}

			.section-title:after {
				content: "";
				display: block;
				width: 60px;
				height: 3px;
				background: var(--gold);
				margin: 15px auto 0;
			}

			.project-card {
				border-radius: 12px;
				overflow: hidden;
				background: #fff;
				transition:
					transform 0.3s ease,
					box-shadow 0.3s ease;
				margin-bottom: 30px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			.project-card:hover {
				transform: translateY(-6px) scale(1.02);
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
			}

			.project-card img {
				width: 100%;
				height: 220px;
				object-fit: cover;
				cursor: pointer;
			}

			.project-card-body {
				padding: 1.5rem 1rem 1rem;
				text-align: center;
				flex-grow: 1;
				display: flex;
				flex-direction: column;
			}

			.project-title {
				font-weight: 700;
				font-size: 1.2rem;
				margin-bottom: 0.3rem;
				color: #222;
			}

			.project-sub {
				color: #666;
				margin-bottom: 0.75rem;
				font-size: 0.9rem;
				text-transform: uppercase;
				letter-spacing: 1px;
			}

			.project-meta {
				display: flex;
				justify-content: center;
				gap: 15px;
				margin: 10px 0;
				font-size: 0.85rem;
				color: #888;
			}

			.project-meta span {
				display: inline-flex;
				align-items: center;
				gap: 4px;
			}

			.project-meta i {
				color: var(--gold);
				font-size: 0.9rem;
			}

			.status-badge {
				display: inline-block;
				padding: 4px 12px;
				border-radius: 30px;
				font-size: 0.75rem;
				font-weight: 600;
				text-transform: uppercase;
				margin-top: auto;
				align-self: center;
			}

			.status-completed {
				background: #e1f7e1;
				color: #2e7d32;
			}

			.status-ongoing {
				background: #fff3e0;
				color: #bf5e00;
			}

			.status-upcoming {
				background: #e3f2fd;
				color: #0d47a1;
			}

			/* Project Viewer Modal (keeping original) */
			.project-viewer {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.9);
				display: none;
				justify-content: center;
				align-items: center;
				z-index: 9999;
				animation: fadeIn 0.3s ease forwards;
			}

			.project-viewer.active {
				display: flex;
			}

			#projectCarousel {
				width: 75%;
				height: 75vh;
				background: #000;
				border-radius: 16px;
				overflow: hidden;
				position: relative;
				box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
				z-index: 2;
			}

			.carousel-item img {
				width: 100%;
				height: 75vh;
				object-fit: contain;
				background-color: #111;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}

			@media (max-width: 768px) {
				#projectCarousel {
					width: 95%;
					height: 60vh;
				}

				.carousel-item img {
					height: 60vh;
				}
			}

			/* === LOGO PRELOADER === */
			#preloder {
				position: fixed;
				width: 100%;
				height: 100%;
				background: #0a0a0a;
				z-index: 99999;
				display: flex;
				align-items: center;
				justify-content: center;
				top: 0;
				left: 0;
			}
			.loader-logo-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 30px;
			}
			.loader-logo {
				width: 200px;
				max-width: 80vw;
				opacity: 0;
				transform: scale(0.85);
				animation: logoReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s
					forwards;
			}
			@keyframes logoReveal {
				to {
					opacity: 1;
					transform: scale(1);
				}
			}
			.loader-bar {
				width: 200px;
				max-width: 80vw;
				height: 3px;
				background: rgba(255, 255, 255, 0.12);
				border-radius: 2px;
				overflow: hidden;
				opacity: 0;
				animation: barFadeIn 0.4s ease 0.7s forwards;
			}
			@keyframes barFadeIn {
				to {
					opacity: 1;
				}
			}
			.loader-bar-inner {
				height: 100%;
				width: 0%;
				background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
				border-radius: 2px;
				animation: barFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.7s
					forwards;
			}
			@keyframes barFill {
				0% {
					width: 0%;
				}
				60% {
					width: 85%;
				}
				100% {
					width: 100%;
				}
			}
			/* === END LOGO PRELOADER === */

			/* Footer styles are defined globally in style.css */

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

			/* Animation */
			.animate-on-scroll {
				opacity: 0;
				transform: translateY(28px);
				transition:
					opacity 0.9s var(--transition),
					transform 0.9s var(--transition);
			}

			.animate-on-scroll.animated {
				opacity: 1;
				transform: translateY(0);
			}