/*
 * MAAGIR WordPress – Theme Layer CSS
 *
 * Loaded on BOTH frontend (wp_enqueue_scripts) and inside the Gutenberg
 * editor iframe (add_editor_style). Must therefore contain NO animation
 * initial-states (opacity: 0, scaleY: 0, etc.) which are only meant for
 * the frontend GSAP experience.
 *
 * @package MaagirWordPress
 */

/* =========================================================================
   1. Root Variables & Reset
   ========================================================================= */
:root {
	/* Fluid Typography (Figma Pixel-Perfect) */
	--font-huge: clamp(3rem, 9vw, 15rem);
	--font-h1: clamp(2.5rem, 6vw, 10rem);
	--font-h2: clamp(2rem, 4vw, 7rem);
	--font-h3: clamp(1.5rem, 2.5vw, 4rem);
	--font-body: clamp(1rem, 1.2vw, 2.5rem);
	--font-small: clamp(0.8rem, 0.9vw, 1.8rem);

	/* Fluid Spacing & Containers */
	--pad-x: clamp(1.5rem, 6vw, 12rem);
	--pad-y: clamp(3rem, 10vh, 8rem);
	--pad-card: clamp(1.5rem, 3.5vw, 6rem);
	--pad-card-lg: clamp(2.5rem, 5vw, 9rem);

	--gap-sm: clamp(1rem, 2vw, 3rem);
	--gap-md: clamp(1.5rem, 3vw, 5rem);
	--gap-lg: clamp(2rem, 5vw, 8rem);

	--radius-md: clamp(1rem, 2vw, 3rem);
	--radius-lg: clamp(1.5rem, 3vw, 4.5rem);
	--radius-xl: clamp(2rem, 4vw, 6rem);
	--radius-full: 9999px;

	/* Brand Color Palette */
	--bg-light: #f0efea;
	--bg-alt: #e6e5df;
	--brand-sand: #edeae2;
	--brand-dark: #24362f;
	--brand-darker: #1a2722;
	--brand-gold: #edeae2;
	--text-dark: #1b2420;
	--text-gray: #727b76;
}

/* Global Reset & Body */
body {
	font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: var(--bg-light);
	color: var(--text-dark);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

body::-webkit-scrollbar {
	display: none;
}

/* Utility to hide scrollbar on any element */
.hide-scrollbar {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
	display: none;
}

h1, h2, h3, h4, h5, h6,
.text-huge, .text-h1, .text-h2, .text-h3, .text-badge {
	font-family: "Outfit", sans-serif;
}

/* =========================================================================
   2. Standard Layout Helpers
   ========================================================================= */
.pad-x {
	padding-left: var(--pad-x);
	padding-right: var(--pad-x);
}
.pad-y {
	padding-top: var(--pad-y);
	padding-bottom: var(--pad-y);
}

/* =========================================================================
   3. Typography Utility Layer
   ========================================================================= */
.text-huge { font-size: var(--font-huge); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.text-h1 { font-size: var(--font-h1); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
.text-h2 { font-size: var(--font-h2); line-height: 1.1; letter-spacing: -0.02em; font-weight: 600; }
.text-h3 { font-size: var(--font-h3); line-height: 1.2; letter-spacing: -0.01em; font-weight: 500; }
.text-body { font-size: var(--font-body); line-height: 1.5; color: var(--text-gray); }
.text-small { font-size: var(--font-small); line-height: 1.4; color: var(--text-gray); }
.text-badge { font-size: clamp(0.7rem, 0.85vw, 1rem); line-height: 1.4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; }

.text-brand-sand { color: var(--brand-sand) !important; }
.text-brand-sand-80 { color: rgba(237, 234, 226, 0.8) !important; }
.text-brand-sand-60 { color: rgba(237, 234, 226, 0.6) !important; }
.text-brand-gold { color: var(--brand-gold) !important; }

/* =========================================================================
   4. Interactive Components (Buttons)
   ========================================================================= */
.btn-apple {
	background-color: var(--brand-dark);
	color: var(--brand-sand);
	padding: 0.8em 1.6em;
	border-radius: var(--radius-full);
	font-size: var(--font-small);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	border: 1px solid transparent;
}

.btn-apple.btn-light {
	background-color: var(--brand-sand);
	color: var(--brand-darker);
}

.btn-apple.btn-light:hover { background-color: #ffffff; }

.btn-apple::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 150%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	transform: skewX(-20deg);
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
	z-index: 10;
}

.btn-apple.btn-light::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent); }

.btn-apple:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.15);
}

.btn-apple:hover::after { left: 150%; }

.btn-apple:active {
	transform: translateY(0) scale(0.97);
	box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.1);
	transition-duration: 0.1s;
}

.btn-apple-secondary {
	background: transparent;
	color: var(--brand-darker);
	border: 1px solid rgba(26, 39, 34, 0.2);
	box-shadow: none;
	padding: 0.8em 1.6em;
	border-radius: var(--radius-full);
	font-size: var(--font-small);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
}

.btn-apple-secondary:hover {
	background: rgba(26, 39, 34, 0.05);
	border-color: rgba(26, 39, 34, 0.4);
	transform: translateY(-2px);
}

.btn-apple-secondary.btn-light {
	color: var(--brand-sand);
	border-color: rgba(237, 234, 226, 0.3);
}

.btn-apple-secondary.btn-light:hover {
	background: rgba(237, 234, 226, 0.08);
	border-color: rgba(237, 234, 226, 0.6);
}

/* =========================================================================
   5. Floating Glass Navigation
   ========================================================================= */
header#site-header {
	position: fixed;
	top: 1.5rem;
	left: 0;
	width: 100%;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	pointer-events: none;
}

header {
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

header.nav-hidden {
	opacity: 0;
	transform: translateY(-30px);
}

header.nav-hidden #main-nav {
	pointer-events: none !important;
}

.glass-nav {
	background: rgba(240, 239, 234, 0.5);
	backdrop-filter: saturate(200%) blur(32px);
	-webkit-backdrop-filter: saturate(200%) blur(32px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), inset 0 1px 1.5px rgba(255, 255, 255, 0.5);
	transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-nav.nav-dark {
	background: rgba(18, 29, 25, 0.65);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 20px 48px rgba(6, 11, 10, 0.16), inset 0 1px 1.5px rgba(255, 255, 255, 0.18);
	color: white;
}

.glass-nav.nav-light {
	background: rgba(240, 239, 234, 0.48);
	border-color: rgba(255, 255, 255, 0.26);
	box-shadow: 0 18px 40px rgba(12, 18, 17, 0.05), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
	color: var(--text-dark);
}

.nav-dark .btn-apple { background-color: var(--bg-light); color: var(--text-dark); }
.nav-dark .btn-apple::after { background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent); }

.glass-nav.nav-dark.nav-at-top { background: rgba(18, 29, 25, 0.45); border-color: rgba(255, 255, 255, 0.08); }
.glass-nav.nav-light.nav-at-top { background: rgba(240, 239, 234, 0.3); border-color: rgba(255, 255, 255, 0.2); }

/* Header Dropdown Menu Open & Hamburger Transitions */
#main-nav.dropdown-open {
	border-color: rgba(255, 255, 255, 0.22) !important;
	box-shadow: 
		0 28px 64px rgba(0, 0, 0, 0.4), 
		inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
	background-color: rgba(18, 29, 25, 0.95) !important;
	background-image: none !important;
	color: #ffffff !important;
}

.hamburger-line {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}
#menu-toggle.is-open .hamburger-line:nth-child(1) {
	transform: translateY(4.25px) rotate(45deg);
}
#menu-toggle.is-open .hamburger-line:nth-child(2) {
	opacity: 0;
}
#menu-toggle.is-open .hamburger-line:nth-child(3) {
	transform: translateY(-4.25px) rotate(-45deg);
}

/* =========================================================================
   6. Preloader
   ========================================================================= */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--brand-darker);
	color: #fff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}

/* =========================================================================
   7. Hero Section Extras
   ========================================================================= */
#hero-description, #hero-ctas, .hero-metric-label, .hero-metric-number { will-change: transform, opacity; }
.metric-divider { transform: scaleY(0); transform-origin: bottom; will-change: transform; }
#hero-bg-container, #hero-bg-image-wrapper, #hero-bg-image { transform-origin: center center; will-change: transform; }



/* =========================================================================
   10. C.O.R.E Framework Cards
   ========================================================================= */
#core-framework { --core-radius: clamp(1rem, 1.3vw, 1.35rem); }

/* General Item Base (used in Partners too) */
.core-item {
	background: var(--bg-alt);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(237, 234, 226, 0.16)), var(--bg-alt);
	border: 1px solid rgba(27, 36, 32, 0.08);
	box-shadow: 0 22px 50px rgba(27, 36, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

/* Homepage Variation (Square Revealed Cards) */
.core-card {
	aspect-ratio: 1 / 1;
}

.core-item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 22%, rgba(216, 170, 104, 0.12), transparent 38%),
				linear-gradient(155deg, #2e493f 0%, var(--brand-dark) 58%, #16251f 100%);
	opacity: 0;
	transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

.core-item:hover, .core-item:focus-within, #core-framework.core-revealed .core-item {
	transform: translateY(-4px);
	box-shadow: 0 38px 80px -24px rgba(14, 24, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
}

.core-item:hover::after, .core-item:focus-within::after, #core-framework.core-revealed .core-item::after { opacity: 1; }

.core-bg-letter {
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	color: rgba(27, 36, 32, 0.06);
	pointer-events: none;
	z-index: 0;
	transition: opacity 0.5s ease;
}

.core-card .core-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.core-item:hover .core-bg-letter,
.core-item:focus-within .core-bg-letter,
#core-framework.core-revealed .core-bg-letter {
	opacity: 0;
}

.core-card .core-text-primary,
.core-card .core-text-secondary {
	opacity: 0;
	transition: all 0.65s cubic-bezier(0.19, 1, 0.22, 1);
}

.core-item:hover .core-text-primary,
.core-item:focus-within .core-text-primary,
#core-framework.core-revealed .core-item .core-text-primary {
	color: #ffffff !important;
	opacity: 1;
}

.core-item:hover .core-text-secondary,
.core-item:focus-within .core-text-secondary,
#core-framework.core-revealed .core-item .core-text-secondary {
	color: rgba(255, 255, 255, 0.7) !important;
	opacity: 1;
}

/* Reveal Toggle Switch */
.core-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 3.25rem;
	height: 1.85rem;
	padding: 0.2rem;
	border: 1px solid rgba(27, 36, 32, 0.22);
	border-radius: 9999px;
	background: rgba(27, 36, 32, 0.12);
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.core-toggle-indicator {
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 9999px;
	background: var(--brand-dark);
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#core-framework.core-revealed .core-toggle {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

#core-framework.core-revealed .core-toggle-indicator {
	transform: translateX(1.4rem);
	background: var(--brand-sand);
}

.core-transition {
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   11. Lenis Smooth Scroll Integration
   ========================================================================= */
html.lenis, html.lenis body { height: auto; }
.lenis-smooth { scroll-behavior: auto !important; }
.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis-stopped { overflow: hidden; }
.lenis-scrolling iframe { pointer-events: none; }

/* =========================================================================
   12. Solutions (Performance Metrics)
   ========================================================================= */
#solutions { position: relative; z-index: 10; }
#solutions::before {
	content: "";
	position: absolute;
	top: -15vh;
	left: 0;
	width: 100%;
	height: 35vh;
	background: linear-gradient(to bottom, transparent, var(--brand-darker) 15vh, transparent);
	pointer-events: none;
	z-index: 25;
}

#solutions-focus-window {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90vw;
	height: 90vh;
	-webkit-clip-path: inset(50% 50% 50% 50% round 32px);
	clip-path: inset(50% 50% 50% 50% round 32px);
	transform-origin: center center;
	will-change: transform, clip-path;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.solutions-slide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background-color: #121212; will-change: transform; }
.solutions-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; will-change: transform; transform: scale(1.2); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.solutions-slide[data-slide-index='1'] .solutions-slide-bg { transform: scale(1.2) translateY(-10%); }
.solutions-slide-content { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; display: flex; flex-direction: column; justify-content: center; will-change: transform; }
.solutions-slide-text { font-size: clamp(1.8rem, 3.2vw, 4.5rem) !important; line-height: 1.375 !important; letter-spacing: -0.02em !important; }

/* =========================================================================
   13. Comparison Section Styles
   ========================================================================= */
#blogs {
	position: relative;
	transition: background-color 0.8s ease;
}
.comparison-flow-line {
	background-color: rgba(255, 255, 255, 0.08);
}
.reveal-title {
	will-change: transform;
}
.river-flow-item {
	will-change: transform, opacity;
}
.bullet-absolute-item {
	font-style: italic !important;
	font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
	font-weight: 500 !important;
	position: absolute;
	top: var(--desk-top);
	left: var(--desk-left);
	max-width: 240px;
	white-space: normal;
}
.challenge-slide .bullet-absolute-item {
	color: var(--brand-sand) !important;
}
.challenge-slide .reveal-title {
	color: var(--brand-sand) !important;
}
.solution-slide .bullet-absolute-item {
	color: var(--text-dark) !important;
}
.solution-slide .reveal-title {
	color: #000000 !important;
}

@media (min-width: 1024px) {
	.bullet-absolute-item {
		max-width: none;
		white-space: nowrap;
		font-size: clamp(1.1rem, 1.3vw, 1.8rem) !important;
	}
}

@media (max-width: 1023px) {
	.comparison-title-wrap {
		position: static !important;
		transform: none !important;
		width: 100% !important;
		margin-bottom: 2rem !important;
		left: auto !important;
		bottom: auto !important;
	}
	.bullets-flow-container {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1.25rem !important;
		padding: 0 !important;
	}
	.bullet-absolute-item {
		position: static !important;
		top: auto !important;
		left: auto !important;
		max-width: 100% !important;
		white-space: normal !important;
		font-size: clamp(1.15rem, 3.6vw, 1.5rem) !important;
		text-align: left !important;
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
	}
	.comparison-slide {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;
		padding: 0 1rem !important;
	}
}

.comparison-slides-viewport {
	max-width: 100%;
}

#comparison-card-panel {
	padding: clamp(0.75rem, 2.2vw, 5rem);
	overflow: hidden;
}

#comparison-card-panel .comparison-panel-inner {
	width: min(100%, clamp(72rem, 94vw, 210rem));
	height: auto;
	min-height: auto;
	max-height: none;
	display: grid;
	grid-template-columns: minmax(0, 2.45fr) minmax(clamp(18rem, 20vw, 42rem), 0.92fr);
	gap: clamp(0.9rem, 1.3vw, 2.6rem);
	align-items: stretch;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Comparison block styles relocated to block-specific scope or handled via Tailwind utilities */

.without-maagir .comparison-plan-subcopy {
	color: rgba(27, 36, 32, 0.52);
}

.comparison-plan-divider {
	height: 1px;
	width: 100%;
	margin: clamp(0.85rem, 1.15vw, 2rem) 0;
}

.with-maagir .comparison-plan-divider {
	background: rgba(255, 255, 255, 0.16);
}

.without-maagir .comparison-plan-divider {
	background: rgba(27, 36, 32, 0.1);
}

.comparison-feature-list {
	display: flex;
	flex-direction: column;
	gap: clamp(0.62rem, 0.76vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.comparison-feature-list li {
	display: grid;
	grid-template-columns: clamp(1.05rem, 1.05vw, 1.7rem) minmax(0, 1fr);
	gap: clamp(0.56rem, 0.65vw, 1rem);
	align-items: start;
	font-size: clamp(0.84rem, 0.86vw, 1.32rem);
	line-height: 1.35;
}

.comparison-feature-list li::before {
	content: "✓";
	width: clamp(1.05rem, 1.05vw, 1.7rem);
	height: clamp(1.05rem, 1.05vw, 1.7rem);
	border-radius: 9999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(0.62rem, 0.58vw, 0.9rem);
	font-weight: 900;
}

.with-maagir .comparison-feature-list li {
	color: rgba(255, 255, 255, 0.86);
}

.with-maagir .comparison-feature-list li::before {
	color: var(--brand-darker);
	background: #ffffff;
}

.without-maagir .comparison-feature-list li {
	color: rgba(27, 36, 32, 0.62);
}

.without-maagir .comparison-feature-list li::before {
	content: "—";
	color: rgba(27, 36, 32, 0.48);
	background: rgba(27, 36, 32, 0.08);
}

.comparison-plan-action {
	flex-shrink: 0;
	margin-top: clamp(1.25rem, 1.8vw, 3rem);
	width: 100%;
	border-radius: 9999px;
	padding: clamp(0.82rem, 0.9vw, 1.35rem) clamp(0.9rem, 1vw, 1.6rem);
	text-align: center;
	font-weight: 800;
	font-size: clamp(0.76rem, 0.78vw, 1.2rem);
	letter-spacing: 0.02em;
	text-decoration: none;
}

.with-maagir .comparison-plan-action {
	color: var(--brand-darker);
	background: #ffffff;
	margin-top: auto;
}

.with-maagir .comparison-feature-list {
	margin-bottom: clamp(1rem, 1.5vw, 2.5rem);
}

/* =========================================================================
   14. Structured Path (Process) Section Styles
   ========================================================================= */
#process.process-hww-section {
	padding: 0 !important;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	contain: layout paint;
	transform: translateZ(0);
	backface-visibility: hidden;
}

#process-hww-title-wrap {
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
	container-type: inline-size;
}

#process-hww-content,
#process-hww-grid {
	will-change: transform;
	backface-visibility: hidden;
}

#process .process-hww-title {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: visible;
	font-family: "Outfit", sans-serif;
	font-size: clamp(2.15rem, 25cqw, 4.35rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 0.86;
	transform: translateZ(0);
	backface-visibility: hidden;
}

#process .process-hww-title span {
	display: block;
	white-space: nowrap;
}

#process #process-hww-middle-line {
	background: rgba(237, 234, 226, 0.35);
	pointer-events: none;
}

#process .process-hww-media {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: clamp(0.75rem, 1vw, 1.15rem);
	border: 1px solid rgba(237, 234, 226, 0.1);
	background: var(--brand-dark);
	box-shadow: 0 18px 44px rgba(6, 11, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	isolation: isolate;
}

#process .process-hww-card {
	container-type: inline-size;
}

#process .process-hww-heading-row {
	display: flex;
	align-items: baseline;
	min-width: 0;
}

#process .process-hww-step-title {
	display: flex;
	align-items: baseline;
	gap: clamp(0.45rem, 0.65vw, 0.8rem);
	width: 100%;
	min-width: 0;
	white-space: nowrap;
	font-family: "Outfit", sans-serif;
	font-size: clamp(1.35rem, 14cqw, 2.7rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 0.92;
	color: var(--brand-sand);
}

#process .process-hww-number {
	flex: 0 0 auto;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

#process .process-hww-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to top, rgba(26, 39, 34, 0.72), transparent 62%), radial-gradient(circle at 50% 18%, rgba(216, 170, 104, 0.14), transparent 36%);
}

#process .process-hww-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.82;
	filter: contrast(1.08) saturate(0.88) brightness(0.82);
	transform: scale(1.04);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease;
}

#process .process-hww-card:hover .process-hww-media img {
	opacity: 0.95;
	transform: scale(1.1);
}

@media (min-width: 769px) {
	#process-hww-title-wrap {
		padding-right: clamp(0.25rem, 1vw, 1.25rem) !important;
	}
}

@media (max-width: 768px) {
	#process-hww-title-container {
		display: none !important;
	}

	#process .process-hww-title {
		font-size: clamp(3rem, 16vw, 6.5rem);
	}

	#process .process-hww-media {
		aspect-ratio: 16 / 9;
		width: 100%;
		max-height: none;
	}

	#process-hww-content {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#process-hww-grid > .process-hww-card:first-of-type {
		padding-left: clamp(2.5rem, 12vw, 5.5rem) !important;
		width: calc(100vw - 24px + clamp(1.75rem, 12vw - 12px, 4.75rem)) !important;
	}
}

/* =========================================================================
   15. Intro / About leadership feature
   ========================================================================= */
#about {
	padding-top: clamp(4.5rem, 10vh, 13rem);
	padding-bottom: clamp(4.5rem, 10vh, 13rem);
	isolation: isolate;
}

.about-feature-grid {
	width: 100%;
	max-width: clamp(68rem, 88vw, 136rem);
	min-height: clamp(34rem, 62vh, 56rem);
}

.about-copy {
	gap: clamp(1.35rem, 2vw, 2.25rem);
}

.about-wow-title,
.about-wow-copy,
.about-wow-button,
.about-image-stage {
	will-change: transform, opacity;
}

.about-image-stage {
	perspective: 1400px;
	transform-style: preserve-3d;
}

.about-image-card {
	transform-origin: center center;
	will-change: transform, clip-path, opacity;
	box-shadow: none;
}

.about-image-img {
	opacity: 0.88;
	transform-origin: center center;
	will-change: transform, filter;
}

.about-image-vignette {
	background:
		radial-gradient(
			circle at 50% 28%,
			transparent 0 36%,
			rgba(26, 39, 34, 0.22) 72%,
			rgba(26, 39, 34, 0.58) 100%
		),
		linear-gradient(180deg, rgba(26, 39, 34, 0.02), rgba(26, 39, 34, 0.32));
}

.about-image-glow {
	position: absolute;
	inset: 8% -10% -8% 12%;
	z-index: -1;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(216, 170, 104, 0.22), transparent 62%);
	filter: blur(34px);
	opacity: 0;
	transform: scale(0.82);
	will-change: transform, opacity;
}

.about-image-shine {
	z-index: 4;
	opacity: 0;
	transform: translateX(-140%) rotate(12deg);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.32),
		transparent
	);
	filter: blur(1px);
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

@media (max-width: 1023px) {
	.about-feature-grid {
		max-width: min(100%, 46rem);
		min-height: 0;
	}

	.about-wow-title {
		max-width: 13ch;
	}

	.about-image-stage {
		justify-self: stretch;
		max-width: min(100%, 34rem);
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	#about {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.about-copy {
		gap: 1.15rem;
	}
}

/* =========================================================================
   16. Featured Articles / Blogs Section
   ========================================================================= */
/* =========================================================================
   6. Block-Specific Support
   ========================================================================= */

/* Parallax Gallery (About Page) */
/* FAQ Accordion */
.faq-item {
	border-bottom: 1px solid rgba(237, 234, 226, 0.12);
}
.faq-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.8rem 0;
	background: transparent;
	border: none;
	color: var(--brand-sand);
	font-size: var(--font-h3);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: color 0.3s ease;
}
.faq-trigger:hover {
	color: #ffffff;
}
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
	opacity: 0;
}
.faq-item.active .faq-answer,
.faq-item.is-active .faq-answer {
	max-height: 20rem;
	opacity: 1;
	padding-bottom: 1.8rem;
}
.faq-item.active .faq-chevron,
.faq-item.is-active .faq-chevron {
	transform: rotate(180deg);
	opacity: 1;
}

/* C.O.R.E. Framework Carousel */
.core-carousel-shell {
	display: grid;
	grid-template-columns: minmax(17rem, 0.86fr) minmax(0, 1.7fr);
	gap: clamp(2rem, 5vw, 7rem);
	align-items: end;
}

.core-kicker {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	border: 1px solid rgba(237, 234, 226, 0.14);
	background: rgba(237, 234, 226, 0.06);
	border-radius: 0.55rem;
	padding: 0.42rem 0.72rem;
	color: rgba(237, 234, 226, 0.72);
	font-size: var(--font-small);
	line-height: 1.4;
	font-weight: 600;
}

.core-carousel-title {
	margin-top: clamp(1.25rem, 2vw, 2.5rem);
	max-width: 11ch;
	color: var(--brand-sand);
	font-size: var(--font-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 600;
}

.core-carousel-copy {
	max-width: 32ch;
	justify-self: end;
	color: rgba(237, 234, 226, 0.68);
	font-size: var(--font-body);
	line-height: 1.55;
}

.core-carousel-stage {
	display: grid;
	grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.9fr);
	gap: clamp(1.5rem, 3vw, 4.5rem);
	align-items: end;
	margin-top: clamp(4rem, 9vw, 9rem);
}

.core-step-number {
	display: flex;
	align-items: baseline;
	gap: 0.15em;
	color: var(--brand-sand);
	font-family: "Outfit", sans-serif;
}

.core-step-current {
	font-size: var(--font-h2);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 600;
}

.core-step-total {
	color: rgba(237, 234, 226, 0.55);
	font-size: var(--font-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
}

.core-step-summary {
	margin-top: clamp(1rem, 1.5vw, 1.65rem);
	max-width: 16rem;
	color: rgba(237, 234, 226, 0.62);
	font-size: var(--font-small);
	line-height: 1.4;
}

.core-carousel-controls {
	display: flex;
	gap: 0.85rem;
	margin-top: clamp(4rem, 9vw, 9rem);
}

.core-carousel-button {
	width: clamp(3.6rem, 4.2vw, 4.85rem);
	aspect-ratio: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(237, 234, 226, 0.18);
	border-radius: 0.62rem;
	background: transparent;
	color: var(--brand-sand);
	cursor: pointer;
	transition: all 0.25s ease;
}

.core-carousel-button:hover,
.core-carousel-button.is-primary {
	background: var(--brand-sand);
	border-color: var(--brand-sand);
	color: var(--brand-darker);
}

.core-carousel-button:active {
	transform: scale(0.96);
}

.core-carousel-button svg {
	width: 1.15rem;
	height: 1.15rem;
}

.core-carousel-viewport {
	width: 100%;
	min-width: 0;
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.core-carousel-viewport.is-dragging {
	cursor: grabbing;
}

.core-carousel-track {
	display: flex;
	gap: clamp(1rem, 1.7vw, 1.9rem);
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.core-carousel-track.is-dragging {
	transition: none !important;
}

.core-carousel-card {
	flex: 0 0 calc((100% - clamp(1rem, 1.7vw, 1.9rem)) / 2);
	min-height: clamp(28rem, 36vw, 40rem);
	position: relative;
	overflow: hidden;
	border-radius: clamp(1.25rem, 1.8vw, 2rem);
	background: var(--brand-dark);
	color: var(--brand-sand);
	box-shadow: 0 12px 30px rgba(26, 39, 34, 0.2);
	will-change: transform;
}

.core-carousel-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	filter: none;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.core-carousel-card:hover img {
	transform: scale(1.09);
}

.core-carousel-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 24%, rgba(26, 39, 34, 0.76) 100%),
		linear-gradient(90deg, rgba(26, 39, 34, 0.24), transparent 54%);
	pointer-events: none;
}

.core-card-label {
	position: absolute;
	top: clamp(1.25rem, 1.5vw, 1.6rem);
	left: clamp(1.25rem, 1.5vw, 1.6rem);
	z-index: 2;
	border-radius: 0.5rem;
	background: rgba(237, 234, 226, 0.78);
	color: var(--brand-darker);
	padding: 0.45rem 0.72rem;
	font-size: var(--font-small);
	line-height: 1.4;
	font-weight: 600;
}

.core-card-body {
	position: absolute;
	left: clamp(1.5rem, 2vw, 2.4rem);
	right: clamp(1.5rem, 2vw, 2.4rem);
	bottom: clamp(1.5rem, 2vw, 2.3rem);
	z-index: 2;
}

.core-card-body h3 {
	max-width: 12ch;
	color: var(--brand-sand);
	font-size: var(--font-h3);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 500;
}

.core-card-body p {
	margin-top: clamp(0.8rem, 1.1vw, 1.1rem);
	max-width: 34ch;
	color: rgba(237, 234, 226, 0.78);
	font-size: var(--font-small);
	line-height: 1.4;
}

@media (max-width: 1023px) {
	.core-carousel-shell,
	.core-carousel-stage {
		grid-template-columns: 1fr;
	}

	.core-carousel-copy {
		justify-self: start;
	}

	.core-carousel-stage {
		margin-top: 3rem;
	}

	.core-carousel-controls {
		margin-top: 2rem;
	}
}

@media (max-width: 767px) {
	.core-carousel-shell {
		gap: 1.5rem;
	}

	.core-carousel-title,
	.core-carousel-copy {
		max-width: 100%;
	}

	.core-carousel-stage {
		gap: 1.5rem;
		margin-top: 2.5rem;
	}

	.core-carousel-stage aside {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 0.85rem 1rem;
		align-items: flex-end;
	}

	.core-step-summary {
		max-width: 100%;
		margin-top: 0;
	}

	.core-carousel-controls {
		justify-self: end;
		align-self: center;
		margin-top: 0;
	}

	.core-carousel-button {
		width: 3.25rem;
	}

	.core-carousel-card {
		flex-basis: 100%;
		min-height: clamp(25rem, 112vw, 34rem);
	}

	.core-card-body h3 {
		max-width: 14ch;
	}

	.core-card-body p {
		max-width: 100%;
	}
}

.parallax-gallery-container {
	position: relative;
	width: 100%;
	height: clamp(24rem, 40vh, 48rem);
}
.parallax-img-box {
	position: absolute;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.parallax-img-box.bg-layer { width: 70%; height: 75%; left: 0; top: 0; }
.parallax-img-box.fg-layer { width: 50%; height: 55%; right: 0; bottom: 0; z-index: 10; border-width: 4px; border-color: var(--bg-alt); }

.featured-blog-card {
	position: relative;
	transform-origin: center bottom;
	box-shadow:
		0 16px 42px rgba(27, 36, 32, 0.05),
		inset 0 1px 0 rgba(255, 255, 255, 0.58);
	will-change: transform, opacity, clip-path;
}

.featured-blog-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background:
		linear-gradient(135deg, rgba(36, 54, 47, 0.1), transparent 38%),
		radial-gradient(circle at 82% 12%, rgba(36, 54, 47, 0.12), transparent 26%);
	transition: opacity 0.45s ease-out;
}

.featured-blog-card > * {
	position: relative;
	z-index: 2;
}

.featured-blog-card:hover {
	border-color: rgba(36, 54, 47, 0.18) !important;
	box-shadow:
		0 30px 70px rgba(27, 36, 32, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.featured-blog-card:hover::before {
	opacity: 1;
}

.featured-blog-media {
	isolation: isolate;
}

.featured-blog-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 46%, rgba(27, 36, 32, 0.24));
	opacity: 0;
	transition: opacity 0.45s ease-out;
}

.featured-blog-card:hover .featured-blog-media::after {
	opacity: 1;
}

.featured-blog-title {
	transition: color 0.3s ease-out;
}

.featured-blog-card:hover .featured-blog-title {
	color: var(--brand-dark) !important;
}

/* =========================================================================
   17. Services Page Specifics
   ========================================================================= */

/* Solutions Sticky Layout & Interactive Cards */
.solutions-card {
	background: var(--bg-alt);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(237, 234, 226, 0.35)), var(--bg-alt);
	border: 1px solid rgba(27, 36, 32, 0.08);
	box-shadow: 0 10px 30px rgba(27, 36, 32, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.6);
	transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solutions-card.active-card {
	background: var(--brand-dark) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 30px 60px -15px rgba(26, 39, 34, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	color: var(--brand-sand) !important;
	opacity: 1 !important;
	transform: scale(1.02) !important;
}

.solutions-card h3,
.solutions-card p,
.solutions-card span,
.solutions-card li,
.solutions-card a,
.solutions-card i,
.solutions-card .bullet-dot,
.solutions-card .services-title {
	transition: color 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;
}

.solutions-card.active-card h3 { color: var(--brand-sand) !important; }
.solutions-card.active-card p { color: rgba(237, 234, 226, 0.7) !important; }
.solutions-card.active-card li { color: rgba(237, 234, 226, 0.8) !important; }
.solutions-card.active-card .bullet-dot { background-color: var(--brand-sand) !important; }
.solutions-card.active-card .services-title { color: var(--brand-sand) !important; }

.solutions-card .services-list-container {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
	transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, margin-top 0.4s ease;
}

.solutions-card.active-card .services-list-container {
	max-height: 500px;
	opacity: 1;
	margin-top: 1.5rem;
}

.solutions-thumb {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 1rem;
	border: 2px solid transparent;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.solutions-thumb:hover { opacity: 0.8; transform: translateY(-2px); }
.solutions-thumb.active-thumb {
	opacity: 1;
	border-color: var(--brand-dark);
	box-shadow: 0 8px 24px rgba(27, 36, 32, 0.12);
}

.solutions-card .btn-inquire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-small);
	font-weight: 500;
	padding: 0.65em 1.6em;
	background-color: var(--brand-dark);
	color: var(--brand-sand);
	border: 1.5px solid transparent;
	border-radius: 9999px;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	text-decoration: none;
}
.solutions-card.active-card .btn-inquire {
	background-color: var(--brand-sand);
	color: var(--brand-dark);
}

/* Circular engagement layout details */
.circle-engagement {
	position: relative;
}
.node-item.active-node {
	border-color: rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 0 25px rgba(255, 255, 255, 0.1) !important;
	opacity: 1 !important;
	transform: translate(-50%, -50%) scale(1.1) !important;
}
#node-R.active-node { transform: translate(-50%, 50%) scale(1.1) !important; }

/* Contact Page Form & Contact Form 7 Overrides */

.form-group {
	position: relative;
	width: 100%;
	margin-bottom: 1.85rem;
}

.form-input {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1.5px solid rgba(27, 36, 32, 0.15);
	padding: 0.8rem 0.2rem;
	color: var(--text-dark);
	font-family: inherit;
	font-size: 1.05rem;
	transition: border-color 0.4s ease, box-shadow 0.4s ease;
	outline: none;
}

.form-input:focus {
	border-color: var(--brand-dark);
}

.form-label {
	position: absolute;
	left: 0.2rem;
	top: 0.8rem;
	color: rgba(27, 36, 32, 0.45);
	font-size: 1.05rem;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Float Label when focused or populated */
.form-input:focus ~ .form-label,
.form-input:not(:placeholder-shown) ~ .form-label,
.form-group.focused-or-populated .form-label {
	top: -0.65rem;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--brand-dark);
}

/* Contact details container overrides for margins/paddings if any */
.contact-details-container {
	position: relative;
}

/* Contact Form 7 Form control wrap tweaks */
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* CF7 Custom validation styling */
.form-input.wpcf7-not-valid {
	border-color: #a23838 !important;
}

.form-group:has(.wpcf7-not-valid) .form-label {
	color: #a23838 !important;
}

.wpcf7-not-valid-tip {
	color: #a23838;
	font-size: 0.78rem;
	margin-top: 0.25rem;
	display: block;
}

/* Hide form fields when CF7 successfully submits, to show the clean success screen */
.wpcf7.sent form {
	display: none;
}

/* CF7 Success message container styling */
.wpcf7-response-output {
	margin: 2rem 0 0 0 !important;
	padding: 1.5rem 2rem !important;
	border-radius: var(--radius-md) !important;
	border: 1px solid transparent !important;
	font-size: 0.95rem;
	text-align: center;
}

/* Success state matching the static ref success card design */
.wpcf7.sent .wpcf7-response-output {
	background: var(--brand-dark) !important;
	color: var(--brand-sand) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	padding: 3rem 2rem !important;
	border-radius: clamp(1rem, 2vw, 2.5rem) !important;
	font-family: "Outfit", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* Success icon in CF7 response output using CSS pseudo-elements */
.wpcf7.sent .wpcf7-response-output::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--brand-sand);
	font-size: 2rem;
	font-weight: bold;
}

/* Error/Validation state */
.wpcf7.failed .wpcf7-response-output,
.wpcf7.invalid .wpcf7-response-output {
	background: rgba(162, 56, 56, 0.1) !important;
	color: #a23838 !important;
	border-color: rgba(162, 56, 56, 0.2) !important;
}

/* Hide select placeholder text when not focused or has no selected value */
select.form-input:not(:focus):has(option:checked[value=""]) {
	color: transparent !important;
}

/* Force select labels to always be floated, matching static design */
.wpcf7-form-control-wrap:has(select.form-input) ~ .form-label,
select.form-input ~ .form-label {
	top: -0.65rem !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: var(--brand-dark) !important;
}

/* Scope FAQ Accordion for the Contact Page Dark Card layout to match static ref */
.contact-card-container {
	background: #111b18 !important;
}

.contact-card-container .faq-trigger {
	font-size: clamp(1rem, 1.15vw, 1.35rem) !important;
	padding: clamp(1.2rem, 1.5vw, 1.8rem) 0 !important;
	color: var(--brand-sand) !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
}

.contact-card-container .faq-answer p {
	color: rgba(237, 234, 226, 0.55) !important;
	font-size: clamp(0.9rem, 1vw, 1.15rem) !important;
	line-height: 1.7 !important;
	font-weight: 400 !important;
}

/* Ensure submit buttons align content and icons perfectly centered */
.btn-apple {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	vertical-align: middle !important;
}

.btn-apple svg,
.btn-apple i {
	display: inline-block !important;
	align-self: center !important;
	margin-left: 0.5rem !important;
	vertical-align: middle !important;
	margin-top: 0px !important;
	flex-shrink: 0 !important;
}

/* Remove top padding of contact form on mobile when it is not the first block on the page */
@media (max-width: 1023px) {
	.wp-block-post-content > *:not(:first-child) #hero,
	section + #hero {
		padding-top: 0 !important;
	}
}

/* Header Dropdown Menu Link Hover Effect (Line growing from center) */
.menu-overlay-link {
	font-family: "Outfit", sans-serif;
	position: relative;
	display: inline-block;
	color: var(--brand-sand) !important;
	transition: color 0.3s ease-out;
}

.menu-overlay-link::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--brand-gold);
	transition: width 0.3s ease-out, left 0.3s ease-out;
}

.menu-overlay-link:hover::after,
.menu-overlay-link.active::after {
	width: 100%;
	left: 0;
}

.menu-overlay-link:hover {
	color: #ffffff !important;
}

.menu-overlay-link.active {
	color: var(--brand-gold) !important;
}

/* Blogs Page specific styles */
.blog-card {
	background: var(--bg-alt);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(237, 234, 226, 0.16)), var(--bg-alt);
	border: 1px solid rgba(27, 36, 32, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 15px 45px rgba(27, 36, 32, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 28px 60px -15px rgba(27, 36, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.filter-btn {
	background: transparent;
	border: 1px solid rgba(27, 36, 32, 0.12);
	color: rgba(27, 36, 32, 0.6);
	padding: 0.6rem 1.3rem;
	border-radius: var(--radius-full);
	font-size: var(--font-small);
	cursor: pointer;
	transition: all 0.35s ease;
}

.filter-btn.active {
	background: var(--brand-dark);
	border-color: var(--brand-dark);
	color: var(--brand-sand);
}

.filter-btn:hover:not(.active) {
	border-color: rgba(27, 36, 32, 0.3);
	color: var(--text-dark);
}

.active-hero-link {
	opacity: 1 !important;
	text-decoration: underline !important;
	text-underline-offset: 4px !important;
	text-decoration-thickness: 1.5px !important;
}

/* =========================================================================
   Desktop Navigation — Horizontal Links & Dropdowns
   ========================================================================= */

/* ── Base Link Style ───────────────────────────────────────────────────── */
.desktop-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0.5rem 0.85rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
	border: none;
	background: transparent;
	font-family: inherit;
	line-height: 1;
}

.desktop-nav-link:hover {
	background-color: rgba(255, 255, 255, 0.08);
}

.nav-light .desktop-nav-link:hover {
	background-color: rgba(0, 0, 0, 0.06);
}

/* ── CTA Button (Contact Us) ──────────────────────────────────────────── */
.desktop-nav-cta {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.12);
	padding: 0.5rem 1.2rem;
	border-radius: 999px;
}

.desktop-nav-cta:hover {
	background-color: rgba(255, 255, 255, 0.18);
}

.nav-light .desktop-nav-cta {
	background-color: rgba(27, 36, 32, 0.08);
	border-color: rgba(27, 36, 32, 0.12);
}

.nav-light .desktop-nav-cta:hover {
	background-color: rgba(27, 36, 32, 0.14);
}

/* ── Dropdown Chevron ─────────────────────────────────────────────────── */
.dropdown-chevron {
	transition: transform 0.25s ease;
	margin-left: 2px;
	flex-shrink: 0;
}

.desktop-nav-dropdown:hover .dropdown-chevron,
.desktop-nav-dropdown.is-active .dropdown-chevron,
.desktop-nav-trigger[aria-expanded="true"] .dropdown-chevron,
.desktop-nav-trigger:focus .dropdown-chevron {
	transform: rotate(180deg);
}

/* ── Dropdown Trigger ─────────────────────────────────────────────────── */
.desktop-nav-trigger {
	position: relative;
}

/* ── Dropdown Menu Panel ──────────────────────────────────────────────── */
.desktop-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	min-width: 200px;
	background: rgba(27, 36, 32, 0.92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	z-index: 100;
}

.nav-light .desktop-dropdown-menu {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Show on hover or when active (clicked) */
.desktop-nav-dropdown:hover > .desktop-dropdown-menu,
.desktop-nav-dropdown.is-active > .desktop-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* Pseudo-element to bridge the 8px hover gap */
.desktop-dropdown-menu::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
	background: transparent;
}

/* ── Dropdown Items ───────────────────────────────────────────────────── */
.desktop-dropdown-item {
	display: block;
	padding: 0.6rem 1rem;
	font-size: 0.82rem;
	font-weight: 500;
	color: rgba(237, 234, 226, 0.8);
	text-decoration: none;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.desktop-dropdown-item:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #edeae2;
}

.nav-light .desktop-dropdown-item {
	color: rgba(27, 36, 32, 0.7);
}

.nav-light .desktop-dropdown-item:hover {
	background-color: rgba(27, 36, 32, 0.06);
	color: #1b2420;
}

/* ── Overflow visible for dropdowns on desktop ────────────────────────── */
@media (min-width: 1024px) {
	#main-nav {
		overflow: visible !important;
	}
}