/* ==========================================================================
   ESTEEM CHILD — Design System
   Industrial/engineering design system + Framer Motion animations
   ========================================================================== */

/* ------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ------------------------------------------ */
:root {
	/* Colors -- industrial/engineering palette */
	--color-primary:          #CB3D2E;
	--color-primary-dark:     #a83025;
	--color-primary-light:    #e0665e;
	--color-secondary:        #2F343A;
	--color-accent:           #0FBE7C;
	--color-accent-brass:     #D4A44A;
	--color-blue:             #1E3A5F;
	--color-text:             #555555;
	--color-text-dark:        #1d262f;
	--color-text-light:       #888888;
	--color-heading:          #1d262f;
	--color-bg:               #ffffff;
	--color-bg-alt:           #f0f4f8;
	--color-bg-dark:          #1d262f;
	--color-border:           #dce0e6;
	--color-white:            #ffffff;
	--color-overlay:          rgba(0, 0, 0, 0.4);

	/* Typography -- heading: Space Grotesk, body: Inter, data: JetBrains Mono */
	--font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
	                   Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-heading:   'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont,
	                   'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	--font-mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', 'Fira Mono',
	                   'Roboto Mono', monospace;

	--font-size-xs:    0.75rem;
	--font-size-sm:    0.875rem;
	--font-size-base:  1rem;
	--font-size-lg:    1.125rem;
	--font-size-xl:    1.25rem;
	--font-size-2xl:   1.5rem;
	--font-size-3xl:   2rem;
	--font-size-4xl:   2.75rem;
	--font-size-5xl:   3.5rem;

	--line-height:         1.7;
	--line-height-heading: 1.2;

	/* Spacing scale */
	--spacing-xs:  0.5rem;
	--spacing-sm:  1rem;
	--spacing-md:  2rem;
	--spacing-lg:  4rem;
	--spacing-xl:  6rem;
	--spacing-2xl: 8rem;

	/* Border radius */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   12px;
	--radius-xl:   20px;
	--radius-full: 9999px;

	/* Box shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.10);
	--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-slow: 0.5s ease;

	/* Layout */
	--container-width: 1140px;
	--content-width:   720px;
	--sidebar-width:   340px;
	--header-height:   80px;
}

/* ------------------------------------------
   2. RESET / BASE
   ------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-heading);
	line-height: var(--line-height-heading);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-top: 0;
}

h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

p { margin-top: 0; }

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}
a:hover {
	color: var(--color-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
}

/* Selection */
::selection {
	background: var(--color-primary);
	color: var(--color-white);
}

/* ------------------------------------------
   4. LAYOUT
   ------------------------------------------ */

/* Remove parent's boxed layout */
#page {
	max-width: 100%;
	box-shadow: none;
	background: var(--color-bg);
}

/* Account for fixed header */
body {
	padding-top: var(--header-height);
}

/* Modern container override */
.inner-wrap,
#main.site-main.inner-wrap {
	max-width: var(--container-width);
	width: 100%;
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
	margin: 0 auto;
}

/* Content + sidebar layout — override parent float grid */
#primary {
	float: none;
	width: auto;
}

#content.site-content {
	width: auto;
	float: none;
}

/* Two-column layout using flex */
@media (min-width: 769px) {
	body:not(.no-sidebar-full-width):not(.no-sidebar) #primary {
		width: calc(100% - var(--sidebar-width) - var(--spacing-lg));
		float: left;
	}

	body:not(.no-sidebar-full-width):not(.no-sidebar) #secondary {
		width: var(--sidebar-width);
		float: right;
	}
}

/* Clearfix helper */
.inner-wrap::after,
.hgroup-wrap::after,
.site-content::after {
	content: '';
	display: table;
	clear: both;
}

/* ------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
	transition: all var(--transition-base);
	height: var(--header-height);
	display: flex;
	align-items: center;
}

.site-header .inner-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* Remove parent's extra spacing */
.hgroup-wrap {
	background: none !important;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hgroup-wrap .site-branding {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.hgroup-wrap-right {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

/* Site title / logo */
#site-title {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	margin: 0;
	line-height: 1;
}
#site-title a {
	color: var(--color-heading);
	letter-spacing: -0.03em;
}
#site-title a:hover {
	color: var(--color-primary);
}

.site-description {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin: 0.25rem 0 0;
}

/* Header logo image */
.header-logo-image img {
	max-height: 50px;
	width: auto;
}

/* --- Main navigation --- */
.main-navigation {
	display: flex;
	align-items: center;
}

.main-navigation a {
	color: var(--color-text-dark);
	font-size: var(--font-size-sm);
	font-weight: 500;
	padding: 0.5rem 1rem;
	transition: color var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation li:hover > a,
.main-navigation li.current_page_item > a,
.main-navigation li.current-menu-item > a {
	color: var(--color-primary) !important;
}

/* Drop-down caret fix */
.main-navigation ul ul {
	background: var(--color-white);
	border: none;
	border-top: 3px solid var(--color-primary) !important;
	box-shadow: var(--shadow-lg);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	padding: 0.5rem 0;
}
.main-navigation ul ul a {
	padding: 0.6rem 1.25rem;
}
.main-navigation ul ul li:first-child > a {
	border-top: none;
}
.main-navigation ul ul li:last-child > a {
	border-bottom: none;
}
.main-navigation ul ul li a {
	width: 200px;
}
.main-navigation ul li:hover > ul {
	top: 100%;
}

/* Menu toggle (hamburger) */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--color-text-dark);
}
.menu-toggle::before {
	content: '\f0c9';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 1.25rem;
}

/* Header scrolled state (JS adds .header-scrolled) */
.header-scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
	height: 60px;
}

/* Search icon & form */
.search-top {
	cursor: pointer;
	font-size: 1rem;
	color: var(--color-text-dark);
	transition: color var(--transition-fast);
	padding: 0.5rem;
}
.search-top:hover {
	color: var(--color-primary);
}

.search-form-top {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: var(--color-white);
	border-top: 3px solid var(--color-primary);
	box-shadow: var(--shadow-lg);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	padding: var(--spacing-sm);
	z-index: 999;
	min-width: 280px;
}
.search-form-top.search-active {
	display: block;
}

/* ------------------------------------------
   6. HERO SECTION
   ------------------------------------------ */
.hero-section {
	position: relative;
	padding: var(--spacing-2xl) 0;
	min-height: 70vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--color-bg);
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 650px;
}

.hero-title {
	font-size: var(--font-size-5xl);
	font-weight: 800;
	margin-bottom: var(--spacing-sm);
	line-height: 1.1;
	color: var(--color-heading);
}

.hero-subtitle {
	font-size: var(--font-size-xl);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-md);
	line-height: 1.6;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
}

.hero-image {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------
   7. SECTION STYLES
   ------------------------------------------ */
.section {
	padding: var(--spacing-xl) 0;
}
.section-alt {
	background: var(--color-bg-alt);
}
.section-dark {
	background: var(--color-bg-dark);
	color: var(--color-white);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
	color: var(--color-white);
}

.section-header {
	text-align: center;
	margin-bottom: var(--spacing-lg);
}
.section-header h2 {
	margin-bottom: var(--spacing-sm);
}
.section-header p {
	max-width: 600px;
	margin: 0 auto;
	color: var(--color-text-light);
	font-size: var(--font-size-lg);
}

/* ------------------------------------------
   8. BUTTONS
   ------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	padding: 0.8rem 2.25rem;
	border-radius: var(--radius-md);
	font-weight: 500;
	font-size: var(--font-size-sm);
	line-height: 1.4;
	transition: all var(--transition-base);
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(203, 61, 46, 0.3);
}

.btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}
.btn-primary:hover {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	color: var(--color-white);
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}
.btn-outline:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-light {
	background: var(--color-white);
	color: var(--color-primary);
}
.btn-light:hover {
	background: var(--color-bg-alt);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.btn-lg {
	padding: 1rem 3rem;
	font-size: var(--font-size-base);
}

/* ------------------------------------------
   9. CARDS
   ------------------------------------------ */
.card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--spacing-md);
	transition: all var(--transition-base);
}
.card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}
.card-image {
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	overflow: hidden;
}
.card-body {
	padding: var(--spacing-sm) 0;
}
.card-title {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-xs);
}
.card-text {
	color: var(--color-text-light);
	font-size: var(--font-size-sm);
}

/* ------------------------------------------
   10. TESTIMONIALS
   ------------------------------------------ */
.testimonial-card {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--spacing-md);
	box-shadow: var(--shadow-sm);
	position: relative;
}
.testimonial-card::before {
	content: '\201C';
	font-size: 4rem;
	color: var(--color-primary);
	opacity: 0.2;
	position: absolute;
	top: var(--spacing-sm);
	left: var(--spacing-md);
	line-height: 1;
	font-family: Georgia, serif;
}
.testimonial-text {
	font-style: italic;
	margin-bottom: var(--spacing-sm);
	padding-top: var(--spacing-md);
}
.testimonial-author {
	font-weight: 600;
	color: var(--color-heading);
	font-size: var(--font-size-sm);
}
.testimonial-role {
	font-size: var(--font-size-xs);
	color: var(--color-text-light);
}

/* ------------------------------------------
   11. CTA SECTION
   ------------------------------------------ */
.cta-section {
	padding: var(--spacing-xl) 0;
	text-align: center;
	background: linear-gradient(135deg,
		var(--color-primary),
		var(--color-primary-dark)
	);
	color: var(--color-white);
	border-radius: var(--radius-lg);
}
.cta-section h2,
.cta-section p {
	color: var(--color-white);
}
.cta-section p {
	opacity: 0.9;
	margin-bottom: var(--spacing-md);
}

/* ------------------------------------------
   12. FORMS
   ------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 2px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	background: var(--color-white);
	color: var(--color-text);
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	width: 100%;
	max-width: 100%;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(203, 61, 46, 0.15);
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-md);
	padding: 0.8rem 2rem;
	font-size: var(--font-size-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--transition-base);
	font-family: var(--font-primary);
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* ------------------------------------------
   13. PROMO BOX (parent theme override)
   ------------------------------------------ */
#promo-box {
	background: var(--color-primary) !important;
	padding: var(--spacing-lg) 0 !important;
}
.promo-title {
	font-size: var(--font-size-3xl) !important;
	font-weight: 700 !important;
	color: var(--color-white);
}
.promo-text {
	font-size: var(--font-size-lg) !important;
	color: rgba(255, 255, 255, 0.9) !important;
}
.promo-action {
	background: rgba(255, 255, 255, 0.2) !important;
	color: var(--color-white) !important;
	border-radius: var(--radius-md) !important;
	padding: 0.75rem 2rem !important;
	font-weight: 500 !important;
	transition: background var(--transition-base) !important;
}
.promo-action:hover {
	background: rgba(255, 255, 255, 0.35) !important;
}

/* ------------------------------------------
   14. WIDGET OVERRIDES (parent theme widgets)
   ------------------------------------------ */

/* Service widget — card grid */
.services-block {
	margin: 0;
}
.services-block .tg-one-third {
	float: none;
	width: auto;
	padding: 0;
	margin-bottom: var(--spacing-md);
}
@media (min-width: 769px) {
	.services-block {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-md);
	}
}
.service-border {
	border: 3px solid var(--color-primary) !important;
	border-radius: var(--radius-full);
	background: var(--color-white);
	transition: all var(--transition-base);
}
.services-block:hover .service-border {
	background: var(--color-primary);
	color: var(--color-white);
}
.service-image-wrap {
	font-size: 2rem;
	text-align: center;
	padding: var(--spacing-sm);
}
.service-title a {
	color: var(--color-heading) !important;
	font-weight: 600;
}
.service-title a:hover {
	color: var(--color-primary) !important;
}

/* Recent work / featured widget */
.recent-work {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--spacing-md);
}
.recent-work .tg-one-fourth {
	float: none;
	width: auto;
	padding: 0;
	margin: 0;
}
.recent-work .tg-one-fourth figure {
	margin: 0;
}
.recent-work .tg-one-fourth img {
	border-radius: var(--radius-md);
	transition: transform var(--transition-base);
}
.recent-work .tg-one-fourth:hover img {
	transform: scale(1.05);
}

/* CTA widget */
.call-to-action-wrap {
	text-align: center;
	padding: var(--spacing-lg) 0;
}
.call-to-action-button {
	background: var(--color-primary) !important;
	border-radius: var(--radius-md) !important;
	padding: 0.8rem 2.25rem !important;
	font-weight: 500 !important;
	transition: all var(--transition-base) !important;
}
.call-to-action-button:hover {
	background: var(--color-primary-dark) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* About/description text widget in widget areas */
.widget {
	margin-bottom: var(--spacing-lg);
}
.widget-title {
	font-size: var(--font-size-2xl);
	margin-bottom: var(--spacing-md);
	position: relative;
}
#secondary .widget-title span,
#colophon .widget-title span {
	border-bottom: 2px solid var(--color-primary) !important;
	padding-bottom: 0.5rem;
}

.widget ul li a {
	color: var(--color-text);
	font-size: var(--font-size-sm);
	transition: color var(--transition-fast);
}
.widget ul li a:hover {
	color: var(--color-primary) !important;
	padding-left: 4px;
}

/* ------------------------------------------
   15. PAGE TITLE BAR
   ------------------------------------------ */
.page-title-bar {
	background: var(--color-bg-alt) !important;
	padding: var(--spacing-md) 0 !important;
	margin-top: 0;
}
.page-title-wrap h1,
.page-title-wrap h2 {
	font-size: var(--font-size-3xl);
	margin: 0;
}

/* Breadcrumbs */
.breadcrumb {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-top: var(--spacing-xs);
}
.breadcrumb a {
	color: var(--color-primary);
}

/* ------------------------------------------
   16. BLOG / POST OVERRIDES
   ------------------------------------------ */
.post-featured-image {
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.blog-large .post-featured-image,
.blog-medium .post-featured-image,
.category .post-featured-image,
.search .post-featured-image {
	border-bottom: 4px solid var(--color-primary) !important;
}

.entry-title {
	font-size: var(--font-size-3xl);
}
.entry-title a {
	color: var(--color-heading);
}
.entry-title a:hover {
	color: var(--color-primary);
}

.entry-meta-bar {
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	margin-bottom: var(--spacing-md);
}
.entry-meta {
	color: var(--color-text-light);
	font-size: var(--font-size-sm);
}

/* ------------------------------------------
   17. FOOTER
   ------------------------------------------ */
#colophon {
	border-top: 3px solid var(--color-primary) !important;
	background: var(--color-secondary);
	color: rgba(255, 255, 255, 0.8);
}
#colophon .widget-title {
	color: var(--color-white);
}
#colophon .widget ul li a,
#colophon a {
	color: rgba(255, 255, 255, 0.7);
}
#colophon .widget ul li a:hover,
#colophon a:hover {
	color: var(--color-primary-light);
}

.footer-widgets {
	padding: var(--spacing-lg) 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom {
	padding: var(--spacing-md) 0;
	text-align: center;
	font-size: var(--font-size-sm);
}
#site-generator {
	color: rgba(255, 255, 255, 0.6);
	font-size: var(--font-size-sm);
}

/* ------------------------------------------
   18. SCROLL-UP BUTTON
   ------------------------------------------ */
#scroll-up {
	background: var(--color-primary) !important;
	border-radius: var(--radius-full) !important;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: 30px;
	right: 30px;
	z-index: 999;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-base);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
}
#scroll-up.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#scroll-up i {
	color: var(--color-white);
	font-size: 1.25rem;
	line-height: 1;
}
#scroll-up:hover {
	background: var(--color-primary-dark) !important;
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}

/* ------------------------------------------
   19. PAGE LOADER
   ------------------------------------------ */
#page-loader {
	position: fixed;
	inset: 0;
	background: var(--color-white);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.loader-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: loader-spin 0.8s linear infinite;
}
@keyframes loader-spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------
   20. COUNTER
   ------------------------------------------ */
.counter-number {
	font-size: var(--font-size-4xl);
	font-weight: 800;
	color: var(--color-primary);
	line-height: 1;
}
.counter-label {
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	margin-top: var(--spacing-xs);
}

/* ------------------------------------------
   21. PROGRESS BAR
   ------------------------------------------ */
.progress-bar {
	background: var(--color-border);
	border-radius: var(--radius-full);
	height: 8px;
	overflow: hidden;
}
.progress-bar-fill {
	height: 100%;
	border-radius: var(--radius-full);
	background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
	width: 0;
	transition: width 0.1s linear;
}

/* ------------------------------------------
   22. ANIMATION HOOK CLASSES (for GSAP)
   ------------------------------------------ */
.reveal-up,
.reveal-stagger > *,
.reveal-scale,
.reveal-left,
.reveal-right {
	will-change: transform, opacity;
}

/* ------------------------------------------
   23. SMOOTH SCROLL WRAPPER
   ------------------------------------------ */
#smooth-wrapper {
	width: 100%;
}

/* ------------------------------------------
   24. FOOTER SIDEBAR GRID
   ------------------------------------------ */
.footer-widgets .widget-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-md);
}
.footer-widgets .widget {
	margin-bottom: 0;
}

/* ------------------------------------------
   25. WOOCOMMERCE OVERRIDES (minimal)
   ------------------------------------------ */
.woocommerce ul.products li.product .price .amount,
.entry-summary .price .amount,
.woocommerce .woocommerce-message::before,
.count {
	color: var(--color-primary) !important;
}
.woocommerce .woocommerce-message {
	border-top-color: var(--color-primary) !important;
}

/* ------------------------------------------
   26. IMAGE REVEAL (clip-path)
   ------------------------------------------ */
.image-reveal {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.image-reveal.revealed {
	clip-path: inset(0);
}

/* ------------------------------------------
   27. GRADIENT TEXT
   ------------------------------------------ */
.text-gradient {
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ------------------------------------------
   28. FONT AWESOME 3.2.1 → 6 MAPPING
    Maps parent theme's icon-* class names to
    Font Awesome 6 Free equivalents.
   ------------------------------------------ */
.icon-search::before       { content: '\f002'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-user::before         { content: '\f007'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-time::before         { content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-tag::before          { content: '\f02b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-comment-alt::before  { content: '\f075'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-pencil::before       { content: '\f303'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-angle-up::before     { content: '\f106'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-caret-down::before   { content: '\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.icon-caret-up::before     { content: '\f0d8'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }

/* ------------------------------------------

/* ------------------------------------------
   29. BLUEPRINT GRID (signature background)
   ------------------------------------------ */
.blueprint-grid {
	position: relative;
	background-color: var(--color-blue);
	background-image:
		/* Horizontal grid lines */
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 39px,
			rgba(255, 255, 255, 0.07) 39px,
			rgba(255, 255, 255, 0.07) 40px
		),
		/* Vertical grid lines */
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 39px,
			rgba(255, 255, 255, 0.07) 39px,
			rgba(255, 255, 255, 0.07) 40px
		);
}

.blueprint-grid::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		/* Diagonal crosshatch */
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 79px,
			rgba(255, 255, 255, 0.04) 79px,
			rgba(255, 255, 255, 0.04) 80px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 79px,
			rgba(255, 255, 255, 0.04) 79px,
			rgba(255, 255, 255, 0.04) 80px
		);
	pointer-events: none;
}

.blueprint-grid .inner-wrap {
	position: relative;
	z-index: 1;
}

.blueprint-grid h1,
.blueprint-grid h2,
.blueprint-grid h3,
.blueprint-grid h4,
.blueprint-grid h5,
.blueprint-grid h6,
.blueprint-grid p {
	color: var(--color-white);
}

.blueprint-grid .hero-subtitle {
	color: rgba(255, 255, 255, 0.7);
}

.blueprint-grid .btn-primary {
	background: var(--color-accent-brass);
	color: var(--color-blue);
}
.blueprint-grid .btn-primary:hover {
	background: #c99a3d;
	color: var(--color-blue);
}
.blueprint-grid .btn-outline {
	border-color: var(--color-white);
	color: var(--color-white);
}
.blueprint-grid .btn-outline:hover {
	background: var(--color-white);
	color: var(--color-blue);
	border-color: var(--color-white);
}

/* Blueprint accent line (decorative) */
.blueprint-accent {
	position: relative;
	padding-left: 1.25rem;
}
.blueprint-accent::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 3px;
	height: 1.25em;
	background: var(--color-accent-brass);
	border-radius: 2px;
}

/* ------------------------------------------
   30. TECH STATS STRIP
   ------------------------------------------ */
.tech-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-lg);
	justify-content: center;
	padding: var(--spacing-md) 0;
}

.tech-stat {
	text-align: center;
}

.tech-stat-value {
	font-family: var(--font-mono);
	font-size: var(--font-size-4xl);
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
	letter-spacing: -0.02em;
}

.tech-stat-label {
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: var(--spacing-xs);
}

.tech-stat-divider {
	width: 2px;
	height: 40px;
	background: var(--color-border);
	align-self: center;
}

/* Stats on dark / blueprint backgrounds */
.blueprint-grid .tech-stat-value {
	color: var(--color-accent-brass);
}
.blueprint-grid .tech-stat-label {
	color: rgba(255, 255, 255, 0.6);
}
.blueprint-grid .tech-stat-divider {
	background: rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------
   31. GRADIENT TEXT (enhanced)
   ------------------------------------------ */
.text-gradient-brass {
	background: linear-gradient(135deg, var(--color-accent-brass), #e6b95a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ------------------------------------------
   32. MOBILE RESPONSIVE (base — extensive in separate file)
   ------------------------------------------ */
@media (max-width: 768px) {
	h1 { font-size: var(--font-size-4xl); }
	h2 { font-size: var(--font-size-3xl); }
	h3 { font-size: var(--font-size-2xl); }

	.hero-title { font-size: var(--font-size-4xl); }

	.site-header .inner-wrap {
		flex-wrap: wrap;
	}

	.hgroup-wrap {
		flex-wrap: wrap;
	}

	.menu-toggle {
		display: block;
	}

	/* Slide-in mobile nav drawer */
	.main-navigation .nav-menu {
		position: fixed;
		top: 0;
		right: -100%;
		width: 300px;
		height: 100vh;
		background: var(--color-white);
		box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
		transition: right var(--transition-base);
		padding: calc(var(--header-height) + var(--spacing-sm)) var(--spacing-md) var(--spacing-md);
		overflow-y: auto;
		z-index: 999;
		display: block;
	}
	.main-navigation .nav-menu.nav-open {
		right: 0;
	}
	body.menu-open::after {
		content: '';
		position: fixed;
		inset: 0;
		background: var(--color-overlay);
		z-index: 998;
	}

	.main-navigation ul li {
		float: none;
	}
	.main-navigation ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: none;
		padding-left: var(--spacing-sm);
	}
	.main-navigation ul ul a {
		width: auto;
	}

	.services-block {
		grid-template-columns: 1fr;
	}

	.recent-work {
		grid-template-columns: 1fr;
	}

	.tech-stats {
		gap: var(--spacing-md);
	}
	.tech-stat-divider {
		display: none;
	}
}