:root {
	--smi-root-padding-left-right: clamp(1rem, calc(6vw + -0.2rem), 7rem); /* 16px-112px 320px-1920px */
	--smi-main-padding-top: 4.5em;
	--smi-main-padding-bottom: 7.5em;
	
	--smi-logo-width: 15em;
	--smi-logo-width-tablet: 13em;
	--smi-logo-width-phone: 11em;
	
	--smi-hero-min-height: 46vh;
	--smi-hero-min-height-tablet: 42vh;
	--smi-hero-min-height-phone: 40vh;
	
	--smi-header-0-scroll-bg: var(--wp--preset--color--footer);
	
	--smi-mobile-menu-font-size: var(--wp--preset--font-size--x-medium);
	--smi-mobile-sub-menu-font-size: var(--wp--preset--font-size--medium);
	
	/* Mobiilivalikon ikoni (hampurilainen → risti) */
	--smi-burger-width: 20px;
	--smi-burger-thickness: 1px;
	--smi-burger-gap: 7px; /* keskipalkin etäisyys ulompiin */
	--smi-burger-radius: 1px;
	--smi-burger-hit-area: 44px; /* WCAG 2.5.8 */
	--smi-burger-anim-duration: 420ms;
	--smi-burger-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);
	
	--smi-slider-korkeus: 40vh;
	
	--smi-mega-menu-max-width: var(--wp--style--global--wide-size);  /* full 100vw */
	
	--smi-anim-speed: 700ms;

	/* Headerin todellinen korkeus. Kapealla se on 5em (80px); työpöydällä
	   vaakanavin kohtien padding kasvattaa sen 90px:ään. Käytetään heron
	   korkeuden laskentaan, jotta kansi ulottuu tasan ikkunan pohjaan. */
	--smi-header-korkeus: 80px;

	--smi-buttons-gap: 1em;
	--smi-button-pd-tb: 1.05em !important; /* padding top-bottom */
	--smi-button-pd-lr: 2.2em !important; /* padding left-right */
	--smi-button-color: #111111;
	--smi-button-font-size: var(--fs-s);
	--smi-button-font-family: inherit;
	--smi-button-font-style: normal;
	--smi-button-font-weight: 700;
	--smi-button-letter-spacing: 0.07em;
	--smi-button-text-transform: uppercase;
	--smi-button-line-height: 1.5;
	--smi-button-bg: var(--color-1);
	--smi-button-border-radius: 2px;
	--smi-button-border-width: 0px;
	--smi-button-border-color: var(--color-1);
	/*--- Button hoover ---*/
	--smi-button-hoover-color: var(--color-1);
	--smi-button-hoover-bg: var(--color-2);
	--smi-button-hoover-border-width: 0px;
	--smi-button-hoover-border-color: var(--color-2);
}

/* Kanslerilla ei ole painikkeelle omia asetuksia → ulkoasu tyylitellään tässä. */
#kncc-floating-btn.kncc-floating-btn {
	left: auto;
	right: 16px;
	bottom: 0;
	width: 60px;
	height: 19px;
	min-height: 0;
	padding: 0;
	line-height: 0;
	border-radius: 6px 6px 0 0;
	background: rgba(255, 255, 255, 0.14); /* läpikuultava → backdrop-filter näkyy */
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	color: #00000066;
	border: 1px solid #00000044;
	border-bottom: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: 150ms;
	--kncc-primary-text: #00000066; /* plugin värittää ikonin tästä; vain tämän painikkeen scopessa */
}
/* smi-js.js lisää .on-dark tumman taustan päällä. Poisto: tämä + ADAPTIIVINEN-lohko smi-js.js:ssä. */
#kncc-floating-btn.kncc-floating-btn.on-dark {
	color: #ffffff66;
	border-color: #ffffff66;
	--kncc-primary-text: #ffffff66;
}
#kncc-floating-btn.kncc-floating-btn:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--primary); /* projektin brändiväri */
	color: #111111;
	border-color: #111111;
	--kncc-primary-text: #111111;
	height: 24px;
}
#kncc-floating-btn.kncc-floating-btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}
/* Mobiilissa lähemmäs reunaa ja kapeampi, ettei osu sisällön päälle */
@media (max-width: 600px) {
	#kncc-floating-btn.kncc-floating-btn {
		right: 6px;
		width: 46px;
	}
}

/* Plugin värittää linkit brändivärillä; keltainen jää valkoisella lukukelvottomaksi (1,37:1). */
a.kncc-policy-link,
button.kncc-btn--link {
	color: var(--wp--preset--color--custom-links);
}

/* Hero-min-height */
.hero-min-height {
	min-height: var(--smi-hero-min-height);
}
:root {
	--hero-min-height: var(--smi-hero-min-height);
}
@media (max-width: 1024px) {
.hero-min-height {
	min-height: var(--smi-hero-min-height-tablet);
}
:root {
	--hero-min-height: var(--smi-hero-min-height-tablet);
}
}
@media (max-width: 767px) {
.hero-min-height {
	min-height: var(--smi-hero-min-height-phone);
}
:root {
	--hero-min-height: var(--smi-hero-min-height-phone);
}
}


/* >> INTERSECTION-OBSERVER ANIMAATIOT */
/* 1. PERUSASETUKSET KAIKILLE ANIMOITAVILLE ELEMENTEILLE */
.feidaus, 
.vasemmalta, 
.oikealta, 
.ylhaalta, 
.alhaalta,
.skaalaus,
.perspektiivi {
    /* Sijainti ja muoto */
    --x-liike: 0px;
    --y-liike: 0px;
    --skaala: 1;
    --kaanto-y: 0deg;

    /* 1. Kestot (Oletus) */
    --kesto-feidaus: var(--smi-anim-speed, 0.75s);
    --kesto-liike: var(--smi-anim-speed, 1.5s);
    --kesto-skaalaus: var(--smi-anim-speed, 3s);
    --kesto-perspek: var(--smi-anim-speed, 3.5s);

    /* 2. Easingit (Oletus) */
    --ease-feidaus: ease-in;
    --ease-liike: ease-out;
    --ease-skaalaus: ease-out;
    --ease-perspek: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Modernit erilliset ominaisuudet! (Mahdollistaa eri ajastukset) */
    transform: perspective(1000px); /* Pidetään perspektiivi pohjalla */
    translate: var(--x-liike) var(--y-liike);
    scale: var(--skaala);
    rotate: y var(--kaanto-y);
    opacity: 0;
    
    /* Määritetään jokaiselle ominaisuudelle oma kestonsa ja easinginsa */
    transition: 
        opacity var(--kesto-feidaus) var(--ease-feidaus),
        translate var(--kesto-liike) var(--ease-liike),
        scale var(--kesto-skaalaus) var(--ease-skaalaus),
        rotate var(--kesto-perspek) var(--ease-perspek);
}

/* 2. LÄHTÖTILANTEET ERI LUOKILLE */
.vasemmalta   { --x-liike: -3rem; }
.oikealta     { --x-liike: 3rem; }
.ylhaalta     { --y-liike: -3rem; }
.alhaalta     { --y-liike: 3rem; }
.skaalaus     { --skaala: 0.8; }
.perspektiivi { --kaanto-y: -90deg; }
/* Vaakasiirtymä pois kapeilla näytöillä.
   3rem (48px) siirtymä työntää lohkon näkymän oikean reunan yli ennen kuin
   vieritys paljastaa sen -> sivu on vaakavieritettävä, vaikka lopullinen
   asettelu on kunnossa. Häivytys ja pystyliike säilyvät ennallaan.
   Estetään ylivuoto sen sijaan että piilotettaisiin se overflow-x:clipillä —
   clip säiliössä peittäisi myös tulevat aidot ylivuodot tarkistuksilta. */
@media (max-width: 1023px) {
	.vasemmalta, .oikealta { --x-liike: 0px; }
}

/* 3. LOPPUTILANNE (.appear-luokka, jonka JS lisää) */
.feidaus.appear, 
.vasemmalta.appear, 
.oikealta.appear, 
.ylhaalta.appear, 
.alhaalta.appear,
.skaalaus.appear,
.perspektiivi.appear {
    --x-liike: 0px;
    --y-liike: 0px;
    --skaala: 1;
    --kaanto-y: 0deg;
    opacity: 1;
}

/* 4. YLEISET VIIVEET (Koskee kaikkia efektejä kerralla) */
.viive250 { transition-delay: 0.25s; }
.viive500 { transition-delay: 0.5s; }
.viive750 { transition-delay: 0.75s; }
.viive1000 { transition-delay: 0.5s; }
.viive1500 { transition-delay: 1.5s; }
.viive2000 { transition-delay: 2s; }

/* 5. ERILLISET KESTOT */

/* Feidaus (Opacity) */
.feidaus-kesto250  { --kesto-feidaus: 0.25s; }
.feidaus-kesto500  { --kesto-feidaus: 0.5s; }
.feidaus-kesto1000 { --kesto-feidaus: 1s; }

/* Liike (Translate) */
.liike-kesto250  { --kesto-liike: 0.25s; }
.liike-kesto500  { --kesto-liike: 0.5s; }
.liike-kesto1000 { --kesto-liike: 1s; }

/* Skaalaus (Scale) */
.skaalaus-kesto250  { --kesto-skaalaus: 0.25s; }
.skaalaus-kesto500  { --kesto-skaalaus: 0.5s; }
.skaalaus-kesto1000 { --kesto-skaalaus: 1s; }

/* Perspektiivi (Rotate) */
.perspek-kesto250  { --kesto-perspek: 0.25s; }
.perspek-kesto500  { --kesto-perspek: 0.5s; }
.perspek-kesto1000 { --kesto-perspek: 1s; }
.perspek-kesto1500 { --kesto-perspek: 1.5s; }


/* 6. ERILLISET EASINGIT */

/* Liike Easing */
.liike-ease-in     { --ease-liike: ease-in; }
.liike-ease-linear { --ease-liike: linear; }
.liike-ease-pomppu { --ease-liike: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Skaalaus Easing */
.skaalaus-ease-in     { --ease-skaalaus: ease-in; }
.skaalaus-ease-linear { --ease-skaalaus: linear; }
.skaalaus-ease-pomppu { --ease-skaalaus: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Perspektiivi Easing */
.perspek-ease-in     { --ease-perspek: ease-in; }
.perspek-ease-linear { --ease-perspek: linear; }
.perspek-ease-pomppu { --ease-perspek: cubic-bezier(0.175, 0.885, 0.32, 1.275); }


/* ==========================================================================
   Var-Met — globaalit säännöt
   ========================================================================== */

/* Puhelinnumerot eivät katkea riviltä toiselle. */
a[href^="tel:"] { white-space: nowrap; }

/* Ingressit: x-medium on vain aavistuksen leipätekstiä isompi, joten pelkkä koko
   ei erota niitä. Paino 500 tekee eron näkyväksi ilman että teksti muuttuu
   otsikkomaiseksi. Barlowissa on 500 asennettuna. Sitaatit rajataan pois:
   ne käyttävät samaa kokoa mutta eivät ole ingressejä. */
p.has-x-medium-font-size:not(.referenssi__sitaatti) { font-weight: 500; }

/* Leipätekstin linkit: väri pysyy tekstinä, tunnisteena brändikeltainen viiva. */
.entry-content a:not(.wp-element-button):not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: var(--color-1);
	/* !important: style.css asettaa a-elementille 1px:n samalla painolla. */
	text-decoration-thickness: 2px !important;
	text-underline-offset: 0.22em;
}
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):hover {
	text-decoration-thickness: 4px !important;
}

/* Osion yläpuolinen pikkuotsikko: keltainen viiva + harva versaali. */
.osiolappu {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0 0 0.6em;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.osiolappu::before {
	content: "";
	width: 2.5em;
	height: 3px;
	flex: none;
	background: var(--color-1);
}
.has-text-align-center .osiolappu,
.osiolappu.keskita,
.osio-otsikko.keskitetty .osiolappu { justify-content: center; }

/* Keskitetty osio-otsikko: viiva myös oikealle, muuten lappu painuu vasemmalle
   vaikka teksti on keskellä. */
.osio-otsikko.keskitetty { text-align: center; }
.osiolappu.keskita::after,
.has-text-align-center .osiolappu::after,
.osio-otsikko.keskitetty .osiolappu::after {
	content: "";
	width: 2.5em;
	height: 3px;
	flex: none;
	background: var(--color-1);
}

/* Tumman osion oletukset: teksti ja otsikot vaaleiksi ilman lohkokohtaista väriä. */
.tumma-osio { color: #e8e8e8; }
.tumma-osio :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.tumma-osio .osiolappu { color: var(--color-1); }

/* Kuvakortti: kuva täyttää kortin ylälaidan samassa suhteessa riippumatta
   alkuperäisen kuvan mitoista. height:auto vapauttaa aspect-ration WP:n
   width/height-attribuuttien alta. */
.kuvakortti img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

@media (min-width: 1025px) {
	:root { --smi-header-korkeus: 90px; }
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Header samaan linjaan sisällön kanssa: alignwide rajaisi sisäryhmän
   wideSizeen (1440px) ja keskittäisi sen, jolloin logo siirtyisi oikealle
   1664px:ää leveämmillä näytöillä. Sisältöosiot ovat täysleveitä +
   reunapadding, joten header tekee saman. */
.is-layout-constrained > .header-width { max-width: none; }

/* Navi: aktiivinen ja hoverattu kohta merkitään keltaisella alaviivalla,
   ei värinvaihdolla — versaaliteksti pysyy luettavana mustaa vasten. */
ul.header-navi > .wp-block-navigation-item > a {
	position: relative;
}
ul.header-navi > .wp-block-navigation-item > a::after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: -0.35em;
	height: 2px;
	background: var(--color-1);
	scale: 0 1;
	transition: scale 220ms ease;
}
ul.header-navi > .wp-block-navigation-item:is(:hover, :focus-within) > a::after,
ul.header-navi > .wp-block-navigation-item.current-menu-item > a::after,
ul.header-navi > .wp-block-navigation-item.current-menu-ancestor > a::after {
	scale: 1 1;
}

/* Alavalikko: musta laatta keltaisella yläreunalla. */
ul.header-navi .wp-block-navigation__submenu-container {
	background: #0d0d0d;
	border: 0;
	border-top: 3px solid var(--color-1);
	padding: 0.4em 0;
	min-width: 15em;
}
ul.header-navi .wp-block-navigation__submenu-container a:hover {
	color: var(--color-1);
}

/* Tarjouspainike piilotetaan siellä missä navi menee hampurilaiseksi.
   Valitsimessa on wp-block-buttons, koska ytimen layout-sääntö
   .wp-block-buttons.is-layout-flex voittaisi yhden luokan. */
@media (max-width: 1279px) {
	.wp-block-buttons.header-cta { display: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { color: #b4b4b4; }
.site-footer a { color: #e8e8e8; text-decoration: none; }
.site-footer a:hover { color: var(--color-1); text-decoration: underline; }
.footer-otsikko {
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.footer-logo { margin: 0; }
.footer-verkkolasku { color: #8c8c8c; }
.footer-alarivi { color: #7d7d7d; }
.footer-linkit { line-height: 2; }

/* ==========================================================================
   Alasivut: kansi, faktalaatikko, kuvakaista
   ========================================================================== */

.kuvakaista { margin-block: 0; }
.kuvakaista .wp-block-cover__inner-container { display: none; }

.faktalaatikko__otsikko {
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.fakta {
	display: grid;
	grid-template-columns: minmax(7rem, 40%) 1fr;
	gap: 0 1.25rem;
	padding-block: 0.7rem;
	border-top: 1px solid #262626;
}
.faktalaatikko .fakta:first-of-type { border-top: 0; padding-top: 0; }
.fakta__nimi { color: #999; }
.fakta__arvo { color: #fff; font-weight: 500; }
.fakta__arvo a { color: inherit; }
.fakta__arvo a:hover { color: var(--color-1); }
@media (max-width: 400px) {
	.fakta { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ==========================================================================
   UKK — Yoast FAQ -lohkon haitari (projektin oma ulkoasu)
   ========================================================================== */
.schema-faq { --faq-kesto: 280ms; }

.schema-faq-section {
	border-top: 1px solid #dcdad4;
	position: relative;
}
.schema-faq-section:last-child { border-bottom: 1px solid #dcdad4; }

.schema-faq .faq-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	margin: 0;
	padding: 1.4rem 0 1.4rem 1.5rem;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: var(--fs-l);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-7);
	text-align: left;
	line-height: 1.35;
	cursor: pointer;
	transition: color 180ms ease;
}
/* Keltainen merkkipalkki kasvaa auki olevaan kysymykseen. */
.schema-faq .faq-toggle-btn::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.4rem;
	bottom: 1.4rem;
	width: 4px;
	background: var(--color-1);
	scale: 1 0;
	transform-origin: top;
	transition: scale var(--faq-kesto) ease;
}
.schema-faq .faq-toggle-btn[aria-expanded="true"]::before { scale: 1 1; }
.schema-faq .faq-toggle-btn:hover { color: #000; }
.schema-faq .faq-toggle-btn:focus-visible {
	outline: 2px solid var(--color-7);
	outline-offset: 2px;
}

.schema-faq .faq-icon {
	flex: none;
	width: 26px;
	height: 26px;
	stroke-width: 2.5;
	color: var(--color-7);
	transition: transform var(--faq-kesto) ease, color 180ms ease;
}
.schema-faq .faq-toggle-btn[aria-expanded="true"] .faq-icon {
	transform: rotate(180deg);
	color: var(--color-1);
}

.schema-faq .schema-faq-answer-wrapper {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--faq-kesto) ease;
}
.schema-faq .schema-faq-answer-wrapper.is-open { grid-template-rows: 1fr; }
/* visibility poistaa suljetun vastauksen myös ruudunlukijalta ja tab-kierrosta. */
.schema-faq .schema-faq-answer-inner {
	overflow: hidden;
	visibility: hidden;
	transition: visibility var(--faq-kesto);
}
.schema-faq .schema-faq-answer-wrapper.is-open .schema-faq-answer-inner { visibility: visible; }
.schema-faq .schema-faq-answer {
	margin: 0;
	padding: 0 3.5rem 1.6rem 1.5rem;
	max-width: 46rem;
	color: #46443f;
}

@media (prefers-reduced-motion: reduce) {
	.schema-faq .faq-icon,
	.schema-faq .faq-toggle-btn::before,
	.schema-faq .schema-faq-answer-wrapper,
	.schema-faq .schema-faq-answer-inner { transition: none; }
}

/* Osion otsikko tasautuu sisältöruudukon vasempaan reunaan, ei keskelle:
   constrained-layout keskittäisi kapean otsikkolohkon leveän ruudukon päälle. */
.osio-otsikko { margin-inline: 0 auto; }
.osio-otsikko.has-text-align-center,
.sertifikaatit .osio-otsikko { margin-inline: auto; }

/* ==========================================================================
   Koneluettelo
   ========================================================================== */
.koneryhma {
	border-top: 1px solid #dcdad4;
	padding-block: 0.4rem;
}
.koneryhmat > .koneryhma:last-child { border-bottom: 1px solid #dcdad4; }
.koneryhma > summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0;
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: -0.015em;
	list-style: none;
	cursor: pointer;
	transition: color 180ms ease;
}
.koneryhma > summary::-webkit-details-marker { display: none; }
/* Oma merkki: plus kääntyy ristiksi auettaessa. */
.koneryhma > summary::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-left: auto;
	background:
		linear-gradient(var(--color-7) 0 0) center/100% 3px no-repeat,
		linear-gradient(var(--color-7) 0 0) center/3px 100% no-repeat;
	transition: rotate 260ms ease, background-color 180ms ease;
}
.koneryhma[open] > summary::after {
	rotate: 45deg;
	background:
		linear-gradient(var(--color-1) 0 0) center/100% 3px no-repeat,
		linear-gradient(var(--color-1) 0 0) center/3px 100% no-repeat;
}
.koneryhma > summary:hover { color: #000; }
.koneryhma > summary:focus-visible { outline: 2px solid var(--color-7); outline-offset: 3px; }
.koneryhma__kuvaus { color: #6b6963; }
.kone { border-top: 3px solid var(--color-1); padding-top: 1rem; }
.kone__nimi { letter-spacing: -0.01em; }
.kone__tiedot { color: #55534e; padding-left: 1.1em; }
.kone__tiedot li { margin-bottom: 0.25em; }

/* ==========================================================================
   Meistä ja rekrytointi
   ========================================================================== */
.palvelulista { padding-left: 0; list-style: none; }
.palvelulista li {
	border-top: 1px solid #e2e0da;
	padding: 1rem 0 1rem 1.25rem;
	position: relative;
}
.palvelulista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55em;
	width: 0.5rem;
	height: 3px;
	background: var(--color-1);
}
.palvelulista li:last-child { border-bottom: 1px solid #e2e0da; }

/* ==========================================================================
   Yhteystiedot
   ========================================================================== */
.yhteystiedot-palsta { display: flex; flex-direction: column; gap: 1.75rem; }
.yhteystieto__otsikko {
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8780;
}
.yhteystietolohko { border-left: 3px solid var(--color-1); padding-left: 1.1rem; }

/* --- Yhteyshenkilökortit --- */
/* Käytössä etusivulla JA Yhteystiedot-sivulla, joten säännöt kuuluvat tänne.
   Olivat aiemmin home-style.css:ssä, joka latautuu vain etusivulla → Yhteystiedoilla
   rooli- ja yhteystekstit jäivät tummiksi mustalla taustalla (kontrasti 1,2:1). */
/* Kortit kahden porrastuksella: kun viisi ei enää mahdu, pudotetaan kaksi kerralla
   (5 -> 3+2 -> 2+2+1 -> 1) ja vajaa rivi keskittyy lohkon justifyContent-asetuksesta.
   Portaat ovat välttämättömiä: pelkkä flex-wrap kulkisi 4+1-tilan kautta.
   Leveydet olettavat blockGapiksi spacing|large — sama arvo kuin lohkossa. */
.henkiloruudukko > .henkilo {
	flex: 0 1 calc((100% - 4 * var(--wp--preset--spacing--large)) / 5);
}
@media (max-width: 1359px) {
	.henkiloruudukko > .henkilo { flex-basis: calc((100% - 2 * var(--wp--preset--spacing--large)) / 3); }
}
@media (max-width: 767px) {
	.henkiloruudukko > .henkilo { flex-basis: calc((100% - var(--wp--preset--spacing--large)) / 2); }
}
@media (max-width: 519px) {
	.henkiloruudukko > .henkilo { flex-basis: 100%; }
}
/* Ei height: 100% — se estäisi flexin stretch-venytyksen. Tasakorkeus tulee
   lohkon verticalAlignment: stretch -asetuksesta. */
.henkilo__kuva { margin: 0; }
.henkilo__kuva img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 8%;   /* kasvot ylös, ei keskelle */
}
/* margin-inline: constrained layoutin auto-marginaali kutistaa laatikon
   sisällön levyiseksi flex-sarakkeessa → kortit olivat eri levyisiä. */
.henkilo__tiedot { flex: 1; margin-inline: 0 !important; }
.henkilo__rooli { color: #a0a0a0; }
.henkilo__yhteys a { color: #fff; text-decoration: none; }
.henkilo__yhteys a:hover { color: var(--color-1); }
.lisayhteystiedot a { color: inherit; }

/* CF7-lomake: kaksipalstainen ruudukko, leveät kentät koko riville. */
.lomake-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.5rem;
}
.lomake-grid .kentta { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.lomake-grid .kentta--leveä,
.lomake-grid .lomake-suostumus,
.lomake-grid .lomake-laheta,
.lomake-grid .lomake-liite { grid-column: 1 / -1; }
.lomake-grid label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #55534e;
}
.lomake-grid .pak { color: #b00; }
.lomake-grid :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	padding: 0.85em 1em;
	font: inherit;
	color: var(--color-7);
	background: #fff;
	border: 1px solid #cfcdc7;
	border-radius: 2px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lomake-grid :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--color-7);
	box-shadow: 0 0 0 3px rgba(255, 219, 0, 0.55);
}
.lomake-grid textarea { resize: vertical; min-height: 9rem; }
.lomake-suostumus { font-size: var(--fs-xs); color: #55534e; }
.lomake-suostumus .wpcf7-list-item { margin: 0; }
.wpcf7-not-valid-tip { color: #b00; font-size: var(--fs-xs); }
.wpcf7-response-output {
	grid-column: 1 / -1;
	margin: 1.5rem 0 0 !important;
	padding: 1rem 1.25rem !important;
	border-width: 2px !important;
	border-radius: 2px;
}
@media (max-width: 640px) {
	.lomake-grid { grid-template-columns: 1fr; }
}

/* CF7:n lähetyspainike käyttää samoja tokeneita kuin lohkopainikkeet. */
.lomake-grid input[type="submit"] {
	appearance: none;
	cursor: pointer;
	padding: var(--smi-button-pd-tb) var(--smi-button-pd-lr);
	font-family: inherit;
	font-size: var(--smi-button-font-size);
	font-weight: var(--smi-button-font-weight);
	letter-spacing: var(--smi-button-letter-spacing);
	text-transform: var(--smi-button-text-transform);
	line-height: var(--smi-button-line-height);
	color: var(--smi-button-color);
	background: var(--smi-button-bg);
	border: var(--smi-button-border-width) solid var(--smi-button-border-color);
	border-radius: var(--smi-button-border-radius);
	transition: background-color 180ms ease, color 180ms ease;
}
.lomake-grid input[type="submit"]:hover {
	color: var(--smi-button-hoover-color);
	background: var(--smi-button-hoover-bg);
}
/* Säiliö on .kentta-säännön takia pystysuuntainen, jolloin align-items ohjaa vaakasijaintia. */
.lomake-laheta { display: flex; align-items: flex-start; gap: 1rem; }
.lomake-grid input[type="file"] {
	font-size: var(--fs-xs);
	padding: 0.7em 0;
}
.lomake-suostumus label { display: flex; gap: 0.6rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-xs); }
.lomake-suostumus input[type="checkbox"] { margin-top: 0.15em; width: 1.05em; height: 1.05em; accent-color: var(--color-7); flex: none; }
.wpcf7-spinner { margin: 0; }

/* ==========================================================================
   Kapeat näytöt
   ========================================================================== */

/* Cover + custom content position tekee sisältösäiliöstä width:auto -flexkohteen,
   joka kasvaa pisimmän sanan mukaan ja leikkautuu kannen reunaan. Sidotaan
   säiliö kannen leveyteen. */
.wp-block-cover.hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 100%;
}

/* Fluid-typografian ikkuna alkaa vasta 768px:stä, joten sen alapuolella isot
   presetit jäisivät minimiinsä (esim. 9XL = 64px) ja pitkät suomen sanat
   leikkautuvat. Portaat rem:einä, jotta selaimen oma fonttikoko yhä pätee. */
@media (max-width: 767px) {
	.has-12-x-large-font-size { font-size: 3.6rem !important; }
	.has-11-x-large-font-size { font-size: 3.2rem !important; }
	.has-10-x-large-font-size { font-size: 3rem !important; }
	.has-9-x-large-font-size  { font-size: 2.5rem !important; }
	.has-8-x-large-font-size  { font-size: 2.25rem !important; }
	.has-7-x-large-font-size  { font-size: 2.1rem !important; }
	.has-6-x-large-font-size  { font-size: 1.95rem !important; }
	.has-5-x-large-font-size  { font-size: 1.8rem !important; }
	.has-4-x-large-font-size  { font-size: 1.6rem !important; }
	.has-3-x-large-font-size  { font-size: 1.5rem !important; }
}
@media (max-width: 420px) {
	.has-10-x-large-font-size { font-size: 2.6rem !important; }
	.has-9-x-large-font-size  { font-size: 2.15rem !important; }
	.has-8-x-large-font-size  { font-size: 2rem !important; }
}

/* Kansikuvien tummennus riittää työpöydällä leveään gradienttiin; kapealla
   näytöllä teksti on kuvan kirkkaan osan päällä, joten pystygradientti tilalle. */

/* Kaksipalstaiset osiot pinoutuvat itsestään, mutta faktalaatikko ei saa
   jäädä leijumaan yksin leveälle. */
@media (max-width: 781px) {
	.faktalaatikko { margin-top: 0; }
	.tunnusluvut__rivi { row-gap: 2.5rem; }
}

@media (max-width: 480px) {
	.osiolappu { letter-spacing: 0.12em; gap: 0.6em; }
	.osiolappu::before { width: 1.8em; }
}

/* Kannen alamarginaali on turha: jokainen sitä seuraava osio tuo oman
   ylapaddinginsa, joten .hero-luokan 4.5em jäisi tyhjäksi kaistaksi. */
.hero, body .force.hero { margin-block-end: 0 !important; }

/* Korttien alaosat samalle viivalle vaikka tekstit ovat eripituisia.
   !important: lohkon oma margin-top tulee inline-tyylinä eikä häviä luokalle. */
.palvelukortti, .referenssi, .henkilo { display: flex; flex-direction: column; }
.palvelukortti .kortti-linkki,
.referenssi .referenssi__nimi {
	margin-top: auto !important;
	padding-top: 1.25rem;
}

/* ==========================================================================
   Painikkeiden korkeus (pohjatason korjaus)
   ==========================================================================
   Ydin tyylittelee is-style-outlinen omalla säännöllään
   .wp-block-button.is-style-outline > .wp-block-button__link { border:2px; padding:.667em 1.33em }
   joka on spesifisempi kuin theme.jsonin painikesääntö. Ulompi painike jää
   siksi matalammaksi kuin täytetty vieressään. Palautetaan samat tokenit ja
   vähennetään reunus paddingista, jolloin reunalaatikot ovat yhtä korkeat. */
:root { --smi-button-outline-border: 2px; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-style: solid;
	border-width: var(--smi-button-outline-border);
	padding-top: calc(var(--smi-button-pd-tb) - var(--smi-button-outline-border));
	padding-bottom: calc(var(--smi-button-pd-tb) - var(--smi-button-outline-border));
	padding-left: calc(var(--smi-button-pd-lr) - var(--smi-button-outline-border));
	padding-right: calc(var(--smi-button-pd-lr) - var(--smi-button-outline-border));
}

/* Ulompien painikkeiden värit: käytössä 9 sivulla (nappi-vaalea) ja 3 (nappi-tumma). */
/* Ulompi painike tummalla taustalla. */
.nappi-vaalea .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.55);
}
.nappi-vaalea .wp-block-button__link:hover {
	background: #fff;
	color: #111;
	border-color: #fff;
}
/* Ulompi painike vaalealla taustalla. */
.nappi-tumma .wp-block-button__link {
	background: transparent;
	color: var(--color-7);
	border-color: var(--color-7);
}
.nappi-tumma .wp-block-button__link:hover {
	background: var(--color-7);
	color: var(--color-1);
	border-color: var(--color-7);
}

/* --- Painikkeiden hover --- */
/* style.css alleviivaa kaikki mainin linkit hoverissa; painike ei ole tekstilinkki.
   Ei rajausta mainiin: sama tumma hover-tausta katoaa myös headerin tummalla palkilla. */
/* Täytetyn painikkeen hover-tausta on tumma ja sulautuu tummiin kansiosioihin, joten
   lepotilan väriin jäävä kehys pitää silhuetin näkyvissä. Kehys kasvaa 0 -> 2px,
   ei sumennusta: sama terävä jälki kuin painikkeiden 2px-kulmissa. */
:root {
	--smi-button-hoover-ring: var(--color-1);
	--smi-button-hoover-lift: -2px;
}
.wp-block-button__link,
.lomake-grid input[type="submit"] {
	box-shadow: 0 0 0 0 var(--smi-button-hoover-ring);
	transition: background-color 180ms ease, color 180ms ease,
		border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.wp-block-button__link:is(:hover, :focus-visible),
.lomake-grid input[type="submit"]:is(:hover, :focus-visible) {
	text-decoration: none;
	box-shadow: 0 0 0 2px var(--smi-button-hoover-ring);
	transform: translateY(var(--smi-button-hoover-lift));
}
/* Liike pois, kehys jää — tila on silti tunnistettavissa. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link:is(:hover, :focus-visible),
	.lomake-grid input[type="submit"]:is(:hover, :focus-visible) {
		transform: none;
	}
}

/* Palkkitilassa sulkuraksi jää painikerivin päälle; mobiilissa plugin varaa tilan, työpöydällä ei. */
@media (min-width: 601px) {
	#kncc-banner.kncc-banner--bar .kncc-main {
		padding-right: 3.25rem;
	}
}

/* Evästetaulukko perii teematilassa leipätekstin koon, ja kiinteä sarakejako katkoo evästenimet keskeltä. */
.kncc-policy.kncc-policy.kncc-typography--theme .kncc-policy__table,
.kncc-policy.kncc-policy.kncc-typography--theme .kncc-policy__table th,
.kncc-policy.kncc-policy.kncc-typography--theme .kncc-policy__table td,
.kncc-policy.kncc-policy.kncc-typography--theme .kncc-policy__table code {
	font-size: var(--wp--preset--font-size--small);
}
.kncc-policy .kncc-policy__table {
	table-layout: auto;
}
.kncc-policy .kncc-policy__table code,
.kncc-policy .kncc-policy__table td:last-child {
	white-space: nowrap;
}
.kncc-policy .kncc-policy__section {
	overflow-x: auto; /* kapealla näytöllä vierii taulukko, ei sivu */
}