/**
 * Homepage Styles v2 — Nexacraft Agency
 *
 * 15-block homepage with full-bleed sections, Navy + Amber + Soft Blue
 * palette, agency-grade visual treatment.
 *
 * Architecture:
 *   - Mobile-first: base styles target mobile, @media (min-width) scales up
 *   - BEM naming throughout
 *   - CSS custom properties for design tokens
 *   - Full-bleed sections (color edge-to-edge, content max 1280px inside)
 *   - No inline styles in markup (except dynamic stat-bar widths)
 *
 * @package Nexacraft_Child
 * @since   1.1.0
 */


/* ==========================================================================
   DESIGN TOKENS (overrides + additions to existing style.css tokens)
   ========================================================================== */

:root {
	/* Brand colors (locked) */
	--color-navy: #0B1F3A;
	--color-navy-dark: #08182C;
	--color-navy-light: #13294B;
	--color-amber: #F59E0B;
	--color-amber-dark: #D97706;
	--color-amber-soft: rgba(245, 158, 11, 0.12);
	--color-off-white: #FAFAF7;
	--color-sand: #F5F5F0;

	/* New: soft blue tint (third color, per Coalition reference) */
	--color-soft-blue: #F0F4F8;
	--color-soft-blue-dark: #E1E8F0;

	/* Neutrals */
	--color-near-black: #1A1A1A;
	--color-slate: #5A5A5A;
	--color-slate-light: #8B95A6;
	--color-hairline: #E5E5E0;
	--color-hairline-soft: #EEEEE9;

	/* On-dark text colors */
	--color-on-dark-primary: #FAFAF7;
	--color-on-dark-secondary: #C7CED9;
	--color-on-dark-tertiary: #8B95A6;

	/* Spacing scale */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-3xl: 128px;

	/* Container max width — upgraded to 1320px (Coalition Technologies standard).
	 * Day 4 v2.2: bumped from 1280 → 1320 for slight extra breathing room
	 * across all sections. Still well under the readability threshold but
	 * gives cards more space inside the constrained container.
	 */
	--container-max: 1320px;
	--container-narrow-max: 760px;
	--container-padding: 24px;

	/* Type scale — Day 5 v3: bumped to match agency-tier sizing
	 * Reference data: SmartSites H1 64.6px, Stirista H1 64.6px, Lyfemarketing
	 * H1 64px. Our previous display token capped at 56px (3.5rem) which
	 * read as 32-40px on most screens — visually small vs competitors.
	 */
	--font-display: clamp(2.5rem, 5.5vw, 4rem);          /* hero H1: 40-64px */
	--font-h1: clamp(2.25rem, 4.5vw, 3.25rem);            /* page H1: 36-52px */
	--font-h2: clamp(2rem, 4vw, 2.75rem);                 /* section H2: 32-44px */
	--font-h3: clamp(1.25rem, 2.5vw, 1.5rem);             /* sub H3: 20-24px */
	--font-lead: clamp(1.0625rem, 1.6vw, 1.25rem);        /* lead paragraph: 17-20px */

	/* Effects */
	--shadow-card: 0 4px 16px rgba(11, 31, 58, 0.04), 0 1px 3px rgba(11, 31, 58, 0.04);
	--shadow-card-hover: 0 12px 32px rgba(11, 31, 58, 0.10), 0 4px 8px rgba(11, 31, 58, 0.04);
	--shadow-card-on-dark: 0 8px 24px rgba(0, 0, 0, 0.20), 0 2px 4px rgba(0, 0, 0, 0.10);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-xl: 24px;

	--transition-fast: 0.18s ease;
	--transition-base: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ==========================================================================
   CONTAINER & SECTION PRIMITIVES
   ========================================================================== */

/* Full-bleed sections: backgrounds run edge-to-edge of viewport.
 *
 * Day 5 v3 fix — Astra parent theme wraps <main class="site-main"> inside
 * an .ast-container that limits it to ~1240px max-width. That constrains
 * our sections too, so they render as "boxed" rectangles with white gaps
 * on the sides instead of full-bleed bands.
 *
 * Fix: break .site-main out of its parent container using viewport-width
 * trick. Inner sections then go truly edge-to-edge. The 1320px content
 * width inside each section is preserved via .container.
 *
 * v3.22 NOTE: When adding new page templates that use a custom
 * `site-main--<name>` modifier class, ADD THE CLASS TO THIS SELECTOR
 * LIST. Otherwise sections render boxed inside Astra's wrapper.
 * Added site-main--free-audit in v3.22 to fix this exact bug.
 */
.site-main--home,
.site-main--service,
.site-main--industries,
.site-main--industry,
.site-main--pricing,
.site-main--about,
.site-main--contact,
.site-main--legal,
.site-main--free-audit {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: hidden;
}

.section {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* Day 5 v3.4: default top/bottom padding so eyebrow text doesn't
	 * touch previous section's bottom edge. Reference agencies use
	 * 80-128px vertical padding; we go conservative at 80px. */
	padding-top: clamp(64px, 7vw, 96px);
	padding-bottom: clamp(64px, 7vw, 96px);
}

/* Tighter padding variant for trust strips / small bars */
.section--compact {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

.section--light {
	background-color: var(--color-off-white);
	color: var(--color-near-black);
}

.section--sand {
	background-color: var(--color-sand);
	color: var(--color-near-black);
}

.section--soft-blue {
	background-color: var(--color-soft-blue);
	color: var(--color-near-black);
}

.section--dark {
	background-color: var(--color-navy);
	color: var(--color-on-dark-primary);
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	width: 100%;
	position: relative;
	z-index: 1;
}

.container--wide {
	max-width: 1320px;
}

.container--narrow {
	max-width: var(--container-narrow-max);
}


/* ==========================================================================
   GLOBAL ELEMENTS
   ========================================================================== */

/* Eyebrow — uppercase label above section headings.
 * Day 4 v2.1: bumped from 0.75rem → 0.875rem per client feedback,
 * so all section eyebrow labels ("By the numbers", "Why Nexacraft",
 * "What clients say", etc.) read +2px larger and more confident.
 */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 var(--space-md);
	color: var(--color-amber);
}

.eyebrow--on-dark {
	color: var(--color-amber);
}

.eyebrow--on-light {
	color: var(--color-amber-dark);
}

.eyebrow__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
	display: inline-block;
}

/* Section header pattern shared across blocks. */
.section__header {
	max-width: 760px;
	margin-bottom: var(--space-xl);
}

.section__header--centered {
	margin-inline: auto;
	text-align: center;
}

.section__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-navy);
	margin: 0 0 var(--space-md);
}

.section__heading--on-dark {
	color: var(--color-on-dark-primary);
}

.section__lede {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-slate);
	max-width: 60ch;
	margin: 0 auto;
}

.section__header:not(.section__header--centered) .section__lede {
	margin-inline: 0;
}

/* Button system — Day 4 v2.7
 * The base .btn class was assumed to exist in parent style.css but
 * was never actually written. Without it, .btn--primary elements
 * (Schedule a Strategy Call) had no padding, no background, no
 * shape — they rendered as invisible Navy text on Navy background.
 * This adds the missing base styles.
 */
.btn,
.btn:link,
.btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: 6px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast),
		color var(--transition-fast);
	white-space: nowrap;
}

.btn--large {
	padding: 16px 28px;
	font-size: 1rem;
}

/* Primary button — Amber background, Navy text. All states locked. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
	background-color: var(--color-amber) !important;
	color: var(--color-navy) !important;
	border-color: var(--color-amber) !important;
}

.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active {
	background-color: var(--color-amber-dark) !important;
	border-color: var(--color-amber-dark) !important;
	color: var(--color-navy) !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* Header CTA button — separate class from .btn, but same issue.
 * Lock text color so "Schedule a Strategy Call" header button
 * never loses contrast.
 */
.header-cta,
.header-cta:link,
.header-cta:visited {
	background-color: var(--color-amber) !important;
	color: var(--color-navy) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 12px 22px !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	align-items: center !important;
	transition: background-color var(--transition-fast), transform var(--transition-fast) !important;
	flex-shrink: 0;
	white-space: nowrap;
}

.header-cta:hover,
.header-cta:focus-visible,
.header-cta:active {
	background-color: var(--color-amber-dark) !important;
	color: var(--color-navy) !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

/* Restore header CTA visibility on tablet/desktop (style.css hides
 * it at <=991px, which is too aggressive). Show on real tablets up.
 */
@media (min-width: 768px) {
	.header-cta {
		display: inline-flex !important;
	}
}

@media (max-width: 767px) {
	.header-cta {
		display: none !important;
	}
}

.btn__arrow {
	display: inline-block;
	margin-left: 0.4em;
	transition: transform var(--transition-fast);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
	transform: translateX(4px);
}

/* Ghost button for use on dark backgrounds.
 * Day 4 v2.5: lock text color across all states so it stays readable
 * on Navy backgrounds at idle, hover, focus, and active.
 */
.btn--ghost-light,
.btn--ghost-light:link,
.btn--ghost-light:visited {
	background-color: transparent;
	color: var(--color-on-dark-primary) !important;
	border: 1.5px solid rgba(250, 250, 247, 0.35);
	padding: 14.5px 26.5px;
	text-decoration: none;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible,
.btn--ghost-light:active {
	background-color: rgba(250, 250, 247, 0.12);
	border-color: rgba(250, 250, 247, 0.6);
	color: var(--color-on-dark-primary) !important;
	text-decoration: none;
}

/* Screen-reader-only text. */
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}


/* ==========================================================================
   BLOCK 1 — HERO
   ========================================================================== */

.hero {
	padding-block: var(--space-2xl);
	background-color: var(--color-navy);
	color: var(--color-on-dark-primary);
}

.hero__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero__glow {
	position: absolute;
	width: 600px;
	height: 600px;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
}

.hero__glow--amber {
	background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 70%);
	top: -200px;
	right: -200px;
}

.hero__grid-pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	opacity: 0.4;
}

.hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.hero__content {
	position: relative;
	z-index: 2;
}

.hero__headline {
	font-size: var(--font-display);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--color-on-dark-primary);
	margin: 0 0 var(--space-md);
}

.hero__subhead {
	font-size: var(--font-lead);
	line-height: 1.6;
	color: var(--color-on-dark-secondary);
	margin: 0 0 var(--space-lg);
	max-width: 56ch;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.hero__trust-line {
	font-size: 0.875rem;
	color: var(--color-on-dark-tertiary);
	margin: var(--space-sm) 0 0;
}

.hero__visual {
	position: relative;
	z-index: 2;
}

@media (min-width: 960px) {
	.hero {
		padding-block: var(--space-3xl);
	}

	.hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2xl);
	}
}


/* ==========================================================================
   COMPONENT — DASHBOARD MOCKUP
   ========================================================================== */

.dashboard-mockup {
	position: relative;
	max-width: 680px;
	margin-inline: auto;
}

.dashboard-mockup__window {
	background-color: var(--color-off-white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
	transform: perspective(2000px) rotateY(-3deg) rotateX(2deg);
	transition: transform var(--transition-base);
}

.dashboard-mockup:hover .dashboard-mockup__window {
	transform: perspective(2000px) rotateY(-1deg) rotateX(1deg);
}

.dashboard-mockup__chrome {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 12px 16px;
	background-color: #F0EFEA;
	border-bottom: 1px solid var(--color-hairline);
}

.dashboard-mockup__dots {
	display: flex;
	gap: 6px;
}

.dashboard-mockup__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
}

.dashboard-mockup__dot--red { background-color: #EC6A5F; }
.dashboard-mockup__dot--yellow { background-color: #F5BD4F; }
.dashboard-mockup__dot--green { background-color: #61C554; }

.dashboard-mockup__address {
	flex: 1;
	text-align: center;
	font-size: 0.75rem;
	color: var(--color-slate);
	background-color: rgba(255, 255, 255, 0.8);
	padding: 4px 12px;
	border-radius: 4px;
	font-family: monospace;
}

.dashboard-mockup__body {
	padding: var(--space-md);
}

.dashboard-mockup__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--space-md);
}

.dashboard-mockup__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 2px;
}

.dashboard-mockup__subtitle {
	font-size: 0.75rem;
	color: var(--color-slate);
	margin: 0;
}

.dashboard-mockup__badge {
	background-color: rgba(34, 197, 94, 0.12);
	color: #16A34A;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.dashboard-mockup__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
}

.dashboard-mockup__stat {
	padding: 12px;
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-soft-blue-dark);
}

.dashboard-mockup__stat-label {
	font-size: 0.6875rem;
	color: var(--color-slate);
	margin: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.dashboard-mockup__stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 2px;
	letter-spacing: -0.5px;
	line-height: 1;
}

.dashboard-mockup__stat-delta {
	font-size: 0.6875rem;
	font-weight: 600;
	margin: 0;
}

.dashboard-mockup__stat-delta--up { color: #16A34A; }
.dashboard-mockup__stat-delta--down { color: #16A34A; }

.dashboard-mockup__chart {
	padding: var(--space-sm);
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-soft-blue-dark);
}

.dashboard-mockup__chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
	gap: 8px;
}

.dashboard-mockup__chart-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0;
}

.dashboard-mockup__legend {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.dashboard-mockup__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.6875rem;
	color: var(--color-slate);
}

.dashboard-mockup__legend-dot {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.dashboard-mockup__legend-dot--amber { background-color: var(--color-amber); }
.dashboard-mockup__legend-dot--blue { background-color: var(--color-navy); }
.dashboard-mockup__legend-dot--light { background-color: #94A3B8; }

.dashboard-mockup__bars {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	height: 120px;
	align-items: end;
	margin-bottom: 8px;
}

.dashboard-mockup__bar-group {
	display: flex;
	gap: 2px;
	align-items: end;
	height: 100%;
}

.dashboard-mockup__bar {
	flex: 1;
	border-radius: 2px 2px 0 0;
	min-height: 4px;
}

.dashboard-mockup__bar--amber { background-color: var(--color-amber); }
.dashboard-mockup__bar--blue { background-color: var(--color-navy); }
.dashboard-mockup__bar--light { background-color: #94A3B8; }

.dashboard-mockup__axis {
	display: flex;
	justify-content: space-between;
	font-size: 0.625rem;
	color: var(--color-slate);
	padding: 0 4px;
}

.dashboard-mockup__floating-card {
	position: absolute;
	bottom: -24px;
	right: -16px;
	background-color: var(--color-off-white);
	padding: 12px 16px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-on-dark);
	display: flex;
	align-items: center;
	gap: 12px;
	z-index: 3;
	border: 1px solid var(--color-hairline);
}

.dashboard-mockup__floating-card-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-amber-soft);
	color: var(--color-amber-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-mockup__floating-card-icon svg {
	width: 18px;
	height: 18px;
}

.dashboard-mockup__floating-card-label {
	font-size: 0.6875rem;
	color: var(--color-slate);
	margin: 0 0 1px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.dashboard-mockup__floating-card-value {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0;
}

@media (max-width: 480px) {
	.dashboard-mockup__window { transform: none; }
	.dashboard-mockup__floating-card { display: none; }
	.dashboard-mockup__stats { grid-template-columns: 1fr; }
}


/* ==========================================================================
   BLOCK 2 — PLATFORM BAR
   ==========================================================================
   Day 4 v2.5: bigger icons (28→44px), bigger names (17→20px),
   force 2-row layout on desktop via 3-column grid (matches screenshot
   provided by client showing 3 platforms top row, 3 bottom row).
   ========================================================================== */

.platform-bar {
	padding-block: var(--space-2xl);
	border-bottom: 1px solid var(--color-hairline);
}

.platform-bar__label {
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	text-align: center;
	color: var(--color-slate);
	margin: 0 0 var(--space-xl);
}

.platform-bar__list {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	gap: var(--space-lg) var(--space-2xl);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
}

.platform-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--color-navy);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	opacity: 0.88;
}

.platform-bar__item:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.platform-bar__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.platform-bar__icon svg {
	width: 100%;
	height: 100%;
}

.platform-bar__name {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: var(--color-navy);
}

@media (min-width: 600px) {
	.platform-bar__list {
		grid-template-columns: repeat(2, auto);
		gap: var(--space-lg) var(--space-2xl);
	}
}

@media (min-width: 900px) {
	.platform-bar__list {
		grid-template-columns: repeat(3, auto);
		gap: var(--space-xl) var(--space-3xl);
	}
}

@media (max-width: 500px) {
	.platform-bar__list {
		gap: var(--space-md);
	}

	.platform-bar__name {
		font-size: 1.0625rem;
	}

	.platform-bar__icon {
		width: 36px;
		height: 36px;
	}
}


/* ==========================================================================
   BLOCK 3 — TRUST STATS (Navy)
   ========================================================================== */

.trust-stats {
	padding-block: var(--space-2xl);
}

.trust-stats__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.trust-stats__glow {
	position: absolute;
	bottom: -300px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 600px;
	background: radial-gradient(ellipse, rgba(245, 158, 11, 0.10) 0%, transparent 60%);
	filter: blur(60px);
}

.trust-stats__header {
	text-align: center;
	margin-bottom: var(--space-xl);
}

.trust-stats__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-on-dark-primary);
	margin: 0;
	max-width: 720px;
	margin-inline: auto;
}

.trust-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg) var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.trust-stats__item {
	text-align: center;
	position: relative;
	padding: var(--space-md) var(--space-sm);
}

.trust-stats__figure {
	margin: 0 0 var(--space-xs);
	color: var(--color-amber);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
}

.trust-stats__figure-number {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
}

.trust-stats__figure-unit {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 700;
	line-height: 1;
}

.trust-stats__label {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-on-dark-secondary);
	margin: 0;
	max-width: 26ch;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.trust-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.trust-stats__item:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 25%;
		right: 0;
		width: 1px;
		height: 50%;
		background-color: rgba(255, 255, 255, 0.10);
	}
}


/* ==========================================================================
   BLOCK 4 — PROBLEM
   ========================================================================== */

.problem {
	padding-block: var(--space-2xl);
}

.problem__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-navy);
	margin: 0 0 var(--space-lg);
}

.problem__body p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--color-near-black);
	margin: 0 0 var(--space-md);
}

.problem__body p:last-child {
	margin-bottom: 0;
}

.problem__body-emphasis {
	padding-top: var(--space-md);
	border-top: 2px solid var(--color-amber);
	font-weight: 600;
	color: var(--color-navy) !important;
}


/* ==========================================================================
   BLOCK 5 — ANCHOR RESULT CARD (soft-blue panel)
   ========================================================================== */

.anchor-result {
	padding-block: var(--space-2xl);
}

.result-card {
	background-color: var(--color-off-white);
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-hairline);
}

.result-card__content {
	padding: var(--space-xl);
}

.result-card__category {
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-amber-dark);
	margin: 0 0 var(--space-md);
}

.result-card__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	color: var(--color-navy);
	margin: 0 0 var(--space-md);
}

.result-card__body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-near-black);
	margin: 0 0 var(--space-sm);
}

.result-card__disclaimer {
	font-size: 0.75rem;
	color: var(--color-slate);
	margin: var(--space-md) 0 0;
	font-style: italic;
}

.result-card__metrics {
	background-color: var(--color-navy);
	padding: var(--space-xl);
	display: grid;
	gap: var(--space-lg);
	color: var(--color-on-dark-primary);
	position: relative;
}

.result-card__metrics::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -120px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}

.result-card__metric {
	position: relative;
}

.result-card__metric-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-amber);
	margin: 0 0 var(--space-xs);
}

.result-card__metric-comparison {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	margin: 0 0 var(--space-xs);
}

.result-card__metric-comparison--single .result-card__metric-after {
	font-size: 2.5rem;
}

.result-card__metric-before {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--color-on-dark-tertiary);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}

.result-card__metric-arrow {
	color: var(--color-on-dark-tertiary);
	font-size: 1.25rem;
}

.result-card__metric-after {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-on-dark-primary);
	letter-spacing: -1px;
	line-height: 1;
}

.result-card__metric-delta {
	font-size: 0.875rem;
	color: var(--color-amber);
	font-weight: 600;
	margin: 0;
}

@media (min-width: 960px) {
	.result-card {
		grid-template-columns: 3fr 2fr;
	}
}


/* ==========================================================================
   BLOCK 6 — SERVICES
   ========================================================================== */

.services {
	padding-block: var(--space-2xl);
}

.services__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.services__item {
	display: flex;
}

/* Service card — Day 5 v3
 * Removed corner number badges (visual clutter, no info gain).
 * Tag moved up next to icon for cleaner visual hierarchy.
 * Body wrapper has flex-grow to enforce equal heights across rows.
 */
.service-card {
	background-color: var(--color-off-white);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-xl) var(--space-lg);
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base),
		border-color var(--transition-base);
	position: relative;
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	border-color: rgba(11, 31, 58, 0.18);
}

.service-card__top {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

.service-card__icon {
	width: 52px;
	height: 52px;
	background-color: var(--color-navy);
	color: var(--color-amber);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition-fast);
	flex-shrink: 0;
}

.service-card:hover .service-card__icon {
	background-color: var(--color-amber);
	color: var(--color-navy);
}

.service-card__icon svg {
	width: 28px;
	height: 28px;
}

.service-card__tag {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	background-color: var(--color-soft-blue);
	color: var(--color-navy);
	padding: 5px 11px;
	border-radius: 12px;
}

.service-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-bottom: var(--space-md);
}

.service-card__title {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-navy);
	margin: 0 0 var(--space-sm);
	letter-spacing: -0.2px;
}

.service-card__description {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-near-black);
	margin: 0;
	flex-grow: 1;
}

.service-card__link {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-amber-dark);
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: auto;
}

.service-card__arrow {
	transition: transform var(--transition-fast);
}

.service-card:hover .service-card__arrow {
	transform: translateX(4px);
}

@media (min-width: 700px) {
	.services__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.services__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==========================================================================
   BLOCK 7 — WHY NEXACRAFT
   ========================================================================== */

.why-nexacraft {
	padding-block: var(--space-2xl);
}

.why-nexacraft__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.differentiator {
	background-color: var(--color-soft-blue);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	height: 100%;
	border: 1px solid var(--color-soft-blue-dark);
}

.differentiator__icon {
	width: 48px;
	height: 48px;
	background-color: var(--color-off-white);
	color: var(--color-amber-dark);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-md);
}

.differentiator__icon svg {
	width: 26px;
	height: 26px;
}

.differentiator__number {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--color-amber-dark);
	margin: 0 0 var(--space-sm);
	text-transform: uppercase;
}

.differentiator__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-navy);
	margin: 0 0 var(--space-sm);
}

.differentiator__body {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-near-black);
	margin: 0;
}

@media (min-width: 700px) {
	.why-nexacraft__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.why-nexacraft__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ==========================================================================
   BLOCK 8 — CAPACITY / BY THE NUMBERS (Navy)
   ========================================================================== */

.capacity {
	padding-block: var(--space-2xl);
}

.capacity__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.capacity__glow {
	position: absolute;
	top: 50%;
	left: -200px;
	transform: translateY(-50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
	filter: blur(60px);
}

.capacity__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.capacity__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-on-dark-primary);
	margin: 0 0 var(--space-md);
}

.capacity__body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-on-dark-secondary);
	margin: 0 0 var(--space-lg);
}

.capacity__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--color-amber);
	font-weight: 600;
	text-decoration: none;
	font-size: 1rem;
}

.capacity__cta:hover {
	color: var(--color-amber-dark);
}

.capacity__bars {
	display: grid;
	gap: var(--space-md);
}

.capacity-bar {
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: var(--radius-md);
	padding: var(--space-md);
}

.capacity-bar__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.capacity-bar__label {
	font-size: 0.875rem;
	color: var(--color-on-dark-secondary);
	margin: 0;
	flex: 1;
	line-height: 1.4;
}

.capacity-bar__value {
	margin: 0;
	color: var(--color-amber);
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-shrink: 0;
}

.capacity-bar__value-number {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1;
}

.capacity-bar__value-unit {
	font-size: 0.875rem;
	color: var(--color-on-dark-tertiary);
}

.capacity-bar__track {
	height: 6px;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 3px;
	overflow: hidden;
}

.capacity-bar__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--color-amber) 0%, var(--color-amber-dark) 100%);
	border-radius: 3px;
	transition: width 1s ease;
}

@media (min-width: 900px) {
	.capacity__grid {
		grid-template-columns: 1fr 1.1fr;
		gap: var(--space-2xl);
	}
}


/* ==========================================================================
   BLOCK 9 — INDUSTRIES
   ========================================================================== */

.industries {
	padding-block: var(--space-2xl);
}

.industries__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.industry-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-lg);
	background-color: var(--color-off-white);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition:
		transform var(--transition-base),
		border-color var(--transition-base),
		box-shadow var(--transition-base);
}

.industry-card:hover {
	transform: translateY(-3px);
	border-color: rgba(11, 31, 58, 0.18);
	box-shadow: var(--shadow-card-hover);
}

.industry-card__icon {
	width: 52px;
	height: 52px;
	background-color: var(--color-soft-blue);
	color: var(--color-navy);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.industry-card:hover .industry-card__icon {
	background-color: var(--color-amber);
	color: var(--color-navy);
}

.industry-card__icon svg {
	width: 28px;
	height: 28px;
}

.industry-card__name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-navy);
	margin: 0;
}

.industry-card__cta {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-amber-dark);
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.industry-card__arrow {
	transition: transform var(--transition-fast);
}

.industry-card:hover .industry-card__arrow {
	transform: translateX(3px);
}

@media (min-width: 600px) {
	.industries__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.industries__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==========================================================================
   BLOCK 10 — PROCESS
   ========================================================================== */

.process {
	padding-block: var(--space-2xl);
}

.process__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.process-step {
	position: relative;
	text-align: center;
}

.process-step__number-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-md);
	position: relative;
	z-index: 2;
}

.process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: var(--color-navy);
	color: var(--color-amber);
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.5px;
	border: 4px solid var(--color-off-white);
	box-shadow: 0 0 0 1px var(--color-hairline);
}

.process-step__duration {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-amber-dark);
	margin: 0 0 var(--space-xs);
}

.process-step__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 var(--space-xs);
}

.process-step__body {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-near-black);
	margin: 0;
	max-width: 30ch;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.process__list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-md);
	}

	.process__list::before {
		content: "";
		position: absolute;
		top: 32px;
		left: 12.5%;
		right: 12.5%;
		height: 2px;
		background: linear-gradient(90deg, var(--color-hairline) 0%, var(--color-amber) 50%, var(--color-hairline) 100%);
		z-index: 1;
	}
}


/* ==========================================================================
   BLOCK 11 — COMPARISON
   ========================================================================== */

.comparison {
	padding-block: var(--space-2xl);
}

.comparison__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.comparison__glow {
	position: absolute;
	top: 50%;
	right: -200px;
	transform: translateY(-50%);
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 60%);
	filter: blur(60px);
}

.comparison__table {
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-lg);
	overflow: hidden;
	max-width: 980px;
	margin-inline: auto;
}

.comparison__head,
.comparison__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.comparison__head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	background-color: rgba(0, 0, 0, 0.2);
}

.comparison__row + .comparison__row {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison__cell {
	padding: var(--space-md);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.comparison__cell--criteria {
	display: none;
}

.comparison__cell--ours {
	color: var(--color-on-dark-primary);
	background-color: rgba(245, 158, 11, 0.04);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 10px;
}

.comparison__cell--theirs {
	color: var(--color-on-dark-tertiary);
	display: flex;
	align-items: center;
	gap: 10px;
}

.comparison__head .comparison__cell {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--color-on-dark-primary);
	padding-block: var(--space-sm);
}

.comparison__col-mark {
	display: inline-block;
	color: var(--color-amber);
	margin-right: 6px;
}

.comparison__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.comparison__icon--check {
	background-color: var(--color-amber);
	color: var(--color-navy);
}

.comparison__icon--x {
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-on-dark-tertiary);
}

@media (min-width: 768px) {
	.comparison__head,
	.comparison__row {
		grid-template-columns: 1.2fr 1fr 1fr;
	}

	.comparison__cell--criteria {
		display: flex;
		align-items: center;
		font-weight: 600;
		color: var(--color-on-dark-secondary);
		background-color: rgba(0, 0, 0, 0.1);
	}
}


/* ==========================================================================
   BLOCK 12 — TESTIMONIALS
   ========================================================================== */

.testimonials {
	padding-block: var(--space-2xl);
}

.testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.testimonial {
	background-color: var(--color-off-white);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	padding: var(--space-lg);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover);
}

.testimonial__quote-mark {
	width: 36px;
	height: 36px;
	color: var(--color-amber);
	opacity: 0.25;
	margin-bottom: var(--space-sm);
}

.testimonial__quote {
	margin: 0 0 var(--space-md);
	flex-grow: 1;
}

.testimonial__quote p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-near-black);
	margin: 0;
}

.testimonial__attribution {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-hairline);
}

.testimonial__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-navy);
	color: var(--color-amber);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.testimonial__name {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 2px;
}

.testimonial__role {
	font-size: 0.8125rem;
	color: var(--color-slate);
	margin: 0;
}

@media (min-width: 768px) {
	.testimonials__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}


/* ==========================================================================
   BLOCK 13 — TEAM
   ========================================================================== */

.team {
	padding-block: var(--space-2xl);
}

.team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.team__photo-frame {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--color-hairline);
}

.team__photo {
	width: 100%;
	height: auto;
	display: block;
}

/* Badge — Day 4 v2.8: moved from absolute overlay on top of photo
 * to inline-flex element below the photo. Previous overlay was
 * covering the rightmost team member's face on desktop and even more
 * heavily on mobile where photo width compresses.
 */
.team__photo-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--color-navy);
	color: var(--color-amber);
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-on-dark);
	margin-top: var(--space-md);
}

.team__photo-badge-number {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1;
}

.team__photo-badge-label {
	font-size: 0.6875rem;
	color: var(--color-on-dark-secondary);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.team__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-navy);
	margin: 0 0 var(--space-md);
}

.team__body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-near-black);
	margin: 0 0 var(--space-md);
}

.team__values {
	list-style: none;
	margin: var(--space-lg) 0;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.team__value {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	font-size: 0.9375rem;
	color: var(--color-near-black);
}

.team__value-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--color-amber-soft);
	color: var(--color-amber-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.team__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--color-amber-dark);
	font-weight: 600;
	text-decoration: none;
}

.team__cta:hover {
	color: var(--color-amber);
}

@media (min-width: 900px) {
	.team__grid {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-2xl);
	}
}


/* ==========================================================================
   BLOCK 14 — FAQ
   ========================================================================== */

.faq {
	padding-block: var(--space-2xl);
}

.faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.faq__heading {
	font-size: var(--font-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: var(--color-navy);
	margin: 0 0 var(--space-md);
}

.faq__body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-slate);
	margin: 0 0 var(--space-md);
}

.faq__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--color-amber-dark);
	font-weight: 600;
	text-decoration: none;
}

.faq__list {
	display: grid;
	gap: 4px;
}

.faq-item {
	background-color: var(--color-off-white);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.faq-item[open] {
	border-color: rgba(11, 31, 58, 0.18);
	background-color: var(--color-soft-blue);
}

.faq-item__question {
	padding: var(--space-md);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	list-style: none;
	color: var(--color-navy);
	font-weight: 600;
	font-size: 1rem;
}

.faq-item__question::-webkit-details-marker { display: none; }

.faq-item__question-text {
	flex: 1;
	line-height: 1.4;
}

.faq-item__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--color-amber-soft);
	color: var(--color-amber-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--transition-fast);
}

.faq-item[open] .faq-item__icon {
	transform: rotate(45deg);
}

.faq-item__answer {
	padding: 0 var(--space-md) var(--space-md);
	color: var(--color-near-black);
}

.faq-item__answer p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
}

.faq-item__answer a {
	color: var(--color-amber-dark);
	font-weight: 600;
}

@media (min-width: 900px) {
	.faq__grid {
		grid-template-columns: 1fr 1.6fr;
		gap: var(--space-2xl);
	}
}


/* ==========================================================================
   BLOCK 15 — FINAL CTA
   ========================================================================== */

.final-cta {
	padding-block: var(--space-3xl);
	text-align: center;
}

.final-cta__inner {
	max-width: var(--container-narrow-max);
	margin-inline: auto;
}

.final-cta__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.final-cta__glow {
	position: absolute;
	top: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 800px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.10) 0%, transparent 60%);
	filter: blur(80px);
}

.final-cta__grid-pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 60px 60px;
	opacity: 0.4;
}

.final-cta__eyebrow {
	justify-content: center;
}

.final-cta__headline {
	font-size: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
	color: var(--color-on-dark-primary);
	margin: 0 0 var(--space-md);
}

.final-cta__subhead {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-on-dark-secondary);
	margin: 0 0 var(--space-lg);
}

.final-cta__actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.final-cta__trust {
	font-size: 0.875rem;
	color: var(--color-on-dark-tertiary);
	margin: 0;
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

*:focus-visible {
	outline: 2px solid var(--color-amber);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.dashboard-mockup__window {
		transform: none !important;
	}
}


/* ==========================================================================
   HEADER LOGO — Day 4 v2.5
   ==========================================================================
   Sizes the new logo image rendered by header-custom.php v2.4.
   Image source: /assets/img/logo.png. Falls back to text wordmark
   if image missing.
   ========================================================================== */

.site-logo {
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none;
	flex-shrink: 0;
}

.site-logo__image {
	display: block;
	height: 44px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	transition: opacity var(--transition-fast);
}

.site-logo:hover .site-logo__image,
.site-logo:focus-visible .site-logo__image {
	opacity: 0.85;
}

@media (max-width: 700px) {
	.site-logo__image {
		height: 36px;
		max-width: 180px;
	}
}


/* ==========================================================================
   PRIMARY NAV DROPDOWN — Day 5 v3
   ==========================================================================
   The Services menu item has 6 child pages. WordPress renders these as a
   nested <ul class="sub-menu">. Existing style.css has no dropdown CSS,
   so children rendered inline in the main nav with bullet markers showing.
   This adds proper dropdown behavior: hidden by default, floating panel
   on hover/focus.
   ========================================================================== */

/* Reset any list markers inside primary nav at every level. */
.primary-nav ul,
.primary-nav__list,
.primary-nav__list .sub-menu,
.primary-nav__list ul {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0;
}

.primary-nav__list li::marker,
.primary-nav__list .sub-menu li::marker {
	content: none !important;
}

/* Make parent <li> items positioning context for the dropdown. */
.primary-nav__list .menu-item-has-children,
.primary-nav__list li {
	position: relative;
}

/* Hide submenu by default. */
.primary-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	background-color: var(--color-white, #FFFFFF);
	border: 1px solid var(--color-hairline, #E5E5E0);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(11, 31, 58, 0.10), 0 4px 8px rgba(11, 31, 58, 0.04);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 200;
}

/* Show submenu on hover or keyboard focus. */
.primary-nav__list .menu-item-has-children:hover > .sub-menu,
.primary-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Submenu items styling. */
.primary-nav__list .sub-menu li {
	display: block;
	width: 100%;
}

.primary-nav__list .sub-menu a {
	display: block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy, #0B1F3A);
	text-decoration: none;
	white-space: normal;
	line-height: 1.4;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-nav__list .sub-menu a:hover,
.primary-nav__list .sub-menu a:focus-visible {
	background-color: var(--color-soft-blue, #F0F4F8);
	color: var(--color-amber, #F59E0B);
}

/* Add a chevron indicator next to parent items. */
.primary-nav__list .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
	vertical-align: middle;
	opacity: 0.6;
}

.primary-nav__list .menu-item-has-children:hover > a::after,
.primary-nav__list .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg) translateY(0);
	opacity: 1;
}

/* Mobile: submenu hidden by default, revealed when JS adds .submenu-open.
   v3.21 (May 21, 2026): Was previously always-visible (opacity:1, visibility:visible)
   which made the mobile menu show every sub-page as a stacked list. Now uses
   an accordion pattern — tap parent to reveal submenu. */
@media (max-width: 991px) {
	.primary-nav__list .sub-menu {
		position: static;
		opacity: 0;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		transform: none;
		box-shadow: none;
		border: 0;
		background-color: transparent;
		padding: 0 0 0 var(--space-md, 16px);
		min-width: 0;
		margin-top: 0;
		transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
	}

	.primary-nav__list .menu-item-has-children.submenu-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		max-height: 1000px;
		margin-top: 4px;
	}

	.primary-nav__list .sub-menu a {
		color: var(--color-navy, #0B1F3A);
		font-size: 14px;
		padding: 6px 0;
	}

	.primary-nav__list .menu-item-has-children > a::after {
		opacity: 0.4;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.primary-nav__list .menu-item-has-children.submenu-open > a::after {
		transform: rotate(-135deg) translateY(0);
		opacity: 1;
	}
}


/* ==========================================================================
   PRIMARY NAV DROPDOWN — Day 5 v3.1 polish
   ==========================================================================
   Fixes from initial dropdown CSS:
   1. Astra parent theme adds its own ::after chevron on menu-item-has-children
      AND ::before/::after markers on sub-menu items. Suppress both to stop
      the "v" characters showing up before each submenu item and the duplicate
      arrow next to "Services".
   2. Tighten dropdown spacing, dimensions, hover state for a more polished
      result that matches the rest of the design system.
   ========================================================================== */

/* Kill Astra's submenu item pseudo-elements (the rogue 'v' characters). */
.primary-nav__list .sub-menu li::before,
.primary-nav__list .sub-menu li::after,
.primary-nav__list .sub-menu a::before,
.primary-nav__list .sub-menu a::after {
	content: none !important;
	display: none !important;
}

/* Kill any chevron Astra adds to .menu-item-has-children > a — we add our own. */
.primary-nav__list .menu-item-has-children > a > .ast-arrow-wrap,
.primary-nav__list .menu-item-has-children > a .dropdown-menu-toggle,
.primary-nav__list .menu-item-has-children > a > svg {
	display: none !important;
}

/* Refined dropdown container — tighter, cleaner. */
.primary-nav__list .sub-menu {
	min-width: 280px;
	padding: 6px 0;
	border-radius: 10px;
	margin-top: 8px;
}

/* Add a small hover-bridge so dropdown doesn't disappear when moving cursor
 * from "Services" down to the dropdown panel. */
.primary-nav__list .menu-item-has-children::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 12px;
	background: transparent;
}

/* Submenu link refinement — single line per item, consistent padding. */
.primary-nav__list .sub-menu a {
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-navy, #0B1F3A);
	white-space: nowrap;
	line-height: 1.4;
	border-left: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.primary-nav__list .sub-menu a:hover,
.primary-nav__list .sub-menu a:focus-visible {
	background-color: var(--color-soft-blue, #F0F4F8);
	color: var(--color-navy, #0B1F3A);
	border-left-color: var(--color-amber, #F59E0B);
}

/* Mobile override (re-apply tweaks). */
@media (max-width: 991px) {
	.primary-nav__list .sub-menu a {
		white-space: normal;
		padding: 8px 0;
		border-left: 0;
	}

	.primary-nav__list .menu-item-has-children::before {
		display: none;
	}
}


/* ==========================================================================
   PRIMARY NAV DROPDOWN — Day 5 v3.2 (kill Astra submenu indicators)
   ==========================================================================
   The 'v' characters before each submenu item are coming from Astra's
   menu walker, not CSS pseudo-elements. They appear as SVG icons, span
   wrappers, or font-icon characters. This patch tries to hide all
   common variants.
   ========================================================================== */

/* Hide ANY direct child of submenu <a> that isn't text — covers SVG, spans,
 * and font-icon wrappers Astra uses for the chevron indicator. */
.primary-nav__list .sub-menu a > svg,
.primary-nav__list .sub-menu a > .ast-arrow-wrap,
.primary-nav__list .sub-menu a > .dropdown-menu-toggle,
.primary-nav__list .sub-menu a > i,
.primary-nav__list .sub-menu a > span:first-child:not(.menu-text):not(.menu-item-text),
.primary-nav__list .sub-menu .ast-icon,
.primary-nav__list .sub-menu .ast-mobile-menu-trigger-fill,
.primary-nav__list .sub-menu .ast-header-navigation-arrow {
	display: none !important;
}

/* If Astra adds an inline arrow via ::before on the LI or A inside submenu */
.primary-nav__list .sub-menu li > a::before,
.primary-nav__list .sub-menu a::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	margin: 0 !important;
}

/* Ensure submenu link text is the only child, properly aligned */
.primary-nav__list .sub-menu a {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}


/* ==========================================================================
   PRIMARY NAV DROPDOWN — Day 5 v3.3 (final kill on Astra .ast-icon arrow)
   ==========================================================================
   Confirmed via DOM inspection: Astra wraps each submenu item with
   <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg">...</svg></span>
   followed by the link text. Need maximum specificity to hide it across
   every nav variant Astra uses.
   ========================================================================== */

/* Nuke the Astra arrow wrapper everywhere it appears in the primary nav.
 * Targeting both the span AND its SVG child with max specificity. */
.site-header .ast-icon.icon-arrow,
.site-header .ast-icon-arrow,
.site-header svg.ast-arrow-svg,
.site-header .menu-link > .ast-icon,
.primary-nav .ast-icon.icon-arrow,
.primary-nav .ast-arrow-svg,
.primary-nav__list .ast-icon,
.primary-nav__list .ast-arrow-svg,
.primary-nav__list span.ast-icon.icon-arrow,
.primary-nav__list .menu-link > .ast-icon,
.primary-nav__list .menu-link span.ast-icon.icon-arrow,
ul.primary-nav__list li a span.ast-icon,
ul.primary-nav__list li a > .ast-icon.icon-arrow,
.sub-menu .ast-icon,
.sub-menu .ast-icon.icon-arrow,
.sub-menu .ast-arrow-svg,
.sub-menu .menu-link > .ast-icon {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	left: -9999px !important;
}

/* Also re-tune the link layout now that the inline span is gone, so
 * the text doesn't have any leftover gap or alignment quirks. */
.primary-nav__list .sub-menu .menu-link,
.primary-nav__list .sub-menu a {
	display: block !important;
	padding: 11px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--color-navy, #0B1F3A) !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	border-left: 2px solid transparent !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.primary-nav__list .sub-menu .menu-link:hover,
.primary-nav__list .sub-menu a:hover,
.primary-nav__list .sub-menu .menu-link:focus-visible,
.primary-nav__list .sub-menu a:focus-visible {
	background-color: var(--color-soft-blue, #F0F4F8) !important;
	color: var(--color-navy, #0B1F3A) !important;
	border-left-color: var(--color-amber, #F59E0B) !important;
}


/* ==========================================================================
   FOOTER SEPARATOR — Day 5 v3.5
   ==========================================================================
   Removes the accidental sand gap between the Navy Final CTA and the Navy
   footer by adding a deliberate off-white strip with a micro-tagline.
   ========================================================================== */

/* Add a separator-strip element via ::before pseudo on the footer wrapper.
 * Works against Astra's default footer; if our custom footer is in use,
 * we can also style .footer-separator directly. */
/* v3.9: OLD ::before tagline strip disabled site-wide.
   Replaced by the new .site-footer__intro section in footer-custom.php
   which carries real content (About + Industries) AND serves the same
   visual separator role (off-white block between Navy content and Navy
   footer columns).
   ---
   ORIGINAL v3.5 rule kept here but commented out for reference, in case
   we ever want to revert. The actual disable is below. */
.site-footer::before,
footer.site-footer::before,
body > footer::before {
	display: none !important;
	content: none !important;
}

/* OLD rule that we are overriding (left in source for git-archaeology):
.site-footer::before,
footer.site-footer::before,
body > footer::before {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--color-off-white, #FAFAF7);
	color: var(--color-grey, #5A5A5A);
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-align: center;
	padding: 28px 24px;
	border-top: 1px solid rgba(245, 158, 11, 0.4);
	border-bottom: 1px solid var(--color-hairline, #E5E5E0);
	position: relative;
	z-index: 2;
}
end of v3.5 commented block */

/* Also kill body background showing through any gap. */
body {
	background-color: var(--color-navy, #0B1F3A);
}

/* Ensure no white margin between final CTA Navy section and footer. */
.section.section--dark:last-of-type,
.final-cta:last-of-type,
main > section:last-child {
	margin-bottom: 0 !important;
	padding-bottom: clamp(64px, 7vw, 96px) !important;
}


/* ==========================================================================
   ASTRA SUBMENU ARROW KILL — GLOBAL (Day 5 v3.5)
   ==========================================================================
   Apply across ANY page that renders an Astra-default header (Blog,
   404, search results). Previous fix was scoped to .primary-nav__list
   which doesn't exist on those pages.
   ========================================================================== */

/* Nuke Astra's ast-icon arrows in NAV CONTEXTS ONLY.
 * v3.6.2: removed two global selectors (.ast-icon.icon-arrow and .ast-arrow-svg
 * as standalone) because they also matched the scroll-to-top button's arrow.
 * The remaining selectors all scope to nav/menu/sub-menu, which is the
 * original intent (kill submenu dropdown arrows). */
.menu-link > .ast-icon,
nav .ast-icon,
nav .ast-arrow-svg,
ul li a span.ast-icon.icon-arrow,
ul li a .ast-icon.icon-arrow,
.sub-menu .ast-icon,
.sub-menu .ast-arrow-svg,
.sub-menu .menu-link > .ast-icon,
.menu-item .ast-icon.icon-arrow {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	left: -9999px !important;
}

/* Apply submenu styling to ANY sub-menu on the site, not just primary-nav. */
.sub-menu {
	list-style: none !important;
	padding: 6px 0 !important;
	margin: 8px 0 0 !important;
	min-width: 280px;
	background-color: var(--color-white, #FFFFFF) !important;
	border: 1px solid var(--color-hairline, #E5E5E0) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(11, 31, 58, 0.10), 0 4px 8px rgba(11, 31, 58, 0.04) !important;
}

.sub-menu li {
	list-style: none !important;
	display: block !important;
	width: 100% !important;
}

.sub-menu li::marker,
.sub-menu li::before,
.sub-menu li::after,
.sub-menu a::before,
.sub-menu a::after {
	content: none !important;
	display: none !important;
}

.sub-menu a,
.sub-menu .menu-link {
	display: block !important;
	padding: 11px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--color-navy, #0B1F3A) !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	border-left: 2px solid transparent !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
}

.sub-menu a:hover,
.sub-menu .menu-link:hover,
.sub-menu a:focus-visible {
	background-color: var(--color-soft-blue, #F0F4F8) !important;
	color: var(--color-navy, #0B1F3A) !important;
	border-left-color: var(--color-amber, #F59E0B) !important;
}

/* ==========================================================================
   FOOTER GAP KILL — Day 6 v3.6
   ==========================================================================
   Astra's #page wrapper has min-height: 100vh (sticky footer pattern) and a
   white background inherited from Astra parent CSS. When page content is
   shorter than the viewport (pricing, contact, legal pages), the white bg
   shows between the Final CTA section (Navy) and our tagline strip — the
   "double off-white sandwich" or "big white band" Adi saw in screenshots.

   Fix: force #page and its inner Astra wrappers to Navy so any empty space
   below short pages matches the surrounding Navy sections. Each named
   section in the page still paints its own bg over this base.

   Verified against the inspector screenshot of nexacraftagency.com/pricing/
   on 2026-05-15.
   ========================================================================== */

#page,
.hfeed.site,
body > #page,
body.nexacraft-theme #page {
	background-color: var(--color-navy, #0B1F3A) !important;
}

/* Astra's inner content wrappers can also carry a white background.
   Force them transparent so #page's Navy shows through any empty space. */
#content,
.site-content,
.ast-container,
.ast-container-fluid,
.entry-content {
	background-color: transparent !important;
}

/* ==========================================================================
   v3.6.2 HOTFIX — May 16, 2026 (replaces failed v3.6.1)
   ==========================================================================
   v3.6.1 attempts didn't work because:

   1. The arrow restore on #ast-scroll-top set width:auto/height:auto on the
      SVG, which collapsed it to 0x0 (SVGs without explicit dimensions go to
      zero with width:auto). The icon WAS being shown, just at zero size.
      Better fix in v3.6.2: scope the original arrow kill to nav contexts
      only (done above by removing the two global selectors), so the
      scroll-top button is never affected in the first place. No restore
      block needed.

   2. The footer padding-top approach put Navy space ABOVE the ::before
      tagline strip, not below it. That space merged visually with the
      empty Navy flex space above the footer, so it looked like nothing
      changed. The space Adi wanted is BETWEEN the tagline strip and the
      footer columns. Correct fix: margin-bottom on the ::before pseudo.
   ========================================================================== */

/* Add Navy gap between the off-white tagline strip and the footer columns.
 * The tagline strip is a ::before pseudo inside .site-footer. Adding margin
 * to its bottom pushes the columns down, creating breathing room. */
.site-footer::before,
footer.site-footer::before,
body > footer::before {
	margin-bottom: clamp(48px, 7vw, 80px) !important;
}

/* ==========================================================================
   CONTACT PAGE FOOTER GAP FIX — v3.6.2
   ==========================================================================
   On pages where the last content section is NOT Navy (e.g. contact page
   ends in FAQ with sand bg), Astra's #page min-height: 100vh stretches
   the page wrapper to viewport height. With #page bg set to Navy (above),
   the leftover space below content shows as an intrusive Navy band before
   the footer.

   Fix: kill the min-height: 100vh on #page. Footer naturally sits right
   after the content with zero gap. Any leftover viewport space below the
   footer shows the body's Navy bg (which is continuous with the Navy footer
   and looks fine).

   Verified scenario:
   - Homepage (Final CTA Navy → tagline → Navy footer): seamless
   - Contact (FAQ sand → tagline → Navy footer): seamless
   - Pricing (last section → tagline → Navy footer): seamless
   ========================================================================== */

#page,
.hfeed.site,
body.nexacraft-theme #page,
html body #page {
	min-height: 0 !important;
}

/* Belt-and-suspenders: ensure main doesn't flex-grow either, in case
   Astra has it set with flex: 1. Otherwise main would stretch and push
   the footer down even without min-height. */
#page > main,
#page > #content,
.hfeed.site > main,
.hfeed.site > #content {
	flex: 0 0 auto !important;
}

/* ==========================================================================
   v3.6.3 HOTFIX — May 16, 2026
   ==========================================================================
   After v3.6.2 deploy, two issues remained in Adi's screenshots:

   1. Homepage: extra Navy band above the tagline strip — looked like the
      Final CTA section had double padding-bottom.
   2. Contact page: an empty Navy block appeared above the tagline strip,
      between the sand FAQ section and the off-white tagline. Page-contact.php
      has NO Final CTA section, so the Navy block couldn't be from one.

   Same root cause for both: .site-footer in style.css line 300 has
   "padding: 96px 0 32px 0". The 96px padding-top sits inside .site-footer,
   above the ::before tagline strip. Result: a 96px Navy band ABOVE the
   tagline strip on every page. On homepage it stacks with Final CTA's
   own 96px padding-bottom for 192px continuous Navy. On contact page it
   shows as an out-of-place Navy block between sand and off-white.

   Fix: kill .site-footer padding-top so the ::before tagline strip sits
   flush at the top of the footer wrapper. Each section above provides
   its own padding-bottom for breathing room.
   ========================================================================== */

.site-footer,
footer.site-footer,
html body .site-footer {
	padding-top: 0 !important;
}

/* ==========================================================================
   v3.6.4 HOTFIX — May 16, 2026
   ==========================================================================
   v3.6.3 fixed .site-footer padding-top but MISSED a second source of the
   Navy band above the tagline strip: style.css line 304 sets

       .site-footer { margin-top: var(--nx-space-4xl); }  /* 96px */

   That 96px margin-top renders as Navy (body bg is Navy from v3.5+v3.6)
   between the last section and the footer. Result on both pages:

   - Homepage: Final CTA top 128px, Final CTA bottom 96px + 96px margin-top
     = 192px Navy below. Top vs bottom asymmetric by 64px.
   - Contact: FAQ (sand) ends → 96px Navy from margin-top → tagline strip.
     Looks like a misplaced empty Navy block between sand and off-white.

   Fix 1: kill .site-footer margin-top.
   Fix 2: align Final CTA padding-top with padding-bottom (96px max) so it's
   symmetric AND matches the other sections' .section base padding.
   ========================================================================== */

.site-footer,
footer.site-footer,
html body .site-footer {
	margin-top: 0 !important;
}

.final-cta:last-of-type,
main > section:last-child.final-cta,
.section.section--dark.final-cta:last-of-type {
	padding-top: clamp(64px, 7vw, 96px) !important;
	padding-bottom: clamp(64px, 7vw, 96px) !important;
}
/* ==========================================================================
   CONTACT PAGE — TRUST STRIP — Day 6 v3.7 (May 16, 2026)
   ==========================================================================
   Navy band between contact-hero and contact-grid. Three honest stats taken
   directly from homepage by-the-numbers.php (no invented metrics).

   Visual goals:
   - Reinforce Navy brand color presence on otherwise light contact page
   - Add credibility BEFORE the form (15% lift typical per Unbounce data)
   - Stay tight: section--compact padding, no eyebrow, no heading
   - Amber numbers + uppercase off-white labels for scannability
   ========================================================================== */

.contact-trust {
	border-top: 1px solid rgba(245, 158, 11, 0.15);
	border-bottom: 1px solid rgba(245, 158, 11, 0.15);
}

.contact-trust__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 4vw, 56px);
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: start;
}

.contact-trust__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
}

.contact-trust__value {
	font-family: 'Inter', sans-serif;
	font-size: clamp(2.25rem, 4.5vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--color-amber, #F59E0B);
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: baseline;
}

.contact-trust__value-suffix {
	font-size: 0.6em;
	font-weight: 700;
	margin-left: 2px;
}

.contact-trust__label {
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-off-white, #FAFAF7);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.45;
	max-width: 240px;
}

@media (max-width: 768px) {
	.contact-trust__list {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.contact-trust__label {
		max-width: 280px;
	}
}

/* ==========================================================================
   v3.7.2 — Hide footer tagline strip on contact page only
   ==========================================================================
   The contact page now has the trust strip (16+/50/9 stats) just above the
   FAQ, which carries the credibility signal. The off-white tagline strip
   "Built for US home service contractors since 2009." becomes redundant
   here and adds visual noise. Hide on contact only; keep on every other
   page where it serves as the primary trust line.

   The body class `is-contact-page` is injected via add_filter in
   page-contact.php (only runs on that template).
   ========================================================================== */
body.is-contact-page .site-footer::before {
	display: none !important;
}

/* v3.9: Also hide the new .site-footer__intro block on contact page —
   the 16+/50/9 trust strip above the FAQ already serves the
   credibility-signal role there, so the pre-footer About/Industries
   block becomes redundant. Padding-top fix below ensures footer
   still has visual breathing room above its columns. */
body.is-contact-page .site-footer__intro {
	display: none !important;
}

/* ==========================================================================
   v3.7.3 — Contact page: restore footer top padding when tagline is hidden
   ==========================================================================
   On every other page, the off-white ::before tagline strip provides visual
   separation between the last content section and the Navy footer columns
   (its margin-bottom: 80px creates the Navy gap above the columns).

   On contact page (v3.7.2 hides ::before), that spacing disappears too —
   columns end up touching the bottom of the FAQ section.

   Add equivalent padding-top to the footer on contact page only.
   ========================================================================== */
body.is-contact-page .site-footer {
	padding-top: clamp(48px, 7vw, 80px) !important;
}
/* ==========================================================================
   v3.8 — RISK REVERSAL STRIP (Day 6, May 16, 2026)
   ==========================================================================
   3-column trust strip between FAQ and Final CTA on homepage.
   Sand background. Amber checkmark icons. Symmetric padding.
   ========================================================================== */

.risk-reversal .risk-reversal__intro {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.risk-reversal__heading {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 12px 0 12px 0;
}

.risk-reversal__subhead {
	font-size: 1.0625rem;
	color: #4A5568;
	line-height: 1.6;
	margin: 0;
}

.risk-reversal__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.risk-reversal__item {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 12px;
	padding: clamp(24px, 3vw, 32px);
	transition: border-color 200ms ease, transform 200ms ease;
}

.risk-reversal__item:hover {
	border-color: rgba(245, 158, 11, 0.4);
	transform: translateY(-2px);
}

.risk-reversal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.12);
	color: var(--color-amber, #F59E0B);
	font-weight: 800;
	font-size: 18px;
	margin-bottom: 16px;
}

.risk-reversal__item-title {
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 0 0 10px 0;
}

.risk-reversal__item-body {
	font-size: 0.9375rem;
	color: #4A5568;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 768px) {
	.risk-reversal__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* ==========================================================================
   v3.8 — TYPOGRAPHY POLISH (Day 6, May 16, 2026)
   ==========================================================================
   Tighter, more premium type without nuking existing chrome:
   - H1: weight 800, letter-spacing -0.03em (-1.44px@48px vs old -0.5px),
     line-height 1.02 (was 1.1) for tighter visual block
   - H2: weight 700, letter-spacing -0.025em, line-height 1.1 (was 1.2)
   - Body text INSIDE prose sections bumped to 17px / line-height 1.75
     (chrome stays at 16px to protect button/nav/footer dimensions)
   - Hero/CTA headlines get the -0.03em treatment specifically
   ========================================================================== */

/* Stronger H1 — applied via specificity to override style.css base rule */
body h1,
body .h1,
html body h1 {
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
}

/* Tighter H2 */
body h2,
body .h2,
html body h2 {
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
}

/* Premium hero-class headlines: explicit tightness */
.hero__headline,
.contact-hero__headline,
.section-hero__headline,
.final-cta__headline,
.service-hero__headline {
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1.02 !important;
}

/* Premium reading rhythm for section body copy (paragraphs inside section
   wrappers only — leaves nav, buttons, footer chrome untouched).
   v3.9.1: Removed `.section li` from this selector. It was breaking grid
   layouts where <li> elements are used structurally (platform-bar,
   industries, services cards, etc.) rather than as prose. The new selector
   targets ONLY paragraphs inside containers, which is the actual prose use case. */
.section > .container > p,
.section > .container > .container__narrow > p,
.section p:not([class]) {
	font-size: 17px;
	line-height: 1.7;
}

/* Eyebrows and small chrome text inside sections should NOT inherit */
.section .eyebrow,
.section .footer-trust-list li,
.section .contact-trust__label,
.section .risk-reversal__item-body,
.section .risk-reversal__subhead {
	font-size: inherit;
	line-height: inherit;
}

/* Cap reading width on prose paragraphs — 65-75ch range for comfortable scan.
   v3.9.3: Scoped to unclassed paragraphs only. Chrome paragraphs (like
   .platform-bar__label, .footer-intro__body, eyebrows) have their own
   layout and shouldn't get the 70ch cap, which can cause centered-text
   paragraphs to appear left-shifted because the paragraph box is
   left-aligned. */
.section > .container > p:not([class]),
.section .prose p:not([class]) {
	max-width: 70ch;
}


/* ==========================================================================
   v3.9 — PRE-FOOTER ABOUT + INDUSTRIES BLOCK (May 16, 2026)
   ==========================================================================
   Replaces the old thin ::before tagline strip with a real content section
   that serves the same visual role (off-white separator between Navy
   content and Navy footer columns) but carries real operational copy
   and the industries served list.

   Layout:
   - Full-width off-white background
   - Container-constrained inner content, centered text
   - Heading + body paragraph + eyebrow + 2-row industries list
   - Stacks responsively on mobile

   Position in DOM:
   - First child of <footer class="site-footer">
   - Sits above the existing site-footer__top column grid
   ========================================================================== */

.site-footer__intro {
	background-color: var(--color-off-white, #FAFAF7);
	color: var(--color-near-black, #1A1A1A);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* v3.9.1: tightened padding since industries list was removed */
	padding: clamp(40px, 5vw, 64px) 0;
	border-top: 1px solid rgba(245, 158, 11, 0.4);
	border-bottom: 1px solid var(--color-hairline, #E5E5E0);
	position: relative;
	z-index: 2;
}

.site-footer__intro .container {
	padding-left: 24px;
	padding-right: 24px;
}

.footer-intro__inner {
	/* v3.9.1: wider max-width so the body paragraph wraps to ~2 lines on
	   desktop, not 3. Per Adi's spec: 2-line wrap target. */
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.footer-intro__heading {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
	color: var(--color-navy, #0B1F3A);
	margin: 0 0 16px 0;
}

.footer-intro__body {
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.65;
	color: #4A5568;
	/* v3.9.1: widened so the paragraph fits on 2 lines on desktop */
	max-width: 760px;
	margin: 0 auto;
}

.footer-intro__eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-amber, #F59E0B);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 20px 0;
	padding: 6px 14px;
	background: rgba(245, 158, 11, 0.08);
	border-radius: 999px;
}

.footer-intro__industries {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-intro__industries-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.5vw, 32px);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-navy, #0B1F3A);
	letter-spacing: 0.01em;
}

.footer-intro__industries-row span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.footer-intro__bullet {
	color: var(--color-amber, #F59E0B);
	font-weight: 800;
	font-size: 0.875rem;
}

/* Mobile: tighter spacing, smaller industries grid */
@media (max-width: 640px) {
	.footer-intro__industries-row {
		gap: 12px 18px;
		font-size: 0.875rem;
	}
	.footer-intro__body {
		margin-bottom: 28px;
	}
}

/* On contact page, the new intro block is hidden (rule above). To keep
   visual breathing room between the FAQ and the footer columns, restore
   the footer's own padding-top there (handled by existing v3.7.3 rule
   "body.is-contact-page .site-footer { padding-top: clamp(48px,7vw,80px) }"
   which is already in this file). No new rule needed. */

/* ==========================================================================
   v3.9 — CONTACT PAGE: "What Happens After You Reach Out"
   ==========================================================================
   4-step numbered process between contact hero and contact-grid (form).
   Sets expectations before users fill out anything.
   ========================================================================== */

.contact-process {
	background-color: var(--color-off-white, #FAFAF7);
}

.contact-process__header {
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px) auto;
	text-align: center;
}

.contact-process__heading {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 12px 0 12px 0;
}

.contact-process__subhead {
	font-size: 1.0625rem;
	color: #4A5568;
	line-height: 1.6;
	margin: 0;
}

.contact-process__steps {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 28px);
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.contact-process__step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: clamp(24px, 3vw, 32px);
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 12px;
	transition: border-color 200ms ease, transform 200ms ease;
}

.contact-process__step:hover {
	border-color: rgba(245, 158, 11, 0.4);
}

.contact-process__step-num {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-amber, #F59E0B);
	color: var(--color-navy, #0B1F3A);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1;
}

.contact-process__step-body {
	flex: 1;
	min-width: 0;
}

.contact-process__step-title {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 4px 0 10px 0;
}

.contact-process__step-text {
	font-size: 0.9375rem;
	color: #4A5568;
	line-height: 1.65;
	margin: 0;
}

@media (max-width: 768px) {
	.contact-process__steps {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   v3.9 — ABOUT PAGE: "Who we work best with" (FIT CRITERIA)
   ==========================================================================
   Two-column comparison: good fit vs not-a-fit. Sand background.
   Sits between Values and Team on About page.
   ========================================================================== */

.about-fit__subhead {
	font-size: 1.0625rem;
	color: #4A5568;
	line-height: 1.6;
	margin: 12px auto 0 auto;
	max-width: 640px;
}

.about-fit__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 32px);
	margin-top: clamp(40px, 5vw, 56px);
}

.about-fit__col {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 14px;
	padding: clamp(28px, 3vw, 40px);
}

.about-fit__col--good {
	border-top: 4px solid #10B981;
}

.about-fit__col--bad {
	border-top: 4px solid #94A3B8;
}

.about-fit__col-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

.about-fit__col-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.about-fit__col-icon--good {
	background: rgba(16, 185, 129, 0.12);
	color: #10B981;
}

.about-fit__col-icon--bad {
	background: rgba(148, 163, 184, 0.18);
	color: #64748B;
}

.about-fit__col-title {
	font-family: 'Inter', sans-serif;
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0;
}

.about-fit__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.about-fit__list li {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4A5568;
	padding: 12px 0;
	border-bottom: 1px solid rgba(11, 31, 58, 0.05);
}

.about-fit__list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.about-fit__list li:first-child {
	padding-top: 0;
}

.about-fit__list li strong {
	color: var(--color-navy, #0B1F3A);
	font-weight: 700;
}

@media (max-width: 768px) {
	.about-fit__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   v3.9 — HOMEPAGE: HONEST FRICTION SECTION
   ==========================================================================
   3-card grid stating what we WON'T promise. Off-white bg.
   Between Comparison and Testimonials.
   ========================================================================== */

.friction {
	background-color: var(--color-off-white, #FAFAF7);
}

.friction__header {
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px) auto;
	text-align: center;
}

.friction__heading {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1.75rem, 3.8vw, 2.75rem);
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 12px 0 16px 0;
}

.friction__heading em {
	color: var(--color-amber, #F59E0B);
	font-style: italic;
	font-weight: 800;
}

.friction__subhead {
	font-size: 1.0625rem;
	color: #4A5568;
	line-height: 1.65;
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.friction__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 28px);
	list-style: none;
	padding: 0;
	margin: 0;
}

.friction__card {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 14px;
	padding: clamp(24px, 3vw, 32px);
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.friction__card:hover {
	border-color: rgba(245, 158, 11, 0.4);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -12px rgba(11, 31, 58, 0.12);
}

.friction__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(245, 158, 11, 0.12);
	color: var(--color-amber, #F59E0B);
	margin-bottom: 20px;
}

.friction__card-title {
	font-family: 'Inter', sans-serif;
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 12px 0;
}

.friction__card-body {
	font-size: 0.9375rem;
	color: #4A5568;
	line-height: 1.7;
	margin: 0;
}

.friction__footnote {
	text-align: center;
	font-size: 0.875rem;
	font-style: italic;
	color: #6B7280;
	margin: clamp(32px, 4vw, 48px) auto 0 auto;
	max-width: 680px;
	line-height: 1.6;
}

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

/* ==========================================================================
   v3.9.1 — Force breathing room above footer columns
   ==========================================================================
   The v3.9 padding-top in style.css was being overridden somewhere in the
   cascade (likely an Astra reset or our own earlier .site-footer rules).
   This rule loads last (homepage.css enqueued after style.css) with
   high-specificity selector + !important to guarantee the gap renders.
   ========================================================================== */
html body .site-footer .site-footer__top,
html body footer.site-footer .site-footer__top,
body.nexacraft-theme .site-footer__top {
	padding-top: clamp(56px, 7vw, 80px) !important;
}
/* ==========================================================================
   v3.10 — HERO TRUST BAR (May 17, 2026)
   ==========================================================================
   4-checkmark trust bar replacing the single .hero__trust-line under CTAs.
   Per "Nexacraft Agency" feedback doc Priority 3. Sits directly below the
   hero CTA buttons. Quick scan-able trust signals.
   ========================================================================== */

.hero__trust-bar {
	list-style: none;
	padding: 0;
	margin: 24px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
}

.hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(250, 250, 247, 0.85);
	white-space: nowrap;
}

.hero__trust-check {
	color: var(--color-amber, #F59E0B);
	font-weight: 800;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.hero__trust-bar {
		gap: 10px 18px;
		margin-top: 20px;
	}
	.hero__trust-item {
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   v3.10 — TEAM SECTION ADDITIONS (May 17, 2026)
   ==========================================================================
   Per feedback doc Priorities 1 + 4:
   - Name labels under photo (3 real people only)
   - Founder signature with quoted statement at bottom of content column
   - Transparency body paragraph style
   ========================================================================== */

/* Name labels strip under photo */
.team__name-labels {
	list-style: none !important;
	padding: 0 !important;
	margin: 16px 0 0 0 !important;
	display: flex;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.team__name-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2px;
}

.team__name-label-name {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy, #0B1F3A);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.team__name-label-role {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: #6B7280;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.team__name-labels {
		gap: 16px;
	}
	.team__name-label-name {
		font-size: 0.8125rem;
	}
	.team__name-label-role {
		font-size: 0.6875rem;
	}
}

/* Transparency body paragraph */
.team__body--transparency {
	font-style: normal;
	color: #4A5568;
}

/* Founder signature block */
.team__signature {
	margin: 32px 0 24px 0;
	padding: 24px 28px;
	background: rgba(11, 31, 58, 0.04);
	border-left: 3px solid var(--color-amber, #F59E0B);
	border-radius: 0 8px 8px 0;
}

.team__signature-quote {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.7;
	color: var(--color-navy, #0B1F3A);
	margin: 0 0 14px 0;
	font-weight: 400;
}

.team__signature-attribution {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
}

.team__signature-name {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-navy, #0B1F3A);
	letter-spacing: -0.01em;
}

.team__signature-role {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 500;
	color: #6B7280;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   v3.10 — SERVICE PAGE TEXTURE NOTE (May 17, 2026)
   ==========================================================================
   Per Priority 10. Renders below the whats-not-included list on each
   service page. Small italicized "honest note" line that signals
   operational nuance.
   ========================================================================== */

.service-texture-note {
	max-width: 720px;
	margin: 32px auto 0 auto;
	padding: 18px 22px;
	background: rgba(245, 158, 11, 0.06);
	border-left: 3px solid var(--color-amber, #F59E0B);
	border-radius: 0 8px 8px 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4A5568;
	font-style: italic;
}

.service-texture-note strong {
	color: var(--color-navy, #0B1F3A);
	font-weight: 700;
	font-style: normal;
}

/* ==========================================================================
   v3.10 — PRICING PAGE TEXTURE FOOTNOTE (May 17, 2026)
   ========================================================================== */

.pricing-tiers__footnote--texture {
	margin-top: 16px !important;
	font-style: italic;
	color: #4A5568;
}

.pricing-tiers__footnote--texture strong {
	color: var(--color-navy, #0B1F3A);
	font-style: normal;
	font-weight: 700;
}


/* ==========================================================================
   v3.10.3 — ABOUT PAGE: Name labels under full-width team photo
   ==========================================================================
   The homepage team photo is in a narrow column (with badge to the right),
   so its name labels sit close together. The About page photo is wider
   (max 880px centered), so labels need more spread + own max-width.
   ========================================================================== */

.about-team__name-labels {
	max-width: 880px;
	margin: 20px auto 0 auto !important;
	justify-content: space-around !important;
	gap: 16px 32px !important;
}

@media (max-width: 768px) {
	.about-team__name-labels {
		justify-content: center !important;
		gap: 12px 20px !important;
	}
}


/* ==========================================================================
   v3.10.5 — Center the years-operating badge under team photo
   ==========================================================================
   After v3.10.4 moved the badge below the name labels, it was flush-left
   (default inline-flex behavior). Centering it extends the vertical center
   axis already established by photo (centered subjects) → labels (centered
   via justify-content). Now: photo → labels → badge all share the same
   center axis as a unified visual stack.
   ========================================================================== */

.team__photo-badge {
	margin-left: auto !important;
	margin-right: auto !important;
	width: max-content;
}

/* Ensure .team__media stacks children as a centered column so margin:auto
   on the badge child actually resolves to center alignment. */
.team__media {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Photo frame should still span full width of column despite parent being
   flex-column with align-items: center (which would otherwise shrink it). */
.team__media .team__photo-frame {
	width: 100%;
	align-self: stretch;
}


/* ==========================================================================
   v3.11 — INDUSTRY DETAIL PAGES (May 17, 2026)
   ==========================================================================
   Master CSS for industry detail pages (page-industry.php template).
   HVAC is the fully-built template; 8 other industries use skeleton stub.

   Section order:
   1. Hero (Navy)            — industry-hero
   2. Trust strip (light)    — industry-trust (reuses service-trust styles)
   3. What matters most (sand) — industry-matters
   4. Channels we use (light) — industry-channels
   5. Common problems (soft-blue) — industry-challenges
   6. Example engagement (light) — reuses .anchor-result styles
   7. FAQ (sand)             — industry-faq (reuses .faq styles)
   8. Final CTA (Navy)       — industry-final-cta (reuses .final-cta styles)
   ========================================================================== */

/* --- Section 1: Industry Hero (v3.11.1 — added bg depth + trust bar) --- */

.industry-hero {
	background-color: var(--color-navy, #0B1F3A);
	color: var(--color-off-white, #FAFAF7);
	text-align: center;
	position: relative;
	overflow: hidden;
	padding-top: clamp(80px, 9vw, 120px);
	padding-bottom: clamp(80px, 9vw, 120px);
}

.industry-hero__background {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}

/* v3.23 (May 22, 2026): Removed visible glow and grid pattern from
 * industry hero. The amber glow + grid lines were the only thing making
 * industry pages visually distinct from About/Contact/Free Audit dark
 * heroes (which all render as flat navy). Rules kept but set to display:none
 * so existing HTML markup remains valid and easy to re-enable later if
 * needed without re-adding the elements. */
.industry-hero__glow,
.industry-hero__grid-pattern {
	display: none;
}

.industry-hero > .container {
	position: relative;
	z-index: 2;
}

.industry-hero__inner {
	max-width: 880px;
	margin: 0 auto;
}

.industry-hero__eyebrow {
	justify-content: center;
}

.industry-hero__headline {
	font-family: 'Inter', sans-serif;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #FFFFFF;
	margin: 16px auto 20px auto;
	max-width: 880px;
}

.industry-hero__subhead {
	font-family: 'Inter', sans-serif;
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
	line-height: 1.65;
	color: rgba(250, 250, 247, 0.85);
	margin: 0 auto 24px auto;
	max-width: 760px;
}

/* v3.23 (May 22, 2026): Restyled from amber-bordered pill to clean
 * inline text. Pill style was the only place on the site using
 * border-pill aesthetic, felt disconnected from the solid amber CTAs
 * below. Inline text keeps the info (sets price expectation early,
 * filters cheap-lead inquiries) but doesn't interrupt the read-flow
 * between subhead and CTAs. */
.industry-hero__meta {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.01em;
	margin: 0 auto 32px auto;
	max-width: 720px;
}

.industry-hero__meta strong {
	color: var(--color-amber, #F59E0B);
	font-weight: 600;
}

.industry-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 8px;
}

/* v3.11.1: 4-checkmark trust bar below CTAs (matches homepage hero) */
.industry-hero__trust-bar {
	list-style: none;
	padding: 0;
	margin: 28px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 24px;
}

.industry-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(250, 250, 247, 0.85);
	white-space: nowrap;
}

.industry-hero__trust-check {
	color: var(--color-amber, #F59E0B);
	font-weight: 800;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.industry-hero__trust-bar {
		gap: 10px 18px;
		margin-top: 22px;
	}
	.industry-hero__trust-item {
		font-size: 0.8125rem;
	}
}

/* v3.11.1: Industry final-cta inherits homepage final-cta styling.
   But the .final-cta__trust class needs a brighter color override
   here because the existing rule uses --color-on-dark-tertiary
   (#8B95A6) which is too muted. */
.industry-final-cta .final-cta__trust,
section.industry-final-cta p.final-cta__trust {
	color: rgba(250, 250, 247, 0.75) !important;
	font-size: 0.9375rem;
	margin-top: 24px;
}

/* --- Section 3: What Matters Most --- */

.industry-matters__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 32px);
	list-style: none;
	padding: 0;
	margin: clamp(40px, 5vw, 56px) 0 0 0;
}

.industry-matters__card {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 14px;
	padding: clamp(28px, 3vw, 36px);
	position: relative;
	transition: border-color 200ms ease, transform 200ms ease;
}

.industry-matters__card:hover {
	border-color: rgba(245, 158, 11, 0.4);
	transform: translateY(-2px);
}

.industry-matters__number {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--color-amber, #F59E0B);
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}

.industry-matters__card-title {
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 12px 0;
}

.industry-matters__card-body {
	font-size: 0.9375rem;
	color: #4A5568;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 768px) {
	.industry-matters__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Section 4: Channels We Use --- */

.industry-channels__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 28px);
	list-style: none;
	padding: 0;
	margin: clamp(40px, 5vw, 56px) 0 0 0;
}

.industry-channels__card {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 12px;
	padding: clamp(24px, 3vw, 32px);
	transition: border-color 200ms ease;
}

.industry-channels__card:hover {
	border-color: rgba(245, 158, 11, 0.4);
}

.industry-channels__tier {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--color-amber, #F59E0B);
	background: rgba(245, 158, 11, 0.1);
	padding: 4px 12px;
	border-radius: 999px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 12px 0;
}

.industry-channels__name {
	font-family: 'Inter', sans-serif;
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 10px 0;
}

.industry-channels__body {
	font-size: 0.9375rem;
	color: #4A5568;
	line-height: 1.65;
	margin: 0 0 16px 0;
}

.industry-channels__link {
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-amber, #F59E0B);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.industry-channels__link:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.industry-channels__grid {
		grid-template-columns: 1fr;
	}
}

/* --- Section 5: Common Challenges --- */

.industry-challenges__list {
	list-style: none;
	padding: 0;
	margin: clamp(32px, 4vw, 48px) 0 0 0;
}

.industry-challenges__item {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 10px;
	padding: 18px 22px;
	margin-bottom: 12px;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: #4A5568;
}

.industry-challenges__item strong {
	color: var(--color-navy, #0B1F3A);
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
}

/* --- Skeleton placeholder for not-yet-built industries --- */

.industry-skeleton {
	background-color: var(--color-navy, #0B1F3A);
	color: var(--color-off-white, #FAFAF7);
	text-align: center;
	padding: clamp(80px, 10vw, 128px) 0;
}

.industry-skeleton__service-list {
	list-style: none;
	padding: 0;
	margin: clamp(32px, 4vw, 48px) auto 0 auto;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.industry-skeleton__service-list li {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 8px;
	padding: 16px 20px;
	transition: border-color 200ms ease, transform 200ms ease;
}

.industry-skeleton__service-list li:hover {
	border-color: rgba(245, 158, 11, 0.4);
	transform: translateX(2px);
}

.industry-skeleton__service-list a {
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-navy, #0B1F3A);
	text-decoration: none;
	display: block;
}

.industry-skeleton__service-list a:hover {
	color: var(--color-amber, #F59E0B);
}


/* ==========================================================================
   v3.11.2 — INDUSTRIES HUB PAGE — Card Grid (May 17, 2026 evening)
   ==========================================================================
   Replaces the previous .industry-detail blocks on /industries/ with a
   clean 3x3 card grid linking to dedicated industry pages.
   ========================================================================== */

.industries-grid__list {
	list-style: none;
	padding: 0;
	margin: clamp(40px, 5vw, 56px) 0 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 3vw, 28px);
}

.industries-grid__card {
	background: #FFFFFF;
	border: 1px solid rgba(11, 31, 58, 0.08);
	border-radius: 14px;
	transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
	overflow: hidden;
}

.industries-grid__card:hover {
	border-color: rgba(245, 158, 11, 0.4);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px -12px rgba(11, 31, 58, 0.12);
}

.industries-grid__link {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 32px);
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.industries-grid__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(245, 158, 11, 0.12);
	color: var(--color-amber, #F59E0B);
	border-radius: 10px;
	margin-bottom: 16px;
}

.industries-grid__icon svg {
	width: 22px;
	height: 22px;
}

.industries-grid__name {
	font-family: 'Inter', sans-serif;
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--color-navy, #0B1F3A);
	line-height: 1.25;
	letter-spacing: -0.015em;
	margin: 0 0 4px 0;
}

.industries-grid__short {
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #6B7280;
	letter-spacing: 0.01em;
	margin: 0 0 14px 0;
}

.industries-grid__summary {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: #4A5568;
	margin: 0 0 20px 0;
	flex: 1;
}

.industries-grid__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-amber, #F59E0B);
	margin-top: auto;
}

.industries-grid__card:hover .industries-grid__cta {
	text-decoration: underline;
	text-decoration-color: var(--color-amber, #F59E0B);
}

@media (max-width: 992px) {
	.industries-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.industries-grid__list {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   v3.12.4 — FOOTER BRAND LOGO (May 17, 2026 evening)
   ==========================================================================
   Replaces the text wordmark in footer column 1 with the dark-mode logo
   variant (logo-dark.png). Dark-mode variant has cream "Nexacraft" text
   instead of dark navy, so it's visible against the dark Navy footer.
   ========================================================================== */

.footer-brand__logo-link {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 16px;
	transition: opacity 200ms ease;
}

.footer-brand__logo-link:hover,
.footer-brand__logo-link:focus-visible {
	opacity: 0.85;
}

.footer-brand__logo {
	display: block;
	height: 44px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

@media (max-width: 700px) {
	.footer-brand__logo {
		height: 38px;
		max-width: 160px;
	}
}


/* ==========================================================================
   v3.15.1 — CONTACT PAGE POLISH — May 19, 2026
   ==========================================================================
   Fixes flagged on /contact/ after WPForms 140 embed went live:

   1. WPForms Lite submit button looks off-brand (bright blue) — must match
      site-wide amber CTA system (Schedule Strategy Call, Call now, etc.)
   2. Form column heading is visually heavier than right-column heading
      even though both use .contact-grid__col-heading. Bring them in line.
   3. Contact section vertical padding doubles up against contact-hero
      above and contact-trust below — too much air.
   4. Footer reads "extra spaced" because contact-trust adds its own
      margins on top of footer ::before. Tighten contact-page footer.
   5. WPForms Lite ships default field spacing that's too loose. Reduce
      label-to-input gap + field-to-field gap.
   6. Form column was running ~40% taller than right column because of
      WPForms default vertical rhythm. Tightened spacing reduces this.
      (Two-column field layout via CSS Grid is parked — user upgrading
      WPForms Pro tomorrow, will use native Layouts field instead, which
      is cleaner than CSS hacks that break on plugin updates.)
   7. Hide Calendly section until real embed code is set up. Showing
      "Connect your Calendly here" placeholder reads as unfinished site.
      Re-enable by removing the .contact-calendar display:none rule.
   ========================================================================== */

/* --- 1. SUBMIT BUTTON: match site-wide amber CTA --- */
.wpforms-container .wpforms-submit-container,
.wpforms-container-full .wpforms-submit-container {
	margin-top: var(--space-lg);
	text-align: left;
}

.wpforms-container button[type="submit"],
.wpforms-container .wpforms-submit,
.wpforms-container-full button[type="submit"],
.wpforms-container-full .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background-color: var(--color-amber) !important;
	background-image: none !important;
	color: var(--color-navy) !important;
	border: 0 !important;
	border-radius: var(--radius-md);
	padding: 14px 28px !important;
	font-family: inherit;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.wpforms-container button[type="submit"]::after,
.wpforms-container .wpforms-submit::after,
.wpforms-container-full button[type="submit"]::after,
.wpforms-container-full .wpforms-submit::after {
	content: "→";
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	transition: transform 200ms ease;
}

.wpforms-container button[type="submit"]:hover,
.wpforms-container button[type="submit"]:focus-visible,
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus-visible,
.wpforms-container-full .wpforms-submit:hover,
.wpforms-container-full .wpforms-submit:focus-visible {
	background-color: var(--color-amber-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.wpforms-container button[type="submit"]:hover::after,
.wpforms-container .wpforms-submit:hover::after {
	transform: translateX(3px);
}

.wpforms-container button[type="submit"][disabled],
.wpforms-container .wpforms-submit[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* --- 2. FORM COLUMN HEADING: visually match right-column heading --- */
.contact-grid__form-col .contact-grid__col-heading {
	font-size: 1.375rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.contact-grid__info-col .contact-grid__col-heading {
	font-size: 1.375rem;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.005em;
}

@media (max-width: 700px) {
	.contact-grid__form-col .contact-grid__col-heading,
	.contact-grid__info-col .contact-grid__col-heading {
		font-size: 1.25rem;
	}
}

/* --- 3. CONTACT GRID SECTION: tighten top/bottom padding --- */
body.is-contact-page .contact-grid.section {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* --- 4. CONTACT-TRUST → FOOTER: tighten spacing on contact page only --- */
body.is-contact-page .contact-trust.section--compact {
	padding-top: clamp(28px, 3.5vw, 40px);
	padding-bottom: clamp(28px, 3.5vw, 40px);
}

/* The "What happens after you reach out" section sits between trust strip
   and footer. Reduce its padding so total stack-height feels purposeful. */
body.is-contact-page .contact-process.section {
	padding-top: clamp(48px, 6vw, 72px);
	padding-bottom: clamp(48px, 6vw, 72px);
}

/* --- 5. WPFORMS FIELD SPACING — tighter rhythm --- */
.wpforms-container .wpforms-field,
.wpforms-container-full .wpforms-field {
	padding: 0 0 14px 0 !important;
	margin: 0 !important;
}

.wpforms-container .wpforms-field-label,
.wpforms-container-full .wpforms-field-label {
	display: block;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: var(--color-navy) !important;
	margin-bottom: 6px !important;
	line-height: 1.3;
}

.wpforms-container .wpforms-required-label {
	color: var(--color-amber-dark);
	font-weight: 700;
	margin-left: 2px;
}

/* Inputs / selects / textarea — clean uniform style */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="url"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container select,
.wpforms-container textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 11px 14px !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	line-height: 1.4 !important;
	color: var(--color-near-black) !important;
	background-color: #FFFFFF !important;
	border: 1px solid var(--color-hairline) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: none !important;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpforms-container textarea {
	min-height: 110px !important;
	resize: vertical;
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container input[type="url"]:focus,
.wpforms-container input[type="tel"]:focus,
.wpforms-container input[type="number"]:focus,
.wpforms-container select:focus,
.wpforms-container textarea:focus {
	border-color: var(--color-amber) !important;
	box-shadow: 0 0 0 3px var(--color-amber-soft) !important;
	outline: none !important;
}

/* Checkbox group — tighter, paired columns where space allows */
.wpforms-container .wpforms-field-checkbox ul,
.wpforms-container .wpforms-field-radio ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media (max-width: 540px) {
	.wpforms-container .wpforms-field-checkbox ul,
	.wpforms-container .wpforms-field-radio ul {
		grid-template-columns: 1fr;
	}
}

.wpforms-container .wpforms-field-checkbox li,
.wpforms-container .wpforms-field-radio li {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.9rem;
	line-height: 1.4;
}

.wpforms-container .wpforms-field-checkbox li input[type="checkbox"],
.wpforms-container .wpforms-field-radio li input[type="radio"] {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: var(--color-amber);
}

/* Sublabel / description text (the small hint text WPForms shows) */
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description {
	font-size: 0.8125rem !important;
	color: var(--color-grey, #666) !important;
	margin-top: 4px !important;
	line-height: 1.4;
}

/* Tighten the inner form-wrap padding now that fields are denser */
.contact-grid__form-wrap {
	padding: clamp(24px, 3vw, 32px);
}

/* --- 6. (parked: 2-col field layout — will use WPForms Pro Layouts field) --- */

/* --- 7. HIDE CALENDLY SECTION UNTIL REAL EMBED IS SET UP --- */
/* TODO v3.15.2: remove this rule once contact-calendar__placeholder is replaced
   with real Calendly inline-widget embed code. */
body.is-contact-page .contact-calendar.section {
	display: none !important;
}

/* ==========================================================================
   v3.15.2 — CONTACT PAGE FOOTER GAP FIX — May 19, 2026
   ==========================================================================
   ISSUE: User reported "extra space above footer on contact page only."
   v3.15.1 reduced .contact-process bottom padding to clamp(48px,6vw,72px)
   but at 1200px+ viewports this still hits 72px max, AND the section uses
   the same off-white bg as the cards inside it, so the eye reads ALL the
   space below the cards as "empty," not just the section padding.

   DIAGNOSIS: This is the LAST section before <footer>. Standard sections
   above are FOLLOWED by another section so their padding-bottom = breathing
   room between two distinct visual blocks. The last-before-footer section
   needs much less padding-bottom because:
     a) The navy footer band already provides strong visual separation
     b) Footer ::before tagline strip has its own internal padding
     c) Section padding-bottom + footer padding-top stack visually

   FIX: Three-layer surgical reduction (don't use !important on the section
   selector itself — keep cascade clean — only !important on the override).

   1. Reduce .contact-process bottom padding to 24px-40px range on contact page.
   2. Tighten contact-process__header bottom margin (the "subhead" gap) since
      the section's vertical density is now uniformly tighter.
   3. Belt-and-suspenders: also set main--contact bottom padding to 0 in case
      any inherited padding from .site-main is contributing.
   ========================================================================== */

/* Override v3.15.1 — much tighter bottom padding now */
body.is-contact-page .contact-process.section {
	padding-top: clamp(40px, 5vw, 56px);
	padding-bottom: clamp(24px, 3vw, 40px) !important;
}

/* Header inside the process section — reduce internal margin too */
body.is-contact-page .contact-process .contact-process__header {
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

/* Kill any inherited bottom space from .site-main wrapper */
body.is-contact-page .site-main--contact {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Mobile — even tighter */
@media (max-width: 700px) {
	body.is-contact-page .contact-process.section {
		padding-top: 32px;
		padding-bottom: 20px !important;
	}
}

/* ==========================================================================
   v3.15.3 — CONTACT PAGE FOOTER-TOP FIX — May 19, 2026
   ==========================================================================
   CORRECTION TO PREVIOUS DIAGNOSIS:

   v3.15.2 reduced .contact-process bottom padding (the OFF-WHITE space below
   the 4-card grid). That was the WRONG fix. User clarified the issue is the
   NAVY space INSIDE the footer — between the top edge of the footer band
   and the "Nexacraft" brand logo.

   ROOT CAUSE: homepage.css line 3674 (v3.7.1) sets:
       html body .site-footer .site-footer__top {
           padding-top: clamp(56px, 7vw, 80px) !important;
       }
   That rule applies to ALL pages. On pages with .site-footer__intro
   ("Still thinking it over?") block above it, 80px is correct breathing
   room. On CONTACT PAGE that intro block is HIDDEN (excluded in
   footer-custom.php line 34), so 80px is excessive — the eye reads it
   as an empty navy band above the column grid.

   FIX: Override .site-footer__top padding-top on contact page only.
   Reduce from 80px → 32-40px. Belt-and-suspenders: also reduce padding-top
   on .site-footer itself in case any inherited padding contributes.
   ========================================================================== */

body.is-contact-page .site-footer .site-footer__top,
body.is-contact-page footer.site-footer .site-footer__top,
body.is-contact-page.nexacraft-theme .site-footer__top {
	padding-top: clamp(32px, 4vw, 48px) !important;
}

/* Mobile — even tighter */
@media (max-width: 700px) {
	body.is-contact-page .site-footer .site-footer__top,
	body.is-contact-page footer.site-footer .site-footer__top {
		padding-top: 28px !important;
	}
}

/* ==========================================================================
   v3.15.4 — CONTACT PAGE: RESTORE NORMAL FOOTER + PROCESS SPACING — May 19, 2026
   ==========================================================================
   USER FEEDBACK: "I want it same as it is for all other pages. Find what's
   different on contact page."

   ROOT-CAUSE DIAGNOSIS (after auditing every other page's footer rendering):

   The navy void above the footer brand on contact page is caused by TWO
   stacked padding-tops that DON'T stack on other pages:

   (1) homepage.css line 3674 (universal):
       .site-footer__top { padding-top: clamp(56px, 7vw, 80px) !important; }
       → applies to ALL pages, creates the standard navy band above column grid

   (2) homepage.css line 3038 (contact-page ONLY, added v3.7.3):
       body.is-contact-page .site-footer { padding-top: clamp(48px, 7vw, 80px) !important; }
       → was added to "compensate" for the hidden ::before tagline strip

   v3.7.3 was a misdiagnosis. The .site-footer__top padding-top in (1) already
   provides the navy gap above the columns on EVERY page including contact.
   Adding (2) on top of (1) creates ~160px of stacked navy void on contact only.

   Other pages = 80px navy gap. Contact = 160px. That's the discrepancy.

   SECONDARY ISSUE: v3.15.1 and v3.15.2 both reduced .contact-process bottom
   padding (24-72px) trying to fix the navy gap. Wrong target — compressed
   "What happens after you reach out" section bottom instead. User noticed
   ("you decreased the bottom padding in What to expect section").

   FIX:
   - Neutralize the duplicate .site-footer padding-top from v3.7.3 (kill it on contact)
   - Neutralize v3.15.3's reduced .site-footer__top padding-top (let it equal other pages)
   - Neutralize v3.15.1 + v3.15.2's reduced .contact-process padding (restore to base)
   - Neutralize v3.15.2's other guesswork rules

   These are written as ADDITIVE overrides at the bottom of the file so they
   load last and beat the earlier rules without us needing to edit/remove
   any historical patches above (preserves audit trail, easier rollback).
   ========================================================================== */

/* Kill v3.7.3 extra padding-top on .site-footer that was stacking with
   .site-footer__top padding-top to double the navy void. */
body.is-contact-page .site-footer {
	padding-top: 0 !important;
}

/* Restore .site-footer__top padding-top to match every other page exactly
   (overrides v3.15.3 which incorrectly reduced it on contact). */
body.is-contact-page .site-footer .site-footer__top,
body.is-contact-page footer.site-footer .site-footer__top,
body.is-contact-page.nexacraft-theme .site-footer__top {
	padding-top: clamp(56px, 7vw, 80px) !important;
}

@media (max-width: 700px) {
	body.is-contact-page .site-footer .site-footer__top,
	body.is-contact-page footer.site-footer .site-footer__top {
		padding-top: clamp(56px, 7vw, 80px) !important;
	}
}

/* Restore .contact-process padding to base .section values (the "What
   happens after you reach out" block). v3.15.1 and v3.15.2 incorrectly
   compressed this trying to fix the footer issue. Now that the footer
   issue is fixed at its actual source above, this section returns to
   normal vertical rhythm matching every other page's section. */
body.is-contact-page .contact-process.section {
	padding-top: clamp(64px, 7vw, 96px) !important;
	padding-bottom: clamp(64px, 7vw, 96px) !important;
}

@media (max-width: 700px) {
	body.is-contact-page .contact-process.section {
		padding-top: clamp(64px, 7vw, 96px) !important;
		padding-bottom: clamp(64px, 7vw, 96px) !important;
	}
}

/* Restore .contact-process__header margin-bottom to its design default.
   (v3.15.2 tightened this; revert.) */
body.is-contact-page .contact-process .contact-process__header {
	margin-bottom: clamp(40px, 5vw, 64px) !important;
}

/* Remove v3.15.2's .site-main--contact override (was a guess; not needed). */
body.is-contact-page .site-main--contact {
	padding-bottom: revert;
	margin-bottom: revert;
}
/* ==========================================================================
   v3.16 — CALENDLY LIVE — May 19, 2026
   ==========================================================================
   Calendly inline widget is now embedded in page-contact.php (replacing the
   v3.7.x placeholder). This patch:

   1. Re-enables the .contact-calendar section by overriding v3.15.1's
      display:none rule. (We override rather than delete the original to
      preserve audit trail of every change. The cascade order works because
      v3.16 comes after v3.15.1 in the file.)

   2. Styles the Calendly widget container so it integrates with the page
      visually rather than feeling like an iframe dropped on top. Inherits
      the white card styling already applied to .contact-calendar__embed-wrap
      in pages.css line 1348.

   3. Responsive height: Calendly's default 700px works for desktop, but on
      mobile the calendar grid wraps into a single column requiring more
      vertical space (~1000-1100px). Without this, mobile users see a
      scrollbar INSIDE the widget — feels broken.

   4. Loading state: Calendly's widget JS takes ~200-500ms to initialize.
      During that window the .calendly-inline-widget div has 0 height,
      causing a content jump when the widget renders. We set a stable
      min-height so the page doesn't shift.

   5. Removes the now-redundant .contact-calendar__placeholder styles cleanup
      reminder — placeholder div is gone from page-contact.php.
   ========================================================================== */

/* --- 1. Re-enable the section --- */
/* Override v3.15.1's display:none. The original rule is preserved above for
   audit trail; this overrides it via cascade order (later in file = wins). */
body.is-contact-page .contact-calendar.section {
	display: block !important;
}

/* --- 2. Calendly widget container styling --- */
.calendly-inline-widget {
	/* Calendly's inline-style sets min-width:320px;height:700px. We add
	   width 100% so it fills the .contact-calendar__embed-wrap card cleanly. */
	width: 100%;
	max-width: 100%;
	/* Stable min-height while widget JS loads — prevents content jump.
	   Slightly less than the JS-set 700px so we don't double-size after load. */
	min-height: 680px;
	/* Smooth transition into final rendered state */
	transition: min-height 250ms ease;
}

/* The .contact-calendar__embed-wrap card already has white bg + radius +
   border (pages.css line 1348). We just tighten its padding so the widget
   sits closer to the edges of the card — Calendly's own margins provide
   visual breathing room internally. */
.contact-calendar__embed-wrap {
	padding: clamp(16px, 2vw, 24px) !important;
}

/* --- 3. Responsive: mobile needs more vertical space --- */
@media (max-width: 900px) {
	.calendly-inline-widget {
		min-height: 900px;
		/* Override Calendly's inline style:height via attribute selector +
		   higher specificity. We use !important here because the height is
		   set as an inline style attribute by Calendly, which would otherwise
		   beat our class-based rule. */
		height: 900px !important;
	}
}

@media (max-width: 600px) {
	.calendly-inline-widget {
		min-height: 1050px;
		height: 1050px !important;
	}

	/* Tighter card padding on mobile so widget gets more usable width */
	.contact-calendar__embed-wrap {
		padding: 12px !important;
	}
}

/* --- 4. NoScript fallback styling (when JS is disabled) --- */
.contact-calendar__noscript {
	text-align: center;
	color: var(--color-grey);
	padding: var(--space-2xl) var(--space-md);
}

.contact-calendar__noscript p {
	margin: 0 0 var(--space-md);
}

.contact-calendar__noscript strong {
	color: var(--color-navy);
	font-size: 1.125rem;
}

/* --- 5. Calendly widget visual harmony with site brand --- */
/* The widget's internal styling is controlled by URL params passed to Calendly
   (background_color, text_color, primary_color in page-contact.php). The
   outer wrapper visual integration is handled by .contact-calendar__embed-wrap
   styles already in pages.css. No further overrides needed — Calendly's iframe
   is sandboxed and can't be styled from parent CSS anyway. */


/* ==========================================================================
   v3.20 (May 21, 2026) — NO-LINK MENU ITEMS
   ==========================================================================
   Some parent menu items (like "Services") are dropdown labels only — they
   exist to group submenu items but don't have a real destination page.
   This class is applied via WP Admin > Appearance > Menus > [item] > CSS Classes.
   
   Behavior:
   - Desktop: hover reveals dropdown, click does nothing (default cursor)
   - Mobile: tap reveals submenu, doesn't navigate
   - SEO: parent <a> still has href, but rel="nofollow" via JS (no crawl waste)
   - A11y: keyboard focus still triggers dropdown via :focus-within (existing CSS)
   ========================================================================== */

.primary-nav__list .no-link > a {
	cursor: default;
}

.primary-nav__list .no-link > a:hover,
.primary-nav__list .no-link > a:focus-visible {
	/* Keep visual feedback that you're hovering a parent (chevron rotates via existing rule),
	   but suppress any underline/color shift that implies it's a clickable destination. */
	text-decoration: none;
}

/* On mobile, no-link parents should still feel tappable to open submenu —
   the cursor:default doesn't matter on touch, but ensure tap-target sizing
   matches other menu items (already inherited from .primary-nav__list a). */
@media (max-width: 991px) {
	.primary-nav__list .no-link > a {
		/* No special override needed — the JS handler intercepts the tap. */
	}
}

/* v3.20 mobile submenu rule was superseded by v3.21 accordion CSS (above). */