/**
 * Front Page — Agent Driven Development
 *
 * Premium consultancy aesthetic inspired by BCG, McKinsey, Bain.
 * Scroll-reveal animations, clean editorial design, warm gold accents.
 *
 * @package add
 */

/* ================================================
   SCROLL REVEAL — INTERSECTION OBSERVER TARGETS
   ================================================ */

.add-reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 1s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.add-reveal.add-visible {
	opacity: 1;
	transform: translateY(0);
}

.add-stagger-1 { transition-delay: 0.08s; }
.add-stagger-2 { transition-delay: 0.18s; }
.add-stagger-3 { transition-delay: 0.28s; }
.add-stagger-4 { transition-delay: 0.38s; }

.add-zoom-reveal {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.add-zoom-reveal.add-visible {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.add-reveal,
	.add-zoom-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.add-hero-aurora::before,
	.add-hero-aurora::after,
	.add-hero::before,
	.add-hero::after,
	.add-quote-dark::before,
	.add-pillars-section::before {
		animation: none !important;
	}

	.add-gradient-bar {
		animation: none !important;
	}

	.add-pillar-icon {
		animation: none !important;
	}

	.add-shimmer {
		animation: none !important;
		-webkit-text-fill-color: currentcolor;
		background: none;
	}

	.add-btn-primary .wp-block-button__link {
		animation: none !important;
	}

	.add-graphic--lattice::before,
	.add-lattice-node,
	.add-pane,
	.add-prism-bloom,
	.add-nucleus,
	.add-beam::after {
		animation: none !important;
	}
}

/* ================================================
   HERO — CINEMATIC FULL-VIEWPORT
   ================================================ */

.add-hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Aurora gradient background */
.add-hero-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.add-hero-aurora::before {
	content: '';
	position: absolute;
	top: -40%;
	left: -20%;
	width: 140%;
	height: 180%;
	background:
		radial-gradient(ellipse 80% 60% at 20% 40%,
			rgb(53 94 59 / 25%) 0%,
			transparent 55%),
		radial-gradient(ellipse 70% 50% at 75% 30%,
			rgb(99 102 241 / 12%) 0%,
			transparent 50%),
		radial-gradient(ellipse 60% 40% at 50% 80%,
			rgb(184 147 74 / 15%) 0%,
			transparent 45%),
		radial-gradient(ellipse 50% 50% at 85% 70%,
			rgb(53 94 59 / 10%) 0%,
			transparent 40%);
	animation: add-aurora 25s ease-in-out infinite alternate;
	will-change: transform;
}

.add-hero-aurora::after {
	content: '';
	position: absolute;
	top: -30%;
	right: -25%;
	width: 120%;
	height: 160%;
	background:
		radial-gradient(ellipse 60% 50% at 60% 50%,
			rgb(184 147 74 / 10%) 0%,
			transparent 50%),
		radial-gradient(ellipse 50% 40% at 30% 60%,
			rgb(99 102 241 / 8%) 0%,
			transparent 45%);
	animation: add-aurora-reverse 30s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes add-aurora {
	0% { transform: translate(0, 0) rotate(0deg) scale(1); }
	25% { transform: translate(60px, -40px) rotate(2deg) scale(1.05); }
	50% { transform: translate(-30px, 50px) rotate(-1.5deg) scale(1.02); }
	75% { transform: translate(40px, 20px) rotate(1deg) scale(1.04); }
	100% { transform: translate(-50px, -30px) rotate(-2deg) scale(1); }
}

@keyframes add-aurora-reverse {
	0% { transform: translate(0, 0) rotate(0deg) scale(1); }
	33% { transform: translate(-50px, 30px) rotate(-1.5deg) scale(1.03); }
	66% { transform: translate(30px, -40px) rotate(2deg) scale(1.05); }
	100% { transform: translate(-20px, 20px) rotate(-1deg) scale(1); }
}

/* Subtle dot grid overlay */
.add-hero-grid-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: radial-gradient(circle at 1px 1px, rgb(148 163 184 / 5%) 1px, transparent 0);
	background-size: 40px 40px;
	pointer-events: none;
}

/* Inner content — centered */
.add-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 14vh !important;
	padding-bottom: 4rem !important;
}

/* Eyebrow pill label */
.add-eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-weight: 600;
	font-size: 0.75rem !important;
	color: #b8934a !important;
	background: rgb(184 147 74 / 8%);
	border: 1px solid rgb(184 147 74 / 20%);
	padding: 0.5rem 1.4rem;
	border-radius: 100px;
	margin-bottom: 2.5rem !important;
	backdrop-filter: blur(8px);
}

/* Hero headline — impactful type */
.add-hero-title {
	color: #f8fafc !important;
	-webkit-text-fill-color: #f8fafc;
	font-size: clamp(2.75rem, 7vw, 5.5rem) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.04em !important;
	font-weight: 700 !important;
	max-width: 52rem;
	margin-bottom: 1.75rem !important;
	text-shadow: 0 2px 40px rgb(0 0 0 / 30%);
}

/* Hero sub paragraph */
.add-hero-sub {
	color: #94a3b8 !important;
	font-size: clamp(1.1rem, 1.5vw, 1.35rem) !important;
	line-height: 1.7 !important;
	max-width: 40rem;
	margin-bottom: 0 !important;
}

/* Buttons container */
.add-hero-buttons .wp-block-buttons {
	gap: 1rem;
	margin-top: 2.5rem;
}

/* Primary CTA — glowing green, premium feel */
.add-hero .add-btn-primary .wp-block-button__link {
	background: linear-gradient(135deg, #355E3B, #2d5233) !important;
	color: #fff !important;
	box-shadow:
		0 0 24px rgb(53 94 59 / 40%),
		0 0 80px rgb(53 94 59 / 15%),
		0 4px 16px rgb(0 0 0 / 20%);
	border: 1px solid rgb(255 255 255 / 8%) !important;
	padding: 1.05rem 2.75rem !important;
	font-size: 0.95rem !important;
	font-weight: 600;
	border-radius: 8px !important;
	transition: box-shadow 0.5s ease, transform 0.3s ease, background 0.3s ease;
	animation: add-glow-pulse 4s ease-in-out infinite;
	backdrop-filter: blur(4px);
}

/* Focus override — stops glow from hiding focus ring */
.add-hero .add-btn-primary .wp-block-button__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
	box-shadow: 0 0 0 6px #0f172a;
	animation: none;
}

@keyframes add-glow-pulse {
	0%, 100% {
		box-shadow:
			0 0 24px rgb(53 94 59 / 40%),
			0 0 80px rgb(53 94 59 / 15%),
			0 4px 16px rgb(0 0 0 / 20%);
	}

	50% {
		box-shadow:
			0 0 36px rgb(53 94 59 / 60%),
			0 0 100px rgb(53 94 59 / 20%),
			0 4px 20px rgb(0 0 0 / 25%);
	}
}

.add-hero .add-btn-primary .wp-block-button__link:hover {
	background: linear-gradient(135deg, #3d6b43, #355E3B) !important;
	box-shadow:
		0 0 40px rgb(53 94 59 / 60%),
		0 0 120px rgb(53 94 59 / 25%),
		0 8px 24px rgb(0 0 0 / 30%);
	transform: translateY(-3px);
}

/* Secondary CTA — ghost outline with glass effect */
.add-hero .add-btn-ghost .wp-block-button__link {
	background: rgb(255 255 255 / 3%) !important;
	backdrop-filter: blur(8px);
	border: 1px solid rgb(148 163 184 / 20%) !important;
	color: #cbd5e1 !important;
	padding: 1.05rem 2.75rem !important;
	font-size: 0.95rem !important;
	font-weight: 500;
	border-radius: 8px !important;
	transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.add-hero .add-btn-ghost .wp-block-button__link:hover {
	border-color: rgb(184 147 74 / 40%) !important;
	background: rgb(255 255 255 / 6%) !important;
	color: #f8fafc !important;
	transform: translateY(-2px);
}

/* ================================================
   HERO TRUST BAR — GLASSMORPHISM METRICS
   ================================================ */

.add-hero-trust-bar {
	position: relative;
	z-index: 2;
	padding-bottom: 4rem !important;
}

.add-trust-metrics {
	background: rgb(255 255 255 / 4%);
	backdrop-filter: blur(16px);
	border: 1px solid rgb(255 255 255 / 8%);
	border-radius: 16px;
	padding: 2rem 1.5rem;
	margin-top: 1rem;
}

.add-trust-metrics .wp-block-column {
	position: relative;
}

.add-trust-metrics .wp-block-column + .wp-block-column::before {
	content: '';
	position: absolute;
	left: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: linear-gradient(180deg, transparent, rgb(184 147 74 / 30%), transparent);
}

.add-trust-value {
	font-family: var(--wp--preset--font-family--heading, 'Lora', serif) !important;
	font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.2 !important;
	margin-bottom: 0.25rem !important;
	background: linear-gradient(135deg, #b8934a 0%, #d4a853 50%, #b8934a 100%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.add-trust-label {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase;
	color: #64748b !important;
	margin-top: 0 !important;
}

/* ================================================
   ANIMATED GRADIENT BAR SEPARATOR
   ================================================ */

.add-gradient-bar {
	border: none !important;
	height: 2px !important;
	background: linear-gradient(90deg,
		transparent 0%,
		#b8934a 25%,
		#355E3B 50%,
		#b8934a 75%,
		transparent 100%) !important;
	background-size: 200% 100%;
	opacity: 0.5;
	max-width: none !important;
	animation: add-bar-slide 4s ease-in-out infinite;
}

@keyframes add-bar-slide {
	0% { background-position: 0% 0%; }
	50% { background-position: 100% 0%; }
	100% { background-position: 0% 0%; }
}

/* ================================================
   VISUAL SHOWCASE — LANDING PAGE GRAPHICS
   ================================================ */

.add-visual-showcase {
	position: relative;
	background:
		radial-gradient(circle at 10% 15%, rgb(56 189 248 / 8%), transparent 45%),
		radial-gradient(circle at 88% 82%, rgb(245 158 11 / 8%), transparent 42%),
		linear-gradient(180deg, #f8fbff 0%, #f8fafc 100%);
	overflow: hidden;
}

.add-graphic-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 0;
}

.add-graphic-card {
	margin: 0;
	padding: 0;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid rgb(148 163 184 / 28%);
	box-shadow: 0 22px 45px -28px rgb(15 23 42 / 35%);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.3s ease;
}

.add-graphic-card:hover,
.add-graphic-card:focus-within {
	transform: translateY(-6px);
	border-color: rgb(53 94 59 / 40%);
	box-shadow: 0 28px 56px -24px rgb(15 23 42 / 42%);
}

.add-graphic {
	position: relative;
	height: clamp(210px, 28vw, 280px);
	overflow: hidden;
}

.add-graphic-title {
	margin: 0;
	padding: 0.95rem 1rem 1rem;
	font-size: 0.84rem !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: #334155 !important;
}

/* Logic Lattice */
.add-graphic--lattice {
	background-color: #0f172a;
	background-image:
		linear-gradient(rgb(30 41 59 / 72%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(30 41 59 / 72%) 1px, transparent 1px),
		radial-gradient(circle at 75% 22%, rgb(56 189 248 / 20%), transparent 35%);
	background-size: 26px 26px, 26px 26px, auto;
}

.add-graphic--lattice::before,
.add-graphic--lattice::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.add-graphic--lattice::before {
	background: linear-gradient(120deg, transparent 42%, rgb(56 189 248 / 24%) 49%, transparent 56%);
	animation: add-lattice-scan 5.5s linear infinite;
}

.add-graphic--lattice::after {
	background:
		linear-gradient(158deg, transparent 16%, rgb(148 163 184 / 22%) 17%, rgb(148 163 184 / 22%) 18%, transparent 19%),
		linear-gradient(18deg, transparent 63%, rgb(148 163 184 / 22%) 64%, rgb(148 163 184 / 22%) 65%, transparent 66%);
	opacity: 0.6;
}

.add-lattice-node {
	position: absolute;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: #38bdf8;
	box-shadow: 0 0 0 3px rgb(56 189 248 / 16%), 0 0 22px rgb(56 189 248 / 85%);
	animation: add-node-pulse 2.6s ease-in-out infinite;
}

.add-lattice-node--one { top: 19%; left: 22%; }
.add-lattice-node--two { top: 35%; right: 18%; animation-delay: 0.5s; }
.add-lattice-node--three { bottom: 25%; left: 44%; animation-delay: 1.1s; }
.add-lattice-node--four { bottom: 15%; right: 31%; animation-delay: 1.5s; }

/* Obsidian Orchestration */
.add-graphic--obsidian {
	background: linear-gradient(150deg, #16171a 0%, #111216 100%);
}

.add-pane {
	position: absolute;
	border-radius: 14px;
	backdrop-filter: blur(8px);
	border: 1px solid rgb(212 212 216 / 15%);
	background: rgb(39 39 42 / 34%);
	box-shadow: 0 16px 35px -22px rgb(0 0 0 / 60%);
	animation: add-pane-drift 9s ease-in-out infinite;
}

.add-pane--one {
	top: 13%;
	left: 7%;
	width: 45%;
	height: 48%;
	transform: rotate(-7deg);
}

.add-pane--two {
	top: 8%;
	right: 12%;
	width: 42%;
	height: 42%;
	transform: rotate(5deg);
	animation-delay: 0.8s;
}

.add-pane--three {
	bottom: 11%;
	left: 25%;
	width: 53%;
	height: 43%;
	transform: rotate(-3deg);
	animation-delay: 1.6s;
}

.add-pane--accent {
	top: 28%;
	left: 39%;
	width: 23%;
	height: 26%;
	background: linear-gradient(135deg, rgb(16 185 129 / 74%), rgb(6 95 70 / 66%));
	border-color: rgb(110 231 183 / 48%);
	box-shadow: 0 0 30px rgb(16 185 129 / 32%);
	animation-delay: 0.35s;
}

/* Prismatic Precision */
.add-graphic--prismatic {
	background: #fff;
	border-top: 1px solid rgb(148 163 184 / 22%);
}

.add-prism-bloom {
	position: absolute;
	border-radius: 999px;
	filter: blur(10px);
	opacity: 0.72;
	animation: add-bloom-move 13s ease-in-out infinite;
}

.add-prism-bloom--one {
	width: 320px;
	height: 320px;
	top: -26%;
	left: -19%;
	background: radial-gradient(circle, rgb(245 158 11 / 40%), rgb(245 158 11 / 0%));
}

.add-prism-bloom--two {
	width: 290px;
	height: 290px;
	bottom: -32%;
	right: -11%;
	background: radial-gradient(circle, rgb(14 165 233 / 30%), rgb(14 165 233 / 0%));
	animation-delay: 1.8s;
}

.add-prism-bloom--three {
	width: 220px;
	height: 220px;
	top: 34%;
	left: 36%;
	background: radial-gradient(circle, rgb(56 189 248 / 22%), rgb(56 189 248 / 0%));
	animation-delay: 3.4s;
}

.add-graphic--prismatic::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(130deg, rgb(255 255 255 / 20%), rgb(148 163 184 / 5%) 42%, transparent 60%);
	pointer-events: none;
}

/* Kinetic Foundation */
.add-graphic--kinetic {
	background: linear-gradient(180deg, #0b0e12 0%, #121821 100%);
	perspective: 900px;
}

.add-nucleus {
	position: absolute;
	top: 16%;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 35%, #e2e8f0, #94a3b8 70%);
	box-shadow: 0 0 0 8px rgb(148 163 184 / 12%), 0 0 30px rgb(148 163 184 / 45%);
	animation: add-nucleus-float 4.2s ease-in-out infinite;
}

.add-beam {
	position: absolute;
	top: 26%;
	width: 2px;
	height: 49%;
	background: linear-gradient(180deg, rgb(226 232 240 / 22%), rgb(226 232 240 / 58%), rgb(226 232 240 / 18%));
	overflow: hidden;
}

.add-beam::after {
	content: '';
	position: absolute;
	left: -1px;
	width: 4px;
	height: 34px;
	background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 85%), rgb(255 255 255 / 0%));
	animation: add-beam-scan 2.8s linear infinite;
}

.add-beam--one {
	left: 33%;
	transform: rotate(8deg);
}

.add-beam--two {
	right: 33%;
	transform: rotate(-8deg);
	animation-delay: 0.8s;
}

.add-block {
	position: absolute;
	bottom: 10%;
	height: 48px;
	background: linear-gradient(180deg, #222b35 0%, #161b22 100%);
	border: 1px solid rgb(148 163 184 / 22%);
	box-shadow: inset 0 1px 0 rgb(226 232 240 / 8%), 0 12px 24px -14px rgb(0 0 0 / 80%);
	transform: rotateX(16deg);
}

.add-block--one {
	left: 14%;
	width: 24%;
}

.add-block--two {
	left: 39%;
	width: 22%;
	height: 62px;
}

.add-block--three {
	right: 13%;
	width: 24%;
}

@keyframes add-lattice-scan {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes add-node-pulse {
	0%,
	100% { transform: scale(1); opacity: 0.85; }
	50% { transform: scale(1.24); opacity: 1; }
}

@keyframes add-pane-drift {
	0%,
	100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes add-bloom-move {
	0%,
	100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(6%, -5%) scale(1.08); }
}

@keyframes add-nucleus-float {
	0%,
	100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, -8px); }
}

@keyframes add-beam-scan {
	0% { top: -14%; }
	100% { top: 102%; }
}

/* ================================================
   TRUST METRICS (STATS BAR)
   ================================================ */

.add-metrics {
	border-top: 1px solid rgb(226 232 240 / 60%);
	border-bottom: 1px solid rgb(226 232 240 / 60%);
}

.add-metric-value {
	font-family: var(--wp--preset--font-family--heading, 'Lora', serif) !important;
	font-weight: 700 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.15 !important;
	margin-bottom: 0.15rem !important;
	background: linear-gradient(135deg, #0f172a 50%, #1a3a2e);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.add-metric-label {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	font-size: 0.7rem !important;
	color: #64748b !important;
	margin-top: 0 !important;
}

/* ================================================
   VALUE PROPOSITION (PROBLEM/SOLUTION)
   ================================================ */

.add-value-bg {
	position: relative;
}

.add-value-bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgb(248 250 252 / 97%), rgb(241 245 249 / 97%)),
		radial-gradient(ellipse at 20% 50%, rgb(184 147 74 / 3%), transparent 50%);
	z-index: 0;
}

.add-value-bg > * {
	position: relative;
	z-index: 1;
}

.add-trap-list,
.add-approach-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
}

.add-trap-list li,
.add-approach-list li {
	padding: 0.85rem 0;
	padding-left: 2rem;
	position: relative;
	border-bottom: 1px solid rgb(226 232 240 / 50%);
	font-size: 0.95rem;
	line-height: 1.55;
}

.add-trap-list li:last-child,
.add-approach-list li:last-child {
	border-bottom: none;
}

.add-trap-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ef4444;
	box-shadow: 0 0 8px rgb(239 68 68 / 30%);
}

.add-trap-list li {
	color: #64748b;
}

.add-approach-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.15rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #355E3B;
	box-shadow: 0 0 8px rgb(53 94 59 / 30%);
}

.add-approach-list li {
	color: #1e293b;
	font-weight: 500;
}

.add-trap-heading {
	color: #475569 !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	border-bottom: 2px solid #ef4444;
	display: inline-block;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem !important;
}

.add-approach-heading {
	color: #355E3B !important;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8rem !important;
	font-weight: 700 !important;
	border-bottom: 2px solid #355E3B;
	display: inline-block;
	padding-bottom: 0.5rem;
	margin-bottom: 1.5rem !important;
}

/* ================================================
   SERVICE CARDS
   ================================================ */

.add-services-grid .wp-block-column {
	background: #fff;
	border: 1px solid rgb(226 232 240 / 80%);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.4s ease;
	position: relative;
	overflow: hidden;
}

.add-services-grid .wp-block-column::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #b8934a, #355E3B, #8b7355, #b8934a);
	background-size: 300% 100%;
	opacity: 0;
	transition: opacity 0.5s ease;
	animation: add-gradient-sweep 4s linear infinite;
}

@keyframes add-gradient-sweep {
	0% { background-position: 0% 0%; }
	100% { background-position: 300% 0%; }
}

.add-services-grid .wp-block-column:hover,
.add-services-grid .wp-block-column:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 32px 64px -16px rgb(0 0 0 / 10%),
	            0 0 0 1px rgb(184 147 74 / 12%);
	border-color: rgb(184 147 74 / 25%);
}

.add-services-grid .wp-block-column:hover::before,
.add-services-grid .wp-block-column:focus-within::before {
	opacity: 1;
}

/* Step number in gradient */
.add-step-num {
	font-family: var(--wp--preset--font-family--heading, 'Lora', serif) !important;
	font-size: 4rem !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	background: linear-gradient(135deg, rgb(184 147 74 / 20%), rgb(139 115 85 / 10%));
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0.75rem !important;
	display: block;
}

.add-card-link {
	color: #0f172a !important;
	font-weight: 600;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: gap 0.3s ease;
}

.add-card-link:hover {
	gap: 0.65rem;
}

/* ================================================
   PULL QUOTE — DARK CINEMATIC
   ================================================ */

.add-quote-dark {
	position: relative;
	overflow: hidden;
}

.add-quote-dark::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 700px;
	height: 700px;
	background: radial-gradient(circle,
		rgb(184 147 74 / 5%) 0%,
		rgb(139 115 85 / 2%) 30%,
		transparent 65%);
	pointer-events: none;
	z-index: 0;
}

/* Decorative oversized quote mark */
.add-quote-mark {
	font-family: var(--wp--preset--font-family--heading, 'Lora', serif) !important;
	font-size: 8rem !important;
	line-height: 1 !important;
	color: rgb(184 147 74 / 20%) !important;
	margin-bottom: -3rem !important;
	display: block;
	position: relative;
	z-index: 1;
}

.add-quote-body {
	font-family: var(--wp--preset--font-family--heading, 'Lora', serif) !important;
	color: #e2e8f0 !important;
	font-style: italic;
	line-height: 1.5 !important;
	position: relative;
	z-index: 1;
}

/* Quote source attribution */
.add-quote-source {
	color: #b8934a !important;
	font-style: normal !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.8rem !important;
	position: relative;
	z-index: 1;
	margin-top: 1.5rem !important;
}

/* ================================================
   AUDIENCE ROLE CARDS
   ================================================ */

.add-role-cards .wp-block-column {
	border: 1px solid rgb(226 232 240 / 80%);
	border-radius: 12px;
	padding: 2rem 1.75rem;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.4s ease,
	            border-color 0.3s ease;
	background: #fff;
	position: relative;
	overflow: hidden;
}

.add-role-cards .wp-block-column::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	transition: height 0.35s ease;
}

/* Color-coding per audience */
.add-role-exec::before { background: linear-gradient(90deg, #0f172a, #1e293b); }
.add-role-director::before { background: linear-gradient(90deg, #b8934a, #8b7355); }
.add-role-manager::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.add-role-dev::before { background: linear-gradient(90deg, #355E3B, #2A4B30); }
.add-role-biz::before { background: linear-gradient(90deg, #6366f1, #4f46e5); }
.add-role-security::before { background: linear-gradient(90deg, #ef4444, #b91c1c); }

.add-role-cards .wp-block-column:hover,
.add-role-cards .wp-block-column:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -12px rgb(0 0 0 / 7%);
}

.add-role-cards .wp-block-column:hover::before,
.add-role-cards .wp-block-column:focus-within::before {
	height: 4px;
}

.add-role-icon {
	font-size: 2rem !important;
	margin-bottom: 0.75rem !important;
	line-height: 1 !important;
}

.add-role-link {
	color: #0f172a !important;
	font-weight: 600;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	transition: gap 0.3s ease;
	font-size: 0.9rem;
}

.add-role-link:hover {
	gap: 0.65rem;
}

/* ================================================
   LATEST ARTICLES
   ================================================ */

.add-latest-section {
	padding-left: clamp(1rem, 3vw, 2.5rem) !important;
	padding-right: clamp(1rem, 3vw, 2.5rem) !important;
}

.add-latest-section .add-articles-list {
	width: 100%;
	max-width: none;
}

.add-articles-list .wp-block-group {
	border-bottom: 1px solid rgb(226 232 240 / 60%);
	transition: border-color 0.3s ease;
	position: relative;
}

.add-articles-list .wp-block-group::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #b8934a, #355E3B);
	transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.add-articles-list .wp-block-group:hover::after {
	width: 100%;
}

.add-articles-list .wp-block-post-title a {
	text-decoration: none !important;
	transition: color 0.3s ease;
}

.add-articles-list .wp-block-post-title a:hover {
	color: #355E3B !important;
}

/* ================================================
   SECTION HEADINGS — shared oversize style
   ================================================ */

.add-section-title {
	letter-spacing: -0.03em !important;
	color: #0f172a !important;
}

.add-section-sub {
	max-width: 36rem;
	margin-left: auto !important;
	margin-right: auto !important;
	color: #334155 !important;
}

/* Service cards text contrast */
.add-services-grid .wp-block-column .wp-block-heading {
	color: #0f172a !important;
}

.add-services-grid .wp-block-column p:not(.add-step-num) {
	color: #334155 !important;
}

/* Case study CTA button in dark section */
.wp-block-buttons.add-reveal .wp-block-button__link[href="/customer-zero-the-nathan-story/"] {
	color: #fff !important;
	background: #0f172a !important;
	border-color: rgb(255 255 255 / 40%) !important;
	font-weight: 600;
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}

.wp-block-button__link[href="/customer-zero-the-nathan-story/"] {
	color: #fff !important;
	background: #0f172a !important;
	background-color: #0f172a !important;
	border-color: rgb(255 255 255 / 40%) !important;
	font-weight: 600;
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
}

.wp-block-button .wp-block-button__link.has-text-color[href="/customer-zero-the-nathan-story/"] {
	color: #fff !important;
	background: #0f172a !important;
	background-color: #0f172a !important;
	border-color: rgb(255 255 255 / 40%) !important;
}

.wp-block-buttons.add-reveal .wp-block-button__link[href="/customer-zero-the-nathan-story/"]:hover {
	background: rgb(255 255 255 / 10%) !important;
	border-color: rgb(255 255 255 / 60%) !important;
}

/* ================================================
   DARK MODE OVERRIDES
   ================================================ */

[data-theme="dark"] .add-metrics {
	border-color: rgb(30 41 59 / 80%);
}

[data-theme="dark"] .add-metric-value {
	background: linear-gradient(135deg, #f1f5f9 50%, #b8934a);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

[data-theme="dark"] .add-metric-label {
	color: #475569 !important;
}

[data-theme="dark"] .add-value-bg::before {
	background:
		linear-gradient(135deg, rgb(15 23 42 / 97%), rgb(15 23 42 / 97%)),
		radial-gradient(ellipse at 20% 50%, rgb(184 147 74 / 4%), transparent 50%);
}

[data-theme="dark"] .add-trap-list li {
	color: #94a3b8;
	border-color: rgb(51 65 85 / 50%);
}

[data-theme="dark"] .add-approach-list li {
	color: #e2e8f0;
	border-color: rgb(51 65 85 / 50%);
}

[data-theme="dark"] .add-trap-heading {
	color: #64748b !important;
}

[data-theme="dark"] .add-services-grid .wp-block-column {
	background: #0f172a;
	border-color: rgb(51 65 85 / 60%);
}

[data-theme="dark"] .add-section-title {
	color: #f8fafc !important;
}

[data-theme="dark"] .add-section-sub {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .add-services-grid .wp-block-column .wp-block-heading {
	color: #f8fafc !important;
}

[data-theme="dark"] .add-services-grid .wp-block-column p:not(.add-step-num) {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .add-step-num {
	background: none;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

[data-theme="dark"] .add-services-grid .wp-block-column:hover {
	border-color: rgb(184 147 74 / 30%);
	box-shadow: 0 32px 64px -16px rgb(0 0 0 / 40%);
}

[data-theme="dark"] .add-card-link {
	color: #fff !important;
}

[data-theme="dark"] .add-role-cards .wp-block-column {
	background: #0f172a;
	border-color: rgb(51 65 85 / 60%);
}

[data-theme="dark"] .add-role-cards .wp-block-column:hover {
	box-shadow: 0 20px 40px -12px rgb(0 0 0 / 40%);
}

[data-theme="dark"] .add-role-cards .wp-block-column h3 {
	color: #f1f5f9 !important;
}

[data-theme="dark"] .add-role-cards .wp-block-column p {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .add-role-icon {
	color: #e2e8f0 !important;
}

[data-theme="dark"] .add-role-link {
	color: #fff !important;
}

[data-theme="dark"] .add-articles-list .wp-block-group {
	border-color: rgb(51 65 85 / 50%);
}

[data-theme="dark"] .add-articles-list .wp-block-post-title a:hover {
	color: #b8934a !important;
}

[data-theme="dark"] .add-gradient-bar {
	opacity: 0.3;
}

[data-theme="dark"] .add-visual-showcase {
	background:
		radial-gradient(circle at 12% 18%, rgb(16 185 129 / 14%), transparent 45%),
		radial-gradient(circle at 86% 78%, rgb(56 189 248 / 12%), transparent 44%),
		linear-gradient(180deg, #020617 0%, #0b1120 100%);
}

[data-theme="dark"] .add-graphic-card {
	background: #0f172a;
	border-color: rgb(51 65 85 / 78%);
	box-shadow: 0 22px 50px -28px rgb(0 0 0 / 75%);
}

[data-theme="dark"] .add-graphic-title {
	color: #cbd5e1 !important;
}

[data-theme="dark"] .add-graphic--prismatic {
	background: linear-gradient(160deg, #0b1221 0%, #111827 100%);
	border-top: 1px solid rgb(148 163 184 / 18%);
}

[data-theme="dark"] .add-prism-bloom--one {
	background: radial-gradient(circle, rgb(245 158 11 / 30%), rgb(245 158 11 / 0%));
}

[data-theme="dark"] .add-prism-bloom--two {
	background: radial-gradient(circle, rgb(56 189 248 / 28%), rgb(56 189 248 / 0%));
}

/* ================================================
   FOUR PILLARS — OUR APPROACH
   ================================================ */

.add-pillars-section {
	background: linear-gradient(180deg, #fffbf5 0%, #fef7ed 50%, #fffbf5 100%) !important;
	position: relative;
	overflow: hidden;
}

.add-pillars-section::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -10%;
	width: 50%;
	height: 80%;
	background: radial-gradient(ellipse, rgb(184 147 74 / 6%) 0%, transparent 70%);
	pointer-events: none;
	animation: add-drift-right 20s ease-in-out infinite alternate;
}

.add-pillars-grid .wp-block-column {
	background: rgb(255 255 255 / 85%);
	backdrop-filter: blur(8px);
	border: 1px solid rgb(226 232 240 / 70%);
	border-radius: 16px;
	padding: 2.5rem 2rem;
	position: relative;
	overflow: hidden;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
	            border-color 0.4s ease;
}

.add-pillars-grid .wp-block-column::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	opacity: 0;
	transition: opacity 0.5s ease, height 0.3s ease;
}

.add-pillar-card:nth-child(1)::before {
	background: linear-gradient(90deg, #b8934a, #d4a853);
}

.add-pillar-card:nth-child(2)::before {
	background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.add-pillar-card:nth-child(3)::before {
	background: linear-gradient(90deg, #355E3B, #4a8055);
}

.add-pillar-card:nth-child(4)::before {
	background: linear-gradient(90deg, #6366f1, #818cf8);
}

.add-pillars-grid .wp-block-column:hover,
.add-pillars-grid .wp-block-column:focus-within {
	transform: translateY(-10px);
	box-shadow: 0 32px 64px -16px rgb(184 147 74 / 15%),
	            0 0 0 1px rgb(184 147 74 / 8%);
	border-color: rgb(184 147 74 / 20%);
}

.add-pillars-grid .wp-block-column:hover::before,
.add-pillars-grid .wp-block-column:focus-within::before {
	opacity: 1;
	height: 4px;
}

/* Pillar icons — floating animation */
.add-pillar-icon {
	font-size: 2.75rem !important;
	line-height: 1 !important;
	margin-bottom: 1.25rem !important;
	display: inline-block;
	animation: add-float 6s ease-in-out infinite;
}

.add-pillar-icon--outcomes {
	color: #a68540 !important;
	animation-delay: 0s;
}

.add-pillar-icon--native {
	color: #c47d08 !important;
	animation-delay: 1.5s;
}

.add-pillar-icon--risk {
	color: #355E3B !important;
	animation-delay: 3s;
}

.add-pillar-icon--teams {
	color: #6366f1 !important;
	animation-delay: 4.5s;
}

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

/* Shimmer text effect for section titles */
.add-shimmer {
	background: linear-gradient(
		110deg,
		var(--wp--preset--color--primary, #0f172a) 30%,
		#b8934a 50%,
		var(--wp--preset--color--primary, #0f172a) 70%
	);
	background-size: 200% 100%;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: add-shimmer 4s ease-in-out infinite;
}

@keyframes add-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ================================================
   DARK MODE — PILLARS
   ================================================ */

[data-theme="dark"] .add-pillars-section {
	background: linear-gradient(180deg, #0f172a 0%, #1a1a2e 50%, #0f172a 100%) !important;
}

[data-theme="dark"] .add-pillars-grid .wp-block-column {
	background: rgb(15 23 42 / 85%);
	border-color: rgb(51 65 85 / 60%);
}

[data-theme="dark"] .add-pillars-grid .wp-block-column:hover {
	border-color: rgb(184 147 74 / 30%);
	box-shadow: 0 32px 64px -16px rgb(0 0 0 / 50%);
}

[data-theme="dark"] .add-pillars-grid .wp-block-column p {
	color: #94a3b8 !important;
}

[data-theme="dark"] .add-pillars-grid .wp-block-column h3 {
	color: #f1f5f9 !important;
}

[data-theme="dark"] .add-shimmer {
	background: linear-gradient(
		110deg,
		#f1f5f9 30%,
		#b8934a 50%,
		#f1f5f9 70%
	);
	background-size: 200% 100%;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	animation: add-shimmer 4s ease-in-out infinite;
}

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

@media (width <= 782px) {
	.add-hero {
		min-height: auto;
	}

	.add-hero-inner {
		padding-top: 7rem !important;
		padding-bottom: 2rem !important;
	}

	.add-hero-title {
		font-size: clamp(2rem, 8vw, 3.5rem) !important;
	}

	.add-hero .wp-block-buttons {
		flex-direction: column;
	}

	.add-hero .wp-block-button {
		width: 100%;
	}

	.add-hero .wp-block-button__link {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	.add-trust-metrics {
		padding: 1.5rem 1rem;
	}

	.add-trust-metrics .wp-block-column + .wp-block-column::before {
		display: none;
	}

	.add-trust-value {
		font-size: 1.5rem !important;
	}

	.add-services-grid .wp-block-column {
		padding: 2rem 1.5rem;
	}

	.add-graphic-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.add-graphic {
		height: 220px;
	}

	.add-graphic-title {
		font-size: 0.78rem !important;
	}

	.add-step-num {
		font-size: 3rem !important;
	}

	.add-role-cards .wp-block-column {
		margin-bottom: 0.75rem;
	}

	.add-quote-mark {
		font-size: 5rem !important;
		margin-bottom: -2rem !important;
	}

	.add-pillars-grid .wp-block-column {
		padding: 2rem 1.5rem;
	}

	.add-pillar-icon {
		font-size: 2.25rem !important;
	}
}

@media (width <= 600px) {
	.add-metrics .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	.add-eyebrow {
		font-size: 0.65rem !important;
		letter-spacing: 0.2em;
		padding: 0.35rem 1rem;
	}

	.add-graphic {
		height: 200px;
	}

	.add-nucleus {
		top: 13%;
	}

	.add-insights-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ================================================
   INSIGHTS — CARD GRID
   ================================================ */

.add-insights-section {
	background: #f8fafc;
}

.add-insights-section .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Override WP flex-container width calc that conflicts with grid layout */
.add-insights-section .wp-block-post-template > li {
	width: auto !important;
}

.add-insight-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.add-insight-card:hover {
	box-shadow: 0 4px 20px rgb(0 0 0 / 10%);
	transform: translateY(-2px);
}

.add-insight-card .wp-block-post-featured-image {
	margin: 0;
	flex-shrink: 0;
}

.add-insight-card .wp-block-post-featured-image img,
.add-insight-card .wp-block-post-featured-image a {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.add-insight-card .wp-block-post-featured-image:not(:has(img)) {
	height: 160px;
	background: linear-gradient(135deg, #0a0e24 0%, #0f1e3a 100%);
}

.add-insight-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.add-insight-card-cat {
	display: block;
	font-size: 0.75rem !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600 !important;
	color: #92722e !important;
	margin-bottom: 0.5rem;
}

.add-insight-card-cat a {
	color: inherit !important;
	text-decoration: none;
}

.add-insight-card .wp-block-post-terms__separator {
	color: #92722e !important;
}

.add-insight-card .wp-block-post-title {
	font-size: 1.15rem !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.75rem !important;
}

.add-insight-card .wp-block-post-title a {
	color: #0f172a;
	text-decoration: none;
}

.add-insight-card .wp-block-post-title a:hover {
	color: #b8934a;
}

.add-insight-card .wp-block-post-excerpt {
	font-size: 0.92rem !important;
	line-height: 1.65 !important;
	color: #334155 !important;
	margin-bottom: 0 !important;
}

.add-insight-card .wp-block-post-excerpt p {
	margin: 0;
}

/* ================================================
   DARK MODE — INSIGHTS
   ================================================ */

[data-theme="dark"] .add-insights-section {
	background: #0f172a !important;
}

[data-theme="dark"] .add-insight-card {
	background: #1e293b;
	border-color: rgb(51 65 85 / 60%);
}

[data-theme="dark"] .add-insight-card:hover {
	box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
}

[data-theme="dark"] .add-insight-card .wp-block-post-title {
	color: #f1f5f9 !important;
}

[data-theme="dark"] .add-insight-card .wp-block-post-title a {
	color: #f1f5f9;
}

[data-theme="dark"] .add-insight-card .wp-block-post-title a:hover {
	color: #b8934a;
}

[data-theme="dark"] .add-insight-card .wp-block-post-excerpt {
	color: #94a3b8 !important;
}

[data-theme="dark"] .add-insight-card-cat {
	color: #d4af6a !important;
}

[data-theme="dark"] .add-insight-card-cat a {
	color: #d4af6a !important;
}

[data-theme="dark"] .add-insight-card .wp-block-post-featured-image:not(:has(img)) {
	background: linear-gradient(135deg, #0b1221 0%, #162032 100%);
}

[data-theme="dark"] .add-insight-card .wp-block-post-terms__separator {
	color: #d4af6a !important;
}

@media (width <= 960px) {
	.add-insights-section .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (width <= 600px) {
	.add-insights-section .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}