/**
 * Nabajute Theme — Main Stylesheet
 *
 * Export-oriented composite jute mill. Clean, trust-first, natural-industry design.
 *
 * @package Nabajute
 * @version 2.0.0
 */

/* ==========================================================================
   §3 — Design Tokens
   ========================================================================== */

:root {
	/* Brand palette */
	--ink:        #1A1C18;
	--ink-soft:   #55584E;
	--paper:      #F6F5F0;
	--surface:    #FFFFFF;
	--line:       #E4E2DA;
	--brand:      #234032;
	--brand-700:  #1B3227;
	--accent:     #C08A2D;
	--accent-600: #A9781F;

	/* Typography */
	--font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Spacing rhythm: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
	--sp-4:  0.25rem;
	--sp-8:  0.5rem;
	--sp-12: 0.75rem;
	--sp-16: 1rem;
	--sp-24: 1.5rem;
	--sp-32: 2rem;
	--sp-48: 3rem;
	--sp-64: 4rem;
	--sp-96: 6rem;

	/* Layout */
	--container-max: 1240px;
	--gutter: 24px;

	/* Radius — one scale */
	--radius-card: 12px;
	--radius-btn:  8px;
	--radius-input: 8px;

	/* Shadows — tinted to background, never pure black */
	--shadow-rest:  0 1px 2px rgba(26,28,24,.04);
	--shadow-hover: 0 12px 32px rgba(26,28,24,.10);

	/* §5 Motion tokens */
	--ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--dur-hover:   180ms;
	--dur-reveal:  560ms;
	--dur-press:   140ms;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--brand);
	text-decoration: none;
	transition: color var(--dur-hover) var(--ease-out);
}

a:hover,
a:focus-visible {
	color: var(--brand-700);
}

/* Focus rings — visible on all interactive elements */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.1;
	margin-top: 0;
	color: var(--ink);
}

h1 { font-size: clamp(2.25rem, 5vw, 3rem);   line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.1; }
h3 { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.15; }
h4 { font-size: 1.125rem; line-height: 1.2; }

p {
	margin-top: 0;
	margin-bottom: var(--sp-16);
	max-width: 68ch;
}

ul, ol {
	padding-left: var(--sp-24);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--surface);
	border-radius: var(--radius-btn);
	box-shadow: 0 0 2px 2px rgba(26,28,24,.3);
	clip: auto !important;
	clip-path: none;
	color: var(--ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link:focus {
	z-index: 100000;
	position: fixed;
	top: 0;
	left: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

@media (max-width: 767px) {
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

/* ==========================================================================
   Header — white background, 25/50/25 grid, sticky
   ========================================================================== */

.site-header {
	background-color: var(--surface);
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--dur-hover) var(--ease-out),
	            border-color var(--dur-hover) var(--ease-out);
}

.site-header.scrolled {
	box-shadow: 0 2px 16px rgba(26,28,24,.10);
	border-bottom-color: transparent;
}

.header-inner {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	height: 72px;
	gap: var(--sp-16);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--sp-12);
}

.site-logo img {
	max-height: 44px;
	width: auto;
}

.site-title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.site-title a {
	color: var(--brand);
	transition: color var(--dur-hover) var(--ease-out);
}

.site-title a:hover {
	color: var(--brand-700);
}

.site-description {
	display: none; /* Hidden in nav; branding is logo + title only */
}

/* Navigation — centered in header (middle column) */
.main-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-8);
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--sp-4);
	align-items: center;
	justify-content: center;
}

.main-navigation a {
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.9375rem;
	padding: var(--sp-8) var(--sp-12);
	border-radius: var(--radius-btn);
	transition: color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out);
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: var(--brand);
	background: rgba(35,64,50,.06);
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	color: var(--brand);
	background: rgba(35,64,50,.08);
	font-weight: 600;
}

/* Header CTA — right-aligned in third column */
.header-cta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Nav CTA button — "Request a Quote" */
.nav-cta {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: var(--accent);
	color: #FFFFFF !important;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: var(--radius-btn);
	white-space: nowrap;
	transition: background var(--dur-hover) var(--ease-out), transform var(--dur-press) var(--ease-out);
}

.nav-cta:hover {
	background: var(--accent-600);
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

.nav-cta:active {
	transform: translateY(0) scale(.99);
}

/* Mobile menu toggle */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--sp-8);
	flex-direction: column;
	gap: 5px;
}

.hamburger-line {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--ink);
	transition: transform var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

@media (max-width: 1023px) {
	.header-inner {
		display: flex;
		justify-content: space-between;
		height: 64px;
	}

	.menu-toggle {
		display: flex;
	}

	.header-cta {
		display: none;
	}

	/* Mobile dropdown — wraps ul and CTA together */
	.main-navigation {
		position: static;
	}

	.main-navigation ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--surface);
		flex-direction: column;
		padding: var(--sp-16) var(--gutter) var(--sp-8);
		gap: var(--sp-4);
		box-shadow: 0 8px 24px rgba(26,28,24,.12);
		border-top: 1px solid var(--line);
		z-index: 100;
	}

	.main-navigation.toggled ul {
		display: flex;
	}

	.main-navigation ul li {
		width: 100%;
	}

	.main-navigation a {
		display: block;
		padding: var(--sp-12) var(--sp-16);
		color: var(--ink);
	}

}

/* Mobile CTA menu item — hidden on desktop, visible in mobile dropdown */
.nav-cta-mobile-item {
	display: none !important;
}

@media (max-width: 1023px) {
	.nav-cta-mobile-item {
		display: block !important;
		margin-top: var(--sp-8);
		padding-top: var(--sp-8);
		border-top: 1px solid var(--line);
	}

	.nav-cta-mobile-item .nav-cta {
		display: block;
		text-align: center;
		padding: var(--sp-12) var(--sp-24);
		border-radius: var(--radius-btn);
	}
}

/* ==========================================================================
   Buttons — §3.D
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-8);
	padding: 14px 24px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	border-radius: var(--radius-btn);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--dur-hover) var(--ease-out),
	            color var(--dur-hover) var(--ease-out),
	            border-color var(--dur-hover) var(--ease-out),
	            transform var(--dur-press) var(--ease-out);
}

.btn:active {
	transform: scale(.99);
}

.btn-primary {
	background-color: var(--brand);
	color: #FFFFFF;
	border-color: var(--brand);
}

.btn-primary:hover {
	background-color: var(--brand-700);
	border-color: var(--brand-700);
	color: #FFFFFF;
	transform: translateY(-1px);
}

.btn-secondary {
	background-color: transparent;
	color: var(--ink);
	border-color: var(--ink);
}

.btn-secondary:hover {
	background-color: var(--ink);
	color: #FFFFFF;
}

/* White variant for dark backgrounds */
.btn-white {
	background-color: #FFFFFF;
	color: var(--brand);
	border-color: #FFFFFF;
}

.btn-white:hover {
	background-color: rgba(255,255,255,.92);
	color: var(--brand-700);
	transform: translateY(-1px);
}

.btn-outline-white {
	background-color: transparent;
	color: #FFFFFF;
	border-color: rgba(255,255,255,.4);
}

.btn-outline-white:hover {
	background-color: rgba(255,255,255,.1);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

.btn-accent {
	background-color: var(--accent);
	color: #FFFFFF;
	border-color: var(--accent);
}

.btn-accent:hover {
	background-color: var(--accent-600);
	border-color: var(--accent-600);
	color: #FFFFFF;
	transform: translateY(-1px);
}

/* ==========================================================================
   §5 — Scroll Reveal System
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-reveal) var(--ease-out),
	            transform var(--dur-reveal) var(--ease-out);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }
.reveal-delay-5 { transition-delay: 300ms; }

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

/* ==========================================================================
   §5.C — Hover Micro-interactions
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.card {
		transition: transform var(--dur-hover) var(--ease-out),
		            box-shadow var(--dur-hover) var(--ease-out);
	}

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

	.media-zoom {
		overflow: hidden;
		border-radius: var(--radius-card);
	}

	.media-zoom img {
		transition: transform 420ms var(--ease-out);
	}

	.media-zoom:hover img {
		transform: scale(1.04);
	}
}

/* ==========================================================================
   Section System
   ========================================================================== */

.section {
	padding: var(--sp-96) 0;
}

@media (max-width: 767px) {
	.section {
		padding: 56px 0;
	}
}

.section--alt {
	background-color: var(--surface);
}

.section--dark {
	background-color: var(--brand);
	color: #FFFFFF;
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: #FFFFFF;
}

.section--dark p {
	color: rgba(255,255,255,.85);
}

.section-header {
	margin-bottom: var(--sp-48);
}

.section-header--center {
	text-align: center;
}

.section-header--center p {
	margin-left: auto;
	margin-right: auto;
}

.section-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-12);
}

.section--dark .section-eyebrow {
	color: var(--accent);
}

/* ==========================================================================
   HOME — §6.1 Hero (split layout)
   ========================================================================== */

.hero {
	background-color: var(--brand);
	color: #FFFFFF;
	overflow: hidden;
}

.hero .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-48);
	align-items: center;
	min-height: calc(100vh - 72px);
	max-height: 800px;
	padding-top: var(--sp-48);
	padding-bottom: var(--sp-48);
}

.hero-content {
	max-width: 540px;
}

.hero-eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-16);
}

.hero-title {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.05;
	color: #FFFFFF;
	margin-bottom: var(--sp-16);
}

.hero-subtitle {
	font-size: clamp(1.0625rem, 2vw, 1.25rem);
	line-height: 1.6;
	color: rgba(255,255,255,.85);
	margin-bottom: var(--sp-32);
	max-width: 460px;
}

.hero-ctas {
	display: flex;
	gap: var(--sp-16);
	flex-wrap: wrap;
}

.hero-image {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 400px;
	border-radius: var(--radius-card);
}

/* Hero placeholder when no image is set */
.hero-image-placeholder {
	background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	border-radius: var(--radius-card);
	border: 1px dashed rgba(255,255,255,.2);
}

.hero-image-placeholder span {
	font-size: 0.875rem;
	color: rgba(255,255,255,.4);
}

@media (max-width: 1023px) {
	.hero .container {
		grid-template-columns: 1fr;
		min-height: auto;
		max-height: none;
		padding-top: var(--sp-48);
		padding-bottom: var(--sp-32);
	}

	.hero-image {
		order: -1;
	}

	.hero-image img {
		min-height: 260px;
		max-height: 360px;
	}
}

@media (max-width: 767px) {
	.hero .container {
		padding-top: var(--sp-32);
		padding-bottom: var(--sp-32);
	}
}

/* ==========================================================================
   HOME — §6.1.2 Trust / Credibility Strip
   ========================================================================== */

.trust-strip {
	background-color: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-24) 0;
}

.trust-strip .container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-48);
	flex-wrap: wrap;
}

.trust-strip img {
	height: 36px;
	width: auto;
	opacity: 0.5;
	filter: grayscale(100%);
	transition: opacity var(--dur-hover) var(--ease-out), filter var(--dur-hover) var(--ease-out);
}

.trust-strip img:hover {
	opacity: 0.8;
	filter: grayscale(0%);
}

.trust-strip-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ink-soft);
	white-space: nowrap;
}

/* ==========================================================================
   HOME — §6.1.3 Product Range Grid
   ========================================================================== */

.products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-24);
}

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

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

.product-card {
	background: var(--surface);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-rest);
	display: flex;
	flex-direction: column;
}

.product-card-image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--line);
}

.product-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card-body {
	padding: var(--sp-24);
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-card-body h3 {
	font-size: 1.25rem;
	margin-bottom: var(--sp-8);
}

.product-card-body p {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	flex: 1;
	margin-bottom: var(--sp-16);
}

.product-card-body .product-link {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--brand);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	transition: gap var(--dur-hover) var(--ease-out);
}

.product-card-body .product-link:hover {
	gap: var(--sp-8);
}

/* ==========================================================================
   HOME — §6.1.4 Stats Row (Counter widget style)
   ========================================================================== */

.stats-row {
	background: var(--surface);
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-32);
	text-align: center;
}

@media (max-width: 767px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-24);
	}
}

.stat-item .stat-number {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--brand);
	line-height: 1;
	margin-bottom: var(--sp-8);
}

.stat-item .stat-suffix {
	font-size: 0.6em;
	color: var(--accent);
}

.stat-item .stat-label {
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* ==========================================================================
   HOME — §6.1.5 Sustainability Teaser (full-width statement)
   ========================================================================== */

.sustainability-teaser {
	background: var(--brand);
	color: #FFFFFF;
	position: relative;
	overflow: hidden;
}

.sustainability-teaser .container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-64);
	align-items: center;
}

.sustainability-teaser-image {
	border-radius: var(--radius-card);
	overflow: hidden;
}

.sustainability-teaser-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 320px;
}

.sustainability-teaser h2 {
	color: #FFFFFF;
	margin-bottom: var(--sp-16);
}

.sustainability-teaser p {
	color: rgba(255,255,255,.85);
	font-size: 1.125rem;
	margin-bottom: var(--sp-24);
}

@media (max-width: 767px) {
	.sustainability-teaser .container {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}
}

/* ==========================================================================
   HOME — §6.1.6 Process Flow Diagram
   ========================================================================== */

.process-flow {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0;
	padding: var(--sp-16) 0;
}

/* The connecting track line behind all steps */
.process-flow::before {
	content: '';
	position: absolute;
	top: 48px;
	left: 10%;
	right: 10%;
	height: 3px;
	background: linear-gradient(90deg, var(--brand) 0%, var(--accent) 50%, var(--brand) 100%);
	border-radius: 2px;
	z-index: 0;
}

.process-step {
	text-align: center;
	position: relative;
	z-index: 1;
	flex: 1;
	min-width: 0;
	padding: 0 var(--sp-8);
}

/* Icon circle */
.process-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--surface);
	border: 3px solid var(--brand);
	color: var(--brand);
	margin: 0 auto var(--sp-12);
	position: relative;
	box-shadow: 0 4px 16px rgba(26,28,24,.08);
	transition: transform var(--dur-hover) var(--ease-out),
	            background var(--dur-hover) var(--ease-out),
	            color var(--dur-hover) var(--ease-out),
	            border-color var(--dur-hover) var(--ease-out);
}

.process-step-icon svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Step number badge */
.process-step-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent);
	color: #FFFFFF;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.6875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(192,138,45,.3);
}

/* Arrow between steps */
.process-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	padding-top: 24px;
	color: var(--brand);
	opacity: 0.5;
}

.process-arrow svg {
	width: 20px;
	height: 20px;
}

/* Step text */
.process-step h4 {
	font-size: 0.9375rem;
	font-weight: 700;
	margin-bottom: var(--sp-4);
	color: var(--ink);
}

.process-step-desc {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ink-soft);
	max-width: 140px;
	margin: 0 auto;
}

/* Hover: icon fills with brand color */
@media (hover: hover) and (pointer: fine) {
	.process-step:hover .process-step-icon {
		background: var(--brand);
		color: #FFFFFF;
		transform: translateY(-3px);
		border-color: var(--brand);
	}
}

/* Tablet: 3×2 grid with arrows hidden */
@media (max-width: 1023px) {
	.process-flow {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-24) var(--sp-16);
	}

	.process-flow::before {
		display: none;
	}

	.process-arrow {
		display: none;
	}
}

/* Mobile: 2-column */
@media (max-width: 599px) {
	.process-flow {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   HOME — §6.1.7 CTA Band
   ========================================================================== */

.cta-band {
	background: var(--brand);
	color: #FFFFFF;
	text-align: center;
	padding: var(--sp-64) 0;
}

.cta-band h2 {
	color: #FFFFFF;
	margin-bottom: var(--sp-16);
}

.cta-band p {
	color: rgba(255,255,255,.85);
	font-size: 1.125rem;
	margin: 0 auto var(--sp-32);
}

/* ==========================================================================
   ABOUT — §6.2
   ========================================================================== */

.about-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-64);
	align-items: start;
}

@media (max-width: 767px) {
	.about-intro {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}
}

.about-intro .entry-content p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
}

.spec-block {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	box-shadow: var(--shadow-rest);
}

.spec-block dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-8) var(--sp-24);
	margin: 0;
}

.spec-block dt {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.spec-block dd {
	margin: 0;
	font-size: 1rem;
}

/* Composite-mill advantage */
.advantage-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-24);
}

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

.advantage-card {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	border-top: 3px solid var(--brand);
	box-shadow: var(--shadow-rest);
}

.advantage-card h3 {
	font-size: 1.125rem;
	margin-bottom: var(--sp-8);
}

.advantage-card p {
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

/* ==========================================================================
   PRODUCTS — §6.3
   ========================================================================== */

.product-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-48);
	align-items: start;
}

@media (max-width: 767px) {
	.product-detail-grid {
		grid-template-columns: 1fr;
	}
}

.product-detail-image {
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--line);
	aspect-ratio: 4 / 3;
}

.product-detail-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Spec table */
.spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.spec-table th,
.spec-table td {
	text-align: left;
	padding: var(--sp-12) var(--sp-16);
	border-bottom: 1px solid var(--line);
}

.spec-table th {
	font-weight: 600;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--paper);
}

.spec-table tr:last-child td {
	border-bottom: none;
}

/* Product sections — alternating layout */
.product-section {
	padding: var(--sp-64) 0;
	border-bottom: 1px solid var(--line);
}

.product-section:last-child {
	border-bottom: none;
}

.product-section:nth-child(even) .product-detail-grid {
	direction: rtl;
}

.product-section:nth-child(even) .product-detail-grid > * {
	direction: ltr;
}

/* ==========================================================================
   SUSTAINABILITY — §6.4
   ========================================================================== */

.eco-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
}

@media (max-width: 1023px) {
	.eco-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.eco-cards {
		grid-template-columns: 1fr;
	}
}

.eco-card {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	text-align: center;
	box-shadow: var(--shadow-rest);
}

.eco-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(35,64,50,.08);
	color: var(--brand);
	font-size: 1.5rem;
	margin-bottom: var(--sp-16);
}

.eco-card h3 {
	font-size: 1.0625rem;
	margin-bottom: var(--sp-8);
}

.eco-card p {
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* Full-width golden fibre statement */
.golden-fibre {
	background: var(--brand);
	color: #FFFFFF;
	text-align: center;
}

.golden-fibre h2 {
	color: var(--accent);
	font-size: clamp(2rem, 4vw, 2.5rem);
}

.golden-fibre p {
	font-size: 1.125rem;
	color: rgba(255,255,255,.85);
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   QUALITY — §6.5
   ========================================================================== */

.cert-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-24);
}

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

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

.cert-card {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	text-align: center;
	box-shadow: var(--shadow-rest);
	border: 1px solid var(--line);
}

.cert-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(35,64,50,.08);
	color: var(--brand);
	margin-bottom: var(--sp-16);
}

.cert-card h3 {
	font-size: 1rem;
	margin-bottom: var(--sp-4);
}

.cert-card p {
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.cert-card .cert-status {
	display: inline-block;
	margin-top: var(--sp-8);
	padding: var(--sp-4) var(--sp-12);
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cert-status--active {
	background: rgba(35,64,50,.08);
	color: var(--brand);
}

.cert-status--pending {
	background: rgba(192,138,45,.1);
	color: var(--accent-600);
}

/* QC narrative */
.qc-process {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-48);
	align-items: center;
}

@media (max-width: 767px) {
	.qc-process {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   CONTACT — §6.6
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: var(--sp-48);
	padding-bottom: var(--sp-64);
}

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

.contact-info {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	box-shadow: var(--shadow-rest);
	align-self: start;
}

.contact-info h2 {
	font-size: 1.375rem;
	margin-bottom: var(--sp-24);
}

.contact-item {
	margin-bottom: var(--sp-24);
	padding-bottom: var(--sp-24);
	border-bottom: 1px solid var(--line);
}

.contact-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.contact-item-label {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	margin-bottom: var(--sp-4);
}

.contact-item a {
	font-size: 1rem;
	color: var(--brand);
	font-weight: 500;
}

.contact-item p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ink);
	line-height: 1.6;
}

.contact-hours {
	font-size: 0.8125rem;
	color: var(--ink-soft);
	margin-top: var(--sp-4);
}

/* Contact form */
.contact-form-area {
	background: var(--surface);
	border-radius: var(--radius-card);
	padding: var(--sp-32);
	box-shadow: var(--shadow-rest);
}

.contact-form-area h2 {
	font-size: 1.375rem;
	margin-bottom: var(--sp-24);
}

/* Form styles for the custom plugin form + CF7/Fluent Forms */
.nabajute-form .form-row {
	margin-bottom: var(--sp-24);
}

.nabajute-form .form-row-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-16);
}

@media (max-width: 599px) {
	.nabajute-form .form-row-half {
		grid-template-columns: 1fr;
	}
}

.nabajute-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: var(--sp-4);
}

.nabajute-form input[type="text"],
.nabajute-form input[type="email"],
.nabajute-form input[type="tel"],
.nabajute-form input[type="url"],
.nabajute-form input[type="number"],
.nabajute-form select,
.nabajute-form textarea {
	display: block;
	width: 100%;
	padding: var(--sp-12) var(--sp-16);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-input);
	transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out);
}

.nabajute-form input:focus,
.nabajute-form select:focus,
.nabajute-form textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(35,64,50,.12);
}

.nabajute-form textarea {
	resize: vertical;
	min-height: 120px;
}

.nabajute-form .form-error {
	font-size: 0.8125rem;
	color: #C0392B;
	margin-top: var(--sp-4);
}

.nabajute-form .form-submit {
	margin-top: var(--sp-8);
}

/* Form status messages */
.form-success {
	background: rgba(35,64,50,.06);
	border: 1px solid var(--brand);
	border-radius: var(--radius-card);
	padding: var(--sp-24);
	color: var(--brand);
	font-weight: 500;
}

.form-error-message {
	background: rgba(192,57,43,.06);
	border: 1px solid #C0392B;
	border-radius: var(--radius-card);
	padding: var(--sp-24);
	color: #C0392B;
	font-weight: 500;
}

/* ==========================================================================
   Posts Grid (blog / archive)
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sp-24);
}

.post-card {
	background-color: var(--surface);
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-rest);
}

.post-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.post-card-body,
.post-card-content {
	padding: var(--sp-24);
}

.post-card .entry-title {
	font-size: 1.25rem;
	margin-bottom: var(--sp-8);
}

.post-card .entry-title a {
	color: var(--ink);
}

.post-card .entry-title a:hover {
	color: var(--brand);
}

.post-card .entry-meta {
	font-size: 0.8125rem;
	color: var(--ink-soft);
	margin-bottom: var(--sp-8);
}

.post-card .entry-summary {
	color: var(--ink-soft);
	font-size: 0.9375rem;
}

.read-more-link {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--brand);
}

/* ==========================================================================
   Single Post / Page
   ========================================================================== */

.single-post-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--sp-48);
	padding-top: var(--sp-48);
	padding-bottom: var(--sp-48);
}

@media (max-width: 900px) {
	.single-post-layout {
		grid-template-columns: 1fr;
	}
}

.page-header {
	padding: var(--sp-48) 0 var(--sp-24);
}

.page-header--hero {
	text-align: center;
	padding: var(--sp-64) 0 var(--sp-32);
}

.page-title {
	margin-bottom: var(--sp-8);
}

.page-subtitle {
	color: var(--ink-soft);
	font-size: 1.125rem;
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.entry-content {
	padding-bottom: var(--sp-32);
}

.entry-content p {
	line-height: 1.7;
}

.entry-content img {
	border-radius: var(--radius-card);
}

.entry-content blockquote {
	border-left: 3px solid var(--accent);
	padding-left: var(--sp-24);
	margin-left: 0;
	color: var(--ink-soft);
	font-style: italic;
}

.entry-footer {
	padding: var(--sp-16) 0;
	border-top: 1px solid var(--line);
	font-size: 0.875rem;
	color: var(--ink-soft);
}

.entry-footer span {
	margin-right: var(--sp-16);
}

.post-featured-image,
.page-featured-image {
	margin-bottom: var(--sp-32);
	border-radius: var(--radius-card);
	overflow: hidden;
}

/* Post navigation */
.post-navigation {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: var(--sp-24) 0;
	margin: var(--sp-32) 0;
}

.nav-subtitle {
	font-size: 0.75rem;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.nav-title {
	font-weight: 600;
}

/* Pagination */
.pagination {
	padding: var(--sp-32) 0;
	text-align: center;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: var(--sp-8);
}

.pagination a,
.pagination span {
	display: inline-block;
	padding: var(--sp-8) var(--sp-16);
	border: 1px solid var(--line);
	border-radius: var(--radius-btn);
	font-size: 0.9375rem;
}

.pagination .current {
	background-color: var(--brand);
	color: #FFFFFF;
	border-color: var(--brand);
}

.pagination a:hover {
	border-color: var(--brand);
	color: var(--brand);
}

/* ==========================================================================
   Sidebar & Widgets
   ========================================================================== */

.widget-area {
	padding-top: var(--sp-32);
}

.widget {
	margin-bottom: var(--sp-24);
	padding: var(--sp-24);
	background-color: var(--surface);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-rest);
}

.widget-title {
	font-size: 1.0625rem;
	margin-bottom: var(--sp-16);
	padding-bottom: var(--sp-8);
	border-bottom: 2px solid var(--brand);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget li {
	padding: var(--sp-8) 0;
	border-bottom: 1px solid var(--line);
}

.widget li:last-child {
	border-bottom: none;
}

/* ==========================================================================
   Footer — redesigned with background image support
   ========================================================================== */

.site-footer {
	background-color: var(--brand-700);
	color: rgba(255,255,255,.7);
	position: relative;
	overflow: hidden;
}

/* Background image layer — max opacity 0.25 */
.footer-bg-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.footer-bg-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.2;
	filter: grayscale(30%);
}

/* Content sits above the background image */
.footer-content {
	position: relative;
	z-index: 1;
}

/* ── Footer top: logo + tagline ── */
.footer-top {
	padding: var(--sp-64) 0 var(--sp-48);
	border-bottom: 1px solid rgba(255,255,255,.1);
	margin-bottom: var(--sp-48);
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: var(--sp-24);
}

.footer-logo {
	flex-shrink: 0;
}

.footer-logo img {
	max-height: 56px;
	width: auto;
	filter: brightness(0) invert(1);
}

.footer-company-name {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	color: #FFFFFF;
	margin: 0 0 var(--sp-4);
	line-height: 1.2;
}

.footer-tagline {
	color: rgba(255,255,255,.6);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin: 0;
	max-width: 420px;
}

/* ── 3-column widget grid ── */
.footer-widgets {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: var(--sp-48);
	padding-bottom: var(--sp-48);
}

@media (max-width: 900px) {
	.footer-widgets {
		grid-template-columns: 1fr 1fr;
		gap: var(--sp-32);
	}
}

@media (max-width: 599px) {
	.footer-widgets {
		grid-template-columns: 1fr;
		gap: var(--sp-32);
	}
}

.footer-column .widget {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.footer-column .widget-title {
	color: #FFFFFF;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: var(--sp-16);
	position: relative;
}

.footer-column .widget-title::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	background: var(--accent);
	margin-top: var(--sp-8);
	border-radius: 1px;
}

.footer-column a {
	color: rgba(255,255,255,.65);
	transition: color var(--dur-hover) var(--ease-out);
}

.footer-column a:hover {
	color: #FFFFFF;
}

.footer-column p {
	color: rgba(255,255,255,.6);
	font-size: 0.9375rem;
	line-height: 1.7;
	margin-bottom: var(--sp-4);
}

/* Quick links list */
.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-links li {
	border-bottom: 1px solid rgba(255,255,255,.08);
	padding: 0;
}

.footer-links li:last-child {
	border-bottom: none;
}

.footer-links a {
	display: block;
	padding: var(--sp-12) 0;
	color: rgba(255,255,255,.65);
	font-size: 0.9375rem;
	font-weight: 400;
	transition: color var(--dur-hover) var(--ease-out),
	            padding-left var(--dur-hover) var(--ease-out);
}

.footer-links a:hover {
	color: #FFFFFF;
	padding-left: var(--sp-8);
}

/* Contact items with icons */
.footer-contact-item {
	display: flex;
	align-items: center;
	gap: var(--sp-12);
	margin-bottom: var(--sp-16);
}

.footer-contact-item svg {
	flex-shrink: 0;
	color: var(--accent);
}

.footer-contact-item a {
	color: rgba(255,255,255,.75);
	font-size: 0.9375rem;
	word-break: break-all;
}

.footer-contact-item a:hover {
	color: #FFFFFF;
}

.footer-business-hours {
	font-size: 0.8125rem !important;
	color: rgba(255,255,255,.4) !important;
	margin-top: var(--sp-4);
	margin-bottom: var(--sp-16) !important;
}

.footer-cta-btn {
	font-size: 0.875rem;
	padding: 10px 24px;
	margin-top: var(--sp-4);
}

/* ── Bottom bar ── */
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding: var(--sp-24) 0 var(--sp-32);
}

.footer-navigation {
	margin-bottom: var(--sp-16);
}

.footer-menu {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: var(--sp-24);
	justify-content: center;
	flex-wrap: wrap;
}

.footer-menu a {
	color: rgba(255,255,255,.5);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 500;
}

.footer-menu a:hover {
	color: #FFFFFF;
}

.site-info {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-4) var(--sp-16);
	font-size: 0.8125rem;
	color: rgba(255,255,255,.35);
	text-align: center;
}

.site-info p {
	margin: 0;
	max-width: none;
}

.site-info a {
	color: rgba(255,255,255,.5);
}

.site-info a:hover {
	color: #FFFFFF;
}

@media (max-width: 599px) {
	.footer-top {
		padding-top: var(--sp-48);
		padding-bottom: var(--sp-32);
	}

	.footer-brand {
		flex-direction: column;
		text-align: center;
	}

	.footer-tagline {
		margin-left: auto;
		margin-right: auto;
	}

	.site-info {
		flex-direction: column;
	}
}

/* ==========================================================================
   404
   ========================================================================== */

.error-404 {
	text-align: center;
	padding: var(--sp-96) 0;
}

.error-404 .page-title {
	font-size: clamp(4rem, 10vw, 8rem);
	color: var(--brand);
	line-height: 1;
}

.error-404 p {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   WordPress Alignment Classes
   ========================================================================== */

.alignleft {
	float: left;
	margin-right: var(--sp-24);
	margin-bottom: var(--sp-16);
}

.alignright {
	float: right;
	margin-left: var(--sp-24);
	margin-bottom: var(--sp-16);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--sp-16);
}

.alignwide {
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

.wp-caption {
	margin-bottom: var(--sp-16);
}

.wp-caption-text {
	text-align: center;
	font-size: 0.8125rem;
	color: var(--ink-soft);
	padding: var(--sp-8) 0;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.no-sidebar .single-post-layout {
	grid-template-columns: 1fr;
	max-width: 800px;
	margin: 0 auto;
}

/* Full-width page template — no sidebar, full container */
.page-full-width .entry-content {
	max-width: none;
}

.page-full-width .entry-content:empty::after {
	content: 'This page has no content yet. Edit it with Elementor or the WordPress editor.';
	display: block;
	min-height: 300px;
	padding: var(--sp-64) var(--sp-32);
	text-align: center;
	color: var(--ink-soft);
	font-size: 1.0625rem;
}

/* Elementor empty page hint (only for logged-in admins via body class) */
.logged-in .site-main:empty::after,
.logged-in .site-main > main:empty::after {
	content: 'This page has no content yet. Edit with Elementor to add sections.';
	display: block;
	min-height: 300px;
	padding: var(--sp-96) var(--sp-32);
	text-align: center;
	color: var(--ink-soft);
	font-size: 1.0625rem;
}

/* ==========================================================================
   Elementor Integration — template-aware layout rules
   ========================================================================== */

/* Elementor Full Width: ensure sections can span the full viewport */
.nabajute-elementor-page .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

.nabajute-elementor-page .site-main > .elementor {
	width: 100%;
}

.nabajute-elementor-full-width .site-main {
	overflow: visible;
}

/* Elementor Canvas: minimal body — no theme chrome */
body.elementor-canvas {
	background: var(--surface);
}

/* Elementor editor preview: load theme design tokens for consistent design */
.elementor-editor-active .site-main,
.elementor-editor-preview .site-main {
	max-width: none;
}

/*
 * Elementor widget styling integration:
 * Ensure Elementor sections and widgets inherit the theme design tokens.
 */
.elementor-section {
	font-family: var(--font-body);
}

.elementor-widget-heading .elementor-heading-title {
	font-family: var(--font-heading);
}

/* Scroll-reveal support for Elementor pages:
   Users can add the "reveal" CSS class in Elementor Advanced → CSS Classes.
   The IntersectionObserver in main.js will trigger the animation. */
.elementor .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--dur-reveal) var(--ease-out),
	            transform var(--dur-reveal) var(--ease-out);
}

.elementor .reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Prevent Elementor's entrance animation from conflicting with theme reveal */
.elementor .reveal.elementor-invisible {
	opacity: 0;
}

/* Ensure Elementor buttons can use theme button styles via CSS class */
.elementor-widget-button .btn-primary .elementor-button {
	background-color: var(--brand);
	border-color: var(--brand);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-weight: 600;
}

.elementor-widget-button .btn-accent .elementor-button {
	background-color: var(--accent);
	border-color: var(--accent);
	border-radius: var(--radius-btn);
	font-family: var(--font-body);
	font-weight: 600;
}

/* Image placeholder slots — labelled for handoff */
.image-placeholder {
	background: var(--line);
	border: 2px dashed rgba(85,88,78,.2);
	border-radius: var(--radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	color: var(--ink-soft);
	font-size: 0.8125rem;
	text-align: center;
	padding: var(--sp-16);
}