/* =========================================================
   Huhtanen theme — main.css
   Brand: bold yellow & black towing service
   ========================================================= */

:root {
	/* Vaalea teema lukittuna: estää selainten automaattisen tumman tilan
	   (Samsung Internet, Chrome Android) värittämästä sivua uudelleen. */
	color-scheme: light only;

	--yellow:      #FFCE00;
	--yellow-deep: #F6BE00;
	--gold:        #F2B705;
	--cream:       #FEF9E7;
	--cream-soft:  #FBF7EA;
	--ink:         #1A1A1A;
	--ink-2:       #232323;
	--panel:       #262421;
	--bg:          #F1F1ED;
	--gray-bg:     #F5F5F3;
	--gray-line:   #E7E7E3;
	--text:        #2B2B2B;
	--muted:       #6B6B6B;
	--white:       #FFFFFF;

	--radius-lg: 26px;
	--radius-md: 16px;
	--radius-sm: 10px;
	--shadow-card: 0 18px 40px -24px rgba(0,0,0,.35);
	--shadow-soft: 0 10px 30px -18px rgba(0,0,0,.30);

	--container: 1180px;
	--font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Full-bleed 100vw elements must not create a horizontal scrollbar. */
	overflow-x: clip;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; color: var(--ink); }

p { margin: 0 0 1em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* Image placeholders — used until real photos are dropped into assets/images/ */
.ph {
	background-color: #d9d9d6;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
.ph::after {
	content: "";
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(45deg, rgba(0,0,0,.03) 0 14px, rgba(0,0,0,0) 14px 28px);
	pointer-events: none;
	opacity: 0; /* hidden by default; only visible if you want to flag empties */
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn__icon { display: inline-flex; }
.btn__icon svg { width: 18px; height: 18px; }

.btn--yellow { background: var(--yellow); color: var(--ink); box-shadow: var(--shadow-soft); }
.btn--yellow:hover { background: var(--yellow-deep); }

.btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); }
.btn--gold:hover { background: #e0a800; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--dark .btn__icon svg { color: var(--yellow); }

.btn--light { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.btn--light:hover { background: var(--cream); }

.btn--ghost { background: transparent; color: #fff; border-color: transparent; padding-inline: 12px; }
.btn--ghost:hover { color: var(--yellow); }

/* =========================================================
   Top bar
   ========================================================= */
.topbar {
	background: var(--cream);
	font-size: 14px;
	padding: 7px 0;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 34px;
	flex-wrap: wrap;
}
.topbar__text { color: var(--ink); }
.topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--yellow);
	color: var(--ink);
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 999px;
}
.topbar__phone-icon { display: inline-flex; color: var(--ink); }
.topbar__phone-icon svg { width: 15px; height: 15px; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
	background: var(--yellow);
	position: sticky;
	top: 0;
	z-index: 100;
	/* Shadow fades in smoothly once the page is scrolled (.is-scrolled via JS). */
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0);
	transition: box-shadow .35s ease;
}
.site-header.is-scrolled {
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .32);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 74px;
}

/* Site logo (Customizer custom logo) */
.site-branding { display: flex; align-items: center; }
.site-branding .custom-logo-link { display: inline-flex; align-items: center; }
.site-branding .custom-logo {
	max-height: 54px;
	width: auto;
	height: auto;
	display: block;
}
.brand--text {
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: .3px;
}

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--yellow);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	width: 46px; height: 40px;
	border-radius: 7px;
	letter-spacing: .5px;
}
.brand__badge small { font-size: 6.5px; font-weight: 600; letter-spacing: 1px; color: #fff; margin-top: 2px; }
.brand__name { display: inline-flex; flex-direction: column; line-height: 1; }
.brand__name-top { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--ink); }
.brand__name-bottom { font-size: 20px; font-weight: 800; letter-spacing: .5px; color: var(--ink); }
.brand--light .brand__name-top,
.brand--light .brand__name-bottom { color: #fff; }
.brand--light .brand__badge small { color: #fff; }

/* Nav */
.main-nav { display: flex; align-items: center; }
.nav-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0; padding: 0;
}
.nav-menu a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 14px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 999px;
	color: var(--ink);
	transition: background .18s ease;
}
/* Active item follows the current URL (WP current-* classes). */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current_page_item > a,
.nav-menu > li.current_page_ancestor > a {
	background: #fff;
	font-weight: 600;
}
.nav-menu a:hover { background: rgba(255,255,255,.55); }
/* Active item inside a dropdown: cream row + persistent yellow marker. */
.nav-menu ul.sub-menu li.current-menu-item > a {
	background: var(--cream);
	font-weight: 600;
}
.nav-menu ul.sub-menu li.current-menu-item > a::before { height: 62%; }
.menu-item-has-children > a::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	margin-left: 2px;
}

/* Sub-menus — "mini mega-menu": fully rounded, centred under the parent,
   with an up-arrow caret. The visual gap the caret needs would break the
   :hover chain, so an invisible ::before bridge covers it. */
.nav-menu ul.sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	list-style: none;
	margin: 0; padding: 10px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 26px 52px -22px rgba(0,0,0,.45);
	min-width: 240px;
	width: max-content;
	max-width: 520px;
	display: none;
	grid-template-columns: 1fr;
	gap: 2px;
	z-index: 50;
	animation: huhtanen-dd-in .18s ease both;
}
/* Invisible hover bridge across the gap between pill and panel. */
.nav-menu ul.sub-menu::before {
	content: "";
	position: absolute;
	top: -14px; left: 0; right: 0;
	height: 14px;
}
/* Up-arrow caret, centred, same white as the panel. */
.nav-menu ul.sub-menu::after {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #fff;
}
/* Long menus (7+ items) split into two columns. */
.nav-menu ul.sub-menu:has(> li:nth-child(7)) { grid-template-columns: 1fr 1fr; }
.nav-menu li { position: relative; }
.nav-menu li:hover > ul.sub-menu,
.nav-menu li:focus-within > ul.sub-menu { display: grid; }
@keyframes huhtanen-dd-in {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}
.nav-menu ul.sub-menu a {
	display: block;
	position: relative;
	border-radius: 10px;
	padding: 11px 32px 11px 16px;
	font-size: 14.5px;
	transition: background .15s ease;
}
/* Yellow marker grows in on hover… */
.nav-menu ul.sub-menu a::before {
	content: "";
	position: absolute;
	left: 5px; top: 50%;
	width: 4px; height: 0;
	border-radius: 2px;
	background: var(--yellow);
	transform: translateY(-50%);
	transition: height .18s ease;
}
/* …and an arrow slides in on the right. */
.nav-menu ul.sub-menu a::after {
	content: "→";
	position: absolute;
	right: 12px; top: 50%;
	transform: translate(-6px, -50%);
	opacity: 0;
	font-weight: 700;
	transition: opacity .18s ease, transform .18s ease;
}
.nav-menu ul.sub-menu a:hover { background: var(--cream); }
.nav-menu ul.sub-menu a:hover::before { height: 62%; }
.nav-menu ul.sub-menu a:hover::after { opacity: 1; transform: translate(0, -50%); }
/* Third-level menus fly out to the side, flush against the parent panel. */
.nav-menu ul.sub-menu ul.sub-menu {
	top: -10px;
	left: 100%;
	transform: none;
	border-radius: 16px;
	animation: none;
}
.nav-menu ul.sub-menu ul.sub-menu::before,
.nav-menu ul.sub-menu ul.sub-menu::after { display: none; }

/* Desktop: panel wrapper is transparent inline flow. */
.nav-panel { display: flex; align-items: center; }
.nav-panel__footer { display: none; }
.nav-panel__top { display: none; }

/* Mobile toggle — white "Valikko / Sulje" pill. */
.nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	background: #fff;
	color: var(--ink);
	border: none;
	border-radius: 999px;
	padding: 11px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.nav-toggle__icon {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 18px;
	height: 14px;
}
.nav-toggle__bar { width: 18px; height: 2.4px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle__label--close { display: none; }
/* Open state: bars morph into an X, label switches to "Sulje". */
.main-nav.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.main-nav.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.main-nav.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }
.main-nav.is-open .nav-toggle__label--open { display: none; }
.main-nav.is-open .nav-toggle__label--close { display: inline; }

/* =========================================================
   Hero
   ========================================================= */
.hero { background: var(--yellow); padding: 8px 0 34px; }
.hero__card { }
.hero__media {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	min-height: 430px;
	display: flex;
	align-items: center;
	background-color: #6a6f76;
	/* subtle motion-blur road feel until a real photo is added */
	background-image: linear-gradient(100deg, #3b3f45 0%, #6d7178 45%, #b9bcc0 100%);
}
.hero__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position + transform-origin/scale come inline from the block's
	   focal point & zoom settings. */
}
.hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10,10,10,.84) 0%, rgba(10,10,10,.68) 45%, rgba(10,10,10,.3) 78%, rgba(10,10,10,.08) 100%);
}
.hero__content {
	position: relative;
	max-width: 700px;
	padding: 48px clamp(28px, 5vw, 60px);
	color: #fff;
}
.hero__title {
	font-size: clamp(34px, 5vw, 56px);
	font-weight: 800;
	color: #fff;
	line-height: 1.05;
	margin-bottom: 18px;
}
.hero__text { font-size: 16px; color: rgba(255,255,255,.9); max-width: 600px; margin-bottom: 26px; }
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   Features
   ========================================================= */
.features { padding: 46px 0; }
.features__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.feature-card {
	background: #fff;
	border-radius: 18px;
	padding: 0 24px 28px;
	margin-top: 28px; /* room for the floating icon */
	text-align: center;
	box-shadow: 0 14px 34px -22px rgba(0,0,0,.28);
	transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -24px rgba(0,0,0,.4); }
.feature-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px; height: 78px;
	border-radius: 26px;
	background: var(--yellow);
	color: var(--ink);
	margin: -39px auto 14px; /* centred on the card's top edge */
	/* Thick ring in the page background colour — invisible above the card,
	   "scoops" a notch out of the white card below. */
	border: 11px solid var(--bg);
}
.feature-card__icon svg { width: 28px; height: 28px; }
.feature-card__title { font-size: 16px; margin-bottom: 10px; }
.feature-card__text { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.65; }

/* =========================================================
   Split / intro
   ========================================================= */
.split { padding: 40px 0 56px; }
.split__inner {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 48px;
	align-items: start;
}
.split__media {
	border-radius: var(--radius-md);
	min-height: 420px;
	background-color: #cfc9bf;
	background-image: linear-gradient(135deg, #8a8f7d 0%, #d8c34a 100%);
	box-shadow: var(--shadow-card);
}
.split__title {
	font-size: clamp(22px, 2.6vw, 30px);
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-bottom: 22px;
	line-height: 1.2;
}
.split__lead { font-size: 17px; font-weight: 700; margin: 18px 0 10px; }
.split__body p { color: #444; font-size: 15px; }

/* =========================================================
   Video CTA
   ========================================================= */
.video-cta { background: var(--yellow); padding: 52px 0 60px; text-align: center; }
.video-cta__title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; margin-bottom: 12px; }
.video-cta__text { max-width: 640px; margin: 0 auto 30px; font-size: 15px; color: #3a3a3a; }
.video-cta__frame {
	max-width: 720px;
	margin: 0 auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0,0,0,.55);
}
.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video-embed__thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Once the real video is playing, all theme overlays get out of the way. */
.video-embed.is-playing .video-embed__thumb,
.video-embed.is-playing .video-embed__play { display: none; }
.video-embed__play {
	position: relative;
	z-index: 2;
	background: none; border: none; cursor: pointer;
	transition: transform .2s ease;
	padding: 0;
}
.video-embed__play:hover { transform: scale(1.08); }
.video-embed__play .yt { transition: fill .2s ease; }

/* =========================================================
   Areas / map
   ========================================================= */
.areas { padding: 62px 0; }
/* Stacked: text on top, map below at full size. */
.areas__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
.areas__body { max-width: 700px; }
.areas__title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 18px; }
.areas__body p { color: #444; font-size: 15px; }
.areas__note { font-weight: 600; color: var(--ink); }
.areas__body .btn { margin-top: 6px; }

/* Finland map (image includes the pins and labels) */
.finmap { position: relative; width: 100%; max-width: 900px; margin-inline: auto; }
.finmap__img { display: block; width: 100%; height: auto; }

/* =========================================================
   Photo cards
   ========================================================= */
.photo-cards { padding: 10px 0 64px; }
.photo-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.photo-card {
	background: transparent; /* cards sit directly on the page background */
	border-radius: 0;
	overflow: visible;
}
.photo-card__media {
	min-height: 200px;
	border-radius: var(--radius-md);
	background-repeat: no-repeat;
	background-color: #c9c4bb;
	background-image: linear-gradient(135deg, #7d8470 0%, #e6cf55 100%);
	margin-bottom: 16px;
}
.photo-card:nth-child(2) .photo-card__media { background-image: linear-gradient(135deg, #b8c4cc 0%, #e2e2df 100%); }
.photo-card:nth-child(3) .photo-card__media { background-image: linear-gradient(135deg, #1c1c1c 0%, #f5c400 100%); }
.photo-card__title { font-size: 18px; margin-bottom: 8px; }
.photo-card__text { font-size: 14px; color: var(--muted); margin: 0; }

/* =========================================================
   Fleet cards (huhtanen/fleet-card)
   ========================================================= */
.fleet-card-section { padding: 12px 0; }
.fleet-card {
	display: grid;
	grid-template-columns: 5fr 6fr;
	background: #fff;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}
.fleet-card--reverse .fleet-card__media { order: 2; }
.fleet-card__media {
	position: relative;
	/* Uniform image height across all cards; text bodies fit within it. */
	min-height: 420px;
	background-color: #e9e7e1;
	background-position: center;
	background-repeat: no-repeat;
}
.fleet-card__badge {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--ink);
	color: var(--yellow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 6px 13px;
	border-radius: 999px;
}
.fleet-card__body {
	padding: 34px 40px;
	/* Centre the text block within the uniform card height. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.fleet-card__name { font-size: 24px; margin-bottom: 4px; }
.fleet-card__tagline { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.fleet-card__name + .fleet-card__specs { margin-top: 18px; }
.fleet-card__specs {
	list-style: none;
	margin: 0; padding: 0;
	/* Items flow down balanced columns — a long item can't strand its
	   row-neighbour above a hole, unlike a row-aligned grid. */
	columns: 2;
	column-gap: 26px;
}
.fleet-card__specs li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.45;
	color: #3c3c3c;
	break-inside: avoid;
	margin-bottom: 11px;
}
.fleet-card__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px; height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: 50%;
}
.fleet-card__check svg { width: 10px; height: 10px; }

@media (max-width: 860px) {
	.fleet-card { grid-template-columns: 1fr; }
	.fleet-card--reverse .fleet-card__media { order: 0; }
	/* Stacked: identical image ratio on every card. */
	.fleet-card__media { min-height: 0; aspect-ratio: 16 / 10; }
	.fleet-card__specs { columns: 1; }
	.fleet-card__body { padding: 24px 24px 26px; }
}

/* =========================================================
   Partner
   ========================================================= */
.partner {
	background: linear-gradient(115deg, #3a382f 0%, #2a2824 55%, #1f1e1b 100%);
	color: #fff;
	overflow: hidden;
	position: relative;
}
.partner__inner {
	display: flex;
	justify-content: flex-end;
	padding: 70px 24px;
	position: relative;
}
.partner__watermark {
	position: absolute;
	left: -10px; top: 50%;
	transform: translateY(-50%);
	font-size: 190px;
	font-weight: 800;
	line-height: .8;
	color: rgba(255,255,255,.06);
	display: flex; flex-direction: column;
	letter-spacing: -4px;
	user-select: none;
}
.partner__watermark span { font-size: 44px; letter-spacing: 6px; margin-top: 4px; }
.partner__body { max-width: 660px; position: relative; z-index: 2; }
.partner__logo {
	display: inline-flex; flex-direction: column; align-items: center;
	background: #fff; color: var(--ink);
	font-weight: 800; font-size: 26px; line-height: 1;
	padding: 10px 16px 8px; border-radius: 8px; margin-bottom: 22px;
}
.partner__logo small { font-size: 9px; letter-spacing: 3px; font-weight: 600; margin-top: 3px; }
/* Image variants: a real logo replaces the text chip / watermark. */
.partner__logo--img { padding: 10px 14px; }
.partner__logo--img img { max-height: 54px; width: auto; display: block; }
/* Image watermark = full-bleed background of the whole partner band. */
.partner__watermark--img {
	position: absolute;
	inset: 0;
	left: 0; top: 0;
	transform: none;
	display: block;
	z-index: 0;
}
.partner__watermark--img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	opacity: .35;
	filter: none;
}
/* With a photo watermark the band is full-bleed: un-position the container so
   the absolutely-positioned photo and scrim anchor to the full-width section
   (.partner is position:relative) instead of the 1180px .container. */
.partner:has(.partner__watermark--img) .partner__inner {
	position: static;
}
/* Dark scrim so the body text stays readable over the photo. */
.partner:has(.partner__watermark--img) .partner__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(20,19,17,.72) 0%, rgba(20,19,17,.55) 45%, rgba(20,19,17,.82) 100%);
	z-index: 1;
}
.partner__title { font-size: clamp(24px, 3vw, 32px); color: #fff; margin-bottom: 16px; }
.partner__body p { color: rgba(255,255,255,.82); font-size: 15px; }
.partner__body .btn { margin-top: 10px; }

/* =========================================================
   Reviews
   ========================================================= */
.reviews { background: var(--cream-soft); padding: 60px 0; }
.reviews__inner {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	column-gap: 40px;
	align-items: center;
}
.reviews__intro { text-align: left; }
.reviews__badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--yellow);
	font-size: 13px; font-weight: 600;
	padding: 7px 14px; border-radius: 999px;
	margin-bottom: 16px;
}
.reviews__badge-icon { display: inline-flex; }
.reviews__badge-icon svg { width: 16px; height: 16px; }
.reviews__title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 14px; }
.reviews__intro p { color: #555; font-size: 15px; }
.reviews__nav {
	grid-column: 1 / -1;      /* full width under both columns */
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 30px;
}
.reviews__arrow {
	width: 46px; height: 46px;
	border-radius: 50%;
	border: none;
	background: var(--yellow);
	color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-soft);
	transition: background .18s ease, transform .18s ease;
}
.reviews__arrow:hover { background: var(--yellow-deep); transform: translateY(-2px); }
.reviews__arrow svg { width: 18px; height: 18px; }

.reviews__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* overflow-x:auto forces overflow-y:auto, which would clip the card
	   shadows into a hard line — pad enough vertically to contain them. */
	padding: 30px 0 58px;
	scrollbar-width: none;
	/* Continuous linear fade toward both edges (the "fade"). */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.reviews__track::-webkit-scrollbar { display: none; }
.review-card {
	/* wider cards, but ~2.5 fit so one is centred with peeking neighbours */
	flex: 0 0 40%;
	min-width: 280px;
	scroll-snap-align: center;
	background: #fff;
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-md);
	padding: 22px;
	box-shadow: var(--shadow-soft);
}
.review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.review-card__stars { display: inline-flex; gap: 2px; }
.review-card__stars .star svg { width: 16px; height: 16px; color: #d9d9d9; }
.review-card__stars .star.is-on svg { color: #FFB400; }
.review-card__g svg { width: 20px; height: 20px; }
.review-card__text { font-size: 13.5px; color: #444; margin-bottom: 18px; }
.review-card__author { display: flex; align-items: center; gap: 12px; }
.review-card__avatar {
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--yellow); color: var(--ink);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.review-card__meta { display: flex; flex-direction: column; line-height: 1.3; }
.review-card__meta small { color: var(--muted); font-size: 12px; }

/* Centre emphasis: the linear-gradient mask handles the fade; JS marks the
   card nearest centre so it scales up. Only active once JS adds .is-fade. */
.reviews__track.is-fade .review-card {
	transform: scale(0.92);
	transition: transform .35s ease;
	will-change: transform;
}
.reviews__track.is-fade .review-card.is-center {
	transform: scale(1);
	box-shadow: var(--shadow-card);
	z-index: 1;
}

/* =========================================================
   Final CTA band
   ========================================================= */
.cta-band { background: var(--yellow); padding: 30px 0; }
.cta-band__inner {
	display: flex; align-items: center; justify-content: center;
	gap: 24px; flex-wrap: wrap;
}
.cta-band__title { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ink); color: #cfcfcf; }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr 0.8fr;
	gap: 40px;
	padding: 54px 24px 40px;
}
/* Area links flow into two columns so eleven towns stay compact. */
.footer-menu--areas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 18px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.site-footer__logo { display: inline-flex; }
.site-footer__logo img { max-height: 58px; width: auto; height: auto; display: block; }
.footer-callout {
	display: inline-flex; flex-direction: column;
	background: var(--yellow); color: var(--ink);
	padding: 12px 24px; border-radius: 12px;
}
.footer-callout__label { font-size: 12px; font-weight: 600; }
.footer-callout__number { font-size: 24px; font-weight: 800; line-height: 1.1; }
.site-footer__col h3,
.site-footer__col h4 { color: #fff; font-size: 15px; margin-bottom: 16px; letter-spacing: .5px; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-menu a { font-size: 14px; color: #b8b8b8; transition: color .15s ease; }
.footer-menu a:hover { color: var(--yellow); }

.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__bottom-inner {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 24px; gap: 16px; flex-wrap: wrap;
	font-size: 13px; color: #8f8f8f;
}
.legal-links { display: flex; gap: 22px; }
.legal-links a:hover { color: var(--yellow); }
.site-credit a { color: #c9c9c9; text-decoration: underline; text-underline-offset: 2px; }
.site-credit a:hover { color: var(--yellow); }

/* =========================================================
   Generic page content (page.php / index.php)
   ========================================================= */
.page-wrap { padding: 50px 24px; max-width: 820px; }
/* In-content groups on block-built pages match the section container width
   (blog posts and classic pages keep the narrow reading column). */
.wp-block-group.page-wrap { max-width: var(--container); }
.entry__title { font-size: 34px; margin-bottom: 22px; }
.entry__content { font-size: 16px; color: #333; }
.entry__content a { color: #8a6400; text-decoration: underline; }

/* =========================================================
   Core blocks inside themed pages
   ========================================================= */
.page-wrap h1, .wp-block-group.page-wrap h1 { font-size: 34px; margin-bottom: 20px; }
.page-wrap h2, .wp-block-group.page-wrap h2 { font-size: 26px; margin: 30px 0 14px; }
.page-wrap h3, .wp-block-group.page-wrap h3 { font-size: 20px; margin: 24px 0 10px; }
.wp-block-group.page-wrap { font-size: 16px; color: #333; }
.wp-block-group.page-wrap a { color: #8a6400; text-decoration: underline; }
.wp-block-group.page-wrap ul,
.wp-block-group.page-wrap ol { padding-left: 22px; margin: 0 0 1em; }
.wp-block-group.page-wrap li { margin-bottom: 6px; }
.wp-block-image { margin: 0 0 1.4em; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-image figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Core button block → theme pill buttons */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 15px 26px;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--ink);
	text-decoration: none !important;
	box-shadow: var(--shadow-soft);
	transition: transform .15s ease, background .2s ease;
}
.wp-block-button__link:hover { background: var(--yellow-deep); transform: translateY(-2px); }
/* Content areas color their links gold (.page-wrap a / .entry__content a), which
   out-specifies .wp-block-button__link and fails contrast on the yellow pill.
   Extra a.-specificity keeps button text ink no matter where the button sits. */
.wp-block-group.page-wrap a.wp-block-button__link,
.entry__content a.wp-block-button__link {
	color: var(--ink);
}
/* Same leak for theme .btn pills placed inside content (e.g. the Reittiohjeet
   button): kill the inherited underline and restore each variant's own text
   colour so it stays readable on its background. */
.wp-block-group.page-wrap a.btn,
.entry__content a.btn { text-decoration: none; }
.wp-block-group.page-wrap a.btn--gold,
.wp-block-group.page-wrap a.btn--yellow,
.wp-block-group.page-wrap a.btn--light,
.entry__content a.btn--gold,
.entry__content a.btn--yellow,
.entry__content a.btn--light { color: var(--ink); }
.wp-block-group.page-wrap a.btn--dark,
.wp-block-group.page-wrap a.btn--ghost,
.entry__content a.btn--dark,
.entry__content a.btn--ghost { color: #fff; }
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--ink);
	box-shadow: none;
}
.wp-block-buttons { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 1.4em; }

/* Columns keep sane gaps */
.wp-block-columns { display: flex; gap: 26px; flex-wrap: wrap; margin: 0 0 1.4em; }
.wp-block-columns .wp-block-column { flex: 1 1 0; min-width: 240px; }

/* Embedded videos/tables inside content */
.wp-block-embed { margin: 0 0 1.4em; }
.wp-block-embed iframe { max-width: 100%; border-radius: var(--radius-md); }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--gray-line); padding: 10px 12px; }

/* =========================================================
   Blog (custom post type `blogi`)
   ========================================================= */
.blog-hero { background: var(--yellow); padding: 54px 0 40px; }
.blog-hero__title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; margin-bottom: 10px; }
.blog-hero__text { max-width: 640px; color: #3a3a3a; font-size: 16px; margin: 0; }
.blog-hero--single { padding: 42px 0 96px; }

.blog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.blog-filter {
	background: rgba(255,255,255,.55);
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	transition: background .15s ease;
}
.blog-filter:hover { background: #fff; }
.blog-filter.is-active { background: var(--ink); color: #fff; }

.blog-archive { padding: 52px 0 64px; }
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
.blog-card {
	background: #fff;
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.blog-card__link { display: block; color: inherit; }
.blog-card__media {
	height: 190px;
	background-size: cover;
	background-position: center;
	background-color: #ece9df;
}
.blog-card__media--empty {
	background-image: linear-gradient(135deg, var(--yellow) 0%, #f5e9b0 100%);
}
.blog-card__body { padding: 20px 22px 24px; }
.blog-meta { font-size: 12.5px; color: var(--muted); font-weight: 500; letter-spacing: .2px; }
.blog-card__title { font-size: 18px; margin: 8px 0 8px; line-height: 1.3; }
.blog-card__excerpt { font-size: 14px; color: #555; margin: 0 0 14px; }
.blog-card__more { font-size: 14px; font-weight: 600; color: var(--ink); }
.blog-card:hover .blog-card__more { color: #8a6400; }
.blog-empty { text-align: center; color: var(--muted); padding: 40px 0; }

.blog-pagination { margin-top: 44px; text-align: center; }
.blog-pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; }
.blog-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 8px;
	border-radius: 50%;
	border: 1px solid var(--gray-line);
	background: #fff;
	font-weight: 600;
	transition: background .15s ease;
}
.blog-pagination .page-numbers:hover { background: var(--yellow); }
.blog-pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Single post */
.blog-back { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.blog-back:hover { color: #fff; }
.blog-single__meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.blog-single__meta .blog-meta { color: #4a4a4a; }
.blog-meta--author::before { content: "✎ "; }
.blog-single__cover {
	height: clamp(260px, 40vw, 460px);
	border-radius: var(--radius-lg);
	background-size: cover;
	background-position: center;
	margin-top: -76px;
	box-shadow: var(--shadow-card);
}
.blog-single__content { padding-top: 42px; }

/* Classic-editor content niceties (blog posts are written classic) */
.entry__content img { border-radius: var(--radius-md); height: auto; }
.entry__content .alignleft { float: left; margin: 6px 24px 12px 0; max-width: 50%; }
.entry__content .alignright { float: right; margin: 6px 0 12px 24px; max-width: 50%; }
.entry__content .aligncenter { display: block; margin: 20px auto; }
.entry__content .wp-caption { max-width: 100%; }
.entry__content .wp-caption-text { font-size: 13px; color: var(--muted); margin-top: 8px; }
.entry__content blockquote {
	border-left: 4px solid var(--yellow);
	margin: 24px 0;
	padding: 8px 0 8px 22px;
	font-style: italic;
	color: #444;
}
.entry__content iframe { max-width: 100%; border-radius: var(--radius-md); }
.entry__content h2 { font-size: 26px; margin: 32px 0 14px; }
.entry__content h3 { font-size: 20px; margin: 26px 0 10px; }
.entry__content ul, .entry__content ol { padding-left: 22px; margin: 0 0 1em; }
.entry__content li { margin-bottom: 6px; }
.entry__content a { color: #8a6400; text-decoration: underline; }

.blog-related { background: var(--cream-soft); padding: 54px 0 64px; }
.blog-related__title { font-size: 26px; font-weight: 800; margin-bottom: 26px; }

/* =========================================================
   Core blocks — full Style Book coverage.
   Global (not scoped to .page-wrap) so the editor Style Book,
   block editor and frontend all match the brand design.
   ========================================================= */

/* --- Text --- */
.wp-block-quote {
	background: var(--cream-soft);
	border-left: 4px solid var(--yellow);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	margin: 24px 0;
	padding: 18px 24px;
	font-style: italic;
	color: #444;
}
.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: 10px;
	color: var(--muted);
	font-style: normal;
	font-size: 13.5px;
	font-weight: 500;
}
.wp-block-pullquote {
	border-top: 4px solid var(--yellow);
	border-bottom: 4px solid var(--yellow);
	margin: 32px 0;
	padding: 30px 12px;
	text-align: center;
}
.wp-block-pullquote blockquote { margin: 0; }
.wp-block-pullquote p {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	margin: 0;
}
.wp-block-code,
.wp-block-preformatted {
	background: var(--ink);
	color: #f2f2f2;
	border-radius: var(--radius-sm);
	padding: 18px 22px;
	font-size: 14px;
	overflow-x: auto;
	margin: 0 0 1.4em;
}
.wp-block-code code { background: none; color: inherit; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.wp-block-verse {
	background: var(--cream);
	border-radius: var(--radius-sm);
	padding: 18px 24px;
	font-style: italic;
	font-family: var(--font);
	color: #444;
	margin: 0 0 1.4em;
}
.wp-block-details {
	background: #fff;
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-sm);
	padding: 16px 20px;
	margin: 0 0 1.4em;
}
.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
	color: var(--ink);
}
.wp-block-details[open] summary { margin-bottom: 10px; }
.wp-block-table { margin: 0 0 1.4em; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; background: #fff; }
.wp-block-table thead th {
	background: var(--ink);
	color: #fff;
	font-weight: 600;
	border-color: var(--ink);
}
.wp-block-table tfoot td { background: var(--cream); font-weight: 600; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--cream-soft); }
.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-gallery figcaption,
.wp-block-embed figcaption {
	font-size: 13px;
	color: var(--muted);
	text-align: center;
	margin-top: 8px;
}
.wp-block-footnotes { font-size: 13.5px; color: var(--muted); }

/* --- Media --- */
.wp-block-gallery .wp-block-image img { border-radius: var(--radius-md); }
.wp-block-cover {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0 0 1.4em;
}
.wp-block-media-text { margin: 0 0 1.4em; }
.wp-block-media-text__media img,
.wp-block-media-text__media video { border-radius: var(--radius-md); }
.wp-block-video video { border-radius: var(--radius-md); }
.wp-block-audio audio { width: 100%; }
.wp-block-file {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-sm);
	padding: 12px 18px;
	margin: 0 0 1.4em;
}
.wp-block-file a:first-child { font-weight: 600; color: var(--ink); text-decoration: none; }
.wp-block-file__button {
	background: var(--yellow) !important;
	color: var(--ink) !important;
	border-radius: 999px !important;
	padding: 8px 18px !important;
	font-weight: 600;
	font-size: 13.5px !important;
	text-decoration: none !important;
	margin-left: auto;
}

/* --- Design --- */
.wp-block-separator {
	border: none;
	width: 96px;
	max-width: 100%;
	height: 5px;
	border-radius: 999px;
	background: var(--yellow);
	margin: 30px auto;
	opacity: 1;
}
.wp-block-separator.is-style-wide { width: 100%; height: 2px; background: var(--gray-line); }
.wp-block-separator.is-style-dots {
	background: none;
	width: auto;
	height: auto;
	text-align: center;
	color: var(--yellow);
}

/* --- Widgets --- */
.wp-block-search__input {
	border: 1px solid var(--gray-line);
	border-radius: 999px;
	padding: 10px 20px;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}
.wp-block-search__input:focus { outline: 2px solid var(--yellow); border-color: transparent; }
.wp-block-search__button {
	background: var(--yellow);
	color: var(--ink);
	border: none;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background .15s ease;
}
.wp-block-search__button:hover { background: var(--yellow-deep); }
.wp-block-search .wp-block-search__label { font-weight: 600; margin-bottom: 8px; }

.wp-block-tag-cloud a {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--gray-line);
	border-radius: 999px;
	padding: 6px 15px;
	margin: 0 6px 8px 0;
	font-size: 13px !important;
	font-weight: 500;
	color: var(--ink);
	transition: background .15s ease;
}
.wp-block-tag-cloud a:hover { background: var(--yellow); }

.wp-block-latest-posts,
.wp-block-latest-comments,
.wp-block-categories,
.wp-block-archives,
.wp-block-page-list,
.wp-block-rss {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.4em;
}
.wp-block-latest-posts > li,
.wp-block-latest-comments > li,
.wp-block-categories > li,
.wp-block-archives > li,
.wp-block-page-list > li,
.wp-block-rss > li {
	padding: 9px 0;
	border-bottom: 1px solid var(--gray-line);
}
.wp-block-latest-posts a,
.wp-block-categories a,
.wp-block-archives a,
.wp-block-page-list a,
.wp-block-rss a {
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}
.wp-block-latest-posts a:hover,
.wp-block-categories a:hover,
.wp-block-archives a:hover,
.wp-block-page-list a:hover,
.wp-block-rss a:hover { color: #8a6400; }
.wp-block-latest-posts__post-date,
.wp-block-latest-comments__comment-date,
.wp-block-rss__item-publish-date { font-size: 13px; color: var(--muted); }

.wp-block-calendar table { width: 100%; border-collapse: collapse; background: #fff; }
.wp-block-calendar caption { font-weight: 700; padding: 8px 0; color: var(--ink); }
.wp-block-calendar th {
	background: var(--cream);
	color: var(--ink);
	font-weight: 600;
	border: 1px solid var(--gray-line);
	padding: 6px;
}
.wp-block-calendar td { border: 1px solid var(--gray-line); padding: 6px; text-align: center; }
.wp-block-calendar td#today {
	background: var(--yellow);
	font-weight: 700;
	border-radius: 4px;
}
.wp-block-calendar .wp-calendar-nav { padding: 6px 0; font-size: 14px; }

.wp-block-social-links .wp-social-link { border-radius: 50%; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
	.features__grid { grid-template-columns: repeat(2, 1fr); }
	.blog-grid { grid-template-columns: repeat(2, 1fr); }
	.split__inner { grid-template-columns: 1fr; }
	.split__media { min-height: 300px; }
	.areas__inner { grid-template-columns: 1fr; }
	.reviews__inner { grid-template-columns: 1fr; }
	.photo-cards__grid { grid-template-columns: 1fr; }
	.partner__inner { justify-content: center; }
}

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; flex-shrink: 0; }

	/* Keep the wide logo + menu pill on one row without overflow. */
	.site-header__inner { gap: 12px; }
	.site-branding { min-width: 0; }
	.site-branding .custom-logo { max-height: 40px; max-width: 56vw; object-fit: contain; }

	/* Lock scrolling while the menu is open. */
	body.nav-open { overflow: hidden; }

	/* Full-screen yellow menu overlay with its own header row.
	   Curtain animation: slides down on open, up on close. */
	.main-nav .nav-panel {
		position: fixed;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background: var(--yellow);
		padding: 0 24px;
		overflow-y: auto;
		z-index: 200;
		transform: translateY(-103%);
		visibility: hidden;
		transition: transform .45s cubic-bezier(.22, 1, .36, 1), visibility 0s .45s;
	}
	.main-nav.is-open .nav-panel {
		transform: translateY(0);
		visibility: visible;
		transition: transform .45s cubic-bezier(.22, 1, .36, 1);
	}

	/* Panel header: logo + close, mirrors the site header. */
	.nav-panel__top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		min-height: 74px;
		flex-shrink: 0;
		border-bottom: 1px solid rgba(0,0,0,.10);
		margin: 0 0 26px;
	}
	.nav-panel__top .custom-logo { max-height: 40px; max-width: 56vw; width: auto; height: auto; object-fit: contain; }
	.nav-panel__close {
		display: inline-flex;
		align-items: center;
		gap: 9px;
		background: #fff;
		color: var(--ink);
		border: none;
		border-radius: 999px;
		padding: 11px 20px;
		font-family: inherit;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		flex-shrink: 0;
	}

	.main-nav .nav-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	/* Staggered entrance for menu items + footer. */
	.main-nav .nav-menu > li,
	.main-nav .nav-panel__footer {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .3s ease, transform .3s ease;
	}
	.main-nav.is-open .nav-menu > li,
	.main-nav.is-open .nav-panel__footer { opacity: 1; transform: none; }
	.main-nav.is-open .nav-menu > li:nth-child(1) { transition-delay: .16s; }
	.main-nav.is-open .nav-menu > li:nth-child(2) { transition-delay: .21s; }
	.main-nav.is-open .nav-menu > li:nth-child(3) { transition-delay: .26s; }
	.main-nav.is-open .nav-menu > li:nth-child(4) { transition-delay: .31s; }
	.main-nav.is-open .nav-menu > li:nth-child(5) { transition-delay: .36s; }
	.main-nav.is-open .nav-menu > li:nth-child(6) { transition-delay: .41s; }
	.main-nav.is-open .nav-menu > li:nth-child(7) { transition-delay: .46s; }
	.main-nav.is-open .nav-menu > li:nth-child(8) { transition-delay: .51s; }
	.main-nav.is-open .nav-panel__footer { transition-delay: .5s; }
	.nav-menu a {
		display: flex;
		padding: 14px 22px;
		font-size: 18px;
		font-weight: 600;
	}
	.nav-menu > li.current-menu-item > a,
	.nav-menu > li.current-menu-ancestor > a,
	.nav-menu > li.current-menu-parent > a,
	.nav-menu > li.current_page_item > a,
	.nav-menu > li.current_page_ancestor > a { background: var(--cream); }

	/* Bottom emergency band inside the open menu. */
	.nav-panel__footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin: auto -24px 0; /* full-bleed against panel padding */
		background: var(--cream);
		padding: 20px 24px 26px;
		text-align: center;
	}
	.nav-panel__footer-text { font-size: 16px; color: #2b2b2b; }
	.nav-panel__footer .btn { font-size: 18px; padding: 13px 32px; }
	.nav-menu ul.sub-menu {
		position: static;
		box-shadow: none;
		background: rgba(255, 255, 255, .45);
		border-top: none;
		border-radius: 14px;
		width: auto;
		max-width: none;
		animation: none;
		transform: none;
		margin: 8px 6px 2px;
		padding: 8px;
	}
	.nav-menu ul.sub-menu::before,
	.nav-menu ul.sub-menu::after { display: none; }
	.nav-menu ul.sub-menu:has(> li:nth-child(7)) { grid-template-columns: 1fr; }
	.nav-menu ul.sub-menu a {
		font-size: 16px;
		font-weight: 500;
		padding: 11px 18px;
	}
	.nav-menu li:hover > ul.sub-menu,
	.nav-menu li:focus-within > ul.sub-menu { display: none; }
	.nav-menu li.is-open > ul.sub-menu {
		display: grid;
		animation: huhtanen-sub-in .22s ease both;
	}
	@keyframes huhtanen-sub-in {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	/* Chevron flips when the item is expanded. */
	.menu-item-has-children > a::after { transition: transform .2s ease; }
	.menu-item-has-children.is-open > a::after { transform: rotate(225deg) translateY(-2px); }
}

@media (max-width: 860px) {
	.review-card { flex-basis: 72%; }
}

@media (max-width: 620px) {
	.features__grid { grid-template-columns: 1fr; }
	.blog-grid { grid-template-columns: 1fr; }
	.review-card { flex-basis: 82%; }
	.blog-single__cover { margin-top: -60px; }
	.site-footer__inner { grid-template-columns: 1fr; gap: 30px; }

	/* Hero: centred content, stacked buttons. */
	.hero__media { min-height: 420px; }
	.hero__overlay { background: linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.8) 100%); }
	.hero__content { text-align: center; padding: 44px 26px; margin-inline: auto; }
	.hero__text { margin-inline: auto; }
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { justify-content: center; }
	.hero__actions .btn--ghost { padding-block: 12px; }

	/* Top bar: text above a yellow phone pill, both centred. */
	.topbar__inner { flex-direction: column; gap: 10px; padding: 14px 22px 16px; }
	.topbar__text { display: block; font-size: 16px; color: var(--ink); }
	.topbar__phone { background: var(--yellow); color: var(--ink); font-size: 18px; font-weight: 700; padding: 10px 30px; }
	.topbar__phone-icon { color: var(--ink); }

	.cta-band__inner { flex-direction: column; text-align: center; }
}

/* =========================================================
   Contact form (Contact Form 7)
   ========================================================= */
.wpcf7 {
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: 34px 36px;
	margin: 8px 0 40px;
}
.wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 4px;
}
.wpcf7-form > p { margin: 0 0 16px; }
.wpcf7-form > .hidden-fields-container,
.wpcf7-form > p:has(.wpcf7-textarea),
.wpcf7-form > p:has(.wpcf7-checkbox),
.wpcf7-form > p:has(.wpcf7-submit),
.wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
}
.wpcf7-form label {
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
}
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: var(--radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wpcf7-form .wpcf7-select {
	cursor: pointer;
	/* Replace the flush native arrow with a padded custom chevron. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
}
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-select:focus,
.wpcf7-form .wpcf7-textarea:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px rgba(242, 183, 5, .25);
}
.wpcf7-form .wpcf7-textarea {
	min-height: 150px;
	resize: vertical;
}
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 8px;
}
.wpcf7-form .wpcf7-list-item { margin: 0; }
.wpcf7-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	cursor: pointer;
}
.wpcf7-form input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--gold);
}
.wpcf7-form .wpcf7-submit {
	display: inline-block;
	background: var(--gold);
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	border: 0;
	border-radius: 999px;
	padding: 16px 40px;
	cursor: pointer;
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
	transition: background .15s ease, transform .15s ease;
}
.wpcf7-form .wpcf7-submit:hover {
	background: #e0a800;
	transform: translateY(-1px);
}
.wpcf7-form .wpcf7-response-output {
	margin: 4px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
}

/* ---------- Multi-step hinaustilaus (fieldset.hh-step markup) ---------- */
/* The stepped form manages its own per-step grids, so the outer form flows. */
.wpcf7-form:has(.hh-step) { display: block; }
.hh-step {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
}
/* Steps are hidden only once the JS has booted — no-JS gets the full form. */
.hh-steps-ready .hh-step:not(.is-active) { display: none; }
.hh-step > legend {
	font-size: 20px;
	font-weight: 800;
	color: var(--ink);
	padding: 0;
	margin-bottom: 20px;
}
.hh-step > p { margin: 0 0 16px; }
.hh-step > p:has([data-name="hakupaikka"]),
.hh-step > p:has([data-name="maaranpaa"]),
.hh-step > p:has([data-name="your-message"]),
.hh-step > .hh-urgent,
.hh-step > .hh-summary,
.hh-step > .hh-billing { grid-column: 1 / -1; }

/* Urgent tow → nudge towards calling instead of filling a form. */
.hh-urgent {
	background: var(--cream);
	border: 1px solid var(--yellow);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 14px;
}
.hh-urgent a { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Progress bar (built by cf7-steps.js) */
.hh-progress {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}
.hh-progress li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--gray-line);
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}
.hh-progress li.is-active { border-color: var(--yellow); color: var(--ink); }
.hh-progress li.is-done { border-color: var(--yellow-deep); color: var(--ink); cursor: pointer; }
.hh-progress__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gray-line);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}
.hh-progress li.is-active .hh-progress__num { background: var(--yellow); }
.hh-progress li.is-done .hh-progress__num { background: var(--yellow-deep); }

/* Back / next / submit row (built by cf7-steps.js) */
.hh-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	margin-top: 6px;
}
.hh-nav [hidden] { display: none; }
.hh-nav p { margin: 0 0 0 auto; }
.hh-nav__back {
	background: transparent;
	border: 2px solid var(--gray-line);
	border-radius: 999px;
	padding: 13px 26px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	transition: border-color .15s ease;
}
.hh-nav__back:hover { border-color: var(--ink); }
.hh-nav__next {
	margin-left: auto;
	background: var(--gold);
	border: 0;
	border-radius: 999px;
	padding: 16px 40px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--ink);
	cursor: pointer;
	box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5);
	transition: background .15s ease, transform .15s ease;
}
.hh-nav__next:hover { background: #e0a800; transform: translateY(-1px); }

/* Order summary on the confirm step */
.hh-summary {
	background: var(--gray-bg);
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin-bottom: 18px;
	font-size: 14px;
}
.hh-summary:empty { display: none; }
.hh-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 5px 0;
}
.hh-summary__row span { color: var(--muted); }
.hh-summary__row strong { text-align: right; overflow-wrap: anywhere; }

/* Optional billing address, folded away by default */
.hh-billing {
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-sm);
	margin-bottom: 16px;
}
.hh-billing summary {
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
}
.hh-billing[open] summary { border-bottom: 1px solid var(--gray-line); }
.hh-billing p { padding: 0 16px; margin: 12px 0; }

/* Client-side validation messages */
.hh-tip {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #c0392b;
}
.wpcf7-form .hh-invalid { border-color: #c0392b; }

/* After a successful send only CF7's confirmation message remains. */
.hh-sent .hh-step,
.hh-sent .hh-progress,
.hh-sent .hh-nav { display: none; }

@media (max-width: 700px) {
	.wpcf7 { padding: 24px 18px; }
	.wpcf7-form { grid-template-columns: 1fr; }
	.hh-step { grid-template-columns: 1fr; }
	.hh-progress li:not(.is-active) .hh-progress__label { display: none; }
}

/* =========================================================
   Contact + map card (Ota yhteyttä — Käyntiosoite)
   ========================================================= */
.hh-contact-map {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	border: 1px solid var(--gray-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	background: #fff;
	margin-top: 10px;
}
.hh-contact-map__info {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 34px 36px;
}
.hh-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* Beat the theme's `.wp-block-group.page-wrap ul { padding-left: 22px }` so the
   icons sit flush with the panel padding (and the full-width button below). */
.wp-block-group.page-wrap ul.hh-contact-list { padding-left: 0; margin: 0; }
.hh-contact-list li {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}
.wp-block-group.page-wrap .hh-contact-list li { margin: 0; }
.hh-contact-list li::before { content: none; }
.hh-contact-list__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--yellow);
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hh-contact-list__icon svg { width: 20px; height: 20px; }
.hh-contact-list__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.hh-contact-list__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--muted);
}
.hh-contact-list__value {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.hh-contact-list__value:hover { color: var(--yellow-deep); }
.hh-contact-map__dir {
	align-self: stretch;
	justify-content: center;
	margin-top: auto;
	padding-block: 16px;
	font-size: 16px;
}
.hh-contact-map__map {
	position: relative;
	min-height: 360px;
	background: var(--gray-bg);
}
.hh-contact-map__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
@media (max-width: 780px) {
	.hh-contact-map { grid-template-columns: 1fr; }
	.hh-contact-map__info { padding: 26px 22px; }
	.hh-contact-map__map { min-height: 260px; order: -1; }
}

/* =========================================================
   Third-party embeds (Groweo)
   ========================================================= */
/* The SmartFlow order form uses light text, so it sits on a dark panel. */
.gw-smartflow {
	background: var(--ink);
	padding: 28px 12px;
	overflow: hidden;
	margin-bottom: 48px;
}
/* The Groweo script injects an iframe into these containers. Without it (script
   removed or blocked) the empty dark panels would render as stray black bands,
   so show them only once the iframe is actually there. */
.gw-smartflow:not(:has(iframe)),
.gw-smartbot-form:not(:has(iframe)) { display: none; }
/* When the FAQ/chat block follows directly, both panels are dark, so the
   margin would show as a stray light band between them. Sit flush instead. */
.gw-smartflow:has(+ .gw-smartbot-form) { margin-bottom: 0; }
/* Full-bleed variant: last section of a page, sits flush on the next band. */
.gw-smartflow--flush { margin-bottom: 0; }
.gw-smartflow iframe,
.gw-smartbot-form iframe { display: block; width: 100%; border: 0; }

/* Embeds break out of the narrow article column to full container width. */
.page-wrap .gw-smartflow,
.page-wrap .gw-smartbot-form {
	width: min(100vw - 48px, var(--container));
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
/* FAQ/chat block goes truly full-bleed, edge to edge. */
.page-wrap .gw-smartbot-form { width: 100vw; }
/* A group holding ONLY the FAQ embed sits flush against the neighbouring
   sections: no own padding, and the -50px pulls it over the previous
   page-wrap group's bottom padding. (:only-child keeps this away from
   groups that mix the embed with text content.) */
.wp-block-group.page-wrap:has(> .gw-smartbot-form:only-child iframe) {
	max-width: none;
	padding: 0;
	margin-top: -50px;
}

/* =========================================================
   Partners directory (yhteistyökumppanit page)
   ========================================================= */
.partners h2.wp-block-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 26px;
	margin: 48px 0 18px;
}
.partners h2.wp-block-heading::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 28px;
	border-radius: 5px;
	background: var(--yellow);
}
.partners h2.wp-block-heading:first-child { margin-top: 0; }
.partners h3.wp-block-heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--muted);
	margin: 26px 0 10px;
}

/* City shop lists: white cards, entries flow in balanced columns. */
.partners ul.wp-block-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 24px 30px;
	background: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	columns: 2;
	column-gap: 44px;
}
.partners ul.wp-block-list li {
	position: relative;
	break-inside: avoid;
	padding-left: 18px;
	margin: 0 0 9px;
	font-size: 15px;
	line-height: 1.5;
}
.partners ul.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--yellow-deep);
}
.partners ul.wp-block-list a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.partners ul.wp-block-list a:hover { color: #8a6400; }

/* Insurance companies: link pills instead of a bullet list. */
.partners ul.partner-chips {
	columns: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.partners ul.partner-chips li { margin: 0; padding: 0; }
.partners ul.partner-chips li::before { content: none; }
.partners ul.partner-chips a {
	display: inline-flex;
	align-items: center;
	background: #fff;
	padding: 12px 24px;
	border-radius: 999px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: background .2s ease, transform .15s ease;
}
.partners ul.partner-chips a:hover { background: var(--yellow); transform: translateY(-2px); }

/* 24 h callout panel at the end of the directory. */
.partners .partners-callout {
	margin-top: 52px;
	background: var(--ink);
	border-radius: var(--radius-lg);
	padding: 44px clamp(26px, 5vw, 60px);
	color: #fff;
}
.partners .partners-callout h2.wp-block-heading { color: #fff; margin: 0 0 12px; }
.partners .partners-callout p { color: rgba(255,255,255,.85); font-size: 16px; max-width: 680px; }
.partners .partners-callout .wp-block-button__link {
	background: var(--yellow);
	color: var(--ink);
}

@media (max-width: 700px) {
	.partners ul.wp-block-list { columns: 1; }
}