/* Lähde theme styles. Design tokens live in theme.json; this file holds what theme.json can't express.

   1. Base            5. Mobile menu      9. Front page intro   13. Sparkle burst
   2. Layout          6. Footer          10. Page sections      14. Page transitions
   3. Buttons         7. Block styles    11. 404 page           15. Reduced motion
   4. Header & nav    8. Front page hero 12. Scroll reveals
*/

/* ---------- 1. Base ---------- */

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Finnish compounds get long ("Yritysasiakkaat"): hyphenate headings instead of overflowing. */
h1, h2, h3, .wp-block-post-title {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
	outline: 3px solid var(--wp--preset--color--pink-deep);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Script accent: handwritten notes like on their Instagram. */
.is-style-script, .has-script-font-family { line-height: 1.1; }

/* Shared sparkle shape (as in the logo), used as a mask so it takes any color. */
:root {
	--lahde-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0c1.3 10.2 4.2 15.8 20 20-15.8 4.2-18.7 9.8-20 20-1.3-10.2-4.2-15.8-20-20C15.8 15.8 18.7 10.2 20 0z'/%3E%3C/svg%3E");
	--lahde-checker: conic-gradient(var(--wp--preset--color--pink) 25%, var(--wp--preset--color--blush) 0 50%, var(--wp--preset--color--pink) 0 75%, var(--wp--preset--color--blush) 0);
}

@keyframes lahde-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50% { transform: scale(0.72) rotate(18deg); opacity: 0.75; }
}

/* ---------- 2. Layout ---------- */

/* Footer always at the bottom: the page is at least one screen tall and <main> takes the spare
   height, so short pages never show background below the footer. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	/* Tilted cards, sparkles and drop-in reveals may poke past the screen edge; never let that
	   make the page scroll sideways on phones (clip, unlike hidden, keeps the sticky header working). */
	overflow-x: clip;
}
.wp-site-blocks > main { flex: 1 0 auto; }

/* Front page is a stack of full-width sections that set their own spacing. */
.front-sections > .alignfull { margin-block: 0; }

/* Pages: the content runs full width so sections can be full-bleed. Everything else (paragraphs the
   client types, images…) sits in a 720px column whose left edge lines up with the page title and
   the logo; wide blocks get the 1200px area. */
.page-sections {
	--page-gutter: max(var(--wp--style--root--padding-left, 1.25rem), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
	padding-bottom: var(--wp--preset--spacing--60);
}
.page-sections > :where(:not(.alignfull):not(.alignwide)) {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-left: var(--page-gutter);
	margin-right: auto;
}
.page-sections > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem);
}
.page-sections > .alignfull { margin-block: 0; }
.page-sections:has(> .alignfull:last-child) { padding-bottom: 0; }

/* Page titles: always one line. The title spans the wide area (aligned with the logo) and shrinks
   to fit rather than wrap. First paint: size estimated from the character count (--title-chars,
   set in inc/blocks.php) against the container width; theme.js then fits it exactly. */
.page-header { container-type: inline-size; }

.wp-block-post-title.page-title {
	white-space: nowrap;
	hyphens: manual;
	-webkit-hyphens: manual;
	font-size: min(var(--wp--preset--font-size--huge), calc(100cqi / (var(--title-chars, 12) * var(--title-glyph-width, 0.72))));
}

/* In the editor the fitting script doesn't run: let the title wrap while it's being typed. */
.editor-styles-wrapper .wp-block-post-title.page-title {
	white-space: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* ---------- 3. Buttons ---------- */

:where(.wp-block-button__link, .wp-element-button) {
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* Buttons do a little jelly wobble on hover. */
:where(.wp-block-button__link, .wp-element-button):hover { animation: lahde-jelly 0.6s ease both; }

@keyframes lahde-jelly {
	0% { transform: scale(1, 1); }
	30% { transform: scale(1.1, 0.9); }
	45% { transform: scale(0.94, 1.06); }
	60% { transform: scale(1.04, 0.97); }
	75% { transform: scale(0.99, 1.01); }
	100% { transform: scale(1, 1); }
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--plum);
	border: 2px solid currentColor;
	padding: calc(0.9em - 2px) calc(1.8em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--blush);
}

/* ---------- 4. Header & nav ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow 0.3s ease;
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile menu inside it. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: color-mix(in srgb, var(--wp--preset--color--blush) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
.site-header.is-scrolled { box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--plum) 15%, transparent); }

.site-header .wp-block-site-title { white-space: nowrap; }
.site-header .wp-block-site-title a { text-decoration: none; }

/* Nav links: underline grows in on hover and stays on the current page. */
.site-header .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 500;
	background-image: linear-gradient(var(--wp--preset--color--pink-deep), var(--wp--preset--color--pink-deep));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.25s ease;
}
.site-header .wp-block-navigation-item__content:hover,
.site-header .current-menu-item > .wp-block-navigation-item__content {
	background-size: 100% 2px;
	color: inherit;
}

/* Always one line: items shrink a little on narrower screens and never break mid-label. */
.site-header .wp-block-navigation {
	--wp--style--block-gap: clamp(0.9rem, 0.2rem + 1.6vw, 2rem);
	font-size: clamp(0.9rem, 0.75rem + 0.35vw, 1.0625rem);
}
.site-header .wp-block-navigation__container { flex-wrap: nowrap; }
.site-header .wp-block-navigation-item__content { white-space: nowrap; }

/* theme.js adds .is-nav-collapsed when the items no longer fit on one line: show the hamburger
   even above WordPress's 600px mobile breakpoint. */
.site-header.is-nav-collapsed .wp-block-navigation__responsive-container-open {
	display: flex !important;
}
.site-header.is-nav-collapsed .wp-block-navigation__responsive-container:not(.is-menu-open) {
	display: none !important;
}
.site-header.is-nav-collapsed .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex !important;
}

/* The shop is a button on wider screens and a menu item in the mobile menu. */
.site-header .header-shop { flex-shrink: 0; }
.site-header .header-shop .wp-block-button__link { padding: 0.6em 1.2em; white-space: nowrap; }
@media (max-width: 599px) {
	.site-header .header-shop { display: none; }
}
@media (min-width: 600px) {
	.site-header .nav-shop { display: none; }
}

/* ---------- 5. Mobile menu ---------- */

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	background: var(--wp--preset--color--pink) !important;
	color: var(--wp--preset--color--plum) !important;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: flex-start;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	animation: lahde-menu-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.site-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.05s; }
.site-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.1s; }
.site-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.15s; }
.site-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.2s; }

/* Brand touches: checkerboard strip at the bottom, a sparkle and a handwritten sign-off. */
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	/* Own colors: the shared checker is pink, which would vanish on the pink menu. */
	background:
		conic-gradient(var(--wp--preset--color--pink-deep) 25%, var(--wp--preset--color--blush) 0 50%, var(--wp--preset--color--pink-deep) 0 75%, var(--wp--preset--color--blush) 0)
		0 0 / 44px 44px;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "Sun HR big sisters 💜" / "";
	position: absolute;
	left: var(--wp--preset--spacing--40);
	bottom: 72px;
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--large);
	transform: rotate(-4deg);
	animation: lahde-menu-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards;
}
.site-header .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	position: fixed;
	right: var(--wp--preset--spacing--40);
	bottom: 76px;
	width: 56px;
	height: 56px;
	background: var(--wp--preset--color--plum);
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}

@keyframes lahde-menu-in {
	from { opacity: 0; transform: translateX(-18px); }
}

/* ---------- 6. Footer ---------- */

/* No default block gap above the footer: sections run straight into it
   (content templates add their own bottom padding). */
.wp-site-blocks > .site-footer { margin-block-start: 0; }

.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--wp--preset--color--pink); }
.site-footer .footer-tagline { transform: rotate(-3deg); color: var(--wp--preset--color--pink); }

.site-footer__legal {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}
.site-footer__legal p { margin: 0; line-height: 1.4; }
.site-footer__legal a { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- 7. Block styles ---------- */

/* Plain lists (footer link lists). */
.is-style-plain { list-style: none; padding-left: 0; }
.is-style-plain li + li { margin-top: 0.35em; }

/* Checkerboard divider. */
.wp-block-separator.is-style-checker {
	--square: 22px;
	height: calc(var(--square) * 2);
	border: 0;
	opacity: 1;
	margin-block: 0;
	background: var(--lahde-checker) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
}

/* Grid paper section (like the grid-paper backgrounds on their Instagram). */
.wp-block-group.is-style-grid-paper {
	--grid: 28px;
	--grid-line: color-mix(in srgb, var(--wp--preset--color--sage) 70%, transparent);
	background-color: var(--wp--preset--color--cream);
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid) var(--grid);
	background-position: center top;
}

/* "Laput": small facts as pills (duration, place, price…). */
.wp-block-list.is-style-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}
.wp-block-list.is-style-pills li {
	padding: 0.35em 0.95em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	background: var(--wp--preset--color--cream);
	border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--plum) 18%, transparent);
	border-radius: var(--wp--custom--radius--pill, 999px);
}
.wp-block-list.is-style-pills li:nth-child(3n + 2) { background: var(--wp--preset--color--butter); }
.wp-block-list.is-style-pills li:nth-child(3n + 3) { background: var(--wp--preset--color--mauve); }

/* "Luumu": plum button for pink backgrounds. */
.wp-block-button.is-style-plum > .wp-block-button__link {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--blush);
}
.wp-block-button.is-style-plum > .wp-block-button__link:hover {
	background: var(--wp--preset--color--pink-deep);
	color: var(--wp--preset--color--white);
}

/* "Iso nosto": big quote on a tilted butter card. */
.wp-block-quote.is-style-lahde-big {
	position: relative;
	margin: 0;
	padding: 3rem 2.2rem 2.2rem;
	background: var(--wp--preset--color--butter);
	border: 0;
	border-radius: var(--wp--custom--radius--large, 24px);
	box-shadow: 0 20px 40px -22px rgb(104 4 6 / 45%);
	rotate: -2deg;
}
/* Straightens and lifts a little under the mouse, like the sticker photos. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-quote.is-style-lahde-big { transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
	.wp-block-quote.is-style-lahde-big:hover { rotate: 0deg; translate: 0 -4px; }
}
.wp-block-quote.is-style-lahde-big p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.wp-block-quote.is-style-lahde-big cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--preset--font-size--large);
	font-style: normal;
}
.wp-block-quote.is-style-lahde-big::before {
	content: "“";
	position: absolute;
	top: -0.3em;
	left: 0.12em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 7rem;
	line-height: 1;
	color: var(--wp--preset--color--pink-deep);
}
.wp-block-quote.is-style-lahde-big::after {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: 52px;
	height: 52px;
	background: var(--wp--preset--color--plum);
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}

/* FAQ rows (core Details): big serif question, round +/× toggle. theme.js animates opening and closing. */
.wp-block-details {
	margin: 0;
	padding-block: 1.1rem;
	border-bottom: 1.5px solid color-mix(in srgb, var(--wp--preset--color--plum) 20%, transparent);
}
.wp-block-details:first-child { border-top: 1.5px solid color-mix(in srgb, var(--wp--preset--color--plum) 20%, transparent); }
.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background:
		linear-gradient(var(--wp--preset--color--plum), var(--wp--preset--color--plum)) center / 13px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--plum), var(--wp--preset--color--plum)) center / 2px 13px no-repeat,
		var(--wp--preset--color--pink);
	transition: rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.wp-block-details[open] summary::after { rotate: 45deg; }
.wp-block-details summary:hover::after { background-color: var(--wp--preset--color--butter); }
.wp-block-details > :not(summary) { margin-top: 0.8rem; }

/* ---------- 8. Front page hero ---------- */

.lahde-hero { position: relative; overflow: clip; }

.lahde-hero__hello {
	display: inline-block;
	margin-bottom: 0;
	transform: rotate(-4deg);
	transform-origin: left bottom;
}

.lahde-hero__title {
	margin-top: 0.15em;
	text-transform: none;
	/* Sized for the longest word ("elämänmakuista") on one line in the column, phone to desktop. */
	font-size: clamp(2.35rem, 1.3rem + 3.4vw, 4.6rem);
	line-height: 1.02;
	/* Bodoni runs loose at display sizes: pull the letters together. */
	letter-spacing: -0.03em;
	text-wrap: balance;
	/* Never break the long words: the size above keeps them on one line. */
	hyphens: manual;
	-webkit-hyphens: manual;
}
.lahde-hero__intro {
	max-width: 32em;
	font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3rem);
	line-height: 1.6;
	text-wrap: pretty;
}

.lahde-hero__media { position: relative; }

/* Decorative sparkles around the sticker. */
.lahde-hero__media::before,
.lahde-hero__media::after {
	content: "";
	position: absolute;
	z-index: 2;
	pointer-events: none;
	background: no-repeat center / contain;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}
.lahde-hero__media::before {
	width: 64px;
	height: 64px;
	top: -18px;
	right: 4%;
	background-image: url("../images/sparkle.svg");
}
.lahde-hero__media::after {
	width: 54px;
	height: 54px;
	bottom: 12%;
	right: -6px;
	background-image: url("../images/star.svg");
	animation-delay: -1.6s;
}

@media (max-width: 781px) {
	/* Stacked: the message first, the photo after it. */
	.lahde-hero__media { --hero-photo-w: min(78%, 340px); }
	.lahde-hero__media .wp-block-lahde-sticker-photo { max-width: var(--hero-photo-w); }
	/* Keep the sparkles on the photo's corner, not the edge of the full-width column. */
	.lahde-hero__media::before { right: calc(50% - var(--hero-photo-w) / 2 - 12px); }
	.lahde-hero__media::after { right: calc(50% - var(--hero-photo-w) / 2 - 22px); }
}

/* ---------- 9. Front page intro (once per visit; .intro-seen skips it, no JS means no intro) ---------- */

/* Only when motion is welcome: with reduced motion the delays alone would hide content for a second. */
@media (prefers-reduced-motion: no-preference) {
	.js:not(.intro-seen) .lahde-hero__hello {
		animation: lahde-write 0.9s cubic-bezier(0.6, 0.1, 0.4, 1) 0.1s backwards;
	}
	.js:not(.intro-seen) .lahde-hero__title {
		animation: lahde-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s backwards;
	}
	.js:not(.intro-seen) .lahde-hero__intro {
		animation: lahde-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s backwards;
	}
	.js:not(.intro-seen) .lahde-hero__actions {
		animation: lahde-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s backwards;
	}
	.js:not(.intro-seen) .lahde-hero .wp-block-lahde-sticker-photo.is-revealed {
		animation-delay: 0.45s;
	}
	.js:not(.intro-seen) .lahde-hero__media::before {
		animation: lahde-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s backwards, lahde-twinkle 3.2s ease-in-out 1.55s infinite;
	}
	.js:not(.intro-seen) .lahde-hero__media::after {
		animation: lahde-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s backwards, lahde-twinkle 3.2s ease-in-out 1.7s infinite;
	}
}

/* Returning to the front page: the sticker is just there. */
.js.intro-seen .lahde-hero .wp-block-lahde-sticker-photo[data-reveal]:not(.is-revealed) {
	opacity: 1;
	transform: rotate(var(--tilt));
}
.js.intro-seen .lahde-hero .wp-block-lahde-sticker-photo[data-reveal].is-revealed { animation: none; }

@keyframes lahde-write {
	from { clip-path: inset(-30% 100% -30% -5%); }
	to { clip-path: inset(-30% -5% -30% -5%); }
}
@keyframes lahde-rise {
	from { opacity: 0; transform: translateY(0.6em); }
}
@keyframes lahde-pop-in {
	from { opacity: 0; transform: scale(0.4) rotate(-14deg); }
}

/* ---------- 10. Page sections (patterns in /patterns, built by inc/patterns.php) ---------- */

/* Handwritten line above a section heading. */
.lahde-kicker {
	margin-bottom: 0;
	transform: rotate(-2deg);
	transform-origin: left center;
}
.lahde-kicker.has-text-align-center { transform-origin: center; }
.lahde-kicker + .wp-block-heading { margin-top: 0.1em; }

/* Page intro: text and photo start at the top, right under the page title. Centered, the text sat
   halfway down the tall photo and left a big gap under the title. (The pages carry their own copy of
   this markup once edited, so this is done here rather than in the pattern.) */
@media (min-width: 782px) {
	.lahde-intro .wp-block-columns { align-items: flex-start; }
	.lahde-intro .wp-block-column.is-vertically-aligned-center { align-self: flex-start; }
	.lahde-intro .wp-block-column > :first-child { margin-top: 0; }
}
@media (max-width: 781px) {
	.lahde-intro__media .wp-block-lahde-sticker-photo { max-width: min(78%, 320px); }
}
/* Heading under the page title (e.g. "Työelämä herättää kysymyksiä…"). */
.lahde-intro__title {
	font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.6rem);
	line-height: 1.1;
	hyphens: manual;
	-webkit-hyphens: manual;
}
.lahde-intro__title + p { margin-top: 0.9em; }

/* Company page footer: no shop link (the shop's products are for individuals). Matched by its
   address, so it works with an edited footer too. */
.is-company-page .site-footer li:has(> a[href*="holvi.com"]) { display: none; }

/* Numbered services: the number comes from a counter, so reordering renumbers automatically. */
.lahde-services { counter-reset: lahde-service; }
.lahde-service {
	counter-increment: lahde-service;
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1.5px solid color-mix(in srgb, var(--wp--preset--color--plum) 18%, transparent);
}
.lahde-service__title {
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
	letter-spacing: -0.02em;
}
.lahde-service__title::before {
	content: counter(lahde-service);
	display: block;
	width: fit-content;
	margin-bottom: 0.15em;
	font-family: var(--wp--preset--font-family--script);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--pink-deep);
	rotate: -4deg;
}
.lahde-service__subtitle {
	margin-top: 0.2em;
	color: var(--wp--preset--color--pink-deep);
}
/* "JobKit sisältää" sits right on top of its list. */
.lahde-service__list-title { margin-bottom: 0; }
.lahde-service__list-title + .wp-block-list { margin-top: 0.4rem; }
.lahde-service__note { opacity: 0.85; }
/* "Konkreettista apua…": a soft card closing the list, pointing to the shop. */
.lahde-services__outro {
	max-width: 820px;
	margin-top: var(--wp--preset--spacing--60) !important;
	padding: clamp(1.75rem, 1rem + 3vw, 3rem);
	text-align: center;
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--large, 24px);
	box-shadow: 0 20px 40px -26px rgb(104 4 6 / 40%);
}
.lahde-services__outro-title {
	margin: 0;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
	text-wrap: balance;
	hyphens: manual;
	-webkit-hyphens: manual;
}
.lahde-services__outro p { max-width: 38em; margin-inline: auto; }
.lahde-services__outro .wp-block-buttons { justify-content: center; }
/* Photos alternate sides on wide screens. */
@media (min-width: 782px) {
	.lahde-service:nth-of-type(even) > .wp-block-columns { flex-direction: row-reverse; }
}
@media (max-width: 781px) {
	.lahde-service .wp-block-lahde-sticker-photo { max-width: min(80%, 340px); }
	/* Service icons: smaller, and above the title rather than after the long text. */
	.lahde-service .wp-block-lahde-sticker-photo.has-service-icon { max-width: 150px; margin-inline: 0; }
	.lahde-service .wp-block-column:has(> .has-service-icon) { order: -1; }
	.lahde-service .wp-block-columns:has(.has-service-icon) { gap: 1.5rem; }
}

/* Cards (steps, values): colored, slightly tilted, straighten on hover. */
.lahde-cards { counter-reset: lahde-card; }
.lahde-cards > .wp-block-column {
	position: relative;
	padding: 2rem 1.6rem 1.8rem;
	background: var(--card-bg, var(--wp--preset--color--cream));
	border-radius: var(--wp--custom--radius--large, 24px);
	box-shadow: 0 16px 34px -20px rgb(104 4 6 / 45%);
	rotate: var(--card-tilt, -1.2deg);
	transition: rotate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lahde-cards > .wp-block-column:nth-child(4n + 1) { --card-bg: var(--wp--preset--color--butter); }
.lahde-cards > .wp-block-column:nth-child(4n + 2) { --card-bg: var(--wp--preset--color--sage); --card-tilt: 1deg; }
.lahde-cards > .wp-block-column:nth-child(4n + 3) { --card-bg: var(--wp--preset--color--mauve); --card-tilt: -0.8deg; }
.lahde-cards > .wp-block-column:nth-child(4n + 4) { --card-bg: var(--wp--preset--color--white); --card-tilt: 1.4deg; }
.lahde-cards > .wp-block-column:hover { rotate: 0deg; translate: 0 -4px; }
.lahde-cards h3 { margin-top: 0; font-size: var(--wp--preset--font-size--large); }
.lahde-cards.is-numbered > .wp-block-column { counter-increment: lahde-card; }
.lahde-cards.is-numbered > .wp-block-column::before {
	content: counter(lahde-card) ".";
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--script);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--pink-deep);
}

/* Width-limited items in sections sit on the left edge; WordPress's constrained layout would
   center them with !important margins. */
.lahde-faq,
.lahde-cta__title { margin-left: max(0px, (100% - var(--wp--style--global--wide-size, 1200px)) / 2) !important; }

/* FAQ */
.lahde-faq { max-width: 820px; }

/* Contact band: big heading with sparkles. */
.lahde-cta { position: relative; overflow: clip; }
.lahde-cta__title {
	max-width: 16ch;
	hyphens: manual;
	-webkit-hyphens: manual;
	font-size: clamp(2.2rem, 1.4rem + 3.5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
}
.lahde-cta::before,
.lahde-cta::after {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}
.lahde-cta::before { top: 16%; right: 9%; width: clamp(56px, 9vw, 120px); background: var(--wp--preset--color--plum); }
.lahde-cta::after { bottom: 18%; right: 21%; width: clamp(34px, 4vw, 56px); background: var(--wp--preset--color--butter); animation-delay: -1.6s; }
@media (max-width: 781px) {
	.lahde-cta::before { top: 1.5rem; right: 1.25rem; }
	.lahde-cta::after { display: none; }
}

/* Founders: photo on top, the second person a little lower on wide screens for a collage feel. */
.lahde-person .wp-block-lahde-sticker-photo {
	max-width: 380px;
	margin: 0 0 var(--wp--preset--spacing--40);
}
.lahde-person h3 { margin-bottom: 0; font-size: var(--wp--preset--font-size--x-large); }
.lahde-person__role { margin-top: 0.1em; transform: rotate(-2deg); transform-origin: left center; }
@media (min-width: 782px) {
	.lahde-people > .wp-block-column:nth-child(2) { margin-top: var(--wp--preset--spacing--60); }
}

/* Calm tone (Yritysasiakkaat): same brand, less play. Numbers in the serif, cards and photos
   hardly tilted, fewer pinks. */
.lahde-services.is-calm .lahde-service__title::before {
	padding-bottom: 0.3em;
	margin-bottom: 0.45em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.5em;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--aubergine);
	border-bottom: 3px solid var(--wp--preset--color--butter);
	rotate: 0deg;
}
.lahde-services.is-calm .lahde-service__subtitle { color: var(--wp--preset--color--cocoa); }
.is-calm .wp-block-list.is-style-pills li {
	background: var(--wp--preset--color--white);
	border-color: color-mix(in srgb, var(--wp--preset--color--aubergine) 25%, transparent);
}

.lahde-cards.is-calm > .wp-block-column {
	--card-tilt: 0deg;
	background: var(--wp--preset--color--white);
	border-top: 6px solid var(--card-accent, var(--wp--preset--color--butter));
	border-radius: 18px;
}
.lahde-cards.is-calm > .wp-block-column:nth-child(4n + 1) { --card-accent: var(--wp--preset--color--butter); }
.lahde-cards.is-calm > .wp-block-column:nth-child(4n + 2) { --card-accent: var(--wp--preset--color--sage); }
.lahde-cards.is-calm > .wp-block-column:nth-child(4n + 3) { --card-accent: var(--wp--preset--color--mauve); }
.lahde-cards.is-calm > .wp-block-column:nth-child(4n + 4) { --card-accent: var(--wp--preset--color--rose); }
.lahde-cards.is-calm.is-numbered > .wp-block-column::before {
	content: counter(lahde-card, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.25rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--aubergine);
}

/* Key figures on the forest band. */
.lahde-stats-section { position: relative; overflow: clip; }
.lahde-stats-section::after {
	content: "";
	position: absolute;
	top: 12%;
	right: 8%;
	width: clamp(44px, 6vw, 80px);
	aspect-ratio: 1;
	background: var(--wp--preset--color--butter);
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}
.lahde-stats { margin-top: var(--wp--preset--spacing--40); }
.lahde-stats > .wp-block-column {
	padding-left: 1.5rem;
	border-left: 1.5px solid color-mix(in srgb, var(--wp--preset--color--cream) 30%, transparent);
}
.lahde-stat__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--butter);
}
.lahde-stat__label { margin-top: 0.4rem; font-size: var(--wp--preset--font-size--large); }

/* Client logos: grayscale until hovered, like most "trusted by" rows. */
.lahde-logos__label {
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}
.lahde-logos { gap: var(--wp--preset--spacing--40); }
.lahde-logo { flex: 1 1 140px; max-width: 200px; margin: 0; }
.lahde-logo img {
	width: 100%;
	height: auto;
	max-height: 72px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
}
.lahde-logo img:hover { filter: none; opacity: 1; }

/* Client quote: the big quote card in a soft mauve (the class name is from its earlier dark
   version; edited pages carry it, so it stays). */
/* Centered, also over margins set on the block in the editor. */
.wp-block-quote.lahde-quote-dark {
	max-width: 900px;
	margin-inline: auto !important;
	color: var(--wp--preset--color--plum);
	background: color-mix(in srgb, var(--wp--preset--color--mauve) 45%, var(--wp--preset--color--cream));
	rotate: -1deg;
}
.lahde-kicker:has(+ .lahde-quote-dark) { text-align: center; transform-origin: center; }
.wp-block-quote.lahde-quote-dark::before { color: var(--wp--preset--color--cocoa); }
.wp-block-quote.lahde-quote-dark::after { background: var(--wp--preset--color--cocoa); }
.wp-block-quote.lahde-quote-dark cite { color: var(--wp--preset--color--cocoa); }
/* Real client quotes run to several sentences: a reading size rather than a one-liner's. */
.wp-block-quote.lahde-quote-dark p { font-size: clamp(1.35rem, 0.95rem + 1.3vw, 2.1rem); line-height: 1.22; }

/* Meistä: the long opening statement and its pull quote. */
.lahde-story__title {
	font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.75rem);
	line-height: 1.1;
	hyphens: manual;
	-webkit-hyphens: manual;
}
.lahde-story .wp-block-quote.is-style-lahde-big p { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }

/* ---------- 11. 404 page ---------- */

.lahde-404__hups {
	display: inline-block;
	margin-bottom: 0;
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem) !important;
	transform: rotate(-5deg);
	transform-origin: left bottom;
}
.lahde-404__title {
	margin-top: 0.15em;
	text-transform: none;
	font-size: clamp(2.4rem, 1.4rem + 4vw, 4.75rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

/* The "404" sticker card: checkerboard, white border, tilted, with a sparkle. */
.lahde-404__card {
	position: relative;
	display: grid;
	place-items: center;
	/* Room for the tilt and the corner sparkle when the column reaches the screen edge. */
	width: min(100% - 48px, 360px);
	aspect-ratio: 4 / 5;
	margin-inline: auto;
	background: var(--lahde-checker) 0 0 / 56px 56px;
	border: 12px solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--large, 24px);
	box-shadow: 0 24px 48px -24px rgb(104 4 6 / 50%);
	transform: rotate(4deg);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lahde-404__card:hover { transform: rotate(-2deg) scale(1.03); }
.lahde-404__card span {
	padding: 0.05em 0.3em 0.12em;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(4.5rem, 3rem + 5vw, 7.5rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--plum);
	background: var(--wp--preset--color--butter);
	border-radius: 12px;
	transform: rotate(-6deg);
	box-shadow: 0 10px 20px -12px rgb(104 4 6 / 50%);
}
@media (max-width: 781px) {
	.lahde-404__card { width: min(70%, 260px); border-width: 9px; }
	.lahde-404__card::after { top: -22px; right: -16px; width: 44px; height: 44px; }
}
.lahde-404__card::after {
	content: "";
	position: absolute;
	top: -30px;
	right: -24px;
	width: 64px;
	height: 64px;
	background: var(--wp--preset--color--plum);
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-twinkle 3.2s ease-in-out infinite;
}

/* ---------- 12. Scroll reveals (theme.js tags the elements; only ones starting below the fold) ---------- */

.js [data-reveal="fade"]:not(.is-revealed),
.js [data-reveal="drop"]:not(.is-revealed) { opacity: 0; }

/* Keyframe animations rather than transitions: a `transition` here would replace the element's own
   transitions (card tilt, hover lifts), so those would snap instead of animating afterwards. */
.js [data-reveal="fade"].is-revealed {
	animation: lahde-reveal-fade 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) backwards;
}

/* Instagram tiles: dropped onto the grid paper one by one, each at its own angle. */
.js [data-reveal="drop"].is-revealed {
	animation: lahde-reveal-drop 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) var(--reveal-delay, 0s) backwards;
}

@keyframes lahde-reveal-fade {
	from { opacity: 0; transform: translateY(28px); }
}
@keyframes lahde-reveal-drop {
	from { opacity: 0; transform: translateY(-36px) rotate(var(--drop-tilt, -4deg)) scale(1.06); }
}

/* ---------- 13. Sparkle burst on shop and contact links (theme.js) ---------- */

.lahde-burst {
	position: fixed;
	z-index: 1000;
	width: 0;
	height: 0;
	pointer-events: none;
}
.lahde-burst span {
	position: absolute;
	top: calc(var(--size) / -2);
	left: calc(var(--size) / -2);
	width: var(--size);
	height: var(--size);
	background: var(--color);
	mask: var(--lahde-sparkle) center / contain no-repeat;
	animation: lahde-burst 0.75s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes lahde-burst {
	from { transform: translate(0, 0) scale(0.3) rotate(0deg); opacity: 1; }
	70% { opacity: 1; }
	to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* ---------- 14. Page transitions (cross-document View Transitions; other browsers just navigate) ---------- */

@view-transition { navigation: auto; }

.site-header { view-transition-name: lahde-header; }

::view-transition-old(root) { animation: lahde-page-out 0.22s ease both; }
::view-transition-new(root) { animation: lahde-page-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes lahde-page-out {
	to { opacity: 0; transform: translateY(-10px); }
}
@keyframes lahde-page-in {
	from { opacity: 0; transform: translateY(18px); }
}

/* ---------- 15. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }

	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}