/* =========================================================================
   Ironwood Forestry & Arbor — main.css
   Mobile-first. No frameworks. CSS custom properties for theming + dark mode.
   Default colour values are overridden by the Customizer via inline CSS that
   is printed in the <head> (see inc/customizer.php -> ironwood_customizer_css).
   ========================================================================= */

/* ----- Design tokens (light theme defaults) ----------------------------- */
:root {
	/* Brand palette — warm, earthy, natural. Overridable in Customizer. */
	--iw-bark:        #3d2b1f; /* deep walnut bark        */
	--iw-timber:      #6b4226; /* warm timber brown       */
	--iw-moss:        #4f6f52; /* mossy forest green      */
	--iw-fern:        #739072; /* soft fern green         */
	--iw-maple:       #a23e2c; /* maple-leaf red accent   */
	--iw-sand:        #e8dccb; /* warm sand / maple wood  */
	--iw-cream:       #f7f1e6; /* cream page background   */
	--iw-ink:         #2b2118; /* near-black warm ink     */

	/* Semantic tokens — these are what components actually use. */
	--iw-bg:          var(--iw-cream);
	--iw-bg-alt:      #efe6d6;
	--iw-surface:     #fffdf8;
	--iw-text:        var(--iw-ink);
	--iw-text-soft:   #5b4d3e;
	--iw-heading:     var(--iw-bark);
	--iw-accent:      var(--iw-moss);
	--iw-accent-ink:  #ffffff;
	--iw-accent-strong: #3a5640; /* darker accent for button hover (light) */
	--iw-link:        var(--iw-timber);
	--iw-link-hover:  var(--iw-maple);
	--iw-border:      #d8c9b2;
	--iw-shadow:      rgba(61, 43, 31, 0.12);

	/* Typography — font families set by Customizer/Bunny Fonts loader. */
	--iw-font-head: "Fraunces", Georgia, "Times New Roman", serif;
	--iw-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--iw-fs-base: 1rem;
	--iw-lh-base: 1.65;

	/* Layout */
	--iw-maxw: 72rem;
	--iw-gutter: clamp(1rem, 4vw, 2.5rem);
	--iw-radius: 14px;
	--iw-radius-sm: 8px;

	/* Menu — all overridable in Customizer (size / spacing / alignment). */
	--iw-menu-fs: 1rem;
	--iw-menu-gap: 1.5rem;
	--iw-menu-weight: 600;
	--iw-menu-justify: flex-end;   /* left | center | right */
	--iw-menu-radius: 999px;

	--iw-trans: 180ms ease;
}

/* ----- Dark theme ------------------------------------------------------- */
:root[data-theme="dark"] {
	--iw-bg:         #1c1611;
	--iw-bg-alt:     #241c15;
	--iw-surface:    #2a211a;
	--iw-text:       #f1e7d8;
	--iw-text-soft:  #d3c2ac; /* lightened for >= 4.5:1 on dark surfaces */
	--iw-heading:    #f6eddd;
	--iw-accent:     #9cc093; /* lighter sage so accent text/icons stay legible */
	--iw-accent-ink: #14180f;
	--iw-accent-strong: #b6d3ad; /* hover state for accent buttons in dark */
	--iw-link:       #e3c197;
	--iw-link-hover: #f0b6a0;
	--iw-border:     #4a3c30;
	--iw-shadow:     rgba(0, 0, 0, 0.5);
}

/* Honour OS preference when the user has not made an explicit choice. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--iw-bg:         #1c1611;
		--iw-bg-alt:     #241c15;
		--iw-surface:    #2a211a;
		--iw-text:       #f1e7d8;
		--iw-text-soft:  #d3c2ac;
		--iw-heading:    #f6eddd;
		--iw-accent:     #9cc093;
		--iw-accent-ink: #14180f;
		--iw-accent-strong: #b6d3ad;
		--iw-link:       #e3c197;
		--iw-link-hover: #f0b6a0;
		--iw-border:     #4a3c30;
		--iw-shadow:     rgba(0, 0, 0, 0.5);
	}
}

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

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

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

body {
	margin: 0;
	background-color: var(--iw-bg);
	color: var(--iw-text);
	font-family: var(--iw-font-body);
	font-size: var(--iw-fs-base);
	line-height: var(--iw-lh-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { font-style: italic; } /* alt text styling when image fails to load */

h1, h2, h3, h4 {
	font-family: var(--iw-font-head);
	color: var(--iw-heading);
	line-height: 1.15;
	margin: 0 0 0.5em;
	font-weight: 600;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }
p  { margin: 0 0 1.15em; }

a { color: var(--iw-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--iw-trans); }
a:hover, a:focus { color: var(--iw-link-hover); }

/* Visible focus for keyboard users everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--iw-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ----- Skip link -------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--iw-accent);
	color: var(--iw-accent-ink);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--iw-radius-sm) 0;
	font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--iw-accent-ink); }

/* ----- Layout helpers --------------------------------------------------- */
.iw-container {
	width: 100%;
	max-width: var(--iw-maxw);
	margin-inline: auto;
	padding-inline: var(--iw-gutter);
}

.iw-section { padding-block: clamp(3rem, 8vw, 6rem); }
.iw-section--alt { background-color: var(--iw-bg-alt); }

.iw-section__head { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.iw-eyebrow {
	display: inline-block;
	font-family: var(--iw-font-body);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.8rem;
	color: var(--iw-accent);
	margin-bottom: 0.5rem;
}
.iw-lead { font-size: 1.15rem; color: var(--iw-text-soft); }

/* ----- Buttons ---------------------------------------------------------- */
.iw-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--iw-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--iw-trans), background-color var(--iw-trans), color var(--iw-trans), border-color var(--iw-trans);
}
.iw-btn--primary { background: var(--iw-accent); color: var(--iw-accent-ink); }
.iw-btn--primary:hover, .iw-btn--primary:focus { background: var(--iw-accent-strong); color: var(--iw-accent-ink); transform: translateY(-2px); }
.iw-btn--ghost { background: transparent; color: var(--iw-link); border-color: var(--iw-border); }
.iw-btn--ghost:hover, .iw-btn--ghost:focus { border-color: var(--iw-accent); color: var(--iw-link-hover); transform: translateY(-2px); }

/* ----- Site header ------------------------------------------------------ */
.site-header {
	background: var(--iw-surface);
	border-bottom: 1px solid var(--iw-border);
}
.site-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	backdrop-filter: saturate(140%) blur(6px);
}
.site-header__bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 72px;
	padding-block: 0.5rem;
}
.site-branding { display: flex; align-items: center; gap: 0.75rem; margin-right: auto; min-width: 0; flex: 0 1 auto; }
.site-branding a { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--iw-heading); min-width: 0; }
/* Logo always keeps its aspect ratio: only height is fixed, width follows, and
   flex is prevented from shrinking it when the menu bar gets crowded. */
.custom-logo, .site-logo-img {
	height: var(--iw-logo-height, 56px);
	width: auto;
	max-width: none;
	object-fit: contain;
	flex: 0 0 auto;
	border-radius: 8px;
}
.custom-logo-link { display: inline-flex; flex: 0 0 auto; }
.site-title { font-family: var(--iw-font-head); font-size: 1.35rem; font-weight: 600; margin: 0; line-height: 1.05; }
.site-description { margin: 0; font-size: 0.8rem; color: var(--iw-text-soft); }

/* ----- Header utility cluster (toggles) --------------------------------- */
.iw-utilities { display: flex; align-items: center; gap: 0.4rem; }
.iw-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	background: transparent;
	border: 1px solid var(--iw-border);
	border-radius: 999px;
	color: var(--iw-text);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background-color var(--iw-trans), border-color var(--iw-trans);
}
.iw-icon-btn:hover, .iw-icon-btn:focus { background: var(--iw-bg-alt); border-color: var(--iw-accent); }
.iw-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.iw-lang-switch .is-active { color: var(--iw-accent); }
.iw-theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .iw-theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .iw-theme-toggle .icon-moon { display: inline; }

/* ----- Primary navigation ----------------------------------------------- */
.main-navigation { display: flex; }
.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 0.9rem;
	background: transparent;
	border: 1px solid var(--iw-border);
	border-radius: 999px;
	color: var(--iw-text);
	font-weight: 700;
	cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; }

.main-navigation .menu,
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.main-navigation .menu {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.main-navigation a {
	display: block;
	padding: 0.7rem 0.9rem;
	text-decoration: none;
	color: var(--iw-text);
	font-weight: var(--iw-menu-weight);
	font-size: var(--iw-menu-fs);
	border-radius: var(--iw-menu-radius);
	transition: background-color var(--iw-trans), color var(--iw-trans);
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	background: var(--iw-bg-alt);
	color: var(--iw-link-hover);
}

/* Sub-menus */
.main-navigation .sub-menu { padding-left: 0.75rem; }

/* Mobile: nav collapses behind the toggle. */
@media (max-width: 859px) {
	.main-navigation .menu-wrap {
		display: none;
		position: absolute;
		left: var(--iw-gutter);
		right: var(--iw-gutter);
		margin-top: 0.5rem;
		background: var(--iw-surface);
		border: 1px solid var(--iw-border);
		border-radius: var(--iw-radius);
		box-shadow: 0 18px 40px var(--iw-shadow);
		padding: 0.75rem;
		z-index: 998;
	}
	.main-navigation.is-open .menu-wrap { display: block; }
}

/* Desktop: inline menu, alignment controlled by Customizer variable. */
@media (min-width: 860px) {
	.menu-toggle { display: none; }
	.main-navigation { flex: 1; justify-content: var(--iw-menu-justify); }
	.main-navigation .menu-wrap { display: block !important; }
	.main-navigation .menu {
		flex-direction: row;
		align-items: center;
		gap: var(--iw-menu-gap);
		justify-content: var(--iw-menu-justify);
	}
	.main-navigation .menu-item { position: relative; }
	.main-navigation .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 12rem;
		display: none;
		flex-direction: column;
		background: var(--iw-surface);
		border: 1px solid var(--iw-border);
		border-radius: var(--iw-radius-sm);
		box-shadow: 0 14px 30px var(--iw-shadow);
		padding: 0.4rem;
	}
	.main-navigation .menu-item:hover > .sub-menu,
	.main-navigation .menu-item:focus-within > .sub-menu { display: flex; }
}

/* Optional vertical orientation (Customizer: body gets .iw-nav-vertical). */
.iw-nav-vertical .main-navigation .menu { flex-direction: column; align-items: stretch; }

/* ----- Hero ------------------------------------------------------------- */
.iw-hero {
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 5vw, 3rem);
	align-items: center;
	padding-block: clamp(3rem, 9vw, 7rem);
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--iw-bg) 86%, transparent), var(--iw-bg)),
		var(--iw-hero-image, none);
	background-size: cover;
	background-position: center;
}
.iw-hero__inner { max-width: 42rem; }
.iw-hero h1 { margin-bottom: 0.4em; }
.iw-hero__sub { font-size: 1.2rem; color: var(--iw-text-soft); margin-bottom: 1.6rem; }
.iw-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.iw-hero__badges { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2rem; }
.iw-badge { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--iw-text-soft); font-size: 0.9rem; }
.iw-badge svg { width: 22px; height: 22px; stroke: var(--iw-accent); fill: none; stroke-width: 1.8; }

/* ----- About ------------------------------------------------------------ */
.iw-about { display: grid; gap: clamp(1.5rem, 5vw, 3rem); }
.iw-about__media > figure { margin: 0; }
.iw-about__media:not(.iw-stack) > figure { width: 100%; }
.iw-about__media img { width: 100%; object-fit: cover; }
.iw-about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.iw-stat { background: var(--iw-surface); border: 1px solid var(--iw-border); border-radius: var(--iw-radius-sm); padding: 1rem 1.1rem; }
.iw-stat strong { display: block; font-family: var(--iw-font-head); font-size: 1.8rem; color: var(--iw-accent); line-height: 1; }
.iw-stat span { font-size: 0.85rem; color: var(--iw-text-soft); }

@media (min-width: 860px) {
	.iw-about { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ----- Services grid ---------------------------------------------------- */
.iw-services__grid {
	display: grid;
	gap: clamp(1rem, 3vw, 1.75rem);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) { .iw-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .iw-services__grid { grid-template-columns: repeat(3, 1fr); } }

.iw-service-card {
	background: var(--iw-surface);
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: transform var(--iw-trans), box-shadow var(--iw-trans), border-color var(--iw-trans);
}
.iw-service-card:hover, .iw-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px var(--iw-shadow);
	border-color: var(--iw-accent);
}
.iw-service-card__icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: 14px;
	background: color-mix(in srgb, var(--iw-accent) 16%, transparent);
	margin-bottom: 0.4rem;
}
.iw-service-card__icon svg { width: 30px; height: 30px; stroke: var(--iw-accent); fill: none; stroke-width: 1.7; }
.iw-service-card h3 { margin: 0; }
.iw-service-card p { margin: 0; color: var(--iw-text-soft); }

/* ----- Why / values strip ---------------------------------------------- */
.iw-values { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .iw-values { grid-template-columns: repeat(3, 1fr); } }
.iw-value { display: flex; gap: 0.85rem; align-items: flex-start; }
.iw-value svg { flex: 0 0 auto; width: 28px; height: 28px; stroke: var(--iw-accent); fill: none; stroke-width: 1.7; margin-top: 2px; }
.iw-value h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.iw-value p { margin: 0; color: var(--iw-text-soft); font-size: 0.95rem; }

/* ----- Contact / CTA ---------------------------------------------------- */
.iw-contact { display: grid; gap: clamp(1.5rem, 5vw, 3rem); }
@media (min-width: 860px) { .iw-contact { grid-template-columns: 1.1fr 0.9fr; } }
.iw-contact__card {
	background: var(--iw-surface);
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius);
	padding: clamp(1.4rem, 4vw, 2.2rem);
}
.iw-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.iw-contact__list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.iw-contact__list svg { width: 24px; height: 24px; stroke: var(--iw-accent); fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.iw-contact__list a { color: var(--iw-text); font-weight: 700; }

/* Forms (works with Contact Form 7 / native) */
.iw-form label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.iw-form input,
.iw-form textarea,
.iw-form select {
	width: 100%;
	padding: 0.8rem 0.9rem;
	margin-bottom: 1rem;
	background: var(--iw-bg);
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius-sm);
	color: var(--iw-text);
	font: inherit;
}
.iw-form textarea { min-height: 8rem; }

/* ----- Posts / content -------------------------------------------------- */
.iw-content { max-width: 46rem; margin-inline: auto; }
.iw-content figure { margin-inline: 0; }
.iw-content blockquote {
	border-left: 4px solid var(--iw-accent);
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	color: var(--iw-text-soft);
	font-style: italic;
}
.entry-meta { color: var(--iw-text-soft); font-size: 0.9rem; margin-bottom: 1.5rem; }
.wp-block-button__link, .wp-block-button .wp-element-button { border-radius: 999px; }
.alignwide { width: min(100%, 60rem); margin-inline: auto; }
.alignfull { width: 100%; }

/* ----- Pagination ------------------------------------------------------- */
.iw-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
.iw-pagination a, .iw-pagination span {
	padding: 0.5rem 0.9rem; border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius-sm); text-decoration: none; color: var(--iw-text);
}
.iw-pagination .current { background: var(--iw-accent); color: var(--iw-accent-ink); border-color: var(--iw-accent); }

/* ----- Footer ----------------------------------------------------------- */
.site-footer { background: var(--iw-bg-alt); border-top: 1px solid var(--iw-border); padding-block: clamp(2.5rem, 6vw, 4rem); }
.site-footer__cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .site-footer__cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer h2, .site-footer h3 { font-size: 1.1rem; }
.site-footer .widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.site-footer a { color: var(--iw-text); }
.site-footer__bottom {
	margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--iw-border);
	display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between;
	color: var(--iw-text-soft); font-size: 0.9rem;
}

/* ----- Language dropdown (space-saving) --------------------------------- */
.iw-lang-switch { position: relative; }
.iw-lang-switch > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.iw-lang-switch > summary::-webkit-details-marker { display: none; }
.iw-lang-switch > summary .iw-caret { transition: transform var(--iw-trans); }
.iw-lang-switch[open] > summary .iw-caret { transform: rotate(180deg); }
.iw-lang-switch > summary svg.iw-globe { width: 18px; height: 18px; }
.iw-lang-switch .iw-caret { width: 14px; height: 14px; }
.iw-lang-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	min-width: 9.5rem;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--iw-surface);
	border: 1px solid var(--iw-border);
	border-radius: var(--iw-radius-sm);
	box-shadow: 0 14px 30px var(--iw-shadow);
	z-index: 1000;
	animation: iw-pop var(--iw-trans);
}
.iw-lang-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	text-decoration: none;
	color: var(--iw-text);
	font-weight: 600;
	font-size: 0.9rem;
}
.iw-lang-menu a:hover, .iw-lang-menu a:focus { background: var(--iw-bg-alt); color: var(--iw-link-hover); }
.iw-lang-menu a[aria-current="true"] { color: var(--iw-accent); }
.iw-lang-menu a[aria-current="true"]::after { content: "\2713"; }

@keyframes iw-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ----- Motion: reveal-on-scroll + subtle ambient movement --------------- */
/* Only hide content when JS is present, so no-JS visitors still see everything. */
.iw-anim .iw-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--iw-reveal-delay, 0ms);
	will-change: opacity, transform;
}
.iw-anim .iw-reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children inside a revealing grid (services cards, values). */
.iw-anim .iw-reveal-group.is-visible > * { animation: iw-rise 0.6s both; }
.iw-anim .iw-reveal-group.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.iw-anim .iw-reveal-group.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.iw-anim .iw-reveal-group.is-visible > *:nth-child(4) { animation-delay: 0.24s; }
.iw-anim .iw-reveal-group.is-visible > *:nth-child(5) { animation-delay: 0.32s; }
.iw-anim .iw-reveal-group.is-visible > *:nth-child(6) { animation-delay: 0.40s; }
.iw-anim .iw-reveal-group > * { opacity: 0; }
.iw-anim .iw-reveal-group.is-visible > * { opacity: 1; }

@keyframes iw-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Hero entrance + gently drifting badges. */
.iw-anim .iw-hero__inner > * { animation: iw-rise 0.7s both; }
.iw-anim .iw-hero__inner > *:nth-child(2) { animation-delay: 0.1s; }
.iw-anim .iw-hero__inner > *:nth-child(3) { animation-delay: 0.2s; }
.iw-anim .iw-hero__inner > *:nth-child(4) { animation-delay: 0.3s; }
.iw-anim .iw-hero__inner > *:nth-child(5) { animation-delay: 0.4s; }
.iw-anim .iw-badge svg { animation: iw-float 5s ease-in-out infinite; }
.iw-anim .iw-badge:nth-child(2) svg { animation-delay: 0.6s; }
.iw-anim .iw-badge:nth-child(3) svg { animation-delay: 1.2s; }
@keyframes iw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Buttons + icons get a little life on hover. */
.iw-btn svg { transition: transform var(--iw-trans); }
.iw-btn:hover svg, .iw-btn:focus svg { transform: translateX(3px); }
.iw-service-card__icon { transition: transform var(--iw-trans); }
.iw-service-card:hover .iw-service-card__icon { transform: rotate(-6deg) scale(1.06); }

/* Respect users who ask for less motion — switch everything off. */
@media (prefers-reduced-motion: reduce) {
	.iw-anim .iw-reveal,
	.iw-anim .iw-reveal-group > *,
	.iw-anim .iw-hero__inner > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.iw-badge svg, .iw-lang-menu { animation: none !important; }
}

/* ----- Block editor support (patterns + page blocks) -------------------- */
/* Core buttons inherit the brand look so block-built pages match the theme. */
.wp-block-button__link,
.wp-block-button .wp-element-button {
	background-color: var(--iw-accent);
	color: var(--iw-accent-ink);
	border-radius: 999px;
	padding: 0.9rem 1.5rem;
	font-weight: 700;
	border: 2px solid transparent;
	transition: transform var(--iw-trans), background-color var(--iw-trans);
}
.wp-block-button__link:hover,
.wp-block-button .wp-element-button:hover { background-color: var(--iw-accent-strong); color: var(--iw-accent-ink); transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--iw-link);
	border-color: var(--iw-border);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--iw-accent); color: var(--iw-link-hover); }

/* Columns used as service cards in a pattern get the card treatment. */
.wp-block-column.iw-service-card { padding: 1.6rem; }
.wp-block-column.iw-service-card h3 { margin-top: 0; }

/* Rounded pattern images. */
.wp-block-image.iw-rounded img { border-radius: var(--iw-radius); box-shadow: 0 20px 45px var(--iw-shadow); }

/* Vertical rhythm for a fully block-built homepage. */
.iw-block-content > .wp-block-group.iw-section { margin: 0; }

/* Stack pattern columns on phones first; widen only on larger screens. */
@media (max-width: 781px) {
	.wp-block-columns { gap: 1rem; }
}

/* ----- Background texture (paper grain) --------------------------------- */
/* One tiny inline SVG, painted as a fixed low-opacity overlay. Costs nothing
   on the network and adds an organic, woody warmth. */
.iw-texture::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none; /* never blocks clicks, focus, or scrolling */
	opacity: 0.045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}
/* In dark mode, invert the grain to light specks and lighten instead. */
:root[data-theme="dark"] .iw-texture::before { filter: invert(1); mix-blend-mode: screen; opacity: 0.06; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .iw-texture::before { filter: invert(1); mix-blend-mode: screen; opacity: 0.06; }
}

/* ----- Decorative motifs ------------------------------------------------ */
.iw-section--texture { position: relative; overflow: hidden; }
.iw-deco { position: absolute; pointer-events: none; z-index: 0; opacity: 0.06; color: var(--iw-accent); }
.iw-deco--leaf { top: -2rem; right: -1.5rem; }
.iw-deco--leaf svg { width: clamp(140px, 22vw, 260px); height: auto; transform: rotate(18deg); }
.iw-deco--rings {
	width: 360px; height: 360px; left: -120px; bottom: -120px; opacity: 0.5;
	background:
		repeating-radial-gradient(circle at center,
			transparent 0 22px,
			color-mix(in srgb, var(--iw-accent) 22%, transparent) 22px 24px);
	-webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 72%);
	mask-image: radial-gradient(circle at center, #000 40%, transparent 72%);
}
.iw-section--texture > .iw-container { position: relative; z-index: 1; }

/* ----- Image shapes (shared) ------------------------------------------- */
[class*="iw-shape-"] { overflow: hidden; box-shadow: 0 18px 40px var(--iw-shadow); }
[class*="iw-shape-"] img { display: block; width: 100%; height: 100%; object-fit: cover; }
.iw-shape-rounded  { border-radius: var(--iw-radius); }
.iw-shape-square   { border-radius: 0; }
.iw-shape-squircle { border-radius: 26%; }
.iw-shape-circle   { border-radius: 50%; aspect-ratio: 1 / 1; }
.iw-shape-blob     { border-radius: 42% 58% 63% 37% / 42% 38% 62% 58%; }
.iw-shape-leaf     { border-radius: 8% 80% 8% 80% / 80% 8% 80% 8%; }

/* ----- Service card photo ---------------------------------------------- */
.iw-service-card__media { width: 100%; margin-bottom: 0.4rem; }
.iw-service-card__media:not(.iw-shape-circle) { aspect-ratio: 16 / 10; }
.iw-service-card__media.iw-shape-circle { width: 116px; height: 116px; margin-inline: auto; }

/* ----- About floating photo stack -------------------------------------- */
/* Two layers per photo so movements compose without fighting:
   .iw-stack__item  → scroll parallax + click-drag (transform set by theme.js)
   .iw-stack__inner → continuous ambient float (CSS keyframes) + shape clip   */
.iw-stack { position: relative; min-height: clamp(320px, 42vw, 480px); }
.iw-stack__item {
	position: absolute;
	will-change: transform;
	cursor: grab;
	touch-action: manipulation; /* taps open the lightbox; page still scrolls */
}
.iw-stack__item.is-grabbing { cursor: grabbing; z-index: 5; }
.iw-stack__inner { position: absolute; inset: 0; display: block; }
.iw-stack__inner.iw-shape-circle { aspect-ratio: auto; } /* fill the item box */
.iw-stack__item--1 { width: 64%; top: 0; left: 0; z-index: 3; aspect-ratio: 4 / 5; }
.iw-stack__item--2 { width: 48%; right: 0; bottom: 4%; z-index: 2; aspect-ratio: 1 / 1; }
.iw-stack__item--3 { width: 38%; right: 16%; top: 6%; z-index: 1; aspect-ratio: 3 / 4; }

.iw-anim .iw-stack__item--1 .iw-stack__inner { animation: iw-bob 8s ease-in-out infinite; }
.iw-anim .iw-stack__item--2 .iw-stack__inner { animation: iw-bob 6.5s ease-in-out infinite 0.5s; }
.iw-anim .iw-stack__item--3 .iw-stack__inner { animation: iw-bob 9.5s ease-in-out infinite 0.2s; }
.iw-anim .iw-about__media:not(.iw-stack) > .iw-photo { animation: iw-bob 9s ease-in-out infinite; }
@keyframes iw-bob {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-12px) rotate(-1.4deg); }
}

/* Photos are interactive (drag + lightbox). */
.iw-photo { cursor: zoom-in; }
.iw-stack__item.iw-photo { cursor: grab; }
.iw-photo:focus-visible { outline: 3px solid var(--iw-accent); outline-offset: 3px; }

/* ----- Lightbox / modal ------------------------------------------------- */
.iw-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100002; /* above sticky header, texture, and skip link */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(20, 14, 9, 0.88);
}
.iw-lightbox.is-open { display: flex; }
@supports (backdrop-filter: blur(2px)) { .iw-lightbox { backdrop-filter: blur(3px); } }
.iw-lightbox__img {
	max-width: 92vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.iw-anim .iw-lightbox.is-open .iw-lightbox__img { animation: iw-pop 0.25s ease; }
.iw-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	cursor: pointer;
}
.iw-lightbox__close:hover, .iw-lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.32); outline: 2px solid #fff; }
.iw-lightbox__close svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; }
.iw-lightbox__hint {
	position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
	color: rgba(255, 255, 255, 0.7); font-size: 0.85rem;
}

/* ----- Footer logo ------------------------------------------------------ */
.site-footer__logo { margin-bottom: 1rem; }
.site-footer__logo img {
	height: var(--iw-footer-logo-height, 96px);
	width: auto; max-width: 100%; object-fit: contain; border-radius: 10px;
}

/* ----- Jump-link offset + scrollspy ------------------------------------ */
.iw-section, .iw-hero, [id] { scroll-margin-top: clamp(70px, 11vh, 100px); }
.main-navigation a.is-current { background: var(--iw-bg-alt); color: var(--iw-link-hover); }

/* Reduced motion: stop the ambient float and decorative motifs. Click-drag and
   the lightbox stay available (they're user-initiated, not decorative); scroll
   parallax is already skipped in JS when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
	.iw-stack__inner,
	.iw-about__media > .iw-photo { animation: none !important; }
	.iw-lightbox__img { animation: none !important; }
	.iw-deco { display: none; }
}

/* ----- Utilities -------------------------------------------------------- */
.iw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iw-mt-0 { margin-top: 0; }
[hidden] { display: none !important; }