/* Lohtu theme — design system v2 (Claude Design export authority).
   Fonts come from theme.json fontFace ("DM Serif Display", "Inter"). */

:root {
	/* Ramps (subset in use; full ramps in the design system) */
	--leaf-50: #F2F7EC;
	--leaf-100: #E1EFD1;
	--leaf-400: #66A633;
	--leaf-500: #54872B;
	--leaf-600: #467123;
	--leaf-800: #325119;
	--sage-100: #E4EEDC;
	--sage-200: #CBDCC0;
	--sage-300: #A8BF9B;
	--sage-500: #607B55;
	--sage-700: #41543A;
	--sand-200: #EACDB4;
	--clay-500: #E3842E;
	--stone-100: #F6F2EE;
	--stone-300: #E5DFD9;
	--ink-deep: #161A12;
	--green-header: #223610;
	--text-muted: #4A4A4A;
	--footer-text: #F4F8F0;

	--lohtu-content: 1184px;
	--lohtu-wide: 1280px;
	--lohtu-gutter: clamp(20px, 4vw, 48px);
	--lohtu-section-pad: clamp(56px, 8vw, 112px);
	--radius-card: 18px;
	--radius-xl: 32px;
	--radius-pill: 200px;

	/* Icons */
	--icon-star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23E3842E"><path d="m12 2.5 2.9 6 6.6.8-4.8 4.5 1.2 6.5-5.9-3.2-5.9 3.2 1.2-6.5-4.8-4.5 6.6-.8z"/></svg>');
	--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
	--icon-phone: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23325119" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/></svg>');
	--icon-chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23325119" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');
	--icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23325119" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m9 6 6 6-6 6"/></svg>');
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 3px solid var(--leaf-400);
	outline-offset: 2px;
}

/* Section scaffolding: every section paints its own bg full-bleed,
   inner content constrained. */
.lohtu-section {
	padding: var(--lohtu-section-pad) var(--lohtu-gutter);
}

.lohtu-section > .lohtu-inner,
.lohtu-inner {
	max-width: var(--lohtu-content);
	margin-inline: auto;
}

/* Split section head: big serif left, intro right */
.lohtu-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}

.lohtu-h2,
.lohtu-section-head h2 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(32px, 3.5vw, 52px);
	line-height: 1.05;
	color: var(--leaf-800);
	margin: 0;
	max-width: 600px;
}

.lohtu-section-head p {
	font-size: 20px;
	line-height: 1.5;
	max-width: 440px;
	margin: 0;
}

/* ---------- Buttons (pill) ---------- */

.lohtu-btn,
.lohtu-btn--primary > .wp-block-button__link,
.lohtu-btn--secondary > .wp-block-button__link {
	box-sizing: border-box; /* raw <a class="lohtu-btn"> defaults to content-box → 88px tall */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 16px 28px;
	border-radius: var(--radius-pill);
	border: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease;
	cursor: pointer;
}

a.lohtu-btn--primary,
.lohtu-btn--primary > .wp-block-button__link {
	background: var(--leaf-500);
	color: #fff;
}

a.lohtu-btn--primary:hover,
.lohtu-btn--primary > .wp-block-button__link:hover {
	background: var(--leaf-400);
	color: #fff;
}

a.lohtu-btn--secondary,
.lohtu-btn--secondary > .wp-block-button__link {
	background: #fff;
	color: var(--leaf-800);
	box-shadow: inset 0 0 0 1px var(--leaf-500);
}

a.lohtu-btn--secondary:hover,
.lohtu-btn--secondary > .wp-block-button__link:hover {
	background: var(--sage-100);
	color: var(--leaf-800);
}

.lohtu-btn--phone > .wp-block-button__link::before,
a.lohtu-btn--phone::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--icon-phone) no-repeat center / contain;
}

/* ---------- Top strip ---------- */

.lohtu-topbar {
	background: var(--sage-100);
}

.lohtu-topbar__inner {
	max-width: var(--lohtu-wide);
	margin-inline: auto;
	padding: 10px var(--lohtu-gutter);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 32px;
}

.lohtu-topbar__inner p {
	margin: 0;
	display: flex;
	gap: 32px;
}

.lohtu-topbar__inner a {
	color: var(--leaf-800);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
}

.lohtu-topbar__inner a:hover {
	color: var(--leaf-500);
}

/* ---------- Header ---------- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 30;
}

.lohtu-header {
	background: var(--green-header);
}

.lohtu-header__inner {
	max-width: var(--lohtu-wide);
	margin-inline: auto;
	padding: 18px var(--lohtu-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.lohtu-header__logo,
.lohtu-header__logo img {
	display: block;
	width: 128px;
	height: auto;
	flex-shrink: 0;
}

.lohtu-header__nav {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	flex-wrap: wrap;
}

.lohtu-header__nav .lohtu-nav__menu ul {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.lohtu-header__nav .lohtu-nav__menu li a {
	display: inline-flex;
	padding: 12px 18px;
	border-radius: var(--radius-pill);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	white-space: nowrap;
}

.lohtu-header__nav .lohtu-nav__menu li a:hover,
.lohtu-header__nav .lohtu-nav__menu li a[aria-current="page"],
.lohtu-header__nav .lohtu-nav__menu li.current-menu-item a {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.lohtu-header__nav .lohtu-nav__menu li a[aria-current="page"],
.lohtu-header__nav .lohtu-nav__menu li.current-menu-item a {
	background: rgba(255, 255, 255, 0.16);
	font-weight: 600;
}

a.lohtu-header__phone {
	margin-left: 4px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--leaf-800);
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px var(--leaf-500);
}

a.lohtu-header__phone:hover {
	background: var(--sage-100);
	color: var(--leaf-800);
}

a.lohtu-header__phone::before {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--icon-phone) no-repeat center / contain;
}

/* ---------- Mobile header controls + menu panel ---------- */

.lohtu-mobile-controls {
	display: none;
	gap: 8px;
	align-items: center;
}

.lohtu-mobile-ib {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	border: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}

.lohtu-mobile-ib:hover {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* The hidden attribute does not apply to inline SVG in all browsers */
.lohtu-mobile-toggle svg[hidden] {
	display: none;
}

.lohtu-mobilemenu {
	position: fixed;
	top: 76px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: #fff;
	padding: 8px 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow-y: auto;
}

.lohtu-mobilemenu[hidden] {
	display: none;
}

.lohtu-mobilemenu__featured {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lohtu-mobilemenu__pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 58px;
	padding: 0 22px;
	border-radius: var(--radius-pill);
	background: var(--leaf-800);
	color: #fff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: 24px;
}

.lohtu-mobilemenu__pill::after {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--icon-arrow) no-repeat center / contain;
	filter: brightness(0) invert(1);
}

.lohtu-mobilemenu__list {
	display: flex;
	flex-direction: column;
}

.lohtu-mobilemenu__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 62px;
	border-bottom: 1px solid var(--stone-300);
	color: var(--leaf-800);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: 24px;
}

.lohtu-mobilemenu__list a::after {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--icon-arrow) no-repeat center / contain;
}

body.lohtu-menu-open {
	overflow: hidden;
}

/* ---------- Sticky bottom CTA bar (mobile only) ---------- */

.lohtu-sticky-cta {
	display: none;
}

@media (max-width: 900px) {
	.lohtu-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 15;
		padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid #EDEBEB;
	}

	.lohtu-sticky-cta .wp-block-buttons,
	.lohtu-sticky-cta .wp-block-button {
		margin: 0;
		width: 100%;
	}

	.lohtu-sticky-cta .wp-block-button__link {
		width: 100%;
	}

	/* Reserve space so the bar never covers the footer's last content */
	body:has(.lohtu-sticky-cta) .wp-site-blocks {
		padding-bottom: 84px;
	}
}

/* App header (suunnittelutyökalu) */
.lohtu-header--app {
	border-bottom: 1px solid #3B5D1E;
}

.lohtu-header--app .lohtu-header__inner {
	justify-content: space-between;
}

.lohtu-header__app-title {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: 24px;
	color: #fff;
	margin: 0;
}

/* ---------- Hero (home) ---------- */

.lohtu-hero {
	position: relative;
	min-height: 680px;
	background: var(--ink-deep);
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 96px var(--lohtu-gutter);
}

.lohtu-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 50%;
	background: var(--ink-deep) url(../img/hero-flowers.jpg) no-repeat 40% center / cover;
}

.lohtu-hero::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 140px;
	background: linear-gradient(90deg, var(--ink-deep) 0%, rgba(22, 26, 18, 0) 100%);
}

.lohtu-hero > .lohtu-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--lohtu-wide);
}

.lohtu-hero__content {
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.lohtu-rating-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, 0.24);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.lohtu-rating-pill::before {
	content: "";
	width: 92px;
	height: 16px;
	background: var(--icon-star) repeat-x left center / 19px 16px;
}

.lohtu-hero h1 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(38px, 4.7vw, 68px);
	line-height: 1.04;
	color: #fff;
	margin: 0;
	text-wrap: balance;
}

.lohtu-hero__lead {
	font-size: 22px;
	line-height: 1.5;
	color: #fff;
	max-width: 480px;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 8px;
}

/* ---------- Palvelupolut (home) ---------- */

.lohtu-paths {
	background: #fff;
}

.lohtu-paths__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.lohtu-path-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-decoration: none;
	color: #000;
}

.lohtu-path-card__media {
	position: relative;
	height: 300px;
	border-radius: var(--radius-card);
	overflow: hidden;
	margin: 0;
	background: var(--green-header);
}

.lohtu-path-card__media .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.lohtu-path-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lohtu-path-card__badge {
	position: absolute;
	left: 16px;
	top: 16px;
	z-index: 1;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--leaf-800);
	font-weight: 600;
	font-size: 15px;
	margin: 0;
}

.lohtu-path-card__badge--accent {
	background: var(--leaf-500);
	color: #fff;
}

.lohtu-path-card h3 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.05;
	color: var(--leaf-800);
	margin: 0 0 10px;
}

.lohtu-path-card p {
	font-size: 18px;
	line-height: 1.55;
	margin: 0 0 10px;
	text-wrap: pretty;
}

.lohtu-arrow-link {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 17px;
	color: var(--leaf-800) !important;
	margin: 0;
	text-decoration: none;
}

.lohtu-arrow-link::after {
	content: "";
	width: 18px;
	height: 18px;
	background: var(--icon-arrow) no-repeat center / contain;
}

/* ---------- Lähestyttävä (home) ---------- */

.lohtu-approach {
	background: var(--leaf-50);
}

.lohtu-approach__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: center;
}

.lohtu-approach__figure {
	margin: 0;
	height: 560px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--green-header);
}

.lohtu-approach__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}

/* Pyöreä muotokuvavariantti (Jutta-potretti; kasvot lähdekuvan oikeassa laidassa) */
.lohtu-approach__figure.lohtu-approach__figure--circle {
	width: min(420px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	justify-self: center;
}

.lohtu-approach__figure--circle img {
	object-position: 95% center;
}

.lohtu-approach__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.lohtu-approach__content > p {
	font-size: 20px;
	line-height: 1.55;
	margin: 0;
	text-wrap: pretty;
}

.lohtu-checklist {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 0;
}

p.lohtu-check {
	margin: 0;
	padding-left: 52px;
	position: relative;
	font-size: 18px;
	line-height: 1.5;
	min-height: 40px;
}

.lohtu-check::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: var(--leaf-500) var(--icon-check) no-repeat center / 18px;
}

.lohtu-check strong {
	font-size: 20px;
	font-weight: 600;
	color: #000;
	display: block;
	margin-bottom: 4px;
}

/* ---------- Arviot (home) ---------- */

.lohtu-reviews {
	background: #fff;
}

.lohtu-reviews__score {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}

.lohtu-section-head p.lohtu-reviews__number,
p.lohtu-reviews__number {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-size: 72px;
	line-height: 0.9;
	color: var(--leaf-800);
	margin: 0;
}

.lohtu-section-head p.lohtu-reviews__meta,
p.lohtu-reviews__meta {
	font-size: 16px;
	line-height: 1.45;
	color: var(--text-muted);
	margin: 0;
}

.lohtu-quote-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.lohtu-quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--radius-card);
	background: var(--leaf-50);
	margin: 0;
}

.lohtu-quote::before {
	content: "";
	width: 100px;
	height: 17px;
	background: var(--icon-star) repeat-x left center / 20px 17px;
}

.lohtu-quote p {
	font-size: 19px;
	line-height: 1.55;
	flex: 1;
	margin: 0;
}

.lohtu-quote__cite {
	font-size: 15px !important;
	line-height: 1.4;
	color: var(--text-muted);
	flex: none !important;
}

.lohtu-quote__cite strong {
	color: #000;
	font-weight: 600;
	display: block;
}

/* ---------- UKK / FAQ ---------- */

.lohtu-faq {
	background: var(--leaf-50);
}

.lohtu-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	gap: clamp(40px, 5vw, 72px);
	align-items: start;
}

.lohtu-faq__list {
	border-top: 1px solid var(--sage-200);
}

.lohtu-faq__item {
	border-bottom: 1px solid var(--sage-200);
	margin: 0;
}

.lohtu-faq__item summary {
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	list-style: none;
	cursor: pointer;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: #000;
}

.lohtu-faq__item summary::-webkit-details-marker {
	display: none;
}

.lohtu-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background: #fff var(--icon-chevron) no-repeat center / 18px;
	box-shadow: inset 0 0 0 1px var(--leaf-500);
	transition: transform 0.2s;
}

.lohtu-faq__item[open] summary::after {
	transform: rotate(180deg);
}

.lohtu-faq__item > :not(summary) {
	padding: 0 56px 24px 0;
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- Footer ---------- */

.lohtu-footer {
	background: var(--green-header);
	color: var(--footer-text);
	padding: 96px var(--lohtu-gutter) 40px;
}

.lohtu-footer > .lohtu-inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.lohtu-footer__cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 48px;
	align-items: end;
	padding-bottom: 56px;
	border-bottom: 1px solid var(--sage-700);
}

.lohtu-footer__cta h2 {
	font-family: var(--wp--preset--font-family--dm-serif-display, "DM Serif Display", serif);
	font-weight: 400;
	font-size: clamp(34px, 3.5vw, 52px);
	line-height: 1.05;
	color: #fff;
	margin: 0 0 16px;
	max-width: 620px;
}

.lohtu-footer__cta > div:first-child p {
	font-size: 20px;
	line-height: 1.5;
	color: var(--sage-100);
	margin: 0;
	max-width: 620px;
}

.lohtu-footer__call {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

a.lohtu-footer__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: var(--radius-pill);
	background: #fff;
	color: var(--leaf-800);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	text-decoration: none;
}

a.lohtu-footer__phone:hover {
	background: var(--sage-100);
	color: var(--leaf-800);
}

a.lohtu-footer__phone::before {
	content: "";
	width: 20px;
	height: 20px;
	background: var(--icon-phone) no-repeat center / contain;
}

.lohtu-footer__hours {
	font-size: 15px;
	line-height: 1.5;
	color: var(--sage-200);
	max-width: 340px;
	margin: 0;
}

.lohtu-footer__cols {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1.4fr;
	gap: 40px;
}

.lohtu-footer__col h4 {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--sage-300);
	margin: 0 0 18px;
}

.lohtu-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lohtu-footer__col a {
	color: var(--footer-text);
	text-decoration: none;
	font-size: 16px;
}

.lohtu-footer__col a:hover {
	color: #fff;
	text-decoration: underline;
}

.lohtu-footer__cities ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px 16px;
}

.lohtu-footer__cities .lohtu-arrow-link {
	color: #fff !important;
	font-size: 16px;
	padding-top: 12px;
}

.lohtu-footer__cities .lohtu-arrow-link::after {
	filter: brightness(0) invert(1);
	width: 16px;
	height: 16px;
}

.lohtu-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 32px;
	border-top: 1px solid var(--sage-700);
}

.lohtu-footer__company {
	display: flex;
	align-items: center;
	gap: 32px;
}

.lohtu-footer__company img {
	width: 120px;
	height: auto;
	display: block;
}

.lohtu-footer__company p {
	font-size: 14px;
	line-height: 1.5;
	color: var(--sage-200);
	margin: 0;
}

.lohtu-footer__legal {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: center;
}

.lohtu-footer__legal a {
	color: var(--footer-text);
	font-size: 15px;
	text-decoration: none;
}

.lohtu-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

.lohtu-footer__social {
	display: flex;
	gap: 10px;
}

.lohtu-footer__social a {
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--footer-text);
	box-shadow: inset 0 0 0 1px var(--sage-500);
}

.lohtu-footer__social a:hover {
	background: var(--sage-700);
	color: #fff;
}

/* ---------- Block-markup helpers ---------- */

/* WP's root/flow layout rules inject margin-block-start:24px between
   template-level blocks and full-bleed sections — zero them there, but keep
   flow spacing for prose content (paragraphs, headings inside articles). */
.wp-site-blocks > *,
main.wp-block-group > *,
.entry-content > section.wp-block-group {
	margin-block-start: 0;
}

/* WP injects margin-block-start on children of is-layout-flow groups;
   neutralize it inside our flex/grid chrome containers. */
.lohtu-topbar__inner > *,
.lohtu-header__inner > *,
.lohtu-header__nav > *,
.lohtu-hero__actions > *,
.lohtu-footer__cta > *,
.lohtu-footer__call > *,
.lohtu-footer__cols > *,
.lohtu-footer__bottom > *,
.lohtu-footer__company > *,
.lohtu-footer__legal > * {
	margin-block-start: 0;
}

/* Same injection breaks every pattern-built card/column grid: items 2+ get
   24px top margin and rows misalign. All our grid/flex containers follow the
   *grid / *__cards / *__cols naming and define their own gap, so direct
   children never carry flow margins. */
.is-layout-flow[class*="grid"] > *,
.is-layout-flow[class*="__cards"] > *,
.is-layout-flow[class*="__cols"] > *,
/* row/multi-column containers whose names don't carry the grid suffix */
.is-layout-flow.lohtu-hin-pkgs > *,
.is-layout-flow.lohtu-hin-products > *,
.is-layout-flow.lohtu-aka-stats > *,
.is-layout-flow.lohtu-htj-usps > *,
.is-layout-flow.lohtu-opas-principles > *,
.is-layout-flow.lohtu-art-guides > *,
.is-layout-flow.lohtu-aka-featured__tags > *,
.is-layout-flow.lohtu-dla-prow > *,
.is-layout-flow.lohtu-pkg-row > *,
.is-layout-flow.lohtu-pkg-card__head > *,
.is-layout-flow.lohtu-section-head > *,
.is-layout-flow.lohtu-svc-topic__head > * {
	margin-block-start: 0;
}


.wp-block-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.lohtu-footer__legal p {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin: 0;
}

.lohtu-footer__hours a {
	color: inherit;
}

.lohtu-footer__cta p,
.lohtu-footer__company p {
	margin: 0;
}

/* ---------- Breadcrumbs (rendered inside each page's hero section) ---------- */

.lohtu-breadcrumbs {
	font-size: 15px;
	color: var(--text-muted);
	margin: 0 0 18px;
	grid-column: 1 / -1; /* span hero grids full-width */
}

.lohtu-breadcrumbs a {
	color: var(--leaf-800);
	text-decoration: none;
}

.lohtu-breadcrumbs a:hover {
	color: var(--leaf-500);
}

.lohtu-breadcrumbs .sep {
	margin: 0 8px;
	color: var(--sage-300);
}

/* Dark heroes (course detail): light breadcrumb */
.lohtu-aka-chero .lohtu-breadcrumbs {
	color: var(--sage-200);
}

.lohtu-aka-chero .lohtu-breadcrumbs a {
	color: #fff;
}

.lohtu-aka-chero .lohtu-breadcrumbs a:hover {
	color: var(--sage-100);
}

.lohtu-aka-chero .lohtu-breadcrumbs .sep {
	color: var(--sage-500);
}

/* ---------- Product grid (lohtu/product-grid) ---------- */

.lohtu-product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lohtu-product-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 10px 22px;
	border-radius: 20px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #EDEBEB;
}

.lohtu-product-card__photo {
	height: 200px;
	border-radius: 14px;
	background: #fff;
	margin: 0 0 6px;
	overflow: hidden;
}

.lohtu-product-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.lohtu-product-card__photo--placeholder {
	background: var(--sage-100);
}

.lohtu-product-card__name {
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	margin: 0;
	padding: 0 10px;
}

.lohtu-product-card__desc {
	font-size: 15px;
	line-height: 1.45;
	color: var(--text-muted);
	margin: 0;
	padding: 0 10px;
}

.lohtu-product-card__benefit {
	font-size: 15px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--leaf-800);
	margin: 0;
	padding: 0 10px;
}

.lohtu-product-card__price {
	font-size: 19px;
	font-weight: 600;
	margin: 0;
	padding: 4px 10px 0;
	margin-top: auto;
}

@media (max-width: 700px) {
	.lohtu-product-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Forms (Gravity Forms base) ---------- */

.gform_wrapper form {
	display: flex;
	flex-direction: column;
}

.gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.gform_wrapper .gfield_label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
}

.gform_wrapper .gfield_required {
	color: var(--leaf-500);
	margin-left: 2px;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--sage-200);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: #000;
	box-sizing: border-box;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--leaf-500);
	outline: 2px solid var(--leaf-400);
	outline-offset: 0;
}

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

.gform_footer {
	margin-top: 28px;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"],
.gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 16px 28px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--leaf-500);
	color: #fff;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
	background: var(--leaf-400);
}

/* Validation states (GF plugin CSS is disabled) */
.gform_wrapper .gform_validation_errors {
	padding: 16px 20px;
	border-radius: 12px;
	background: #FBE9E7;
	box-shadow: inset 0 0 0 1px #C4543B;
	margin-bottom: 20px;
}

.gform_wrapper .gform_validation_errors h2 {
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #8C2F1B;
	margin: 0;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	font-size: 14px;
	color: #8C2F1B;
	margin-top: 6px;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
	border-color: #C4543B;
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: 12px;
	width: 20px;
	height: 20px;
}

.gform_wrapper input[type="submit"]:hover {
	background: var(--leaf-400);
}

/* Radio group as selection chips: add CSS class "lohtu-chips" to the GF field */
.lohtu-chips .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.lohtu-chips .gchoice {
	position: relative;
}

.lohtu-chips .gchoice input {
	position: absolute;
	opacity: 0;
	inset: 0;
}

.lohtu-chips .gchoice label {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	box-shadow: inset 0 0 0 1px var(--leaf-500);
	background: #fff;
	color: var(--leaf-800);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.lohtu-chips .gchoice input:checked + label {
	background: var(--leaf-500);
	color: #fff;
}

.lohtu-chips .gchoice input:focus-visible + label {
	outline: 3px solid var(--leaf-400);
	outline-offset: 2px;
}

/* Consent */
.gform_wrapper .gfield--type-consent .gfield_label {
	display: none;
}

.gform_wrapper .gfield_consent_wrapper,
.gform_wrapper .ginput_container_consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
}

.gform_wrapper .ginput_container_consent input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--leaf-500);
	flex-shrink: 0;
}

/* Validation + confirmation */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	color: #A33A2A;
	font-size: 14px;
	margin-top: 6px;
}

.gform_validation_errors {
	padding: 16px 20px;
	border-radius: 12px;
	background: #FBE9E5;
	color: #A33A2A;
	margin-bottom: 20px;
}

.gform_validation_errors > h2 {
	font-family: inherit;
	font-size: 16px;
	color: inherit;
	margin: 0;
}

.gform_confirmation_message {
	padding: 32px 36px;
	border-radius: 20px;
	background: var(--leaf-50);
	font-size: 19px;
	line-height: 1.6;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.lohtu-topbar {
		display: none;
	}

	.lohtu-header__nav {
		display: none;
	}

	.lohtu-mobile-controls {
		display: flex;
	}

	.lohtu-header__inner {
		height: 76px;
		padding: 0 12px 0 20px;
		flex-wrap: nowrap;
	}

	.lohtu-header__logo,
	.lohtu-header__logo img {
		width: 120px;
	}

	/* App header (planner): drop the title and desktop phone pill on mobile */
	.lohtu-header__app-title,
	.lohtu-header--app a.lohtu-header__phone {
		display: none;
	}
}

@media (max-width: 1100px) {
	.lohtu-paths__grid,
	.lohtu-quote-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-approach__grid,
	.lohtu-faq__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lohtu-approach__figure {
		height: clamp(320px, 60vw, 480px);
	}

	.lohtu-footer__cta {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.lohtu-footer__cols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 700px) {
	.lohtu-hero {
		min-height: 0;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.lohtu-hero::before {
		left: 0;
		opacity: 0.35;
	}

	.lohtu-hero::after {
		content: none;
	}

	.lohtu-footer__cols {
		grid-template-columns: 1fr;
	}

	.lohtu-path-card__media {
		height: 220px;
	}

	.lohtu-reviews__number {
		font-size: 52px;
	}
}