/* ============================================================
   Eliittikatot — Single Post (CRO + SEO + Sales + A11y)
   Brand orange #F56C27 / orange-dark #d95a1f / dark #1B1B1F
   ============================================================ */

:root {
	--ek-orange:        #F56C27;  /* decorative — borders, accents, h3 color */
	--ek-orange-cta:    #c14e15;  /* button bg + cta text — passes WCAG AA 4.83:1 on white */
	--ek-orange-dark:   #d95a1f;  /* hover-state */
	--ek-orange-soft:   #fff1eb;
	--ek-dark:          #1B1B1F;
	--ek-text:          #222;
	--ek-muted:         #6b6b73;
	--ek-line:          #e6e6ec;
	--ek-sand:          #f7f5f1;
	--ek-sand-2:        #fafafa;
	--ek-radius:        10px;
	--ek-radius-pill:   999px;
	--ek-shadow-sm:     0 2px 6px rgba(20,20,30,.06);
	--ek-shadow-md:     0 10px 30px rgba(20,20,30,.08);
	--ek-shadow-lg:     0 24px 60px rgba(20,20,30,.12);
	--ek-focus:         0 0 0 3px rgba(245,108,39,.35);
	--ek-font:          "open-sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ek-font-head:     "futura-pt", "Futura PT", var(--ek-font);  /* brändin otsikkofontti = sama kuin palvelusivuilla */
	--ek-container:     1140px;
	--ek-article-w:     720px;
	--ek-sidebar-w:     340px;
	--ek-gap:           48px;

	/* BD-header offset — header is position:fixed so we have to budget for it.
	   Measured live: 80 px mobile, 90 px tablet, 177 px desktop. */
	--ek-header-h:      80px;
}
@media (min-width: 768px)  { :root { --ek-header-h: 90px;  } }
@media (min-width: 1024px) { :root { --ek-header-h: 180px; } }

/* Anchor jumps (TOC links etc.) land below the fixed header. */
html { scroll-padding-top: calc(var(--ek-header-h) + 16px); }

/* Reset link color INSIDE article-content only — buttons handle their own */
.ek-single {
	font-family: var(--ek-font);
	color: var(--ek-text);
	line-height: 1.65;
	font-size: 17px;
}
.ek-single img { max-width: 100%; height: auto; display: block; }

/* Universal focus state (a11y) */
.ek-single :focus-visible,
.ek-btn:focus-visible,
.ek-mobile-bar__btn:focus-visible {
	outline: none;
	box-shadow: var(--ek-focus);
}

/* ---------- Skip-link (a11y) ---------- */
.ek-skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	background: var(--ek-dark);
	color: #fff;
	padding: 10px 16px;
	border-radius: var(--ek-radius);
	font-weight: 700;
	z-index: 9999;
	text-decoration: none;
}
.ek-skip-link:focus-visible {
	left: 16px;
	outline: 3px solid var(--ek-orange);
	outline-offset: 2px;
}

/* ---------- Reduced-motion: kill animations/transforms for sensitive users ---------- */
@media (prefers-reduced-motion: reduce) {
	.ek-progress { display: none; }
	.ek-card,
	.ek-btn,
	.ek-card:hover,
	.ek-btn:hover { transform: none !important; }
	* { scroll-behavior: auto !important; }
}

/* ---------- Reading progress bar ---------- */
.ek-progress {
	position: fixed; inset: 0 0 auto 0;
	height: 3px; z-index: 100; background: transparent; pointer-events: none;
}
.ek-progress > span {
	display: block; height: 100%; width: 0;
	background: var(--ek-orange); transition: width 80ms linear;
}

/* ============================================================
   HERO — cleaner, taller image, tighter content block
   ============================================================ */
.ek-hero {
	background: #fff;
	padding: calc(var(--ek-header-h) + 24px) 0 36px;
	border-bottom: 1px solid var(--ek-line);
}
.ek-hero__inner {
	max-width: var(--ek-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* Breadcrumbs — above title, small and muted */
.ek-breadcrumbs { font-size: 13px; color: var(--ek-muted); margin: 0 0 18px; }
.ek-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.ek-breadcrumbs li { display: inline-flex; align-items: center; }
.ek-breadcrumbs li + li::before { content: "›"; padding: 0 8px; color: var(--ek-muted); }
.ek-breadcrumbs a { color: var(--ek-muted); text-decoration: none; }
.ek-breadcrumbs a:hover { color: var(--ek-orange-dark); text-decoration: underline; }
.ek-breadcrumbs [aria-current="page"] { color: var(--ek-text); font-weight: 500; }

/* Category pill — AA-pass: --ek-orange-cta on --ek-orange-soft = 4.6:1 */
.ek-hero__category {
	display: inline-block;
	background: var(--ek-orange-soft);
	color: var(--ek-orange-cta);
	font-weight: 700;
	font-size: 12px; letter-spacing: .06em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--ek-radius-pill);
	text-decoration: none;
	margin: 0 0 14px;
}
.ek-hero__category:hover { background: var(--ek-orange-cta); color: #fff; }

.ek-hero__title {
	font-size: clamp(30px, 4.5vw, 48px);
	line-height: 1.12;
	margin: 0 0 18px;
	color: var(--ek-dark);
	letter-spacing: -.012em;
	font-weight: 800;
	max-width: 880px;
}
.ek-hero__lead {
	font-size: clamp(17px, 1.8vw, 20px);
	line-height: 1.55;
	color: var(--ek-text);
	margin: 0 0 24px;
	max-width: 760px;
}

/* Meta row */
.ek-hero__meta {
	display: flex; flex-wrap: wrap; gap: 6px 20px;
	font-size: 13px; color: var(--ek-muted);
	margin: 0 0 28px;
}
.ek-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.ek-hero__meta-item--updated { color: var(--ek-orange-dark); font-weight: 600; }

/* Hero CTA — yksi pää-nappi */
.ek-hero__cta {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	margin: 0 0 32px;
}

/* Hero featured image — full container width, 16:9 cover */
.ek-hero__media {
	position: relative;
	border-radius: var(--ek-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--ek-sand);
	max-height: 540px;
}
.ek-hero__img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.ek-trustrow {
	background: #fff;
	border-top: 1px solid var(--ek-line);
	border-bottom: 1px solid var(--ek-line);
	padding: 18px 0;
}
.ek-trustrow__inner {
	max-width: var(--ek-container);
	margin: 0 auto; padding: 0 24px;
	display: flex; align-items: center; gap: 24px 32px; flex-wrap: wrap;
}
.ek-trustrow__label {
	margin: 0; font-size: 12px; font-weight: 700;
	color: var(--ek-muted); letter-spacing: .08em;
	text-transform: uppercase;
	flex: 0 1 auto;
}
.ek-trustrow__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
	flex: 1 1 auto; justify-content: flex-end;
}
.ek-trustrow__list img {
	max-height: 44px; width: auto; object-fit: contain;
	opacity: .9;
	transition: opacity .15s ease;
}
.ek-trustrow__list img:hover { opacity: 1; }

/* ============================================================
   LAYOUT (2-col on desktop)
   ============================================================ */
.ek-layout {
	max-width: var(--ek-container);
	margin: 56px auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--ek-gap);
}
@media (min-width: 1024px) {
	.ek-layout { grid-template-columns: minmax(0, 1fr) var(--ek-sidebar-w); }
}

/* ============================================================
   ARTICLE
   ============================================================ */
.ek-article { min-width: 0; }
.ek-article__content {
	font-size: 17px; line-height: 1.7;
	max-width: var(--ek-article-w);
}

/* Article-content link styling — exclude .ek-btn (inline-CTA napit renderöityvät täällä) */
.ek-article__content a:not(.ek-btn) {
	color: var(--ek-orange-cta);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}
.ek-article__content a:not(.ek-btn):hover { text-decoration-thickness: 2.5px; }

.ek-article__content h2 {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.25;
	color: var(--ek-dark);
	margin: 56px 0 16px;
	padding-top: 14px;
	border-top: 3px solid var(--ek-orange);
	font-weight: 800;
	letter-spacing: -.008em;
	scroll-margin-top: calc(var(--ek-header-h) + 16px);
}
.ek-article__content h3 {
	font-size: clamp(19px, 2vw, 22px);
	line-height: 1.3;
	color: var(--ek-dark);
	margin: 36px 0 10px;
	font-weight: 700;
	scroll-margin-top: calc(var(--ek-header-h) + 16px);
}
.ek-article__content p { margin: 0 0 18px; }
.ek-article__content ul, .ek-article__content ol { padding-left: 24px; margin: 0 0 20px; }
.ek-article__content li { margin: 0 0 8px; }
.ek-article__content strong { color: var(--ek-dark); }
.ek-article__content blockquote {
	border-left: 4px solid var(--ek-orange);
	background: var(--ek-sand-2);
	margin: 24px 0;
	padding: 16px 22px;
	border-radius: 0 var(--ek-radius) var(--ek-radius) 0;
	color: var(--ek-text);
	font-style: italic;
}

/* Ingressi — explicit class OR first paragraph (unless author opted out) */
.ek-article__content p.ingressi,
.ek-article__content > p:first-of-type:not(.ek-no-lead) {
	font-size: 19px; line-height: 1.55; font-weight: 500;
	color: var(--ek-dark);
	background: var(--ek-sand-2);
	border-left: 4px solid var(--ek-orange);
	padding: 18px 22px;
	margin: 0 0 28px;
	border-radius: 0 var(--ek-radius) var(--ek-radius) 0;
}

.ek-article__content .wp-block-image { margin: 28px 0; }
.ek-article__content .wp-block-image img { border-radius: var(--ek-radius); }

/* Inline images / centered helper */
.ek-article__content .center { text-align: center; }

/* ============================================================
   TOC
   ============================================================ */
.ek-toc {
	background: var(--ek-sand-2);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius);
	padding: 16px 22px;
	margin: 0 0 36px;
	max-width: var(--ek-article-w);
}
.ek-toc > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--ek-dark);
	list-style: none;
	display: flex; align-items: center; gap: 10px;
	font-size: 16px;
}
.ek-toc > summary::-webkit-details-marker { display: none; }
.ek-toc > summary::before {
	content: "";
	width: 14px; height: 14px;
	background: var(--ek-orange);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
	transition: transform .15s ease;
}
.ek-toc[open] > summary::before { transform: rotate(180deg); }
.ek-toc__list {
	list-style: none; padding: 14px 0 0; margin: 0;
}
.ek-toc__item { margin: 6px 0; line-height: 1.4; }
.ek-toc__item--h3 { padding-left: 22px; font-size: 14px; }
.ek-toc__item--h3 a { color: var(--ek-muted); font-weight: 400; }
.ek-toc__item a {
	color: var(--ek-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .12s ease, border-color .12s ease;
}
.ek-toc__item a:hover { color: var(--ek-orange-dark); border-bottom-color: var(--ek-orange); }
.ek-toc__item.is-active > a { color: var(--ek-orange-dark); font-weight: 700; border-bottom-color: var(--ek-orange); }

/* ============================================================
   INLINE CTA (after every 3rd H2) — softened: sand bg + orange border-left,
   ei katkaise lukuvirtaa.
   ============================================================ */
.ek-inline-cta {
	display: flex; flex-direction: column; gap: 14px;
	background: var(--ek-orange-soft);
	color: var(--ek-text);
	border-left: 4px solid var(--ek-orange);
	border-radius: 0 var(--ek-radius) var(--ek-radius) 0;
	padding: 20px 22px;
	margin: 36px 0;
	max-width: var(--ek-article-w);
}
@media (min-width: 640px) {
	.ek-inline-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.ek-inline-cta__copy strong {
	display: block; font-size: 17px; margin-bottom: 4px; color: var(--ek-dark); font-weight: 700;
}
.ek-inline-cta__copy span { font-size: 15px; color: var(--ek-text); line-height: 1.5; }
.ek-inline-cta__buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   BUTTONS — single source of truth
   Specificity: all rules use .ek-btn-prefixed class only.
   Color is set EXPLICITLY for each variant; underline never appears
   because anchor styles inside ek-content don't reach here.
   ============================================================ */
.ek-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px;
	border-radius: var(--ek-radius-pill);
	font-family: var(--ek-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	border: 2px solid transparent;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
	min-height: 44px;        /* a11y touch target */
}
.ek-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ek-btn:active { transform: translateY(0); }
/* Kosketuslaitteissa hover-state ei laukea — älä yritä animoida */
@media (hover: none) {
	.ek-btn:hover { transform: none; }
	.ek-card:hover { transform: none; }
}
.ek-btn:focus-visible { transform: translateY(-1px); }
.ek-btn--lg { padding: 15px 28px; font-size: 16px; min-height: 50px; }
.ek-btn--block { width: 100%; }

/* SVG icon next to label */
.ek-btn__icon {
	width: 18px; height: 18px; flex-shrink: 0;
	fill: currentColor;
}

/* PRIMARY — orange-cta bg, white text — 4.83:1 AA-pass at 15px */
.ek-btn--primary,
a.ek-btn--primary {
	background: var(--ek-orange-cta);
	color: #fff;
	border-color: var(--ek-orange-cta);
}
.ek-btn--primary:hover,
a.ek-btn--primary:hover {
	background: #a8430f;
	border-color: #a8430f;
	color: #fff;
}

/* GHOST — transparent bg, orange-cta text + orange-cta border */
.ek-btn--ghost,
a.ek-btn--ghost {
	background: transparent;
	color: var(--ek-orange-cta);
	border-color: var(--ek-orange-cta);
}
.ek-btn--ghost:hover,
a.ek-btn--ghost:hover {
	background: var(--ek-orange-soft);
	color: var(--ek-orange-cta);
}

/* DARK — dark bg, white text, dark border (max contrast) */
.ek-btn--dark,
a.ek-btn--dark {
	background: var(--ek-dark);
	color: #fff;
	border-color: var(--ek-dark);
}
.ek-btn--dark:hover,
a.ek-btn--dark:hover {
	background: #2a2a31;
	border-color: #2a2a31;
	color: #fff;
}

/* GHOST-DARK — transparent bg, dark text + dark border */
.ek-btn--ghost-dark,
a.ek-btn--ghost-dark {
	background: transparent;
	color: var(--ek-dark);
	border-color: var(--ek-dark);
}
.ek-btn--ghost-dark:hover,
a.ek-btn--ghost-dark:hover {
	background: var(--ek-dark);
	color: #fff;
	border-color: var(--ek-dark);
}

/* WHITE — for orange backgrounds (footer CTA) */
.ek-btn--white,
a.ek-btn--white {
	background: #fff;
	color: var(--ek-orange-dark);
	border-color: #fff;
}
.ek-btn--white:hover,
a.ek-btn--white:hover {
	background: var(--ek-dark);
	color: #fff;
	border-color: var(--ek-dark);
}

/* ============================================================
   SIDEBAR CTA (sticky on desktop)
   ============================================================ */
.ek-sidebar { display: none; }
@media (min-width: 1024px) { .ek-sidebar { display: block; } }
.ek-sidebar__inner {
	position: sticky;
	top: calc(var(--ek-header-h) + 16px);
	max-height: calc(100vh - var(--ek-header-h) - 32px);
	overflow-y: auto;
}

.ek-cta-card {
	background: #fff;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius);
	padding: 22px;
	box-shadow: var(--ek-shadow-md);
}
.ek-cta-card__eyebrow {
	margin: 0 0 6px;
	font-size: 12px; font-weight: 700;
	color: var(--ek-orange-dark); letter-spacing: .08em;
	text-transform: uppercase;
}
.ek-cta-card__title {
	margin: 0 0 8px;
	font-size: 20px; line-height: 1.25; color: var(--ek-dark);
	font-weight: 800;
}
.ek-cta-card__lead { margin: 0 0 18px; font-size: 15px; color: var(--ek-muted); line-height: 1.55; }
.ek-cta-card .ek-btn { margin-bottom: 10px; }
.ek-cta-card .ek-btn:last-of-type { margin-bottom: 18px; }

.ek-cta-card__afterhours {
	margin: 0 0 16px;
	font-size: 13px; line-height: 1.45; color: var(--ek-muted);
	text-align: center;
}
.ek-cta-card__afterhours a,
.ek-cta-card__afterhours a:link,
.ek-cta-card__afterhours a:visited {
	color: var(--ek-orange-cta); font-weight: 700;
	text-decoration: underline; text-underline-offset: 2px;
}
.ek-cta-card__afterhours a:hover,
.ek-cta-card__afterhours a:focus { color: var(--ek-orange-dark); }

.ek-cta-card__usps {
	list-style: none; padding: 16px 0 0; margin: 0;
	border-top: 1px solid var(--ek-line);
}
.ek-cta-card__usps li {
	position: relative; padding: 5px 0 5px 28px;
	font-size: 15px; color: var(--ek-text); line-height: 1.45;
}
.ek-cta-card__usps li::before {
	content: "";
	position: absolute; left: 0; top: 9px;
	width: 18px; height: 18px;
	background: var(--ek-orange-cta);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.41 1.41L9 19 21 7l-1.41-1.42z'/></svg>") center/contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.17 4.83 12l-1.41 1.41L9 19 21 7l-1.41-1.42z'/></svg>") center/contain no-repeat;
}

/* ============================================================
   AUTHOR / E-E-A-T BOX
   ============================================================ */
.ek-author-box {
	display: flex; gap: 18px; align-items: flex-start;
	background: var(--ek-sand-2);
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius);
	padding: 22px;
	margin: 56px 0 0;
	max-width: var(--ek-article-w);
}
.ek-author-box__avatar {
	flex: 0 0 auto; width: 60px; height: 60px;
	border-radius: 50%; background: var(--ek-orange-cta);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 800; font-size: 26px;
	line-height: 1;
}
.ek-author-box__monogram { line-height: 1; }
.ek-author-box__text { min-width: 0; }
.ek-author-box__title { margin: 0 0 6px; font-size: 17px; color: var(--ek-dark); font-weight: 700; }
.ek-author-box__text p { margin: 0 0 10px; font-size: 15px; color: var(--ek-text); line-height: 1.55; }
.ek-author-box__link { font-size: 15px; font-weight: 700; color: var(--ek-orange-dark); text-decoration: none; }
.ek-author-box__link:hover { text-decoration: underline; }

/* ============================================================
   FAQ
   ============================================================ */
.ek-faq { max-width: var(--ek-article-w); margin: 56px 0 0; }
.ek-faq__title {
	font-size: clamp(22px, 2.4vw, 28px); color: var(--ek-dark);
	margin: 0 0 16px; font-weight: 800;
}
.ek-faq__list { display: flex; flex-direction: column; gap: 10px; }
.ek-faq__item {
	background: #fff;
	border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius);
	padding: 14px 18px;
}
.ek-faq__item summary {
	cursor: pointer; font-weight: 700; color: var(--ek-dark);
	list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ek-faq__item summary::-webkit-details-marker { display: none; }
.ek-faq__item summary::after {
	content: ""; width: 18px; height: 18px;
	background: var(--ek-orange-cta);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 10l5 5 5-5z'/></svg>") center/contain no-repeat;
	transition: transform .15s ease;
	flex-shrink: 0;
}
.ek-faq__item[open] summary::after { transform: rotate(180deg); }
.ek-faq__answer { padding-top: 10px; color: var(--ek-text); font-size: 16px; line-height: 1.6; }
.ek-faq__answer p:last-child { margin-bottom: 0; }

/* ============================================================
   RELATED
   ============================================================ */
.ek-related {
	max-width: var(--ek-container);
	margin: 0 auto 64px;
	padding: 0 24px;
}
.ek-related__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	margin: 0 0 24px;
}
.ek-related__title { font-size: clamp(22px, 2.4vw, 28px); color: var(--ek-dark); margin: 0; font-weight: 800; }
.ek-related__more { color: var(--ek-orange-dark); text-decoration: none; font-weight: 700; font-size: 15px; }
.ek-related__more:hover { text-decoration: underline; }

.ek-cards {
	display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .ek-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ek-cards { grid-template-columns: 1fr 1fr 1fr; } }

.ek-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--ek-line);
	border-radius: var(--ek-radius); overflow: hidden;
	text-decoration: none; color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ek-card:hover,
.ek-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--ek-shadow-md);
	border-color: var(--ek-orange);
}
.ek-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--ek-sand); }
.ek-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ek-card:hover .ek-card__media img,
.ek-card:focus-visible .ek-card__media img { transform: scale(1.04); }
.ek-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ek-card__category {
	font-size: 12px; font-weight: 700; color: var(--ek-orange-dark);
	text-transform: uppercase; letter-spacing: .08em;
}
.ek-card__title { margin: 0; font-size: 18px; line-height: 1.3; color: var(--ek-dark); font-weight: 700; }
.ek-card__excerpt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ek-muted); flex: 1; }
.ek-card__meta { font-size: 13px; color: var(--ek-muted); margin-top: auto; }

/* ============================================================
   FOOTER CTA
   ============================================================ */
.ek-footer-cta {
	/* Darker gradient — title/lead pass WCAG AA on this background */
	background: linear-gradient(135deg, #d95a1f 0%, #a8430f 100%);
	color: #fff;
	padding: 64px 24px;
}
.ek-footer-cta__inner {
	max-width: var(--ek-container); margin: 0 auto;
	display: grid; gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.ek-footer-cta__inner { grid-template-columns: 1fr auto; align-items: center; }
}
.ek-footer-cta__eyebrow {
	margin: 0 0 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: rgba(255,255,255,.9);
}
.ek-footer-cta__title { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.2; color: #fff; font-weight: 800; }
.ek-footer-cta__lead { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.95); max-width: 640px; }
.ek-footer-cta__buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
.ek-mobile-bar {
	position: fixed; left: 0; right: 0; bottom: 0;
	display: flex; gap: 8px;
	background: var(--ek-dark);
	border-top: 1px solid rgba(255,255,255,.08);
	z-index: 99;
	padding: 10px;
	box-shadow: 0 -6px 20px rgba(0,0,0,.18);
}
.ek-mobile-bar__btn {
	flex: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 14px;
	border-radius: var(--ek-radius-pill);
	text-decoration: none;
	font-weight: 700; font-size: 15px;
	min-height: 44px;
	border: 2px solid transparent;
	white-space: nowrap;
}
.ek-mobile-bar__btn--tel  { background: #fff;            color: var(--ek-dark); }
.ek-mobile-bar__btn--form { background: var(--ek-orange-cta); color: #fff; }
.ek-mobile-bar__btn__icon { width: 18px; height: 18px; fill: currentColor; }

/* Hide on desktop (sidebar covers it) */
@media (min-width: 1024px) { .ek-mobile-bar { display: none; } }
@media (max-width: 1023px) { body { padding-bottom: 76px; } }

/* ============================================================
   SMALL-SCREEN TWEAKS
   ============================================================ */
@media (max-width: 640px) {
	.ek-single { font-size: 16px; }
	.ek-hero { padding-top: calc(var(--ek-header-h) + 16px); padding-bottom: 24px; }
	.ek-hero__inner { padding: 0 16px; }
	.ek-hero__media { border-radius: 8px; }
	/* Pitkä otsikko ei riko murupolkua mobiilissa */
	.ek-breadcrumbs ol { flex-wrap: nowrap; overflow: hidden; }
	.ek-breadcrumbs li[aria-current="page"] {
		min-width: 0; flex: 0 1 auto;
		white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
	}
	.ek-trustrow__inner { padding: 0 16px; }
	.ek-trustrow__list { gap: 18px; }
	.ek-trustrow__list img { max-height: 36px; }
	/* Mobiilissa näytä vain 4 vahvinta luottamuslogoa */
	.ek-trustrow__list li:nth-child(n+5) { display: none; }
	.ek-layout { margin: 28px auto; padding: 0 16px; gap: 24px; }
	.ek-article__content { font-size: 16px; }
	.ek-article__content h2 { margin-top: 36px; }
	.ek-inline-cta { padding: 18px; }
	.ek-related { padding: 0 16px; margin-bottom: 40px; }
	.ek-footer-cta { padding: 40px 18px; }
}

/* ============================================================
   HOST OVERRIDE — itsenäinen typografia
   Live-Breakdancen globaali `.breakdance h1..h6` asettaa otsikot
   futura-pt:hen (ja väärään kokoon) ja voittaa luokkasääntömme.
   Pakotetaan artikkelin oma typografia .ek-single-skoopilla +
   !importantilla, jotta ulkoasu on identtinen riippumatta siitä,
   mitä host-teema asettaa. Arvot = single-post.css:n omat (= staging).
   ============================================================ */
.ek-single :is(h1, h2, h3, h4, h5, h6) { font-family: var(--ek-font-head) !important; }

.ek-single .ek-hero__title {
	font-family: var(--ek-font-head) !important;
	font-size: clamp(30px, 4.5vw, 48px) !important;
	line-height: 1.12 !important;
	font-weight: 800 !important;
	letter-spacing: -.012em !important;
	color: var(--ek-dark) !important;
}
.ek-single .ek-cta-card__title {
	font-family: var(--ek-font-head) !important;
	font-size: 20px !important; line-height: 1.25 !important;
	font-weight: 800 !important; color: var(--ek-dark) !important;
}
.ek-single .ek-footer-cta__title {
	font-family: var(--ek-font-head) !important;
	font-size: clamp(28px, 3vw, 38px) !important; line-height: 1.2 !important;
	font-weight: 800 !important; color: #fff !important;
}
.ek-single .ek-related__title {
	font-family: var(--ek-font-head) !important;
	font-size: clamp(22px, 2.4vw, 28px) !important;
	font-weight: 800 !important; color: var(--ek-dark) !important;
}
.ek-single .ek-faq__title {
	font-family: var(--ek-font-head) !important;
	font-size: clamp(22px, 2.4vw, 28px) !important;
	font-weight: 800 !important; color: var(--ek-dark) !important;
}
.ek-single .ek-author-box__title {
	font-family: var(--ek-font-head) !important;
	font-size: 17px !important; font-weight: 700 !important;
	color: var(--ek-dark) !important;
}