/*
Theme Name:     Hostadum v2.1
Template:       kadence
Version:        9.3
Description:    Sähköasennus Elegance — Elementor design system (maps to Site Settings globals)
*/

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — mirror Elementor Global Colors / Fonts
   Edit globals in Elementor → Site Settings; CSS reads these.
   ═══════════════════════════════════════════════════════════ */
:root {
	/* Color — Elegance logo: dark ink + coral–magenta–cyan gradient family */
	--k-ink: #12121a;
	--k-ink-muted: #5c5c6f;
	--k-accent: #e06b55;
	--k-accent-rgb: 224, 107, 85;
	--k-accent-light: #f7f0ee;
	--k-accent-dark: #c85544;
	--k-accent-text: #c85544;
	--k-accent-btn: #e06b55;
	--k-accent-btn-hover: #c85544;
	--k-accent-icon: #e06b55;
	--k-accent-purple: #9b6fd4;
	--k-accent-cyan: #4ec5e8;
	--k-focus-ring: #e06b55;
	--k-focus-glow: rgba(224, 107, 85, 0.22);
	--k-bg: #ffffff;
	--k-bg-alt: #f7f6f9;
	--k-bg-warm: #f4f0f8;
	--k-header-bg: #1e3a5f;
	--k-header-border: rgba(255, 255, 255, 0.1);
	--k-border: #e2e8f0;
	--k-hero-overlay: #0F0F12;
	--k-hero-overlay-opacity: 0.62;

	/* Type scale — ratio 1.333 from 17px body */
	--k-text-xs: 0.75rem;
	--k-text-sm: 0.875rem;
	--k-text-base: 1.0625rem;
	--k-text-lg: 1.25rem;
	--k-text-xl: 1.5rem;
	--k-text-2xl: 2rem;
	--k-text-3xl: 3rem;
	--k-text-4xl: 3.5rem;

	/* Spacing — 8-based scale */
	--k-space-1: 8px;
	--k-space-2: 16px;
	--k-space-3: 24px;
	--k-space-4: 32px;
	--k-space-5: 48px;
	--k-space-6: 64px;
	--k-space-7: 96px;
	--k-space-8: 128px;
	--k-space-9: 72px;
	--k-space-10: 104px;

	--k-section-y: var(--k-space-10);
	--k-section-y-tablet: var(--k-space-9);
	--k-section-y-mobile: var(--k-space-5);
	--k-gutter: var(--k-space-3);
	--k-gutter-desktop: var(--k-space-4);
	--k-content-max: 1450px;

	/* Radius + motion — single radius everywhere */
	--k-radius: 0px;
	--k-radius-lg: 16px;
	--k-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
	--k-duration: 0.25s;

	/* Layered shadows — three tiers only */
	--k-shadow-surface: 0 1px 2px rgba(21, 28, 40, 0.06), 0 4px 12px rgba(21, 28, 40, 0.06);
	--k-shadow-card: 0 2px 4px rgba(15, 23, 41, 0.06), 0 12px 32px rgba(15, 23, 41, 0.08);
	--k-shadow-card-hover: 0 4px 8px rgba(15, 23, 41, 0.08), 0 20px 48px rgba(15, 23, 41, 0.14);
	--k-shadow-btn: 0 1px 2px rgba(21, 28, 40, 0.1), 0 4px 14px rgba(var(--k-accent-rgb), 0.28);
	--k-shadow-btn-hover: 0 2px 4px rgba(21, 28, 40, 0.12), 0 8px 22px rgba(var(--k-accent-rgb), 0.38);
	--k-shadow-input: 0 1px 2px rgba(21, 28, 40, 0.04);
	--k-shadow-focus: 0 0 0 2px var(--k-bg), 0 0 0 5px var(--k-focus-ring), 0 0 0 8px var(--k-focus-glow);

	/* Legacy aliases */
	--k-shadow-sm: var(--k-shadow-surface);
	--k-shadow-md: var(--k-shadow-card);
	--k-shadow-lg: var(--k-shadow-card-hover);
	--k-shadow-service: var(--k-shadow-card);
	--k-shadow-service-hover: var(--k-shadow-card-hover);
}

@media (max-width: 1024px) {
	:root {
		--k-section-y: var(--k-section-y-tablet);
	}
}

@media (max-width: 767px) {
	:root {
		--k-section-y: var(--k-section-y-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--k-duration: 0.01ms;
	}
}

/* Scroll-reveal — Elementor Motion Effects (fade up 20px, 0.4s, ease) */
@keyframes karppisetFadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 20px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.elementor-element.karppiset-reveal.animated.fadeInUp {
		animation-name: karppisetFadeUp !important;
		animation-duration: 0.4s !important;
		animation-timing-function: ease !important;
		animation-fill-mode: both;
		visibility: visible !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element.karppiset-reveal {
		animation: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}

/* ═══ Base typography ═══ */
body,
.elementor-widget-text-editor {
	font-family: "Source Sans 3", "DM Sans", var(--e-global-typography-primary-font-family, sans-serif);
	color: var(--k-ink-muted);
	font-weight: 400;
	line-height: 1.6;
}

.elementor-widget-heading .elementor-heading-title {
	font-family: "Playfair Display", "DM Sans", var(--e-global-typography-primary-font-family, serif);
	color: var(--k-ink);
}

.elementor-widget-text-editor p {
	font-size: var(--k-text-base);
	line-height: 1.6;
	font-weight: 400;
	color: var(--k-ink-muted);
}

/* ═══ Header — navy bar so logo + hamburger read clearly ═══ */
#masthead.site-header,
#mobile-header,
#mobile-header .site-main-header-wrap,
#mobile-header .site-header-row-container-inner,
.site-main-header-wrap,
.site-main-header-wrap.site-header-row-container,
.site-main-header-wrap .site-header-row-container-inner,
.mobile-site-header-wrap.site-header-row-container {
	background-color: var(--k-header-bg) !important;
}

.site-main-header-wrap,
#mobile-header .site-main-header-wrap {
	border-bottom: 1px solid var(--k-header-border) !important;
	box-shadow: 0 2px 12px rgba(18, 18, 26, 0.12);
}

.site-header-main {
	box-shadow: none;
	border-bottom: none;
}

.main-navigation .menu > li > a {
	color: rgba(255, 255, 255, 0.92) !important;
	background: transparent !important;
	border-radius: 6px !important;
}

.main-navigation .menu > li > a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1) !important;
}

.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a {
	color: #fff !important;
	background: transparent !important;
	box-shadow: inset 0 -2px 0 var(--k-accent) !important;
	border-radius: 0 !important;
}

#mobile-header .menu-toggle-open.drawer-toggle,
.menu-toggle-open.drawer-toggle {
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 10px 12px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

#mobile-header .menu-toggle-open.drawer-toggle {
	background-color: transparent !important;
	border: 1px solid rgba(232,184,75,.55) !important;
	color: #E8B84B !important;
}

#mobile-header .menu-toggle-open.drawer-toggle .menu-toggle-icon,
#mobile-header .menu-toggle-open.drawer-toggle .kadence-svg-icon,
#mobile-header .menu-toggle-open.drawer-toggle svg {
	color: #fff !important;
	fill: currentColor !important;
}

#mobile-header .menu-toggle-open.drawer-toggle:hover {
	background-color: #E8B84B !important; color: #0B0B0D !important;
	border-color: var(--k-accent-btn-hover) !important;
}

.site-title,
.site-branding .brand {
	font-weight: 700 !important;
	color: var(--k-ink) !important;
	letter-spacing: -0.02em;
	font-size: var(--k-text-lg) !important;
}

.menu-toggle-open.drawer-toggle {
	background-color: transparent !important;
	color: #E8B84B !important;
	border-color: rgba(232,184,75,.55) !important;
}

.menu-toggle-open.drawer-toggle:hover {
	background-color: #E8B84B !important; color: #0B0B0D !important;
}

.main-navigation .menu {
	gap: 1.25rem !important;
}

.main-navigation .menu > li {
	margin: 0 !important;
}

.main-navigation .menu > li > a {
	font-weight: 600;
	font-size: var(--k-text-base);
	padding: 0.65em 1.15em !important;
	border-radius: var(--k-radius);
	transition: background-color var(--k-duration) var(--k-ease), color var(--k-duration) var(--k-ease);
	display: inline-block;
}

/* Desktop — align header with Elementor hero/content column */
@media (min-width: 768px) {
	.site-main-header-wrap.site-header-row-container,
	#mobile-header .site-main-header-wrap.site-header-row-container {
		padding-left: max(var(--k-gutter-desktop), calc((100vw - var(--k-content-max)) / 2)) !important;
		padding-right: max(var(--k-gutter-desktop), calc((100vw - var(--k-content-max)) / 2)) !important;
	}

	.site-main-header-wrap .site-header-row-container-inner > .site-container,
	#mobile-header .site-header-row-container-inner > .site-container {
		max-width: var(--k-content-max) !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: var(--k-gutter-desktop) !important;
		padding-right: var(--k-gutter-desktop) !important;
	}

	#mobile-header .site-branding,
	#mobile-header .site-branding .custom-logo-link {
		margin-left: -10px !important;
	}

	#masthead .main-navigation .menu > li:last-child > a {
		padding-right: 0 !important;
	}
}

/* ═══ Keyboard focus — visible on all interactive elements ═══ */
.skip-link:focus-visible,
.main-navigation .menu > li > a:focus-visible,
.mobile-navigation .menu > li > a:focus-visible,
.menu-toggle-open:focus-visible,
.drawer-toggle:focus-visible,
#kt-scroll-up-reader:focus-visible,
.kadence-scroll-to-top:focus-visible,
.elementor-button:focus-visible,
.elementor-nav-menu a:focus-visible,
.elementor-icon-list-item a:focus-visible,
a.contact-value:focus-visible,
.karppiset-text-link:focus-visible,
button[type="submit"]:focus-visible {
	outline: 3px solid var(--k-focus-ring) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px var(--k-focus-glow) !important;
}

.elementor-field-group .elementor-field:focus,
.elementor-field-group .elementor-field:focus-visible {
	border-color: var(--k-accent-btn) !important;
	outline: 2px solid var(--k-accent-btn) !important;
	outline-offset: 1px !important;
	box-shadow: var(--k-shadow-focus) !important;
}

/* ═══ Hero ═══ */
.karppiset-hero {
	position: relative;
	isolation: isolate;
}

.karppiset-hero > .e-con-inner {
	position: relative;
	z-index: 2;
	justify-content: center !important;
	align-items: flex-start !important;
	width: 100%;
	max-width: var(--k-content-max);
}

.karppiset-hero .elementor-background-overlay {
	background: linear-gradient(
		to bottom,
		rgba(15, 23, 42, 0.54) 0%,
		rgba(15, 23, 42, 0.4) 50%,
		rgba(15, 23, 42, 0.58) 100%
	) !important;
	opacity: 1 !important;
}

.karppiset-hero-content,
.karppiset-hero-content > .e-con-inner {
	max-width: 600px;
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.karppiset-hero .elementor-heading-title,
.karppiset-hero h1 {
	color: #fff !important;
	font-size: clamp(2.25rem, 5vw, var(--k-text-4xl)) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.karppiset-hero .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: var(--k-text-lg) !important;
	line-height: 1.5 !important;
}

.karppiset-hero .elementor-button {
	margin-top: 0;
	box-shadow: var(--k-shadow-btn) !important;
}

/* Vali kappaleesta kuuluu nappiRIVILLE, ei yksittaiselle napille:
   heroissa voi olla kaksi nappia, ja per-nappi-marginaali kasvatti
   mobiilissa rivittyneiden nappien valin 12px:sta 36px:aan.
   Rajaus on tarkka: jos :has() saa osua mihin tahansa heron .e-con:iin,
   se osuu referenssit-sivulla itse KUVAPANEELIIN (siella nappi on
   paneelin suora lapsi) ja koko hero-kuva saa ylamarginaalin ->
   musta kaista kuvan ylle. Mitattu 3.8.2026: 24px. */

/* A) nappirivi paneelin sisalla (etusivu, palvelut) */
.karppiset-hero > .e-con-inner > .e-con.e-child .e-con:has(> .elementor-widget-button) {
	margin-top: var(--k-space-3);
}

/* B) yksittainen nappi paneelin suorana lapsena (referenssit) */
.karppiset-hero > .e-con-inner > .e-con.e-child > .elementor-widget-button .elementor-button {
	margin-top: var(--k-space-3);
}

.karppiset-page-head .elementor-heading-title {
	color: var(--k-ink) !important;
	font-size: clamp(1.75rem, 4vw, var(--k-text-3xl)) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
}

.karppiset-section-heading .elementor-heading-title::after {
	display: none !important;
}

.karppiset-page-head {
	min-height: 280px;
}

.karppiset-page-head .elementor-widget-text-editor p {
	color: var(--k-ink-muted) !important;
	font-size: var(--k-text-base) !important;
	margin: var(--k-space-1) 0 0 !important;
}

/* ═══ Sections — generous rhythm, alternating planes ═══ */
.karppiset-section {
	padding-top: var(--k-section-y) !important;
	padding-bottom: var(--k-section-y) !important;
	padding-left: var(--k-gutter) !important;
	padding-right: var(--k-gutter) !important;
}

.karppiset-hero,
.karppiset-page-head,
.karppiset-cta {
	padding-left: var(--k-gutter) !important;
	padding-right: var(--k-gutter) !important;
}

@media (min-width: 768px) {
	.karppiset-section,
	.karppiset-hero,
	.karppiset-page-head,
	.karppiset-cta {
		padding-left: var(--k-gutter-desktop) !important;
		padding-right: var(--k-gutter-desktop) !important;
	}
}

.karppiset-section--alt {
	background-color: var(--k-bg-alt) !important;
}

.karppiset-section--warm {
	background-color: var(--k-bg-warm) !important;
	padding-top: var(--k-space-8) !important;
	padding-bottom: var(--k-space-4) !important;
}

.karppiset-section--warm > .e-con-inner {
	align-items: flex-start !important;
	gap: var(--k-space-3) !important;
}

.karppiset-section--warm .karppiset-section-heading .elementor-heading-title {
	margin-bottom: 0 !important;
}

.karppiset-section--warm .karppiset-section-heading .elementor-heading-title::after {
	display: block !important;
	content: "";
	width: 60px;
	height: 3px;
	background: var(--k-accent);
	margin: var(--k-space-2) 0 0;
	border-radius: 2px;
}

/* Meistä — always visible (no scroll-trigger; avoids blank plank on mobile) */
.karppiset-section--warm .elementor-widget-heading,
.karppiset-section--warm .elementor-widget-text-editor {
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
}

.karppiset-meista-prose {
	max-width: 680px;
	margin: 0;
	text-align: left;
}

.karppiset-meista-prose p {
	margin: 0 0 var(--k-space-2);
	line-height: 1.6;
	color: var(--k-ink-muted);
}

.karppiset-meista-prose p:last-child {
	margin-bottom: 0;
}

/* Meistä — two-column layout + photo collage */
.karppiset-meista > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
	grid-template-rows: auto !important;
	gap: var(--k-space-5) !important;
	align-items: start !important;
}

.karppiset-meista-copy {
	align-self: center;
}

.karppiset-meista-visual,
.karppiset-meista-visual .elementor-widget-text-editor {
	width: 100%;
}

.karppiset-meista-visual .elementor-widget-text-editor p {
	margin: 0 !important;
}

.karppiset-meista-collage {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 0.75fr;
	grid-template-rows: 118px 118px 104px;
	gap: 12px;
	width: 100%;
}

.karppiset-meista-photo {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--k-border);
	border-top: 2px solid var(--k-accent);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-card);
	background: var(--k-bg);
	transition:
		transform var(--k-duration) var(--k-ease),
		box-shadow var(--k-duration) var(--k-ease);
}

.karppiset-meista-photo:hover {
	transform: translateY(-4px);
	box-shadow: var(--k-shadow-card-hover);
}

.karppiset-meista-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.karppiset-meista-photo--hero {
	grid-column: 1;
	grid-row: 1 / 3;
	min-height: 240px;
}

.karppiset-meista-photo--a {
	grid-column: 2;
	grid-row: 1;
}

.karppiset-meista-photo--b {
	grid-column: 3;
	grid-row: 1 / 3;
	min-height: 230px;
}

.karppiset-meista-photo--c {
	grid-column: 2;
	grid-row: 2 / 4;
	min-height: 210px;
}

.karppiset-meista-photo--d {
	grid-column: 1;
	grid-row: 3;
}

.karppiset-content > .e-con-inner {
	max-width: var(--k-content-max);
	margin: 0 auto;
}

.karppiset-section-heading .elementor-heading-title {
	color: var(--k-ink) !important;
	font-size: clamp(2rem, 4vw, var(--k-text-3xl)) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	margin: 0 0 var(--k-space-2) !important;
}

.karppiset-section-lead,
.karppiset-locations-grid .elementor-widget-text-editor p.karppiset-section-lead {
	max-width: 640px;
	margin: 0 auto var(--k-space-5) !important;
	text-align: center;
	font-size: var(--k-text-base);
	line-height: 1.6;
	color: var(--k-ink-muted);
}

.karppiset-locations-grid > .e-con-inner > .karppiset-section-heading,
.karppiset-locations-grid > .e-con-inner > .elementor-widget-text-editor {
	grid-column: 1 / -1;
}

.karppiset-location-card > .e-con-inner > .e-con,
.karppiset-location-card > .e-con {
	padding: var(--k-space-3) !important;
}

/* ═══ Service cards (homepage) ═══ */
.karppiset-services-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--k-space-3) !important;
	align-items: stretch;
}

.karppiset-service-card {
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-top: 2px solid var(--k-accent) !important;
	border-radius: var(--k-radius) !important;
	padding: var(--k-space-4) !important;
	box-shadow: var(--k-shadow-card);
	transition: transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease);
	height: 100%;
	display: flex !important;
	flex-direction: column !important;
}

.karppiset-service-card > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto;
	height: 100%;
	width: 100%;
}

.karppiset-service-card .elementor-widget-icon-box {
	flex: 1 1 auto;
}

.karppiset-service-card .elementor-widget-button {
	margin-top: auto !important;
	padding-top: var(--k-space-3);
	flex-shrink: 0;
	align-self: flex-start;
}

.karppiset-service-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--k-shadow-card-hover);
}

.karppiset-service-card .elementor-icon-box-icon i,
.karppiset-service-card .elementor-icon-box-icon svg {
	color: var(--k-accent-icon) !important;
	fill: var(--k-accent-icon) !important;
	font-size: 1.75rem;
}

.karppiset-service-card .elementor-icon-box-title {
	font-size: var(--k-text-xl) !important;
	font-weight: 700 !important;
	color: var(--k-ink) !important;
	margin-bottom: var(--k-space-1) !important;
}

.karppiset-service-card .elementor-icon-box-description {
	color: var(--k-ink-muted) !important;
	line-height: 1.6 !important;
	font-size: var(--k-text-base) !important;
}

.karppiset-service-card .elementor-button {
	margin-top: 0 !important;
}

/* Prose blocks — Palvelut page */
.karppiset-prose-stack > .e-con-inner {
	max-width: 720px !important;
	margin: 0 auto;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}

.karppiset-service-block {
	border-bottom: 1px solid var(--k-border);
	padding: var(--k-space-4) 0 !important;
}

.karppiset-prose-stack > .e-con-inner > .karppiset-service-block:last-child {
	border-bottom: none;
	padding-bottom: 0 !important;
}

.karppiset-service-block .elementor-heading-title {
	font-size: var(--k-text-xl) !important;
	font-weight: 700 !important;
	color: var(--k-ink) !important;
	margin-bottom: var(--k-space-1) !important;
}

.karppiset-text-link {
	color: var(--k-accent-text) !important;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--k-duration) var(--k-ease);
}

.karppiset-text-link:hover {
	color: var(--k-accent-btn-hover) !important;
	text-decoration: underline;
}

/* ═══ Feature trust cards ═══ */
.karppiset-features > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--k-space-5) !important;
}

.karppiset-features > .e-con-inner > .elementor-widget-heading,
.karppiset-features > .e-con-inner > .karppiset-feature-card {
	grid-column: auto;
}

.karppiset-features > .e-con-inner > .elementor-widget-heading {
	grid-column: 1 / -1;
}

.karppiset-feature-card {
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-top: 2px solid var(--k-accent) !important;
	border-radius: var(--k-radius) !important;
	padding: var(--k-space-5) !important;
	box-shadow: var(--k-shadow-card);
	text-align: center;
	transition: transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease);
	height: 100%;
}

.karppiset-feature-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--k-shadow-card-hover);
}

.karppiset-feature-card .elementor-icon-box-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: var(--k-space-3);
}

.karppiset-feature-card .elementor-icon-box-icon {
	width: 64px;
	height: 64px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--k-accent-light);
	border-radius: var(--k-radius);
	margin: 0 auto var(--k-space-2) !important;
}

.karppiset-feature-card .elementor-icon-box-icon i,
.karppiset-feature-card .elementor-icon-box-icon svg {
	color: var(--k-accent-icon) !important;
	fill: var(--k-accent-icon) !important;
	font-size: 1.75rem;
}

.karppiset-feature-card .elementor-icon-box-title {
	font-size: var(--k-text-xl) !important;
	font-weight: 700 !important;
	color: var(--k-ink) !important;
	line-height: 1.25 !important;
	margin-bottom: var(--k-space-1) !important;
}

.karppiset-feature-card .elementor-icon-box-description {
	font-size: var(--k-text-base) !important;
	color: var(--k-ink-muted) !important;
	line-height: 1.6 !important;
	max-width: 280px;
	margin: 0 auto;
}

/* ═══ Location cards — vuokrakohteet ═══ */
.karppiset-locations-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: var(--k-space-3) !important;
	align-items: stretch;
}

.karppiset-locations-grid > .e-con-inner > .elementor-widget-heading,
.karppiset-locations-grid > .e-con-inner > .elementor-widget-text-editor {
	grid-column: 1 / -1;
}

.karppiset-location-card {
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-radius: var(--k-radius) !important;
	overflow: hidden;
	box-shadow: var(--k-shadow-card);
	transition: transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease);
	height: 100%;
	display: flex !important;
	flex-direction: column !important;
}

.karppiset-location-card > .elementor-widget-image,
.karppiset-location-card .elementor-widget-image {
	flex-shrink: 0;
	overflow: hidden;
	border-bottom: 1px solid var(--k-border);
	border-radius: var(--k-radius) var(--k-radius) 0 0;
	line-height: 0;
}

.karppiset-location-card > .e-con {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
}

.karppiset-location-card > .e-con > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto;
	height: 100%;
}

.karppiset-location-card .elementor-widget-button {
	margin-top: auto !important;
	padding-top: var(--k-space-3);
	flex-shrink: 0;
	align-self: flex-start;
}

.karppiset-location-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--k-shadow-card-hover);
}

.karppiset-location-card .elementor-widget-image img {
	height: 200px;
	object-fit: cover;
	width: 100%;
	display: block;
	border-radius: var(--k-radius) var(--k-radius) 0 0;
	transition: transform 0.4s var(--k-ease);
}

.karppiset-location-card:hover .elementor-widget-image img {
	transform: scale(1.03);
}

.karppiset-location-card .elementor-heading-title {
	font-size: var(--k-text-lg) !important;
	font-weight: 700 !important;
	color: var(--k-ink) !important;
	margin-bottom: var(--k-space-1) !important;
}

.karppiset-location-card .elementor-heading-title::after {
	display: none !important;
}

.karppiset-location-card .elementor-widget-text-editor p {
	color: var(--k-ink-muted);
	line-height: 1.6;
	font-size: var(--k-text-sm);
	margin: 0;
}

.karppiset-location-card .elementor-button {
	margin-top: 0 !important;
}

@media (max-width: 1099px) {
	.karppiset-locations-grid > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--k-space-4) !important;
	}
}

@media (max-width: 1024px) {
	.karppiset-meista > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-5) !important;
	}

	.karppiset-meista-collage {
		max-width: 520px;
		margin: 0 auto;
	}

	.karppiset-services-grid > .e-con-inner {
		gap: var(--k-space-4) !important;
	}

	.karppiset-features > .e-con-inner {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: var(--k-space-4) !important;
	}

	.karppiset-contact-layout > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-5) !important;
	}
}

@media (max-width: 767px) {
	.karppiset-locations-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}

	.karppiset-services-grid > .e-con-inner,
	.karppiset-features > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-4) !important;
	}

	/* Hero / page head — mobile editorial layout.
	   VAIN etusivu: alasivujen kuvapaneelilla on oma min-height
	   (clamp(300px,52vh,400px) @max-width:899px), ja jos kontti on
	   sita korkeampi, erotus nakyy mustana kaistana kuvan YLLA
	   (inner on flex-end mobiilissa). Mitattu 3.8.2026: 55px. */
	body.home .karppiset-hero {
		min-height: clamp(400px, 56vh, 480px) !important;
	}

	.karppiset-hero > .e-con-inner {
		justify-content: flex-end !important;
		align-items: flex-start !important;
		min-height: inherit;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.karppiset-hero-content,
	.karppiset-hero-content > .e-con-inner {
		max-width: 100% !important;
		align-items: flex-start !important;
	}

	.karppiset-hero .elementor-heading-title,
	.karppiset-hero h1 {
		text-align: left !important;
		font-size: clamp(1.75rem, 8.2vw, 2.125rem) !important;
		line-height: 1.12 !important;
		text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
	}

	.karppiset-hero .elementor-widget-text-editor p {
		text-align: left !important;
		font-size: var(--k-text-base) !important;
		line-height: 1.45 !important;
		margin-top: var(--k-space-1) !important;
	}

	.karppiset-hero .elementor-background-overlay {
		background: linear-gradient(
			to bottom,
			rgba(15, 23, 42, 0.45) 0%,
			rgba(15, 23, 42, 0.52) 45%,
			rgba(15, 23, 42, 0.59) 100%
		) !important;
	}

	.karppiset-hero .elementor-widget-button {
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
	}

	/* Vain ensimmainen nappi erottuu kappaleesta; loput saavat valinsa
	   kontin flex-gapista. Heroissa on kaksi nappia 3.8.2026 alkaen, ja
	   per-nappi-marginaali kasvatti rivittyneiden nappien valin 60px:aan. */
	.karppiset-hero .elementor-widget-button:first-child {
		margin-top: var(--k-space-3) !important;
	}

	.karppiset-hero .elementor-button {
		width: 100% !important;
		display: block !important;
		padding: 14px 20px !important;
	}

	.karppiset-hero .elementor-widget-button .elementor-button-wrapper {
		text-align: center !important;
	}

	.karppiset-page-head {
		min-height: 220px !important;
	}

	.karppiset-cta {
		padding-top: var(--k-space-4) !important;
		padding-bottom: var(--k-space-4) !important;
	}

	.karppiset-feature-card {
		padding: var(--k-space-4) !important;
	}

	.karppiset-section--warm {
		padding-top: var(--k-space-5) !important;
		padding-bottom: var(--k-space-3) !important;
	}

	/* Service cards — left-aligned prose, full-width tap target */
	.karppiset-service-card .elementor-icon-box-wrapper {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		text-align: left !important;
	}

	.karppiset-service-card .elementor-icon-box-icon {
		margin: 0 0 var(--k-space-2) !important;
	}

	.karppiset-service-card .elementor-widget-button {
		align-self: stretch !important;
		width: 100% !important;
		padding-top: var(--k-space-3);
	}

	.karppiset-service-card .elementor-widget-button .elementor-button-wrapper {
		text-align: center !important;
	}

	.karppiset-service-card .elementor-button {
		width: 100% !important;
	}

	.karppiset-services-grid > .e-con-inner {
		gap: var(--k-space-3) !important;
	}

	.karppiset-service-card {
		padding: var(--k-space-3) !important;
	}

	.karppiset-cta .elementor-heading-title {
		font-size: clamp(1.375rem, 5.5vw, var(--k-text-2xl)) !important;
	}

	.karppiset-meista-prose {
		max-width: none;
	}

	.karppiset-meista > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-4) !important;
	}

	.karppiset-meista .karppiset-section-heading .elementor-heading-title {
		text-align: left !important;
	}

	.karppiset-meista .elementor-widget-text-editor,
	.karppiset-meista .karppiset-meista-prose,
	.karppiset-meista .karppiset-meista-prose p {
		text-align: left !important;
	}

	.karppiset-meista-collage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		min-height: 0;
	}

	.karppiset-meista-photo--hero {
		grid-column: 1 / -1;
		grid-row: auto;
		min-height: 220px;
	}

	.karppiset-meista-photo--a,
	.karppiset-meista-photo--b,
	.karppiset-meista-photo--c,
	.karppiset-meista-photo--d {
		grid-column: auto;
		grid-row: auto;
		min-height: 140px;
	}

	.karppiset-meista-photo--b {
		grid-column: 1 / -1;
		min-height: 180px;
	}

	/* Buttons — single-line labels on narrow screens */
	.elementor-button,
	button[type="submit"] {
		white-space: nowrap !important;
		font-size: 0.9375rem !important;
		line-height: 1.2 !important;
		padding: 12px 16px !important;
		box-sizing: border-box !important;
	}

	.karppiset-service-card .elementor-button,
	.karppiset-location-card .elementor-button,
	.karppiset-cta .elementor-button,
	.karppiset-contact-layout .elementor-field-type-submit .elementor-button,
	.elementor-form .elementor-button {
		display: block !important;
		width: 100% !important;
	}

	.karppiset-location-card .elementor-widget-button {
		align-self: stretch !important;
		width: 100% !important;
	}
}

/* ═══ Contact — polished, no harsh dividers ═══ */
.karppiset-contact-layout > .e-con-inner {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--k-space-6) !important;
	align-items: start !important;
}

.karppiset-contact-fields {
	padding: var(--k-space-4) !important;
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-top: 2px solid var(--k-accent) !important;
	border-radius: var(--k-radius) !important;
	box-shadow: var(--k-shadow-card);
}

.karppiset-contact-form-col {
	padding: 0 !important;
}

.karppiset-contact-fields .elementor-icon-box-icon i,
.karppiset-contact-fields .elementor-icon-box-icon svg {
	color: var(--k-accent-icon) !important;
	fill: var(--k-accent-icon) !important;
}

.karppiset-contact-fields .elementor-icon-box-title {
	font-size: var(--k-text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-ink-muted) !important;
}

.karppiset-contact-fields .elementor-icon-box-description {
	font-weight: 600;
	color: var(--k-ink) !important;
	font-size: var(--k-text-base) !important;
}

.karppiset-contact-fields .elementor-icon-box-description a.contact-value {
	color: var(--k-ink);
	text-decoration: none;
	transition: color var(--k-duration) var(--k-ease);
}

.karppiset-contact-fields .elementor-icon-box-description a.contact-value:hover {
	color: var(--k-accent);
}

.karppiset-contact-form-col .karppiset-section-heading .elementor-heading-title {
	font-size: var(--k-text-2xl) !important;
	margin-bottom: var(--k-space-1) !important;
}

.karppiset-contact-layout .elementor-widget-form,
.karppiset-contact-layout .elementor-widget-shortcode {
	margin-bottom: 0 !important;
}

/* Gravity Forms — match contact layout field styling */
.karppiset-contact-form-col .gform_wrapper {
	margin: 0 !important;
}

.karppiset-contact-form-col .gform_wrapper form {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-3);
}

.karppiset-contact-form-col .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-3);
}

.karppiset-contact-form-col .gform_wrapper .gfield {
	margin: 0 !important;
	padding: 0 !important;
}

.karppiset-contact-form-col .gform_wrapper .gfield_label,
.karppiset-contact-form-col .gform_wrapper .gform-field-label {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: var(--k-text-sm) !important;
	font-weight: 600 !important;
	color: var(--k-ink) !important;
	margin-bottom: var(--k-space-1) !important;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.karppiset-contact-form-col .gform_wrapper input[type="text"],
.karppiset-contact-form-col .gform_wrapper input[type="email"],
.karppiset-contact-form-col .gform_wrapper input[type="tel"],
.karppiset-contact-form-col .gform_wrapper textarea {
	width: 100%;
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-radius: var(--k-radius) !important;
	padding: 16px 18px !important;
	font-family: "DM Sans", sans-serif;
	font-size: var(--k-text-base) !important;
	font-weight: 400;
	color: var(--k-ink) !important;
	line-height: 1.5 !important;
	box-shadow: var(--k-shadow-input);
	transition:
		border-color var(--k-duration) var(--k-ease),
		box-shadow var(--k-duration) var(--k-ease),
		background-color var(--k-duration) var(--k-ease);
}

.karppiset-contact-form-col .gform_wrapper textarea {
	min-height: 148px;
	resize: vertical;
}

.karppiset-contact-form-col .gform_wrapper input:hover,
.karppiset-contact-form-col .gform_wrapper textarea:hover {
	border-color: #cbd5e1 !important;
}

.karppiset-contact-form-col .gform_wrapper input:focus,
.karppiset-contact-form-col .gform_wrapper textarea:focus,
.karppiset-contact-form-col .gform_wrapper input:focus-visible,
.karppiset-contact-form-col .gform_wrapper textarea:focus-visible {
	border-color: var(--k-accent-btn) !important;
	outline: 2px solid var(--k-accent-btn) !important;
	outline-offset: 1px !important;
	box-shadow: var(--k-shadow-focus) !important;
	background: var(--k-bg) !important;
}

.karppiset-contact-form-col .gform_wrapper .gform_footer {
	margin: var(--k-space-1) 0 0 !important;
	padding: 0 !important;
}

.karppiset-contact-form-col .gform_wrapper .gform_button,
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	padding: 14px 28px !important;
	font-family: "DM Sans", sans-serif !important;
	font-size: var(--k-text-base) !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--k-accent-btn) !important;
	border: none !important;
	border-radius: var(--k-radius) !important;
	box-shadow: var(--k-shadow-btn);
	cursor: pointer;
	transition:
		background-color var(--k-duration) var(--k-ease),
		box-shadow var(--k-duration) var(--k-ease),
		transform var(--k-duration) var(--k-ease);
}

.karppiset-contact-form-col .gform_wrapper .gform_button:hover,
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:hover {
	background: var(--k-accent-btn-hover) !important;
	box-shadow: var(--k-shadow-btn-hover);
}

.karppiset-contact-form-col .gform_wrapper .gform_confirmation_message {
	font-family: "DM Sans", sans-serif;
	font-size: var(--k-text-base);
	color: var(--k-ink);
	padding: var(--k-space-2);
	background: var(--k-accent-light);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
}

/* Premium contact form fields */
.karppiset-contact-layout .elementor-form-fields-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--k-space-3);
}

.karppiset-contact-layout .elementor-field-group {
	margin-bottom: 0 !important;
	padding: 0 !important;
}

.karppiset-contact-layout .elementor-field-label {
	display: block;
	font-family: "DM Sans", sans-serif;
	font-size: var(--k-text-sm) !important;
	font-weight: 600 !important;
	color: var(--k-ink) !important;
	margin-bottom: var(--k-space-1) !important;
	letter-spacing: 0.01em;
	line-height: 1.4;
}

.karppiset-contact-layout .elementor-field-group .elementor-field {
	width: 100%;
	background: var(--k-bg) !important;
	border: 1px solid var(--k-border) !important;
	border-radius: var(--k-radius) !important;
	padding: 16px 18px !important;
	font-family: "DM Sans", sans-serif;
	font-size: var(--k-text-base) !important;
	font-weight: 400;
	color: var(--k-ink) !important;
	line-height: 1.5 !important;
	box-shadow: var(--k-shadow-input);
	transition:
		border-color var(--k-duration) var(--k-ease),
		box-shadow var(--k-duration) var(--k-ease),
		background-color var(--k-duration) var(--k-ease);
}

.karppiset-contact-layout .elementor-field-group .elementor-field::placeholder {
	color: rgba(71, 85, 105, 0.55);
	opacity: 1;
}

.karppiset-contact-layout .elementor-field-group .elementor-field:hover {
	border-color: #cbd5e1 !important;
}

.karppiset-contact-layout .elementor-field-group .elementor-field:focus,
.karppiset-contact-layout .elementor-field-group .elementor-field:focus-visible {
	border-color: var(--k-accent-btn) !important;
	outline: 2px solid var(--k-accent-btn) !important;
	outline-offset: 1px !important;
	box-shadow: var(--k-shadow-focus) !important;
	background: var(--k-bg) !important;
}

.karppiset-contact-layout textarea.elementor-field {
	min-height: 148px;
	resize: vertical;
}

.karppiset-contact-layout .elementor-field-type-submit {
	margin-top: var(--k-space-1);
}

.karppiset-contact-layout .elementor-field-type-submit .elementor-button {
	width: auto !important;
	min-width: 200px;
}

.karppiset-contact-layout + .karppiset-cta {
	margin-top: 0 !important;
}

/* ═══ CTA banner — every page ═══ */
.karppiset-cta {
	padding-top: var(--k-space-5) !important;
	padding-bottom: var(--k-space-5) !important;
	background: var(--k-bg-alt) !important;
	border-top: 2px solid var(--k-accent) !important;
	border-bottom: 1px solid var(--k-border) !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.karppiset-cta > .e-con-inner,
.karppiset-cta.e-flex > .e-con-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--k-space-4) !important;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

.karppiset-cta-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.karppiset-cta .elementor-widget-heading {
	margin: 0 !important;
}

.karppiset-cta .elementor-widget-button {
	flex: 0 0 auto;
	margin: 0 !important;
}

.karppiset-cta .elementor-widget-button .elementor-button-wrapper {
	text-align: right;
}

.karppiset-cta .elementor-heading-title {
	color: var(--k-ink) !important;
	font-size: var(--k-text-2xl) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}

.karppiset-cta .karppiset-cta-subtitle p {
	color: var(--k-ink-muted) !important;
	font-size: var(--k-text-base) !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	max-width: 52ch;
}

.karppiset-cta .elementor-button {
	box-shadow: var(--k-shadow-btn) !important;
	transition: background-color var(--k-duration) var(--k-ease), transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease) !important;
}

.karppiset-cta .elementor-button:hover {
	background-color: #E8B84B !important; color: #0B0B0D !important;
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-btn-hover) !important;
}

/* ═══ Buttons & forms ═══ */
.elementor-button,
button[type="submit"] {
	background-color: var(--k-accent-btn) !important;
	border: none !important;
	font-weight: 600 !important;
	color: #fff !important;
	border-radius: var(--k-radius) !important;
	padding: 14px 28px !important;
	font-size: var(--k-text-base) !important;
	box-shadow: var(--k-shadow-btn);
	transition: background-color var(--k-duration) var(--k-ease), transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease);
}

.elementor-button:hover,
button[type="submit"]:hover {
	background-color: #E8B84B !important; color: #0B0B0D !important;
	transform: translateY(-1px);
}

.elementor-field-group .elementor-field {
	border: 1px solid var(--k-border) !important;
	border-radius: var(--k-radius) !important;
	padding: 14px 16px !important;
	font-size: var(--k-text-base) !important;
	font-family: "DM Sans", sans-serif;
	color: var(--k-ink);
	background: var(--k-bg);
	box-shadow: var(--k-shadow-input);
	transition:
		border-color var(--k-duration) var(--k-ease),
		box-shadow var(--k-duration) var(--k-ease);
}

.elementor-field-group .elementor-field:focus,
.elementor-field-group .elementor-field:focus-visible {
	border-color: var(--k-accent-btn) !important;
	outline: 2px solid var(--k-accent-btn) !important;
	outline-offset: 1px !important;
	box-shadow: var(--k-shadow-focus) !important;
}

.elementor-form .elementor-button {
	width: 100%;
}

/* ═══ Footer ═══ */
.elementor-location-footer {
	margin-top: 0 !important;
}

.karppiset-footer:not(.elegance-footer-modern) {
	padding-top: var(--k-space-5) !important;
	padding-bottom: var(--k-space-3) !important;
	background: var(--k-bg) !important;
	border-top: 1px solid var(--k-border) !important;
}

.karppiset-footer.e-con-boxed > .e-con-inner,
.karppiset-footer-bottom.e-con-boxed > .e-con-inner {
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100%;
}

.karppiset-footer > .e-con-inner {
	padding: 0 !important;
	gap: 0 !important;
	height: auto !important;
	min-height: 0 !important;
}

.karppiset-footer .e-grid.e-con {
	height: auto !important;
	min-height: 0 !important;
	flex: 0 0 auto !important;
}

.karppiset-footer .e-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	grid-auto-rows: min-content !important;
	gap: var(--k-space-2) var(--k-space-5) !important;
	align-items: start !important;
	align-content: start !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con > .e-con-inner {
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: var(--k-space-2) !important;
	align-items: flex-start;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con:last-child > .e-con-inner {
	align-items: flex-start;
	text-align: left;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con:last-child .elementor-widget-text-editor p {
	text-align: left;
}

.karppiset-footer .elementor-widget-heading {
	margin: 0 0 var(--k-space-1) !important;
	width: 100%;
}

.karppiset-footer .elementor-heading-title {
	color: var(--k-ink) !important;
	font-size: var(--k-text-base) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	letter-spacing: -0.01em;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con:first-child .elementor-heading-title {
	font-size: var(--k-text-lg) !important;
}

.karppiset-footer .e-grid > .e-con-inner > .e-con:not(:first-child) .elementor-heading-title {
	font-size: var(--k-text-sm) !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--k-ink-muted) !important;
}

.karppiset-footer .elementor-widget-text-editor p {
	color: var(--k-ink-muted) !important;
	font-size: var(--k-text-sm);
	line-height: 1.6;
	margin: 0 !important;
}

.karppiset-footer .elementor-icon-list-items {
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.karppiset-footer .elementor-icon-list-item {
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.karppiset-footer .elementor-icon-list-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	margin-top: 0 !important;
}

.karppiset-footer .elementor-icon-list-icon svg,
.karppiset-footer .elementor-icon-list-icon i {
	margin: 0 !important;
}

.karppiset-footer .elementor-icon-list-text {
	color: var(--k-ink) !important;
	line-height: 1.4 !important;
	padding-top: 0 !important;
}

.karppiset-footer .elementor-icon-list-icon i {
	color: var(--k-accent) !important;
}

.karppiset-footer .elementor-nav-menu--main {
	display: block !important;
}

.karppiset-footer .elementor-nav-menu--dropdown,
.karppiset-footer .elementor-menu-toggle {
	display: none !important;
}

.karppiset-footer .elementor-nav-menu ul {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.karppiset-footer .elementor-nav-menu--main .elementor-item {
	color: var(--k-ink-muted) !important;
	padding: 0 !important;
	font-size: var(--k-text-sm);
	line-height: 1.6 !important;
	transition: color var(--k-duration) var(--k-ease);
	display: inline-block;
}

.karppiset-footer .elementor-nav-menu--main .elementor-item:hover {
	color: var(--k-accent) !important;
	background: transparent !important;
}

.karppiset-footer-bottom {
	padding-top: var(--k-space-2) !important;
	padding-bottom: var(--k-space-2) !important;
	border-top: 1px solid var(--k-border);
	background: var(--k-bg-alt) !important;
}

.karppiset-footer-bottom > .e-con-inner {
	padding: 0 !important;
	min-height: 0 !important;
	height: auto !important;
}

.karppiset-footer-bottom .elementor-widget-text-editor p {
	color: #64748b !important;
	font-size: var(--k-text-xs);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

.scroll-up-wrap .scroll-up-button {
	background: var(--k-accent-btn) !important;
	border-radius: var(--k-radius) !important;
	box-shadow: var(--k-shadow-btn) !important;
	transition: background-color var(--k-duration) var(--k-ease), transform var(--k-duration) var(--k-ease), box-shadow var(--k-duration) var(--k-ease);
}

.scroll-up-wrap .scroll-up-button:hover {
	background: var(--k-accent-btn-hover) !important;
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-btn-hover) !important;
}

/* ═══ Global accent + radius enforcement ═══ */
.elementor-button:not(.elementor-button-link),
button[type="submit"] {
	background-color: var(--k-accent-btn) !important;
	border-radius: var(--k-radius) !important;
}

.elementor-widget-icon-box .elementor-icon-box-icon i,
.elementor-widget-icon-box .elementor-icon-box-icon svg {
	color: var(--k-accent-icon) !important;
	fill: var(--k-accent-icon) !important;
}

.karppiset-footer .elementor-icon-list-icon i,
.karppiset-footer .elementor-icon-list-icon svg {
	color: var(--k-accent) !important;
	fill: var(--k-accent) !important;
}

a.contact-value:hover {
	color: var(--k-accent) !important;
}

/* ═══ Responsive polish ═══ */
@media (min-width: 768px) {
	.karppiset-cta .elementor-heading-title {
		text-align: left;
	}
}

@media (max-width: 767px) {
	:root {
		--k-gutter: 28px;
	}

	body {
		overflow-x: hidden;
	}

	.karppiset-section,
	.karppiset-hero,
	.karppiset-page-head,
	.karppiset-cta,
	.karppiset-content > .e-con-inner {
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.karppiset-contact-layout > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-5) !important;
	}

	.karppiset-cta > .e-con-inner,
	.karppiset-cta.e-flex > .e-con-inner {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: var(--k-space-3) !important;
		text-align: center;
	}

	.karppiset-cta-copy {
		text-align: center !important;
	}

	.karppiset-cta .elementor-widget-button {
		width: 100% !important;
		align-self: stretch !important;
	}

	.karppiset-cta .elementor-widget-button .elementor-button-wrapper {
		text-align: center !important;
	}

	.karppiset-cta .elementor-button {
		width: 100% !important;
		display: block !important;
	}

	.karppiset-cta .elementor-heading-title {
		text-align: center !important;
	}

	.karppiset-cta .karppiset-cta-subtitle p {
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: none !important;
	}

	.karppiset-contact-layout .elementor-field-type-submit .elementor-button {
		width: 100% !important;
	}

	.karppiset-footer .e-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: var(--k-space-4) !important;
	}

	.karppiset-footer .e-grid > .e-con-inner > .e-con > .e-con-inner {
		align-items: flex-start !important;
	}

	.karppiset-footer .e-grid > .e-con-inner > .e-con:last-child > .e-con-inner {
		align-items: flex-start;
		text-align: left;
	}

	.karppiset-footer .e-grid > .e-con-inner > .e-con:last-child .elementor-widget-text-editor p {
		text-align: left;
	}
}

/* ═══ Elegance site-specific ═══ */
.elegance-contact-fallback {
	background: var(--k-bg-alt);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
	padding: var(--k-space-4);
}

.elegance-contact-fallback p {
	margin-bottom: var(--k-space-2);
}

.elegance-contact-fallback p:last-child {
	margin-bottom: 0;
	color: var(--k-ink-muted);
	font-size: var(--k-text-sm);
}

/* Align Elementor boxed content with Kadence header (1450px grid) */
@media (min-width: 768px) {
	.elementor-section.elementor-section-boxed > .elementor-container,
	.e-con.e-parent:not(.e-con-full) > .e-con-inner {
		max-width: var(--k-content-max);
		margin-left: auto;
		margin-right: auto;
	}
}

/* Hero — full-bleed on mobile only; desktop stays boxed in 1450px grid */
@media (max-width: 767px) {
	.elegance-hero.karppiset-hero,
	.elegance-hero {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elegance-hero > .e-con-inner,
	.elegance-hero.e-con-boxed > .e-con-inner {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-radius: 0 !important;
	}

	.elegance-hero .e-con.e-parent,
	.elegance-hero .e-con.e-parent > .e-con-inner,
	.elegance-hero .e-con.e-child {
		border-radius: 0 !important;
		min-height: 520px !important;
	}

	.elegance-hero .elementor-heading-title,
	.elegance-hero h1 {
		font-size: clamp(1.65rem, 7vw, 2.1rem) !important;
		line-height: 1.12 !important;
	}

	.elegance-hero .elementor-widget-text-editor p {
		font-size: 1rem !important;
		line-height: 1.55 !important;
	}

	/* Text breathing room without side gutters on the image plane */
	.elegance-hero .elementor-widget-heading,
	.elegance-hero .elementor-widget-text-editor,
	.elegance-hero .elementor-widget-button {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

.elegance-hero .elementor-heading-title,
.elegance-hero h1 {
	font-family: "Playfair Display", Georgia, serif !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.elegance-hero .elementor-widget-text-editor,
.elegance-hero .elementor-widget-text-editor p,
.elegance-hero .elementor-widget-text-editor strong {
	color: rgba(255, 255, 255, 0.92) !important;
}

.elegance-hero .elementor-button {
	background: linear-gradient(135deg, var(--k-accent) 0%, var(--k-accent-purple) 100%) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
	box-shadow: 0 4px 20px rgba(224, 107, 85, 0.35) !important;
}

/* Contact page hero — brand image + ink overlay */
.elegance-contact-hero .elementor-heading-title,
.elegance-contact-hero h1 {
	font-family: "Playfair Display", Georgia, serif !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
	.elegance-contact-hero {
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		width: 100vw !important;
		max-width: 100vw !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.elegance-contact-hero > .e-con-inner {
		border-radius: 0 !important;
		min-height: 220px !important;
	}
}

/* CTA — Elegance gradient button + serif heading */
.elegance-cta .elementor-heading-title {
	font-family: "Playfair Display", Georgia, serif !important;
}

.elegance-cta.karppiset-cta .elementor-widget-button .elementor-button.elementor-button-link {
	background-color: var(--k-accent) !important;
	background-image: linear-gradient(135deg, var(--k-accent) 0%, var(--k-accent-purple) 100%) !important;
	color: #fff !important;
	fill: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 4px 16px rgba(224, 107, 85, 0.3) !important;
}

.elegance-cta.karppiset-cta .elementor-widget-button .elementor-button.elementor-button-link:hover {
	background-color: #E8B84B !important; color: #0B0B0D !important;
	background-image: linear-gradient(135deg, var(--k-accent-btn-hover) 0%, var(--k-accent-purple) 100%) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(224, 107, 85, 0.4) !important;
}
.elementor-location-footer .elementor-widget-nav-menu ~ .elementor-widget-nav-menu {
	display: none !important;
}

.elementor-location-footer .elementor-social-icon .elementor-screen-only {
	clip: rect(0, 0, 0, 0);
	border: 0;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ═══ Header — logo left, nav right, single row ═══ */
@media (min-width: 768px) {
	.site-main-header-inner-wrap.site-header-row-has-sides {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: var(--k-space-3);
		min-height: 80px;
	}

	.site-header-main-section-left {
		flex: 0 0 auto;
	}

	.site-header-main-section-right {
		flex: 1 1 auto;
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		margin-left: auto;
	}

	.main-navigation {
		width: auto;
		margin-left: auto;
	}

	.main-navigation .menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: flex-end !important;
		align-items: center !important;
		gap: 1.25rem !important;
		margin: 0;
		padding: 0;
	}

	.main-navigation .menu > li {
		flex: 0 0 auto;
		margin: 0 !important;
	}

	.main-navigation .menu > li > a {
		white-space: nowrap;
		padding: 0.65em 1.15em !important;
	}

	.main-navigation .menu > li.current-menu-item > a,
	.main-navigation .menu > li.current_page_item > a {
		background-color: transparent !important;
		color: #fff !important;
		box-shadow: inset 0 -2px 0 var(--k-accent) !important;
	}
}

@media (max-width: 767px) {
	#masthead .main-navigation {
		display: none !important;
	}

	#mobile-header .site-header-row-container-inner {
		padding-left: var(--k-gutter) !important;
		padding-right: var(--k-gutter) !important;
	}

	.mobile-navigation .menu > li > a {
		color: var(--k-ink) !important;
	}

	.mobile-navigation .menu > li.current-menu-item > a,
	.mobile-navigation .menu > li.current_page_item > a {
		background-color: var(--k-accent-btn) !important;
		color: #fff !important;
	}
}

/* ═══ Footer — modern dark layout ═══ */
.elementor-location-footer.elegance-footer-modern,
.elementor-location-footer.elegance-footer-modern > .e-con.e-parent {
	background: #12121a !important;
}

.elementor-location-footer.elegance-footer-modern > .e-con.e-parent > .e-con-inner {
	max-width: var(--k-content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--k-gutter-desktop) !important;
	padding-right: var(--k-gutter-desktop) !important;
}

.elegance-footer-modern .elegance-footer-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1.1fr) !important;
	gap: 48px 56px !important;
	align-items: start !important;
	width: 100% !important;
}

.elegance-footer-modern .elegance-footer-col > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 16px !important;
	padding: 0 !important;
}

.elegance-footer-modern .elegance-footer-logo img {
	width: min(200px, 100%) !important;
	height: auto !important;
	display: block !important;
	filter: none !important;
}

.elegance-footer-modern .elegance-footer-tagline,
.elegance-footer-modern .elegance-footer-col--brand .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.72) !important;
	font-size: var(--k-text-sm) !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	max-width: 26rem;
}

.elegance-footer-modern .elegance-footer-col .elementor-heading-title {
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.45) !important;
	margin: 0 0 4px !important;
}

.elegance-footer-modern .elementor-nav-menu--main ul,
.elegance-footer-modern .elementor-nav-menu.sm-vertical,
.elegance-footer-modern .elementor-nav-menu ul {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

.elegance-footer-modern .elementor-nav-menu--main .elementor-item,
.elegance-footer-modern .elementor-nav-menu a {
	color: rgba(255, 255, 255, 0.78) !important;
	padding: 0 !important;
	font-size: var(--k-text-sm) !important;
	line-height: 1.5 !important;
	background: transparent !important;
	transition: color var(--k-duration) var(--k-ease);
}

.elegance-footer-modern .elementor-nav-menu--main .elementor-item:hover,
.elegance-footer-modern .elementor-nav-menu a:hover {
	color: #fff !important;
}

.elegance-footer-modern .elementor-icon-list-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.elegance-footer-modern .elementor-icon-list-text {
	color: rgba(255, 255, 255, 0.88) !important;
	font-size: var(--k-text-sm) !important;
	line-height: 1.5 !important;
}

.elegance-footer-modern .elementor-icon-list-icon i,
.elegance-footer-modern .elementor-icon-list-icon svg {
	color: var(--k-accent) !important;
	fill: var(--k-accent) !important;
}

.elegance-footer-bottom,
.elementor-location-footer .elegance-footer-bottom {
	background: #0d0d14 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.elegance-footer-bottom > .e-con-inner {
	max-width: var(--k-content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--k-gutter-desktop) !important;
	padding-right: var(--k-gutter-desktop) !important;
}

.elegance-footer-bottom .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.45) !important;
	font-size: var(--k-text-xs) !important;
	margin: 0 !important;
	text-align: center !important;
}

.elegance-footer-bottom .elementor-widget-text-editor a,
.elegance-footer-modern .elementor-widget-text-editor a {
	color: rgba(255, 255, 255, 0.72) !important;
	text-decoration: none;
}

.elegance-footer-bottom .elementor-widget-text-editor a:hover,
.elegance-footer-modern .elementor-widget-text-editor a:hover {
	color: var(--k-accent) !important;
}

@media (max-width: 1024px) {
	.elegance-footer-modern .elegance-footer-grid > .e-con-inner {
		grid-template-columns: 1fr 1fr !important;
	}

	.elegance-footer-modern .elegance-footer-col--brand {
		grid-column: 1 / -1 !important;
	}
}

@media (max-width: 767px) {
	.elegance-footer-modern .elegance-footer-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}

	.elegance-footer-modern .elegance-footer-tagline,
	.elegance-footer-modern .elegance-footer-col--brand .elementor-widget-text-editor p {
		max-width: none;
	}
}

/* ═══ Service cards — readable text on photos ═══ */
.elegance-services .karppiset-services-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: var(--k-space-3) !important;
}

.elegance-services .elegance-service-card {
	border-radius: var(--k-radius-lg) !important;
	overflow: hidden !important;
	position: relative !important;
}

.elegance-services .elegance-service-card .elementor-heading-title,
.elegance-services .elegance-service-card h3 {
	color: #fff !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem) !important;
}

.elegance-services .elegance-service-card .elementor-widget-text-editor,
.elegance-services .elegance-service-card .elementor-widget-text-editor p {
	color: rgba(255, 255, 255, 0.94) !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5) !important;
	font-size: 1rem !important;
	line-height: 1.55 !important;
}

.elegance-services .elegance-service-card > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	min-height: 280px !important;
	padding: var(--k-space-4) !important;
}

@media (max-width: 767px) {
	.elegance-services .karppiset-services-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
}

/* ═══ Homepage referenssit teaser — multi-image mosaic ═══ */
.elegance-refs-teaser .e-con.e-parent > .e-con-inner > .e-con {
	align-items: center !important;
	gap: var(--k-space-5) !important;
}

.elegance-refs-teaser .elementor-gallery__container {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

.elegance-refs-teaser .e-gallery-image {
	border-radius: 12px !important;
	overflow: hidden !important;
}

/* ═══ Referenssit page — alternating blocks ═══ */
.elegance-ref-block .e-con.e-parent > .e-con-inner > .e-con {
	align-items: center !important;
	gap: var(--k-space-5) !important;
}

.elegance-ref-block .elementor-gallery__container {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

@media (max-width: 767px) {
	.elegance-ref-block .e-con.e-parent > .e-con-inner > .e-con {
		flex-direction: column !important;
	}
}

/* ═══ Page hero — same system as landing hero ═══ */
.elegance-page-hero .e-con.e-parent > .e-con-inner,
.elegance-page-hero .karppiset-hero-content,
.elegance-page-hero .karppiset-hero-content > .e-con-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.elegance-page-intro {
	padding-top: var(--k-space-4) !important;
	padding-bottom: var(--k-space-2) !important;
}

.elegance-page-intro .elementor-widget-text-editor p {
	max-width: 40rem;
	color: var(--k-ink-muted);
	font-size: var(--k-text-base);
	line-height: 1.65;
	margin: 0 !important;
}

@media (max-width: 767px) {
	.elegance-page-hero {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ═══ CTA — compact horizontal band ═══ */
.elegance-cta.karppiset-cta {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.elegance-cta.karppiset-cta > .e-con.e-parent > .e-con-inner {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.elegance-cta .karppiset-cta-copy > .e-con {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	grid-template-rows: auto auto !important;
	align-items: center !important;
	column-gap: var(--k-space-4) !important;
	row-gap: var(--k-space-1) !important;
	width: 100% !important;
}

.elegance-cta .karppiset-cta-copy > .e-con .elementor-widget-heading {
	grid-column: 1 !important;
	grid-row: 1 !important;
	margin: 0 !important;
}

.elegance-cta .karppiset-cta-copy > .e-con .elementor-widget-text-editor {
	grid-column: 1 !important;
	grid-row: 2 !important;
	margin: 0 !important;
}

.elegance-cta .karppiset-cta-copy > .e-con .elementor-widget-button {
	grid-column: 2 !important;
	grid-row: 1 / span 2 !important;
	align-self: center !important;
	margin: 0 !important;
}

.elegance-cta .karppiset-cta-copy .elementor-heading-title {
	text-align: left !important;
}

.elegance-cta .karppiset-cta-copy .elementor-widget-text-editor p {
	text-align: left !important;
	max-width: none !important;
}

@media (max-width: 767px) {
	.elegance-cta .karppiset-cta-copy > .e-con {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		text-align: left !important;
	}

	.elegance-cta .karppiset-cta-copy .elementor-heading-title,
	.elegance-cta .karppiset-cta-copy .elementor-widget-text-editor p {
		text-align: left !important;
	}

	.elegance-cta .karppiset-cta-copy > .e-con .elementor-widget-button {
		width: 100% !important;
	}
}

/* ═══ Contact page layout fix ═══ */
.elegance-contact-layout > .e-con-inner {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--k-space-4) !important;
	align-items: stretch !important;
	padding-top: var(--k-space-5) !important;
	padding-bottom: var(--k-space-5) !important;
}

.elegance-contact-grid.e-con,
.elegance-contact-grid {
	display: grid !important;
	grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.2fr) !important;
	gap: var(--k-space-5) !important;
	align-items: stretch !important;
	width: 100% !important;
}

.elegance-contact-grid > .e-con-inner {
	display: contents !important;
}

.elegance-contact-grid > .e-con,
.elegance-contact-grid > .elementor-element {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	height: 100% !important;
}

.elegance-contact-layout > .e-con-inner > .elementor-widget-heading {
	margin-bottom: 0 !important;
}

.karppiset-contact-fields {
	background: #fff !important;
	border: 1px solid var(--k-border) !important;
	border-top: 3px solid var(--k-accent) !important;
	border-radius: var(--k-radius-lg) !important;
	padding: var(--k-space-4) !important;
	box-shadow: var(--k-shadow-sm) !important;
}

.karppiset-contact-form-col {
	background: var(--k-bg-alt) !important;
	border-radius: var(--k-radius-lg) !important;
	padding: var(--k-space-4) !important;
	border: 1px solid var(--k-border) !important;
}

.karppiset-contact-fields .elementor-icon-list-text,
.karppiset-contact-fields .elementor-icon-list-text a {
	color: var(--k-ink) !important;
	font-size: 1rem !important;
}

@media (max-width: 767px) {
	.elegance-contact-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Referenssit intro — full width left */
.elegance-ref-intro .e-con.e-parent > .e-con-inner > .e-con,
.elegance-ref-intro > .e-con-inner > .e-con {
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	max-width: 720px !important;
}

.elegance-ref-intro .elementor-heading-title,
.elegance-ref-intro .elementor-widget-text-editor,
.elegance-ref-intro .elementor-widget-text-editor p {
	text-align: left !important;
}

/* CTA tighter band */
.elegance-cta.karppiset-cta {
	min-height: 0 !important;
}

.elegance-cta .karppiset-cta-copy > .e-con {
	min-height: 0 !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* ═══ Footer business info ═══ */
.elegance-footer .elementor-widget-text-editor a {
	color: var(--k-accent) !important;
}

.elegance-footer .elementor-widget-text-editor a:hover {
	color: var(--k-accent-dark) !important;
}

.elegance-hero .e-con-inner,
.karppiset-hero .e-con-inner {
	padding: var(--k-space-5) var(--k-gutter-desktop) !important;
}

/* Page heroes share landing hero height/radius — no compact squeeze */
.elegance-page-hero .elementor-heading-title,
.elegance-page-hero h1 {
	margin: 0 0 0.35em !important;
}

/* CTA — true compact band */
.elegance-cta.karppiset-cta {
	min-height: 0 !important;
}

.elegance-cta.karppiset-cta > .e-con-inner {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

.elegance-cta .karppiset-cta-copy,
.elegance-cta .karppiset-cta-copy > .e-con,
.elegance-cta .karppiset-cta-copy > .e-con-inner {
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.elegance-cta .elementor-heading-title {
	margin: 0 0 4px !important;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem) !important;
	line-height: 1.2 !important;
}

.elegance-cta .karppiset-cta-subtitle p {
	margin: 0 !important;
}

/* Mobile hero true edge-to-edge */
@media (max-width: 767px) {
	.elegance-hero.karppiset-hero,
	.elegance-hero {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		position: relative !important;
		left: 0 !important;
	}

	.elegance-hero > .e-con-inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

.elegance-hero .elementor-heading-title,
.elegance-hero h1 {
	font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
	line-height: 1.15 !important;
}

/* ═══ Audit fixes v8.1 ═══ */
html {
	overflow-x: clip;
}

.elegance-cta .elementor-widget-text-editor,
.elegance-cta .elementor-widget-text-editor p,
.elegance-cta .karppiset-cta-subtitle p {
	color: var(--k-ink-muted) !important;
}

.elegance-lighting-note {
	margin-top: var(--k-space-3);
	font-size: var(--k-text-sm);
	color: var(--k-ink-muted);
}

.elegance-lighting-note a {
	color: var(--k-accent);
}

.elegance-footer .elementor-widget-theme-site-logo img,
.elegance-footer .custom-logo-link img {
	filter: none !important;
}

.elegance-contact-layout .e-con[style*="margin-top"],
.elegance-contact-grid .e-con {
	margin-top: 0 !important;
}

@media (max-width: 767px) {
	.elegance-hero .elementor-widget-heading,
	.elegance-hero .elementor-widget-text-editor,
	.elegance-page-hero .elementor-widget-heading {
		max-width: 100% !important;
		width: 100% !important;
		--container-widget-width: 100% !important;
	}

	.elegance-ref-block .elementor-gallery__container {
		grid-template-columns: 1fr !important;
	}

	.elegance-refs-teaser .elementor-gallery__container {
		grid-template-columns: 1fr !important;
	}

	.elegance-services .karppiset-services-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 899px) and (min-width: 768px) {
	.elegance-services .karppiset-services-grid > .e-con-inner {
		grid-template-columns: 1fr !important;
	}
}

.elegance-ref-intro .e-con.e-parent > .e-con-inner > .e-con {
	flex-direction: column !important;
}

.elegance-ref-block--text-right .e-con.e-parent > .e-con-inner > .e-con {
	flex-direction: row-reverse !important;
}

.elegance-ref-block--text-left .e-con.e-parent > .e-con-inner > .e-con {
	flex-direction: row !important;
}

@media (max-width: 767px) {
	.elegance-ref-block--text-right .e-con.e-parent > .e-con-inner > .e-con,
	.elegance-ref-block--text-left .e-con.e-parent > .e-con-inner > .e-con {
		flex-direction: column !important;
	}
}

/* --- Typography unification (Elementor default fonts Roboto/Domine disabled) --- */
/* Content headings use the brand serif (Playfair Display), matching the hero H1,
   so section titles no longer fall back to Elementor's Domine/system serif. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title {
	font-family: "Playfair Display", Georgia, serif !important;
}

/* Body copy, lists and buttons use the brand sans (Source Sans 3). */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor strong {
	font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
}

/* Footer widget titles stay in the compact brand sans, not serif. */
.karppiset-footer .elementor-widget-heading .elementor-heading-title,
.elegance-footer .elementor-widget-heading .elementor-heading-title {
	font-family: "DM Sans", system-ui, sans-serif !important;
}

/* ============================================================
   Audit fixes (2026-07-22) — accessibility (WCAG 2.2), performance, consistency
   ============================================================ */

/* a11y 2.4.7 / 2.4.11 — a visible focus ring on EVERY interactive element.
   The earlier :focus-visible rules used an allow-list that missed gallery
   items, plain prose links, and footer legal links. */
a:focus-visible,
button:focus-visible,
.e-gallery-item:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid #e06b55 !important;
	outline-offset: 3px !important;
}

/* a11y 1.4.3 — CTA buttons: white on coral #e06b55 was only 3.28:1. Deepen to a
   compliant shade (~4.9:1 with white) and use ONE solid style everywhere
   (drops the coral->purple gradient) for a consistent, grounded primary CTA. */
:root { --k-cta-bg: #bf4a30; --k-cta-bg-hover: #a23c25; }
.elementor-button,
.elementor-button.elementor-button-link,
button[type="submit"],
.elegance-hero .elementor-button,
.elegance-cta .elementor-widget-button .elementor-button,
.elegance-cta.karppiset-cta .elementor-widget-button .elementor-button.elementor-button-link {
	background-color: var(--k-cta-bg) !important;
	background-image: none !important;
	color: #ffffff !important;
	fill: #ffffff !important;
}
.elementor-button:hover,
.elementor-button.elementor-button-link:hover,
button[type="submit"]:hover,
.elegance-hero .elementor-button:hover,
.elegance-cta.karppiset-cta .elementor-widget-button .elementor-button.elementor-button-link:hover {
	background-color: var(--k-cta-bg-hover) !important;
	background-image: none !important;
	color: #ffffff !important;
}

/* a11y 1.4.3 + design — service-card photos: enforce a consistent dark scrim so
   text always has contrast and the four tiles read as one cohesive set. */
.elegance-service-card, .karppiset-service-card { position: relative; isolation: isolate; }
.elegance-service-card::before,
.karppiset-service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(18,18,26,0.82) 0%, rgba(18,18,26,0.5) 58%, rgba(18,18,26,0.42) 100%);
}
.elegance-service-card > *,
.karppiset-service-card > * { position: relative; z-index: 1; }

/* a11y 1.4.3 — hero overlay was lightest (~50%) exactly where the centered H1
   sits; flatten to a uniform >=62% dark band so headline contrast holds even
   with a brighter future photo. */
.karppiset-hero .elementor-background-overlay {
	background: linear-gradient(to bottom, rgba(18,18,26,0.72) 0%, rgba(18,18,26,0.62) 45%, rgba(18,18,26,0.72) 100%) !important;
}

/* perf (CLS) — reserve gallery item height before the JS paints the background
   so galleries don't shift layout on load (matches the 3:2 gallery setting). */
.elementor-widget-gallery .e-gallery-image {
	aspect-ratio: 3 / 2;
}

/* Header call button: compact on mobile so "Soita 050 589 7416" sits neatly
   beside the logo and hamburger. */
@media (max-width: 767px) {
	.header-button {
		font-size: 13px !important;
		padding: 8px 11px !important;
		line-height: 1.25 !important;
		white-space: nowrap !important;
	}
}

/* ===================================================================
   ELEGANCE DARK THEME - MOVED FROM FOOTER WIDGET 2026-07-30
   Was pasted into Custom HTML widget custom_html-508 in the Kadence
   footer widget area, so it loaded after the whole page had already
   painted in the old coral palette - a full-page FOUC on every load.
   Moved here so it loads from <head>. Source backed up to
   novo-media/clients/elegance-dark-theme.css.bak-2026-07-30
   =================================================================== */

.site-footer,
.site-footer-wrap,
.site-middle-footer-wrap,
.site-bottom-footer-wrap {
 background: #12121a !important;
}
.site-middle-footer-inner-wrap {
 max-width: var(--k-content-max) !important;
 margin-left: auto !important;
 margin-right: auto !important;
 display: grid !important;
 grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr) minmax(0, 1.1fr) !important;
 gap: 48px 56px !important;
 align-items: start !important;
}
.site-footer .footer-widget-area-inner {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 16px;
}
.site-footer .elegance-fw-logo {
 width: min(200px, 100%);
 height: auto;
 display: block;
}
.site-footer .elegance-fw-tagline {
 color: rgba(255, 255, 255, 0.72);
 font-size: var(--k-text-sm);
 line-height: 1.65;
 margin: 12px 0 0;
 max-width: 26rem;
}
.site-footer .elegance-fw-title,
.site-footer .widget-title {
 font-size: 0.75rem !important;
 font-weight: 700 !important;
 letter-spacing: 0.08em !important;
 text-transform: uppercase !important;
 color: rgba(255, 255, 255, 0.45) !important;
 margin: 0 0 4px !important;
}
.site-footer .elegance-fw-list,
.site-footer .widget_nav_menu ul.menu {
 list-style: none !important;
 margin: 0 !important;
 padding: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 10px !important;
}
.site-footer .elegance-fw-list li,
.site-footer .widget_nav_menu ul.menu li {
 margin: 0 !important;
 color: rgba(255, 255, 255, 0.88);
 font-size: var(--k-text-sm);
 line-height: 1.5;
}
.site-footer .elegance-fw-list a,
.site-footer .widget_nav_menu ul.menu a {
 color: rgba(255, 255, 255, 0.78) !important;
 text-decoration: none;
 font-size: var(--k-text-sm);
 line-height: 1.5;
 transition: color var(--k-duration) var(--k-ease);
}
.site-footer .elegance-fw-list a:hover,
.site-footer .widget_nav_menu ul.menu a:hover {
 color: #fff !important;
}
.site-bottom-footer-inner-wrap {
 max-width: var(--k-content-max) !important;
 margin-left: auto !important;
 margin-right: auto !important;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: 20px !important;
 color: rgba(255, 255, 255, 0.55);
 font-size: 0.85rem;
}
.site-bottom-footer-inner-wrap a {
 color: rgba(255, 255, 255, 0.75);
 text-decoration: none;
}
.site-bottom-footer-inner-wrap a:hover {
 color: #fff;
}
@media (max-width: 1024px) {
 .site-middle-footer-inner-wrap {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
 gap: 36px 40px !important;
 }
}
@media (max-width: 767px) {
 .site-middle-footer-inner-wrap {
 grid-template-columns: minmax(0, 1fr) !important;
 gap: 32px !important;
 }
}
.elementor-widget-image-gallery .gallery {
 display: grid !important;
 gap: 12px !important;
 margin: 0 !important;
}
.elementor-widget-image-gallery .gallery-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.elementor-widget-image-gallery .gallery-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.elementor-widget-image-gallery .gallery-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.elementor-widget-image-gallery .gallery-item {
 width: 100% !important;
 max-width: none !important;
 padding: 0 !important;
 margin: 0 !important;
 float: none !important;
 overflow: hidden;
 border-radius: 10px;
}
.elementor-widget-image-gallery .gallery-item img {
 width: 100% !important;
 height: 100% !important;
 aspect-ratio: 3 / 2;
 object-fit: cover;
 display: block;
 border: 0 !important;
 border-radius: 10px;
 transition: transform var(--k-duration, 0.3s) var(--k-ease, ease);
}
.elementor-widget-image-gallery .gallery-item:hover img {
 transform: scale(1.04);
}
.elementor-widget-image-gallery .gallery-icon { margin: 0 !important; }
.elementor-widget-image-gallery .gallery-caption { display: none !important; }
@media (max-width: 767px) {
 .elementor-widget-image-gallery .gallery-columns-3,
 .elementor-widget-image-gallery .gallery-columns-4 {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
}
.gform_wrapper h2.gform_title,
.gform_wrapper .gform_description {
 display: none !important;
}
.gform_wrapper form {
 margin: 0;
}
.gform_wrapper .gform_fields {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 16px 18px !important;
}
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield:has(textarea) {
 grid-column: 1 / -1;
}
.gform_wrapper .gfield_label {
 font-size: var(--k-text-sm, 0.875rem) !important;
 font-weight: 600 !important;
 color: var(--k-ink, #12121a) !important;
 margin-bottom: 6px !important;
 display: block;
}
.gform_wrapper .gfield_required {
 color: var(--k-accent-text, #c85544) !important;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
 width: 100% !important;
 padding: 13px 15px !important;
 border: 1px solid var(--k-border, #e2e8f0) !important;
 border-radius: 8px !important;
 background: #fff !important;
 font-family: inherit !important;
 font-size: var(--k-text-base, 1.0625rem) !important;
 line-height: 1.5 !important;
 color: var(--k-ink, #12121a) !important;
 transition: border-color 0.2s ease, box-shadow 0.2s ease;
 box-sizing: border-box;
}
.gform_wrapper textarea {
 min-height: 140px !important;
 resize: vertical;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
 outline: none !important;
 border-color: var(--k-focus-ring, #e06b55) !important;
 box-shadow: 0 0 0 3px var(--k-focus-glow, rgba(224, 107, 85, 0.22)) !important;
}
.gform_wrapper .gform_footer {
 padding: 18px 0 0 !important;
 margin: 0 !important;
}
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
 background: var(--k-accent-btn, #e06b55) !important;
 color: #fff !important;
 border: 0 !important;
 border-radius: 8px !important;
 padding: 15px 30px !important;
 font-family: inherit !important;
 font-size: var(--k-text-base, 1.0625rem) !important;
 font-weight: 600 !important;
 cursor: pointer;
 transition: background 0.2s ease, transform 0.2s ease;
 box-shadow: var(--k-shadow-btn, 0 4px 14px rgba(224, 107, 85, 0.28));
}
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
 background: var(--k-accent-btn-hover, #c85544) !important;
 transform: translateY(-1px);
}
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible {
 outline: 3px solid var(--k-focus-ring, #e06b55) !important;
 outline-offset: 2px;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
 background: transparent !important;
 border: 0 !important;
 color: var(--k-accent-text, #c85544) !important;
 font-size: var(--k-text-sm, 0.875rem) !important;
 padding: 6px 0 0 !important;
}
.gform_wrapper .gform_validation_errors {
 border-radius: 8px !important;
 border-color: var(--k-accent, #e06b55) !important;
}
.gform_confirmation_message {
 padding: 18px 20px;
 border-radius: 10px;
 background: var(--k-accent-light, #f7f0ee);
 color: var(--k-ink, #12121a);
 font-size: var(--k-text-base, 1.0625rem);
 line-height: 1.6;
}
.elegance-contact-fallback {
 margin-top: 22px;
 padding-top: 18px;
 border-top: 1px solid var(--k-border, #e2e8f0);
 font-size: var(--k-text-sm, 0.875rem);
 line-height: 1.65;
}
.elegance-contact-fallback p { margin: 0 0 6px; }
.elegance-contact-fallback a { color: var(--k-accent-text, #c85544); }
@media (max-width: 640px) {
 .gform_wrapper .gform_fields {
 grid-template-columns: 1fr !important;
 }
}
.site-footer .site-middle-footer-wrap > .site-footer-row-container-inner,
.site-footer .site-bottom-footer-wrap > .site-footer-row-container-inner {
 background: var(--k-ink) !important;
}
@media (min-width: 768px) {
 .site-main-header-wrap .site-header-row-container-inner > .site-container,
 #mobile-header .site-header-row-container-inner > .site-container {
 padding-left: 0 !important;
 padding-right: 0 !important;
 }
}
.elementor-widget-heading h2.elementor-heading-title {
 font-size: clamp(1.75rem, 2.6vw, var(--k-text-2xl)) !important; 
 line-height: 1.15 !important;
 letter-spacing: -0.01em !important;
}
.elegance-services .elegance-service-card h3.elementor-heading-title {
 font-size: clamp(1.25rem, 2vw, 1.5rem) !important; 
 line-height: 1.25 !important;
}
@media (max-width: 767px) {
 .elementor-widget-heading h2.elementor-heading-title {
 font-size: 1.375rem !important;
 }
}
.elegance-hero > .e-con-inner > .e-con.e-child {
 --overlay-opacity: 1 !important;
}
.elegance-hero > .e-con-inner > .e-con.e-child::before {
 background-color: transparent !important;
 background-image: linear-gradient(to bottom,
 rgba(18, 18, 26, 0.55) 0%,
 rgba(18, 18, 26, 0.62) 45%,
 rgba(18, 18, 26, 0.80) 100%) !important;
}
@media (min-width: 768px) {
 .elegance-hero > .e-con-inner > .e-con.e-child {
 --border-radius: var(--k-radius-lg) !important;
 }
}
@media (max-width: 767px) {
 .elegance-hero > .e-con-inner > .e-con.e-child > .e-con.e-child {
 min-height: 0 !important;
 }
}
#mobile-header .header-button,
#mobile-header .header-button:visited {
 background: var(--k-cta-bg) !important;
 color: #fff !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-height: 44px !important;
 padding: 0 14px !important;
 font-size: 14px !important;
 line-height: 1.2 !important;
 border-radius: var(--k-radius) !important;
}
#mobile-header .header-button:hover,
#mobile-header .header-button:focus {
 background: var(--k-cta-bg-hover) !important;
 color: #fff !important;
}
.elegance-ref-block,
.elegance-refs-teaser,
.elegance-contact-layout {
 padding-left: var(--k-gutter) !important;
 padding-right: var(--k-gutter) !important;
}
@media (min-width: 768px) {
 .elegance-ref-block,
 .elegance-refs-teaser,
 .elegance-contact-layout {
 padding-left: var(--k-gutter-desktop) !important;
 padding-right: var(--k-gutter-desktop) !important;
 }
}
.elegance-ref-block,
.elegance-refs-teaser {
 padding-top: var(--k-section-y) !important;
 padding-bottom: var(--k-section-y) !important;
}
.elementor-widget-image-gallery .gallery-item img {
 aspect-ratio: 4 / 3 !important;
 object-position: center 42% !important;
 border-radius: var(--k-radius) !important; 
}
.elementor-widget-image-gallery .gallery-item {
 border-radius: var(--k-radius) !important;
}
.elementor-widget-image-gallery .gallery[class*="gallery-columns-"] {
 gap: var(--k-space-2) !important;
}
@media (max-width: 640px) {
 .elementor-widget-image-gallery .gallery[class*="gallery-columns-"] {
 grid-template-columns: 1fr !important;
 }
}
@media (min-width: 768px) {
 .elegance-ref-block .elementor-widget-image-gallery .gallery[class*="gallery-columns-"] {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
}
.elementor-widget-image-gallery .gallery[class*="gallery-columns-"]:has(.gallery-item:only-child) {
 grid-template-columns: minmax(0, 1fr) !important;
 max-width: 640px;
}
@media (max-width: 767px) {
 .elegance-ref-block > .e-con-inner > .e-con {
 flex-direction: column !important;
 flex-wrap: nowrap !important;
 }
}
.elegance-cta.karppiset-cta > .e-con-inner {
 padding-top: var(--k-space-5) !important;
 padding-bottom: var(--k-space-5) !important;
}
.elegance-cta.karppiset-cta {
 border-top-color: var(--k-cta-bg) !important;
}
.elementor-button,
.elementor-button .elementor-button-text {
 font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
 font-weight: 600 !important;
}
#mobile-header .menu-toggle-open.drawer-toggle,
.menu-toggle-open.drawer-toggle,
.scroll-up-wrap .scroll-up-button {
 background-color: transparent !important;
 border-color: rgba(232,184,75,.55) !important;
}
#mobile-header .menu-toggle-open.drawer-toggle:hover,
.scroll-up-wrap .scroll-up-button:hover {
 background-color: var(--k-cta-bg-hover) !important;
 border-color: var(--k-cta-bg-hover) !important;
}
.karppiset-contact-form-col {
 background: var(--k-bg) !important;
 border-top: 3px solid var(--k-accent) !important;
 box-shadow: var(--k-shadow-surface) !important;
}
.elegance-contact-fallback {
 background: transparent !important;
 border: 0 !important;
 border-top: 1px solid var(--k-border) !important;
 border-radius: 0 !important;
 margin-top: 0 !important;
 padding: var(--k-space-3) 0 0 !important;
 font-size: var(--k-text-base) !important;
}
.elegance-contact-fallback p:first-child strong {
 font-size: var(--k-text-lg);
 color: var(--k-ink);
}
.site-footer .widget-title,
.site-footer .elegance-fw-title {
 font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
}
.site-footer .site-middle-footer-inner-wrap {
 padding-top: var(--k-space-6) !important;
 padding-bottom: var(--k-space-6) !important;
}
.site-footer .site-bottom-footer-inner-wrap {
 padding-top: var(--k-space-3) !important;
 padding-bottom: var(--k-space-3) !important;
}
.site-middle-footer-inner-wrap .widget,
.site-bottom-footer-inner-wrap .widget {
 margin-bottom: 0 !important;
}
.site-footer .site-container {
 padding-left: var(--k-gutter) !important;
 padding-right: var(--k-gutter) !important;
}
@media (min-width: 768px) {
 .site-footer .site-container {
 padding-left: var(--k-gutter-desktop) !important;
 padding-right: var(--k-gutter-desktop) !important;
 }
}
body.page-id-24 .elementor .e-con-boxed > .e-con-inner {
 max-width: 46rem !important;
 margin-left: auto !important;
 margin-right: auto !important;
}
body.page-id-24 .elementor-element.e-con-boxed {
 padding-left: var(--k-gutter) !important;
 padding-right: var(--k-gutter) !important;
 padding-top: var(--k-space-6) !important;
 padding-bottom: var(--k-space-7) !important;
}
body.page-id-24 .elementor-widget-text-editor h1 {
 font-size: clamp(1.75rem, 4vw, 2.75rem);
 font-weight: 700;
 line-height: 1.15;
 color: var(--k-ink);
 margin: 0 0 var(--k-space-3);
}
body.page-id-24 .elementor-widget-text-editor h2 {
 font-size: var(--k-text-xl);
 font-weight: 700;
 line-height: 1.25;
 color: var(--k-ink);
 margin: var(--k-space-5) 0 var(--k-space-1);
}
body.page-id-24 .elementor-widget-text-editor p {
 margin: 0 0 var(--k-space-2);
 line-height: 1.7;
}
@media (min-width: 768px) {
 body.page-id-24 .elementor-element.e-con-boxed {
 padding-left: var(--k-gutter-desktop) !important;
 padding-right: var(--k-gutter-desktop) !important;
 }
}
.elegance-hero {
 padding-top: 0 !important;
 padding-bottom: 0 !important;
}
.site-header-row-container.item-is-fixed,
#main-header .site-main-header-wrap.item-is-fixed {
 background-color: var(--k-header-bg) !important;
 box-shadow: 0 2px 14px rgba(18, 18, 26, 0.22) !important;
 transition: box-shadow 0.25s ease;
}
@media (max-width: 767px) {
 body {
 overflow-x: clip !important;
 }
}
.site-header-main-section-right {
 display: flex;
 align-items: center;
 gap: clamp(14px, 1.8vw, 28px);
}
.site-header-main-section-right > .site-header-item {
 margin: 0 !important;
}
.main-navigation .menu > li:last-child > a {
 margin-right: 0 !important;
}
.main-navigation .menu > li > a {
 position: relative;
 transition: color 0.2s ease, background-color 0.2s ease !important;
}
.main-navigation .menu > li > a::after {
 content: "";
 position: absolute;
 left: 0.75em;
 right: 0.75em;
 bottom: 0.55em;
 height: 2px;
 border-radius: 2px;
 background: var(--k-accent);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-navigation .menu > li > a:hover::after,
.main-navigation .menu > li > a:focus-visible::after {
 transform: scaleX(1);
}
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .menu > li.current_page_item > a {
 box-shadow: none !important;
 border-radius: 6px !important;
}
.main-navigation .menu > li.current-menu-item > a::after,
.main-navigation .menu > li.current_page_item > a::after {
 transform: scaleX(1);
}
.main-navigation .menu > li > a:focus-visible,
.site-header .header-button:focus-visible,
.site-branding a:focus-visible {
 outline: 2px solid #fff !important;
 outline-offset: 2px !important;
 border-radius: 6px;
}
#main-header .header-button,
#mobile-header .header-button {
 transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
 box-shadow: none !important;
 font-weight: 600 !important;
}
#main-header .header-button:hover,
#mobile-header .header-button:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45) !important;
}
#main-header .header-button:active,
#mobile-header .header-button:active {
 transform: translateY(0);
}
.site-branding .custom-logo {
 transition: opacity 0.2s ease;
}
.site-branding a:hover .custom-logo {
 opacity: 0.85;
}
#mobile-drawer .drawer-inner {
 background: var(--k-header-bg) !important;
}
#mobile-drawer .drawer-header {
 padding: 14px 18px !important;
 border-bottom: 1px solid var(--k-header-border);
}
#mobile-drawer .drawer-nav-drop-wrap,
#mobile-drawer .drawer-navigation .menu > li > a {
 color: rgba(255, 255, 255, 0.92) !important;
 font-size: 1.05rem !important;
 padding: 15px 18px !important;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
 transition: background-color 0.2s ease, color 0.2s ease;
}
#mobile-drawer .drawer-navigation .menu > li > a:hover,
#mobile-drawer .drawer-navigation .menu > li.current-menu-item > a {
 color: #fff !important;
 background: rgba(255, 255, 255, 0.08) !important;
}
#mobile-drawer .drawer-navigation .menu > li.current-menu-item > a {
 box-shadow: inset 3px 0 0 var(--k-accent) !important;
}
#mobile-drawer .drawer-navigation .menu > li > a {
 min-height: 48px;
 display: flex;
 align-items: center;
}
@media (prefers-reduced-motion: reduce) {
 .main-navigation .menu > li > a::after,
 #main-header .header-button,
 #mobile-header .header-button,
 .site-branding .custom-logo,
 #masthead.site-header .site-main-header-wrap {
 transition: none !important;
 }
 #main-header .header-button:hover,
 #mobile-header .header-button:hover {
 transform: none;
 }
}
.elegance-services > .e-con-inner > .e-con.e-child,
.elegance-services .e-con-inner > .e-con:has(.karppiset-services-grid) {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 gap: clamp(16px, 2vw, 24px) !important;
 align-items: stretch !important;
}
.elegance-services .karppiset-services-grid {
 display: contents !important;
}
.elegance-services .e-con-inner > .e-con > .e-con:not(.karppiset-services-grid):first-child {
 grid-column: 1 / -1 !important;
}
.elegance-services .elegance-service-card {
 --overlay-opacity: 0 !important;
 background-image: none !important;
 background-color: #fff !important;
 border: 1px solid var(--k-border) !important;
 border-radius: 14px !important;
 padding: clamp(22px, 2.4vw, 32px) !important;
 min-height: 0 !important;
 justify-content: flex-start !important;
 gap: 10px !important;
 box-shadow: 0 1px 2px rgba(18, 18, 26, 0.04);
 transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
 position: relative;
 overflow: hidden;
}
.elegance-services .elegance-service-card::after {
 content: "";
 position: absolute;
 inset: 0 0 auto 0;
 height: 3px;
 background: var(--k-accent);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.elegance-services .elegance-service-card:hover {
 transform: translateY(-3px);
 border-color: rgba(var(--k-accent-rgb), 0.45) !important;
 box-shadow: 0 14px 30px -18px rgba(18, 18, 26, 0.45);
}
.elegance-services .elegance-service-card:hover::after {
 transform: scaleX(1);
}
.elegance-services .elegance-service-card h3.elementor-heading-title,
.elegance-services .elegance-service-card .elementor-heading-title {
 color: var(--k-ink) !important;
 font-size: clamp(1.15rem, 1.6vw, 1.375rem) !important;
 line-height: 1.25 !important;
 margin: 0 !important;
 text-shadow: none !important;
}
.elegance-services .elegance-service-card .elementor-widget-text-editor,
.elegance-services .elegance-service-card .elementor-widget-text-editor p {
 color: var(--k-ink-muted) !important;
 font-size: var(--k-text-sm) !important;
 line-height: 1.6 !important;
 margin: 0 !important;
 text-shadow: none !important;
}
.elegance-services .elegance-lighting-note {
 margin-top: clamp(20px, 2.5vw, 30px) !important;
}
.elegance-services .elegance-lighting-note p {
 display: inline-block;
 margin: 0 !important;
 padding: 12px 18px;
 border-radius: 10px;
 background: var(--k-accent-light);
 color: var(--k-ink) !important;
 font-size: var(--k-text-sm) !important;
 line-height: 1.5;
}
.elegance-services .elegance-lighting-note a {
 color: var(--k-accent-text) !important;
 font-weight: 600;
 text-decoration: underline;
 text-underline-offset: 2px;
}
@media (max-width: 767px) {
 .elegance-services > .e-con-inner > .e-con.e-child,
 .elegance-services .e-con-inner > .e-con:has(.karppiset-services-grid) {
 grid-template-columns: 1fr !important;
 }
}
@media (prefers-reduced-motion: reduce) {
 .elegance-services .elegance-service-card,
 .elegance-services .elegance-service-card::after {
 transition: none !important;
 }
 .elegance-services .elegance-service-card:hover {
 transform: none;
 }
}
#mobile-drawer .drawer-header .drawer-toggle {
 position: relative !important;
 background-color: transparent !important;
 color: #fff !important;
 min-width: 44px !important;
 min-height: 44px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 border-radius: var(--k-radius) !important;
 transition: background-color var(--k-duration) var(--k-ease);
}
#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .drawer-header .drawer-toggle:focus-visible {
 background-color: rgba(255, 255, 255, 0.12) !important;
}
#mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar {
 background: currentColor !important;
}
#masthead.site-header,
.site-header .site-mobile-header-wrap {
 position: static !important;
}
@media (max-width: 1024px) {
 #masthead.site-header {
 position: sticky !important;
 top: 0;
 z-index: 500;
 box-shadow: 0 2px 12px -4px rgba(18, 18, 26, 0.35);
 }
}
#masthead .site-main-header-wrap.item-is-fixed {
 box-shadow: 0 2px 12px -4px rgba(18, 18, 26, 0.35);
}
.main-navigation .primary-menu-container > ul li.menu-item > a,
#mobile-drawer .mobile-navigation ul li,
#mobile-drawer .drawer-navigation .menu > li > a {
 font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
 font-weight: 600 !important;
}
.main-navigation .menu > li > a::after {
 left: 1.15em;
 right: 1.15em;
 background: rgba(255, 255, 255, 0.55);
}
.main-navigation .menu > li.current-menu-item > a::after,
.main-navigation .menu > li.current_page_item > a::after {
 background: var(--k-accent);
}
@media (min-width: 768px) {
 #masthead .main-navigation .menu > li:last-child > a {
 padding-right: 1.15em !important;
 }
}
.main-navigation .menu > li.current-menu-item > a:hover,
.main-navigation .menu > li.current_page_item > a:hover,
.main-navigation .menu > li.current-menu-item > a:focus-visible,
.main-navigation .menu > li.current_page_item > a:focus-visible {
 background: rgba(255, 255, 255, 0.1) !important;
}
#main-header .header-button,
#main-header .header-button:visited {
 border-radius: var(--k-radius) !important;
}
@media (min-width: 1025px) {
 #main-header .header-button {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 min-height: 44px !important;
 font-size: var(--k-text-base) !important;
 line-height: 1.2 !important;
 }
}
#mobile-drawer .drawer-content {
 padding-left: 0 !important;
 padding-right: 0 !important;
}
#mobile-drawer .drawer-navigation .menu > li:last-child > a {
 border-bottom: 0 !important;
}
html {
 scroll-padding-top: 96px;
}
@media (max-width: 767px) {
 html {
 scroll-padding-top: 80px;
 }
}
.karppiset-contact-form-col .elementor-widget-shortcode:has(> .elementor-shortcode:empty) {
 display: none !important;
}
.karppiset-contact-form-col .elementor-widget-shortcode:has(> .elementor-shortcode:empty) + .elementor-widget .elegance-contact-fallback {
 border-top: 0 !important;
 padding-top: 0 !important;
}
:root {
 --k-cta-rgb: 191, 74, 48;
 --k-shadow-btn: 0 1px 2px rgba(21, 28, 40, 0.1), 0 4px 14px rgba(var(--k-cta-rgb), 0.28);
 --k-shadow-btn-hover: 0 2px 4px rgba(21, 28, 40, 0.12), 0 8px 22px rgba(var(--k-cta-rgb), 0.38);
}
.site-footer .widget-title,
.site-footer .elegance-fw-title {
 color: rgba(255, 255, 255, 0.58) !important;
}
@media (prefers-reduced-motion: reduce) {
 #mobile-drawer .drawer-header .drawer-toggle {
 transition: none !important;
 }
}
.elegance-services .elegance-service-card,
.elementor-widget-image-gallery .gallery-item,
.elementor-widget-image-gallery .gallery-item img {
 border-radius: 16px !important;
}
.elegance-hp {
 position: absolute !important;
 left: -9999px !important;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
.gform_wrapper button.gform_button {
 background: var(--k-accent-btn, #e06b55) !important;
 color: #fff !important;
 border: 0 !important;
 border-radius: 8px !important;
 padding: 15px 30px !important;
 font-family: inherit !important;
 font-size: var(--k-text-base, 1.0625rem) !important;
 font-weight: 600 !important;
 cursor: pointer;
 transition: background 0.2s ease, transform 0.2s ease;
 box-shadow: var(--k-shadow-btn, 0 4px 14px rgba(224, 107, 85, 0.28));
}
.gform_wrapper button.gform_button:hover {
 background: var(--k-accent-btn-hover, #c85544) !important;
 transform: translateY(-1px);
}
.gform_wrapper button.gform_button:focus-visible {
 outline: 3px solid var(--k-focus-ring, #e06b55) !important;
 outline-offset: 2px;
}
.elegance-ref-block + .elegance-ref-block {
 padding-top: 0 !important;
}
.elegance-ref-block:has(+ .elegance-ref-block) {
 padding-bottom: clamp(48px, 6vw, 72px) !important;
}
.elegance-ref-block--text-right {
 padding-bottom: clamp(48px, 6vw, 72px) !important;
}
.elegance-ref-block + .elegance-ref-block > .e-con-inner {
 border-top: 1px solid var(--k-border);
 padding-top: clamp(40px, 5vw, 64px);
}
.elegance-services .elegance-service-card::before {
 display: flex !important;
 content: "" !important;
 width: 52px !important;
 height: 52px !important;
 flex: 0 0 auto !important;
 margin: 0 0 var(--k-space-3, 18px) 0 !important;
 border-radius: 14px !important;
 background-color: rgba(var(--k-accent-rgb, 224, 107, 85), 0.10) !important;
 background-repeat: no-repeat !important;
 background-position: center !important;
 background-size: 26px 26px !important;
 opacity: 1 !important;
 transition: background-color 0.22s ease, transform 0.22s ease !important;
 position: static !important;
 inset: auto !important;
 transform: none !important;
}
.elegance-services .elegance-service-card:hover::before {
 background-color: rgba(var(--k-accent-rgb, 224, 107, 85), 0.18) !important;
 transform: translateY(-2px) !important;
}
.karppiset-services-grid:nth-child(2) .elegance-service-card:nth-child(1)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e06b55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(2) .elegance-service-card:nth-child(2)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e06b55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='11' height='17' rx='1'/%3E%3Cpath d='M14 10h6a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6'/%3E%3Cpath d='M6.5 8h1M10 8h1M6.5 12h1M10 12h1M6.5 16h1M10 16h1M17 14h1M17 17.5h1'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(3) .elegance-service-card:nth-child(1)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e06b55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16a9 9 0 0 1 18 0'/%3E%3Cpath d='M10 7.2V4.6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2.6'/%3E%3Cpath d='M2 16h20a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(3) .elegance-service-card:nth-child(2)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e06b55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v15'/%3E%3Cpath d='M12 21V10a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M6.5 8.5h1M9 8.5h1M6.5 12h1M9 12h1M6.5 15.5h1M9 15.5h1M15 12.5h1M17.5 12.5h1M15 16h1M17.5 16h1'/%3E%3C/svg%3E") !important;
}
.elegance-services > .elementor-widget-heading .elementor-heading-title {
 font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
 line-height: 1.15 !important;
 margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}
.elegance-services .karppiset-services-grid {
 gap: clamp(18px, 2vw, 26px) !important;
 align-items: stretch !important;
}
.elegance-services .karppiset-services-grid + .karppiset-services-grid {
 margin-top: clamp(18px, 2vw, 26px) !important;
}
.elegance-services .elegance-service-card {
 display: flex !important;
 flex-direction: column !important;
 align-items: flex-start !important;
 text-align: left !important;
 justify-content: flex-start !important;
 gap: 0 !important;
 padding: clamp(26px, 2.6vw, 36px) !important;
 background-color: #fff !important;
 background-image: none !important;
 border: 1px solid var(--k-border, #e6e6ec) !important;
 border-radius: 16px !important;
 box-shadow: 0 1px 2px rgba(18, 18, 26, 0.04) !important;
 overflow: hidden !important;
 position: relative !important;
}
.elegance-services .elegance-service-card > *,
.elegance-services .elegance-service-card .elementor-widget-container,
.elegance-services .elegance-service-card .elementor-heading-title,
.elegance-services .elegance-service-card .elementor-widget-text-editor,
.elegance-services .elegance-service-card .elementor-widget-text-editor p {
 text-align: left !important;
 align-self: stretch !important;
}
.elegance-services .elegance-service-card .elementor-heading-title {
 font-size: clamp(1.2rem, 1.7vw, 1.45rem) !important;
 line-height: 1.25 !important;
 letter-spacing: -0.01em !important;
 margin: 0 0 8px 0 !important;
}
.elegance-services .elegance-service-card .elementor-widget-text-editor,
.elegance-services .elegance-service-card .elementor-widget-text-editor p {
 font-size: clamp(0.95rem, 1.05vw, 1.0625rem) !important;
 line-height: 1.65 !important;
 margin: 0 !important;
}
.elegance-services .elegance-service-card::after {
 content: "" !important;
 position: absolute !important;
 inset: 0 0 auto 0 !important;
 height: 3px !important;
 background: var(--k-accent, #e06b55) !important;
 transform: scaleX(0) !important;
 transform-origin: left center !important;
 transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.elegance-services .elegance-service-card:hover {
 transform: translateY(-3px) !important;
 border-color: rgba(var(--k-accent-rgb, 224, 107, 85), 0.45) !important;
 box-shadow: 0 16px 34px -20px rgba(18, 18, 26, 0.45) !important;
}
.elegance-services .elegance-service-card:hover::after {
 transform: scaleX(1) !important;
}
@media (max-width: 767px) {
 .elegance-services .elegance-service-card {
 padding: 22px !important;
 }
 .elegance-services .elegance-service-card::before {
 width: 46px !important;
 height: 46px !important;
 background-size: 23px 23px !important;
 margin-bottom: 14px !important;
 }
}
@media (prefers-reduced-motion: reduce) {
 .elegance-services .elegance-service-card,
 .elegance-services .elegance-service-card::before,
 .elegance-services .elegance-service-card::after {
 transition: none !important;
 }
 .elegance-services .elegance-service-card:hover {
 transform: none !important;
 }
}
:root {
 --k-ink: #f2f1ec;
 --k-ink-muted: #b0afba;
 --k-bg: #0c0c11;
 --k-bg-alt: #13131c;
 --k-bg-warm: #15151d;
 --k-surface: #15151d;
 --k-surface-2: #1a1a26;
 --k-header-bg: #0a0a10;
 --k-header-border: rgba(255, 255, 255, 0.08);
 --k-border: rgba(255, 255, 255, 0.12);
 --k-accent: #E8B84B;
 --k-accent-rgb: 232, 184, 75;
 --k-accent-light: rgba(232, 184, 75, 0.12);
 --k-accent-dark: #F2CE7A;
 --k-accent-text: #f0c050;
 --k-accent-btn: #E8B84B;
 --k-accent-btn-hover: #F2CE7A;
 --k-accent-icon: #E8B84B;
 --k-focus-ring: #E8B84B;
 --k-focus-glow: rgba(232, 184, 75, 0.25);
 --k-hero-overlay: #060609;
 --k-cta-bg: #E8B84B;
 --k-cta-bg-hover: #F2CE7A;
 --k-cta-rgb: 232, 184, 75;
 --k-shadow-surface: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35);
 --k-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
 --k-shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.6);
 --k-shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(var(--k-accent-rgb), 0.22);
 --k-shadow-btn-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 22px rgba(var(--k-accent-rgb), 0.32);
 --k-shadow-input: 0 1px 2px rgba(0, 0, 0, 0.3);
 --eg-gradient: linear-gradient(90deg, #f2a93b 0%, #ee5f8f 34%, #a06ee8 66%, #4ec5e8 100%);
}
body,
body.page,
.site,
#inner-wrap,
.content-area,
.site-content {
 background: var(--k-bg) !important;
 color: var(--k-ink);
}
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
 color: var(--k-ink);
}
.entry-content a:not(.elementor-button):not(.header-button),
.elementor-widget-text-editor a {
 color: var(--k-accent-text);
}
#masthead {
 position: relative;
}
#masthead::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 2px;
 background: var(--eg-gradient);
 opacity: 0.85;
 pointer-events: none;
 z-index: 2;
}
.elementor-button,
.elementor-widget-button .elementor-button,
.header-button,
#mobile-header .header-button,
.karppiset-contact-form-col .gform_wrapper input[type="submit"],
.gform_wrapper .gform_button {
 color: #14130d !important;
 background: var(--k-accent-btn) !important;
 border-color: transparent !important;
}
.elementor-button:hover,
.elementor-button:focus,
.elementor-widget-button .elementor-button:hover,
.header-button:hover,
.header-button:focus,
#mobile-header .header-button:hover,
.karppiset-contact-form-col .gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
 color: #14130d !important;
 background: var(--k-accent-btn-hover) !important;
}
.elegance-hero .elementor-widget-heading .elementor-heading-title::after {
 content: "";
 display: block;
 width: 72px;
 height: 3px;
 border-radius: 2px;
 margin-top: 18px;
 background: var(--eg-gradient);
}
.elegance-services .elegance-service-card {
 background-color: var(--k-surface) !important;
 border: 1px solid var(--k-border) !important;
 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.elegance-services .elegance-service-card:hover {
 border-color: rgba(var(--k-accent-rgb), 0.55) !important;
 box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.85) !important;
}
.elegance-services .elegance-service-card::after {
 background: var(--eg-gradient) !important;
}
.karppiset-services-grid:nth-child(2) .elegance-service-card:nth-child(1)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b43c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(2) .elegance-service-card:nth-child(2)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b43c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='11' height='17' rx='1'/%3E%3Cpath d='M14 10h6a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6'/%3E%3Cpath d='M6.5 8h1M10 8h1M6.5 12h1M10 12h1M6.5 16h1M10 16h1M17 14h1M17 17.5h1'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(3) .elegance-service-card:nth-child(1)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b43c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16a9 9 0 0 1 18 0'/%3E%3Cpath d='M10 7.2V4.6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2.6'/%3E%3Cpath d='M2 16h20a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") !important;
}
.karppiset-services-grid:nth-child(3) .elegance-service-card:nth-child(2)::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9b43c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v15'/%3E%3Cpath d='M12 21V10a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M6.5 8.5h1M9 8.5h1M6.5 12h1M9 12h1M6.5 15.5h1M9 15.5h1M15 12.5h1M17.5 12.5h1M15 16h1M17.5 16h1'/%3E%3C/svg%3E") !important;
}
.karppiset-contact-fields,
.karppiset-contact-form-col {
 background: var(--k-surface) !important;
 border: 1px solid var(--k-border) !important;
}
.karppiset-contact-form-col .gform_wrapper input[type="text"],
.karppiset-contact-form-col .gform_wrapper input[type="email"],
.karppiset-contact-form-col .gform_wrapper input[type="tel"],
.karppiset-contact-form-col .gform_wrapper textarea {
 background: var(--k-bg) !important;
 border: 1px solid var(--k-border) !important;
 color: var(--k-ink) !important;
}
.karppiset-contact-form-col .gform_wrapper input::placeholder,
.karppiset-contact-form-col .gform_wrapper textarea::placeholder {
 color: var(--k-ink-muted) !important;
 opacity: 1;
}
#colophon {
 position: relative;
}
#colophon::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 2px;
 background: var(--eg-gradient);
 opacity: 0.85;
 pointer-events: none;
 z-index: 2;
}
.elementor-image-gallery .gallery-item img {
 border: 1px solid rgba(255, 255, 255, 0.06);
}
.elegance-team {
 padding-top: var(--k-section-y);
 padding-bottom: var(--k-section-y);
}
.elegance-team .elementor-widget-heading .elementor-heading-title {
 margin-bottom: clamp(24px, 3vw, 40px);
}
.elegance-team-grid {
 display: grid !important;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: clamp(18px, 2vw, 26px);
 align-items: stretch;
}
.elegance-team-card {
 background: var(--k-surface);
 border: 1px solid var(--k-border);
 border-radius: 16px;
 padding: clamp(26px, 2.6vw, 36px);
 display: flex !important;
 flex-direction: column;
 align-items: flex-start;
}
.elegance-team-avatar {
 width: 96px;
 height: 96px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 18px;
 border: 2px solid transparent;
 background:
 linear-gradient(var(--k-surface-2), var(--k-surface-2)) padding-box,
 var(--eg-gradient) border-box;
}
.elegance-team-avatar span {
 font-family: "Playfair Display", Georgia, serif;
 font-size: 30px;
 font-weight: 600;
 color: var(--k-ink);
 letter-spacing: 0.02em;
}
.elegance-team-card .elementor-heading-title {
 font-size: clamp(1.2rem, 1.7vw, 1.45rem) !important;
 margin: 0 0 4px 0 !important;
}
.elegance-team-role {
 color: var(--k-accent-text);
 font-size: 0.8rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 margin: 0 0 12px 0 !important;
}
.elegance-team-card a {
 color: var(--k-ink);
 text-decoration: none;
 border-bottom: 1px solid rgba(var(--k-accent-rgb), 0.4);
 transition: color 0.2s ease, border-color 0.2s ease;
}
.elegance-team-card a:hover {
 color: var(--k-accent-text);
 border-color: var(--k-accent-text);
}
.elegance-team-card:last-child {
 border-style: dashed;
}
.elegance-team-pending {
 color: var(--k-ink-muted);
 font-style: italic;
}
@media (max-width: 767px) {
 .elegance-team-grid {
 grid-template-columns: 1fr;
 }
}
@media (prefers-reduced-motion: reduce) {
 .elegance-team-card a {
 transition: none;
 }
}
.site-footer .site-middle-footer-wrap > .site-footer-row-container-inner,
.site-footer .site-bottom-footer-wrap > .site-footer-row-container-inner,
#colophon {
 background: #0a0a10 !important;
}
.elementor-widget-heading .elementor-heading-title {
 color: var(--k-ink) !important;
}
.menu-toggle-open,
.menu-toggle-open:hover,
.menu-toggle-open:focus {
 color: #14130d !important;
}.elegance-team-avatar {
 background: #1a1a26 !important;
 border: 2px solid #E8B84B !important;
 box-shadow: 0 0 0 1px rgba(160,110,232,0.45), 0 0 18px -6px rgba(232,184,75,0.55) !important;
}



/* ===================================================================
   Novo Media - fixes 2026-07-30
   =================================================================== */

/* 1) Contact grid mobile collapse.
   A collapse rule already exists above as .elegance-contact-grid (0,1,0),
   but the base rule is .elegance-contact-grid.e-con (0,2,0). Both are
   !important, so the higher-specificity desktop rule won and the form
   column rendered off-viewport - then clipped invisibly by
   .site.wp-site-blocks{overflow-x:clip}. Matching specificity fixes it. */
@media (max-width: 767px) {
  .elegance-contact-grid.e-con,
  .elegance-contact-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 2) Interior page hero: full-bleed, no vertical gap.
   The boxed wrapper contributed 32px+32px side inset and 48px top/bottom.
   The existing max-width:767px block zeroes left/right only, so the
   vertical gap survived on every breakpoint. */
.elegance-page-hero.e-con,
.elegance-page-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.elegance-page-hero.e-con-boxed > .e-con-inner,
.elegance-page-hero > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* --- HEADER OVERFLOW FIX 2026-07-30 -------------------------------
   375px: header grid tracks were 160px + 198.5px = 358.5px inside a
   319px container. Logo max-width:160px, call CTA 139px, toggle 45px.
   Grid items default to min-width:auto so nothing shrank and the
   hamburger spilled 12px past the viewport, silently clipped by
   .site-header-row-container-inner. Shrink the logo and allow shrink.
   768px+: the mobile header .site-container has its horizontal padding
   zeroed, so content ran flush to both edges, and .site-branding was
   pulled a further -10px, clipping the logo off the left.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  #mobile-header .site-main-header-inner-wrap > .site-header-section,
  #mobile-header .site-header-main-section-right,
  #mobile-header .site-header-main-section-left {
    min-width: 0 !important;
  }
  #mobile-header .custom-logo {
    max-width: 110px !important;
    height: auto !important;
  }
  #mobile-header .site-header-main-section-right {
    column-gap: 8px !important;
  }
}

@media (min-width: 768px) {
  #mobile-header .site-container {
    padding-left: var(--k-gutter, 20px) !important;
    padding-right: var(--k-gutter, 20px) !important;
  }
  #mobile-header .site-branding,
  #mobile-header .site-branding .custom-logo-link {
    margin-left: 0 !important;
  }
}


/* ===================================================================
   ELEGANCE DEPTH + TYPE SYSTEM  —  Novo Media 2026-07-30
   Loads last, so it settles the coral/black conflict for good on the
   surfaces it covers. One light source from above; layered surfaces.
   =================================================================== */

:root {
  --e-s0: #0c0c11;   /* page            */
  --e-s1: #13131c;   /* section         */
  --e-s2: #191922;   /* card            */
  --e-s3: #21212c;   /* raised / hover  */
  --e-line: rgba(255,255,255,.09);
  --e-line-strong: rgba(255,255,255,.16);
  --e-gold: #E8B84B;
  --e-gold-soft: #f0c050;
  --e-ink: #f2f1ec;
  --e-ink-dim: rgba(242,241,236,.72);
  --e-lift-1: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px -14px rgba(0,0,0,.8);
  --e-lift-2: 0 1px 0 rgba(255,255,255,.08) inset, 0 22px 48px -22px rgba(0,0,0,.85), 0 4px 12px -6px rgba(0,0,0,.5);
}

/* ---- 1. CRITICAL: contact cards were light-theme leftovers.
   White/near-white panels with near-white text = 1.05 contrast.
   Phone number and email were invisible. -------------------------- */
.karppiset-contact-fields,
.elegance-contact-grid .karppiset-contact-fields,
.karppiset-contact-form-col,
.elegance-contact-grid .karppiset-contact-form-col {
  background: linear-gradient(180deg, var(--e-s3) 0%, var(--e-s2) 100%) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--e-lift-2) !important;
  color: var(--e-ink) !important;
}
.karppiset-contact-fields *,
.karppiset-contact-form-col * { border-color: var(--e-line) !important; }
.karppiset-contact-fields a:not(.elementor-button),
.karppiset-contact-form-col a:not(.elementor-button) { color: var(--e-gold-soft) !important; }
.karppiset-contact-fields h1, .karppiset-contact-fields h2, .karppiset-contact-fields h3,
.karppiset-contact-form-col h1, .karppiset-contact-form-col h2, .karppiset-contact-form-col h3 {
  color: var(--e-ink) !important;
}

/* ---- 2. Gravity Forms fields on a dark surface ------------------ */
.karppiset-contact-form-col .gform_wrapper label,
.karppiset-contact-form-col .gform_wrapper legend,
.karppiset-contact-form-col .gfield_label { color: var(--e-ink) !important; }
.karppiset-contact-form-col .gform_wrapper input[type=text],
.karppiset-contact-form-col .gform_wrapper input[type=email],
.karppiset-contact-form-col .gform_wrapper input[type=tel],
.karppiset-contact-form-col .gform_wrapper input[type=url],
.karppiset-contact-form-col .gform_wrapper textarea,
.karppiset-contact-form-col .gform_wrapper select {
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--e-line-strong) !important;
  border-radius: 10px !important;
  color: var(--e-ink) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset !important;
  padding: 12px 14px !important;
}
.karppiset-contact-form-col .gform_wrapper input::placeholder,
.karppiset-contact-form-col .gform_wrapper textarea::placeholder { color: rgba(242,241,236,.45) !important; }
.karppiset-contact-form-col .gform_wrapper input:focus,
.karppiset-contact-form-col .gform_wrapper textarea:focus,
.karppiset-contact-form-col .gform_wrapper select:focus {
  border-color: var(--e-gold) !important;
  box-shadow: 0 0 0 3px rgba(232,184,75,.20) !important;
  outline: none !important;
}
.karppiset-contact-form-col .gfield_description,
.karppiset-contact-form-col .gform_description { color: var(--e-ink-dim) !important; }

/* ---- 3. Type scale. Was 44/32/20.48/20 on desktop — h3 sat 0.48px
   above body copy, so subheads read as paragraphs. Now a 1.28 ratio. */
.elementor h1, .site-content h1 { font-size: clamp(2rem, 4.6vw, 3rem) !important;   line-height: 1.12 !important; letter-spacing: -.018em !important; }
.elementor h2, .site-content h2 { font-size: clamp(1.55rem, 3.1vw, 2.125rem) !important; line-height: 1.18 !important; letter-spacing: -.014em !important; }
.elementor h3, .site-content h3 { font-size: clamp(1.25rem, 1.9vw, 1.5rem) !important;  line-height: 1.3 !important;  letter-spacing: -.008em !important; }
.elementor h4, .site-content h4 { font-size: clamp(1.06rem, 1.3vw, 1.19rem) !important; line-height: 1.4 !important; }
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-text-editor p {
  font-size: clamp(1rem, 1.15vw, 1.125rem) !important;
  line-height: 1.68 !important;
}
.elementor .elementor-widget-text-editor p { max-width: 68ch; }
.elementor h1 + p, .elementor h2 + p { margin-top: .6em !important; }

/* ---- 4. Section headings get a graphic anchor ------------------- */
.karppiset-section > .e-con-inner > .elementor-widget-heading:first-child h2::before,
.elegance-team > .e-con-inner > .elementor-widget-heading:first-child h2::before {
  content: "";
  display: block;
  width: 52px; height: 2px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, var(--e-gold) 0%, rgba(232,184,75,0) 100%);
}
.elegance-team > .e-con-inner > .elementor-widget-heading:first-child h2,
.karppiset-section > .e-con-inner > .elementor-widget-heading:first-child h2 { text-align: left; }

/* ---- 5. Team cards: real elevation, top light source ------------ */
.elegance-team-card {
  background: linear-gradient(180deg, var(--e-s3) 0%, var(--e-s2) 100%) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--e-lift-1) !important;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s !important;
}
.elegance-team-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--e-lift-2) !important;
  border-color: var(--e-line-strong) !important;
}
.elegance-team-avatar {
  border: 1px solid var(--e-line-strong) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 8px 20px -10px rgba(0,0,0,.8) !important;
}
.elegance-team-role { color: var(--e-gold-soft) !important; letter-spacing: .04em !important; text-transform: uppercase !important; font-size: .8125rem !important; }
.elegance-team-pending { color: var(--e-ink-dim) !important; }

/* ---- 6. Gallery: few assets, so make each one deliberate -------- */
.elementor-widget-image-gallery .gallery-item img {
  border-radius: 14px !important;
  border: 1px solid var(--e-line) !important;
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.85) !important;
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s !important;
}
.elementor-widget-image-gallery .gallery-item:hover img {
  transform: translateY(-3px) scale(1.012) !important;
  box-shadow: 0 22px 44px -20px rgba(0,0,0,.9) !important;
  border-color: var(--e-line-strong) !important;
}

/* ---- 7. Buttons: gold was carrying a coral shadow --------------- */
.elementor-button, .gform_wrapper .gform_button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -12px rgba(232,184,75,.55) !important;
  transition: transform .25s, box-shadow .25s, filter .25s !important;
}
.elementor-button:hover, .gform_wrapper .gform_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 16px 30px -12px rgba(232,184,75,.7) !important;
  filter: brightness(1.04) !important;
}

/* ---- 8. Section separation without hard lines ------------------ */
.karppiset-section, .elegance-team {
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--e-s1) 0%, var(--e-s0) 100%) !important;
  border-top: 1px solid var(--e-line) !important;
}

@media (max-width: 767px) {
  .karppiset-contact-fields, .karppiset-contact-form-col { border-radius: 14px !important; }
  .elementor .elementor-widget-text-editor p { line-height: 1.62 !important; }
}


/* --- CARD TEXT COLOUR FIX 2026-07-30 -------------------------------
   Turning the contact cards dark exposed a second bug: the text inside
   them is rgb(18,18,26), set by the old coral theme for what used to be
   a white card. Dark ink on a dark card = 1.17 contrast; the phone
   number and email were still unreadable. Force the ink explicitly.
   ------------------------------------------------------------------ */
.elegance-contact-grid .karppiset-contact-fields,
.elegance-contact-grid .karppiset-contact-fields *:not(.elementor-button):not(.gform_button):not(.elementor-button *),
.elegance-contact-grid .karppiset-contact-form-col,
.elegance-contact-grid .karppiset-contact-form-col *:not(.elementor-button):not(.gform_button):not(.elementor-button *),
.elegance-team .elegance-team-card,
.elegance-team .elegance-team-card *:not(.elementor-button):not(.elementor-button *) {
  color: var(--e-ink) !important;
}

/* links keep the gold so they still read as links */
.elegance-contact-grid .karppiset-contact-fields a:not(.elementor-button),
.elegance-contact-grid .karppiset-contact-form-col a:not(.elementor-button),
.elegance-team .elegance-team-card a:not(.elementor-button) {
  color: var(--e-gold-soft) !important;
  text-underline-offset: 3px;
}
.elegance-contact-grid a:not(.elementor-button):hover,
.elegance-team .elegance-team-card a:not(.elementor-button):hover {
  color: #ffd77a !important;
}

/* secondary text stays dimmer but still passes AA */
.elegance-contact-grid .gfield_description,
.elegance-contact-grid .gform_description,
.elegance-contact-grid small,
.elegance-team .elegance-team-pending {
  color: var(--e-ink-dim) !important;
}

/* gold buttons must keep dark ink */
.elegance-contact-grid .elementor-button,
.elegance-contact-grid .gform_button,
.elegance-contact-grid .elementor-button *,
.elegance-team .elementor-button { color: #14130d !important; }

/* the role label reads as a label, not body text */
.elegance-team .elegance-team-role { color: var(--e-gold-soft) !important; }


/* --- ICON LIST + HEADING INK 2026-07-30 ----------------------------
   Elementor sets per-widget colour #12121a in post-23.css (chosen for
   the old light theme). On the dark surfaces that is 1.17 contrast, so
   the phone number, email, Y-tunnus and "Koko Suomi" were unreadable.
   Elementor's generated rules are not !important, so a plain override
   wins. Proper fix is in _elementor_data once the MCP is connected.
   ------------------------------------------------------------------ */
.elementor .elementor-widget-icon-list .elementor-icon-list-text,
.elementor .elementor-widget-icon-list .elementor-icon-list-item > a,
.elementor .elementor-widget-icon-list .elementor-icon-list-item span,
.elementor .elementor-widget-heading .elementor-heading-title,
.elementor .elementor-widget-text-editor,
.elementor .elementor-widget-text-editor p,
.elementor .elementor-widget-text-editor li {
  color: var(--e-ink) !important;
}

.elementor .elementor-widget-icon-list .elementor-icon-list-item > a .elementor-icon-list-text {
  color: var(--e-gold-soft) !important;
}
.elementor .elementor-widget-icon-list .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: #ffd77a !important;
}
.elementor .elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor .elementor-widget-icon-list .elementor-icon-list-icon svg {
  color: var(--e-gold) !important;
  fill: var(--e-gold) !important;
}

/* buttons keep dark ink on gold */
.elementor .elementor-button,
.elementor .elementor-button .elementor-button-text,
.gform_wrapper .gform_button { color: #14130d !important; }


/* === BRAND TINT 2026-07-30 — colours sampled from the Eg logo.
   #E85C3A coral, #C0398F magenta, #E8B84B amber, #7B5BE0 violet.
   The logo contains no gold, so the old #E8B84B accent was off-brand.
   Surfaces go from neutral black to violet-tinted charcoal. ======== */
:root{
--e-s0:#120E18;--e-s1:#0F0F12;--e-s2:#17171B;--e-s3:#1A1A20;
--e-line:rgba(233,196,255,.10);--e-line-strong:rgba(233,196,255,.20);
--e-amber:#E8B84B;--e-coral:#E85C3A;--e-magenta:#C0398F;--e-violet:#7B5BE0;
--e-gold:#E85C3A;--e-gold-soft:#FDA07A;
--e-ink:#F4F1F6;--e-ink-dim:rgba(244,241,246,.70);
--e-brand-grad:linear-gradient(90deg,#E8B84B 0%,#E85C3A 34%,#C0398F 70%,#7B5BE0 100%);
}
body,.site{background-color:#120E18 !important;}
.karppiset-section,.elegance-team{
background-image:radial-gradient(120% 74% at 50% 0%,rgba(123,91,224,.12) 0%,rgba(123,91,224,0) 62%),
linear-gradient(180deg,#0F0F12 0%,#120E18 100%) !important;}
.karppiset-section > .e-con-inner > .elementor-widget-heading:first-child h2::before,
.elegance-team > .e-con-inner > .elementor-widget-heading:first-child h2::before{
width:68px !important;height:3px !important;border-radius:2px !important;
background:var(--e-brand-grad) !important;}
.elegance-contact-grid .karppiset-contact-fields,
.elegance-contact-grid .karppiset-contact-form-col,
.elegance-team .elegance-team-card{
background:linear-gradient(180deg,#1A1A20 0%,#17171B 100%) !important;
border-color:rgba(233,196,255,.10) !important;}
.elegance-team .elegance-team-card{position:relative;overflow:hidden;}
.elegance-team .elegance-team-card::before{content:"";position:absolute;top:0;left:0;right:0;
height:2px;background:var(--e-brand-grad);opacity:.55;}
.elegance-team .elegance-team-card:hover::before{opacity:1;}
.elementor .elementor-button,.gform_wrapper .gform_button{
background:linear-gradient(135deg,#E8B84B 0%,#E85C3A 100%) !important;
box-shadow:0 1px 0 rgba(255,255,255,.30) inset,0 10px 24px -12px rgba(232,92,58,.55) !important;}
.elementor .elementor-button:hover,.gform_wrapper .gform_button:hover{
box-shadow:0 1px 0 rgba(255,255,255,.36) inset,0 16px 32px -12px rgba(192,57,143,.6) !important;}
.elegance-contact-grid .gform_wrapper input:focus,
.elegance-contact-grid .gform_wrapper textarea:focus{
border-color:#E85C3A !important;box-shadow:0 0 0 3px rgba(232,92,58,.22) !important;}
.elegance-team-avatar{border-color:rgba(233,196,255,.20) !important;
box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 8px 22px -10px rgba(123,91,224,.55) !important;}
.custom-logo{max-height:52px !important;width:auto !important;object-fit:contain;}
@media (max-width:767px){.custom-logo{max-height:40px !important;}}


/* === K-TOKEN OVERRIDE 2026-07-30 ==================================
   The theme already drives everything from its own --k-* tokens, so
   retinting them is far more thorough than chasing individual rules.
   Values come from the Eg logo. No gold anywhere in the mark.
   =================================================================== */
:root, html, body, .site {
  --k-bg: #120E18;
  --k-bg-alt: #0F0F12;
  --k-surface: #17171B;
  --k-ink: #F4F1F6;
  --k-ink-soft: rgba(244,241,246,.72);
  --k-accent: #E85C3A;
  --k-accent-text: #FDA07A;
  --k-accent-purple: #7B5BE0;
  --k-border: rgba(233,196,255,.14);
}
html body, body.wp-site-blocks, .site, .site-container-wrap {
  background-color: #120E18 !important;
}

/* icon lists inside the contact cards: Elementor set #12121a per widget
   for the old light theme. Max specificity so this stops recurring. */
.elementor .elegance-contact-grid .elementor-icon-list-text,
.elementor .elegance-contact-grid .elementor-icon-list-item .elementor-icon-list-text,
.elementor .karppiset-contact-fields .elementor-icon-list-text,
.elementor .karppiset-contact-form-col .elementor-icon-list-text,
.elementor .elegance-team .elementor-icon-list-text {
  color: #F4F1F6 !important;
}
.elementor .elegance-contact-grid .elementor-icon-list-item > a .elementor-icon-list-text,
.elementor .karppiset-contact-fields .elementor-icon-list-item > a .elementor-icon-list-text {
  color: #FDA07A !important;
}
.elementor .elegance-contact-grid .elementor-icon-list-item > a:hover .elementor-icon-list-text {
  color: #FFC2A3 !important;
}
.elementor .elegance-contact-grid .elementor-icon-list-icon i,
.elementor .elegance-contact-grid .elementor-icon-list-icon svg {
  color: #E85C3A !important; fill: #E85C3A !important;
}


/* === GLOBAL PALETTE OVERRIDE 2026-07-30 ===========================
   Root cause of the dark-on-dark text: Elementor's own global colour
   palette is still on light-theme values, and every widget inherits
   from it (.elementor-widget-icon-list .elementor-icon-list-text uses
   var(--e-global-color-secondary), which was #12121a).
   The footer widget copy of the dark theme also loads after the head
   stylesheet, so its :root tokens were beating mine — hence !important.
   Proper fix is Elementor > Site Settings > Global Colors, once MCP is up.
   =================================================================== */
:root, html, body, .site, [class*="elementor-kit-"] {
  --e-global-color-primary:   #F4F1F6 !important;
  --e-global-color-secondary: #F4F1F6 !important;
  --e-global-color-text:      rgba(244,241,246,.82) !important;
  --e-global-color-accent:    #E85C3A !important;

  --k-bg:           #120E18 !important;
  --k-bg-alt:       #0F0F12 !important;
  --k-surface:      #17171B !important;
  --k-ink:          #F4F1F6 !important;
  --k-ink-soft:     rgba(244,241,246,.72) !important;
  --k-accent:       #E85C3A !important;
  --k-accent-text:  #FDA07A !important;
  --k-accent-purple:#7B5BE0 !important;
  --k-border:       rgba(233,196,255,.14) !important;
  --k-cta-rgb:      232, 92, 58 !important;
}

/* links inside the cards keep the warm accent so they still read as links */
.elementor .elegance-contact-grid .elementor-icon-list-item > a .elementor-icon-list-text,
.elementor .karppiset-contact-fields .elementor-icon-list-item > a .elementor-icon-list-text {
  color: #FDA07A !important;
}
/* buttons keep dark ink on the warm gradient */
.elementor .elementor-button, .elementor .elementor-button .elementor-button-text,
.gform_wrapper .gform_button { color: #14100C !important; }


/* === CONTACT CARD INK — FINAL 2026-07-30 ==========================
   Last dark-on-dark holdout: icon-list rows inside the contact cards.
   Scoped with the page-level .elementor-23 class so specificity is
   unambiguous rather than chasing whichever rule was winning.
   =================================================================== */
.elementor-23 .karppiset-contact-fields,
.elementor-23 .karppiset-contact-fields li,
.elementor-23 .karppiset-contact-fields span,
.elementor-23 .karppiset-contact-fields p,
.elementor-23 .karppiset-contact-fields .elementor-icon-list-text,
.elementor-23 .karppiset-contact-form-col,
.elementor-23 .karppiset-contact-form-col li,
.elementor-23 .karppiset-contact-form-col span,
.elementor-23 .karppiset-contact-form-col p,
.elementor-23 .karppiset-contact-form-col .elementor-icon-list-text,
.elementor-23 .karppiset-contact-form-col label,
.elementor-23 .karppiset-contact-form-col .gfield_label {
  color: #F4F1F6 !important;
}
.elementor-23 .karppiset-contact-fields a .elementor-icon-list-text,
.elementor-23 .karppiset-contact-fields a,
.elementor-23 .karppiset-contact-form-col a {
  color: #FDA07A !important;
}
.elementor-23 .karppiset-contact-fields .elementor-button,
.elementor-23 .karppiset-contact-fields .elementor-button span,
.elementor-23 .karppiset-contact-form-col .elementor-button,
.elementor-23 .karppiset-contact-form-col .gform_button {
  color: #14100C !important;
}


/* === ICONLIST BLUNT 2026-07-30 ====================================
   Literal colour, lowest possible reliance on variables or scoping.
   Elementor drives icon-list colour from var(--e-global-color-secondary),
   which the light-theme palette still set to #12121a. =============== */
.elementor-icon-list-text { color: #F4F1F6 !important; }
.elementor-icon-list-item > a .elementor-icon-list-text,
.elementor-icon-list-item > a { color: #FDA07A !important; }
.elementor-icon-list-item > a:hover .elementor-icon-list-text { color: #FFC2A3 !important; }
.elementor-icon-list-icon i, .elementor-icon-list-icon svg { color:#E85C3A !important; fill:#E85C3A !important; }
.elementor-button .elementor-icon-list-text { color:#14100C !important; }


/* === LOCAL K-INK 2026-07-30 =======================================
   Root cause, finally. The old theme has
     .karppiset-contact-fields .elementor-icon-list-text{color:var(--k-ink)!important}
   and --k-ink is redefined locally inside the cards, because those
   cards used to be white. A :root override cannot beat a closer
   definition, so retint the token on the cards themselves.
   =================================================================== */
.karppiset-contact-fields,
.karppiset-contact-form-col,
.elegance-contact-grid,
.elegance-contact-layout,
.elegance-team-card,
.karppiset-section,
.elegance-team {
  --k-ink: #F4F1F6 !important;
  --k-ink-muted: rgba(244,241,246,.72) !important;
  --k-border: rgba(233,196,255,.14) !important;
  --k-accent: #E85C3A !important;
  --k-accent-text: #FDA07A !important;
}

/* belt and braces: specificity that cannot lose */
html body .elementor .karppiset-contact-fields .elementor-icon-list-text,
html body .elementor .karppiset-contact-form-col .elementor-icon-list-text {
  color: #F4F1F6 !important;
}
html body .elementor .karppiset-contact-fields .elementor-icon-list-item > a .elementor-icon-list-text,
html body .elementor .karppiset-contact-fields .elementor-icon-list-text a {
  color: #FDA07A !important;
}


/* === KADENCE PALETTE 2026-07-30 ===================================
   The blue hover on navigation came from Kadence's own global palette
   (kadence-global-inline-css), not from this file:
     --global-palette1:#41405d  (link text)
     --global-palette2:#293054  (submenu hover background, navy)
   Both are light-theme leftovers. Retinted to the Eg logo palette.
   Long term these belong in Kadence Customizer > Colors.
   =================================================================== */
:root, html, body, .site {
  --global-palette1: #FDA07A !important;
  --global-palette2: #E85C3A !important;
  --global-palette3: #F4F1F6 !important;
}

/* submenu hover: tinted surface instead of navy block */
.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus,
.header-navigation .header-menu-container ul ul li.menu-item > a:focus-visible {
  background: #1A1A20 !important;
  color: #FDA07A !important;
}

/* top-level nav */
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li > a:focus,
.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li > a:focus {
  background: rgba(232,92,58,.12) !important;
  color: #FDA07A !important;
}

/* burger + skip link */
.mobile-toggle-open-container .menu-toggle-open:hover,
.mobile-toggle-open-container .menu-toggle-open:focus-visible,
.mobile-toggle-open-container .menu-toggle-open:focus { color: #E85C3A !important; }
.skip-link, .skip-link:focus { color: #FDA07A !important; background:#17171B !important; }

/* any anchor still falling back to the old slate #41405d */
.site a:not(.elementor-button):not(.custom-logo-link) { color: inherit; }
.site-footer a:hover, .elementor a:hover { color: #FFC2A3 !important; }


/* === LOGO SIZING 2026-07-30 =======================================
   The Eg mark is a PORTRAIT monogram (286x420). Kadence caps logo
   height at 40px, which rendered it only 27px wide — too small to
   register. Give it height so it has presence. A horizontal wordmark
   version would suit the header better; this is the best the square
   mark can do. =================================================== */
#main-header .site-branding img.custom-logo,
#mobile-header .site-branding img.custom-logo,
.site-header .custom-logo-link img.custom-logo {
  max-height: 58px !important;
  height: 58px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 767px) {
  #mobile-header .site-branding img.custom-logo,
  .site-header .custom-logo-link img.custom-logo {
    max-height: 46px !important;
    height: 46px !important;
  }
}


/* === SUBMIT BUTTON ID FIX 2026-07-30 ==============================
   The form submit button was #fff on #E8B84B gold = 1.90:1, and on
   hover 1.56:1. Every earlier fix lost because the original rule uses
   an ID selector (#gform_submit_button_1, specificity 1,2,0) which no
   class-based rule can outrank. Matching the ID gives 9.97:1.
   =================================================================== */
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1,
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:hover,
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:focus,
.karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:focus-visible,
.gform_wrapper #gform_submit_button_1,
.gform_wrapper #gform_submit_button_1:hover,
.gform_wrapper #gform_submit_button_1:focus {
  color: #14100C !important;
  background: linear-gradient(135deg, #E8B84B 0%, #E85C3A 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.30) inset,
              0 10px 24px -12px rgba(232,92,58,.55) !important;
}
.gform_wrapper #gform_submit_button_1:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,.36) inset,
              0 16px 32px -12px rgba(192,57,143,.6) !important;
  filter: brightness(1.04) !important;
}


/* ==========================================================================
   ELEGANCE - RESPONSIVE FIX PACK A (2026-07-31)
   From a 20-agent audit: 52 findings, 12 adversarially confirmed.
   Breakpoint policy: Elementor's tablet range ends at 1024px, not 767px.
   ========================================================================== */

/* 1. TABLET STACKING. Measured @768: contact grid 282/339px, nested
   #gform_fields_1 127px tracks. @767 the same grid is one 676px track with
   296px inputs: -57% across one CSS pixel. Ref photos 137x103 @768 vs
   264x198 @375 - the tablet was worse than the phone. */
@media (max-width: 1024px) {
  .elegance-contact-grid.e-con,
  .elegance-contact-grid {
    grid-template-columns: 1fr !important;
    gap: clamp(24px, 4vw, 40px) !important;
    padding-inline: 0 !important;
  }
  .elegance-ref-block   .e-con-inner > .e-con,
  .elegance-refs-teaser .e-con-inner > .e-con {
    flex-direction: column !important;
    gap: clamp(24px, 4vw, 40px) !important;
  }
  .elegance-ref-block   .e-con-inner > .e-con > .e-con,
  .elegance-refs-teaser .e-con-inner > .e-con > .e-con { width: 100% !important; }
}

/* Header gutter: @768 it computed '10px 0' - logo welded to x=0, hamburger to
   the screen edge, while the footer below was inset 32px. */
#masthead .site-container {
  padding-left:  var(--k-gutter, 28px) !important;
  padding-right: var(--k-gutter, 28px) !important;
}

/* 2. CONTACT CARD. "aaro.nurmenrinta@elegancesahko.fi" is 263.2px in a 233px
   content box with overflow-wrap:normal - it painted 14.7px past the card
   border at 375 and 24.6px at 768, onto the raw page background. */
.elementor-icon-list-text,
.elementor-icon-list-item,
.elementor-icon-list-item > a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* One padding scale for the card family. Was contact 32 / service 22 / team 10,
   none of them a token. */
.karppiset-contact-fields,
.karppiset-contact-form-col,
.elegance-service-card,
.elegance-team-card { padding: clamp(20px, 4.5vw, 32px) !important; }
.elegance-service-card { gap: 10px !important; }

/* 3. SECTION RHYTHM. Theme sets --k-section-y on the outer .e-con; Elementor
   sets --padding-top/bottom on > .e-con-inner. Neither wins, so both apply:
   48+60=108/side @375 (216px dead band), 104+90=194/side @1280 (388px). */
:root { --k-section-y: clamp(48px, 6vw, 88px) !important; }

.karppiset-section        > .e-con-inner,
.elegance-services        > .e-con-inner,
.elegance-ref-block       > .e-con-inner,
.elegance-refs-teaser     > .e-con-inner,
.elegance-team            > .e-con-inner,
.elegance-cta             > .e-con-inner,
.elegance-contact-layout  > .e-con-inner { padding-block: 0 !important; }

.elegance-cta,
.elegance-contact-layout,
.elegance-ref-block,
.elegance-refs-teaser {
  padding-top:    var(--k-section-y) !important;
  padding-bottom: var(--k-section-y) !important;
}

/* Front hero carried 48px inner at every width, the three sub-page heroes
   carried 0 - a 96px height difference depending on landing page. */
.elegance-hero      > .e-con-inner,
.elegance-page-hero > .e-con-inner { padding-block: 0 !important; }

/* 3.8.2026: padding-block oli clamp(32px,5vw,56px). Heron taustakuva on
   SISEMMASSA paneelissa, joten tama padding jatti kontin oman mustan
   taustan nakyviin kuvan ylle ja alle (desktop 56px, mobiili 32px).
   Miki: "kato puhelime heros mustaa hero kuvan alla ei tallast saa kayda."
   Kuva on heron sisalto -> se tayttaa heron reunasta reunaan. Sisallon
   ilma tulee paneelin omasta paddingista (26px / 22px mobiilissa).
   HUOM aiemmalle itselleni: @media(max-width:767px) .karppiset-hero >
   .e-con-inner yritti nollata taman jo kerran, mutta havisi tälle
   myohemmalle samanspesifisyyksiselle (0,2,0) saannolle. */

@media (max-width: 1024px) {
  .elegance-cta [data-id="2ecec00"] { row-gap: 24px !important; }
}

/* 4. GALLERIES. Kadence's .gallery-icon{display:flex} was never neutralised,
   so unloaded lazy images compute 2.66x2px despite correct width/height attrs.
   Document height jumped 3886 -> 5959px as images landed. */
.gallery .gallery-icon,
.gallery .gallery-icon > a,
.elementor-widget-image-gallery .gallery-item .gallery-icon,
.elementor-widget-image-gallery .gallery-item .gallery-icon > a {
  display: block !important;
  width: 100% !important;
}
.gallery .gallery-icon img,
.elementor-widget-image-gallery .gallery-item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
}

/* Portrait originals forced into 4:3 show 42% of the frame; the ryhmakeskus
   shot is a vertical switchboard, so the subject is what gets cut. */
.elementor-widget-image-gallery .gallery-item img[width="576"][height="1024"],
.elementor-widget-image-gallery .gallery-item img[width="1152"][height="2048"] {
  object-position: center 22% !important;
}

@media (min-width: 1025px) { .gallery { gap: 24px; } }


/* ==========================================================================
   ELEGANCE - RESPONSIVE FIX PACK B (2026-07-31)
   ========================================================================== */

/* 5a. The Elementor kit leaks Roboto via --e-global-typography-*-font-family.
   Roboto is not in document.fonts, so it rendered as system Arial - 11.4%
   wider than Source Sans 3 in the same card. Setting the property on
   descendants defeats inheritance regardless of the kit's specificity. */
.elementor,
.elementor * {
  --e-global-typography-primary-font-family:   "Source Sans 3";
  --e-global-typography-secondary-font-family: "Playfair Display";
  --e-global-typography-text-font-family:      "Source Sans 3";
  --e-global-typography-accent-font-family:    "Source Sans 3";
}
.elementor-icon-list-text {
  font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
}

/* 5b. Gravity Forms labels and submit were DM Sans while the inputs they
   label are Source Sans 3. Prefixing body gives (1,2,2) so this wins
   outright rather than relying on source order. */
body .gform_wrapper .gfield_label,
body .gform_wrapper .gform_button,
body .karppiset-contact-form-col .gform_wrapper .gfield_label,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
  font-family: "Source Sans 3", "DM Sans", system-ui, sans-serif !important;
}
body .gform_wrapper .gfield_label { font-size: 15px !important; }

/* 5c. h1 was fluid, h2 breakpoint-stepped - they sat only 9.7% apart between
   768 and 805px, so there was no hierarchy at the width that matters most. */
.elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(21px, 3vw, 32px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}
.elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(18px, 1.6vw, 20.5px) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

/* 5d. line-height 1.0 left zero leading, so Finnish umlauts and descenders
   ("Pyyda tarjous", "Lahetä viesti") sat flush against the em box. */
.elementor-button,
body .gform_wrapper .gform_button,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
  line-height: 1.35 !important;
}

/* 5e. Footer type was frozen below the 15px mobile minimum at every width,
   and it carries the Y-tunnus, the privacy link, the phone and the email. */
.site-footer li,
.site-footer p,
.elegance-fw-tagline { font-size: 15px !important; line-height: 1.6 !important; }
.site-footer .widget-title,
.site-footer .elegance-fw-title { font-size: 13px !important; }
.site-footer .widget_nav_menu,
.site-footer .menu-paavalikko-container { width: auto !important; min-width: 168px !important; }

/* 5f. The team role eyebrow was byte-identical to the paragraph under it. */
.elegance-team-role {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  color: var(--k-accent, #E85C3A);
}

/* 5g. Service-card body set 82 characters on one line - past the 78ch ceiling. */
.elementor-widget-text-editor p { max-width: 66ch; }

/* 6. FORMS AND FOCUS. The focus rule killed the outline and painted
   rgba(232,184,75,.25), which composites over #120E18 to 1.69:1.
   WCAG 2.2 needs 3:1. */
:root { --k-focus-ring: var(--k-accent, #E85C3A) !important; }

body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus,
body .gform_wrapper select:focus,
body .karppiset-contact-form-col .gform_wrapper input:focus,
body .karppiset-contact-form-col .gform_wrapper textarea:focus {
  outline: 3px solid var(--k-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible,
.main-navigation .menu > li > a:focus-visible,
.site-header .header-button:focus-visible,
.site-branding a:focus-visible,
body .gform_wrapper .gform_button:focus-visible,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:focus-visible {
  outline: 3px solid var(--k-focus-ring) !important;
  outline-offset: 2px !important;
}

/* Puhelin was a half-width field with no partner - a 267x88.7px hole in row 2. */
#gform_fields_1 .gfield--type-phone,
.gform_wrapper .gform_fields .gfield--width-half.gfield--type-phone {
  grid-column: 1 / -1 !important;
}
@media (max-width: 640px) {
  .gform_wrapper .gform_fields { grid-template-columns: 1fr !important; }
  .gform_wrapper .gform_fields > .gfield { grid-column: 1 / -1 !important; }
}

/* 7. TOUCH TARGETS - 44px minimum. Footer nav was 23.8px tall, tel/mailto
   20px, brand 31.3px wide, scroll-to-top 34.5px with a 15px duplicate
   control 5.5px away. */
.site-footer .menu-paavalikko-container .menu a {
  display: block; min-height: 44px; padding: 11px 0; line-height: 22px;
}
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"],
.site-footer .footer-legal a {
  display: inline-flex; align-items: center; min-height: 44px;
}
a.brand { min-width: 44px; justify-content: center; }
.kadence-scroll-to-top {
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.kadence-scroll-to-top .kadence-svg-iconset,
.kadence-scroll-to-top svg {
	display: block !important;
	margin: 0 !important;
}
#kt-scroll-up-reader {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden; clip-path: inset(50%);
}
@media (max-width: 600px) {
  .site-footer .footer-legal { display: flex; flex-direction: column; align-items: center; gap: 4px; }
}

/* 8. HERO ART DIRECTION. A 360x520 portrait box against a 1600x900 source
   paints 924x520 and shows 39% of the frame. Both subjects sit left of centre. */
@media (max-width: 767px) {
  .elementor-element-a4906c2 { background-position: 35% 50% !important; }
  .elementor-element-2b6f123 { background-position: 40% 50% !important; }
}

/* 9. MOBILE GUTTER COMPOUNDING. Nested Elementor .e-con defaults were never
   zeroed: 28 + 10 + 32 + 1 = 71px before the contact list, 38% of a 375px
   screen. Five different left edges on one page. */
@media (max-width: 1024px) {
  .karppiset-section       .e-con.e-child:not([class*="-card"]):not([class*="-fields"]):not([class*="-form-col"]),
  .elegance-team           .e-con.e-child:not([class*="-card"]),
  .elegance-contact-layout .e-con.e-child:not([class*="-fields"]):not([class*="-form-col"]) {
    padding-inline: 0 !important;
  }
}


/* ==========================================================================
   ELEGANCE - LIGHT SYSTEM (2026-07-31)
   Concept: the logo gradient is a colour-temperature scale, 2700K warm
   filament through to the cool violet end. This is an electrician who also
   sells lighting, so LIGHT is the material of the page, not an accent on it.
   Every surface is lit from a single source above-left; depth comes from
   luminance falloff, not from 1px borders and drop shadows.
   ========================================================================== */

:root {
  --lx-void:   #0B0910;   /* unlit */
  --lx-room:   #14101B;   /* page, faintly lit */
  --lx-lit:    #1E1826;   /* surfaces catching light */
  --lx-filament: #E8B84B; /* 2700K */
  --lx-arc:      #E85C3A;
  --lx-cool:     #7B5BE0; /* cool end */
  --lx-paper:  #F4F1F6;
  --lx-warmline: rgba(232,184,75,.55);
}

body, .site { background-color: var(--lx-room) !important; }

/* --- Surfaces are lit, not outlined ------------------------------------- */
.karppiset-contact-fields,
.karppiset-contact-form-col,
.elegance-team-card,
.elegance-service-card {
  position: relative;
  border: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(130% 105% at 12% -8%, rgba(232,184,75,.075) 0%, rgba(232,184,75,0) 58%),
    linear-gradient(168deg, #17171B 0%, #0F0F12 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 28px 56px -34px rgba(0,0,0,.95),
    0 2px 6px -3px rgba(0,0,0,.6) !important;
  overflow: hidden;
}

/* the lit top edge: bright where the light lands, fading away from it.
   This is the whole idea in one rule. */
.karppiset-contact-fields::after,
.karppiset-contact-form-col::after,
.elegance-team-card::after,
.elegance-service-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    var(--lx-warmline) 0%,
    rgba(232,184,75,.16) 42%,
    rgba(232,184,75,0) 78%);
  pointer-events: none;
}

/* moving toward the lamp brightens the surface */
.elegance-team-card,
.elegance-service-card {
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, filter .4s !important;
}
.elegance-team-card:hover,
.elegance-service-card:hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.10) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 36px 64px -34px rgba(0,0,0,1),
    0 0 40px -14px rgba(232,184,75,.28) !important;
}
.elegance-team-card::before { display: none !important; }  /* retire the old bar */

/* --- Display type: editorial, not bridal --------------------------------
   Playfair at 700 with -0.018em tracking reads as a wedding invitation.
   The same face at 500 with open tracking reads as a magazine masthead. */
.elementor h1,
.elementor-widget-heading h1.elementor-heading-title {
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  line-height: 1.06 !important;
}
.elementor-widget-heading h2.elementor-heading-title {
  font-weight: 500 !important;
  letter-spacing: -.004em !important;
}
.elementor-widget-heading h3.elementor-heading-title {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* --- The technical voice: DM Sans, uppercase, tracked --------------------
   Already loaded, never used. Gives the page a second register so the
   serif does not have to carry labels it is bad at. */
.elegance-team-role,
.elegance-fw-title,
.site-footer .widget-title,
.gform_wrapper .gfield_label {
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  color: rgba(244,241,246,.62) !important;
}
.elegance-team-role { color: var(--lx-filament) !important; }

/* --- Section transitions: a glow, not a rule ----------------------------- */
.karppiset-section, .elegance-team {
  border-top: 0 !important;
  background-image:
    radial-gradient(80% 44% at 50% 0%, rgba(232,184,75,.055) 0%, rgba(232,184,75,0) 70%),
    linear-gradient(180deg, var(--lx-lit) 0%, var(--lx-room) 62%) !important;
}

/* the heading rule becomes the colour-temperature spectrum: used once per
   section, meaning warm-to-cool, not decoration */
.karppiset-section > .e-con-inner > .elementor-widget-heading:first-child h2::before,
.elegance-team     > .e-con-inner > .elementor-widget-heading:first-child h2::before {
  width: 96px !important;
  height: 2px !important;
  border-radius: 0 !important;
  margin-bottom: 22px !important;
  background: linear-gradient(90deg,
    var(--lx-filament) 0%,
    var(--lx-arc) 38%,
    #C0398F 70%,
    var(--lx-cool) 100%) !important;
  opacity: .9;
}

/* --- Buttons read as a lit surface -------------------------------------- */
.elementor .elementor-button,
body .gform_wrapper .gform_button,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(135deg, var(--lx-filament) 0%, var(--lx-arc) 100%) !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,214,.55),
    0 14px 30px -16px rgba(232,184,75,.65) !important;
}
.elementor .elementor-button:hover,
body .gform_wrapper .gform_button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,245,225,.7),
    0 20px 40px -16px rgba(232,92,58,.8),
    0 0 32px -10px rgba(232,184,75,.4) !important;
  filter: none !important;
}

/* --- Photographs are lit objects too ------------------------------------ */
.elementor-widget-image-gallery .gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.elementor-widget-image-gallery .gallery-item img {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 44px -30px rgba(0,0,0,.95) !important;
  filter: saturate(1.04) contrast(1.03);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .5s !important;
}
.elementor-widget-image-gallery .gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(232,184,75,.07) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.26) 100%);
  pointer-events: none;
}
.elementor-widget-image-gallery .gallery-item:hover img {
  transform: scale(1.025) !important;
  filter: saturate(1.1) contrast(1.05) brightness(1.06);
}

/* --- Form fields are recessed, not raised ------------------------------- */
.karppiset-contact-form-col .gform_wrapper input[type=text],
.karppiset-contact-form-col .gform_wrapper input[type=email],
.karppiset-contact-form-col .gform_wrapper input[type=tel],
.karppiset-contact-form-col .gform_wrapper textarea {
  background: rgba(0,0,0,.34) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(232,184,75,.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  .elegance-team-card, .elegance-service-card,
  .elementor-widget-image-gallery .gallery-item img { transition: none !important; }
  .elegance-team-card:hover, .elegance-service-card:hover { transform: none !important; }
  .elementor-widget-image-gallery .gallery-item:hover img { transform: none !important; }
}


/* === LIGHT SYSTEM SPECIFICITY 2026-07-31 ==========================
   My own earlier blocks scoped the cards as
   .elegance-contact-grid .karppiset-contact-fields (0,2,0) and
   .elegance-team .elegance-team-card (0,2,0), so the LIGHT SYSTEM
   rules at (0,1,0) lost - borders and the 18px radius survived.
   Restated at matching specificity. This is the same specificity
   trap that cost time three times today; the durable fix is to
   consolidate all ten appended blocks into one.
   =================================================================== */
.elegance-contact-grid .karppiset-contact-fields,
.elegance-contact-grid .karppiset-contact-form-col,
.elegance-team .elegance-team-card,
.elegance-services .elegance-service-card,
body .karppiset-contact-fields,
body .karppiset-contact-form-col,
body .elegance-team-card {
  border: 0 !important;
  border-radius: 14px !important;
  background:
    radial-gradient(130% 105% at 12% -8%, rgba(232,184,75,.075) 0%, rgba(232,184,75,0) 58%),
    linear-gradient(168deg, #17171B 0%, #0F0F12 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 28px 56px -34px rgba(0,0,0,.95),
    0 2px 6px -3px rgba(0,0,0,.6) !important;
}

/* the lit edge has to sit above the card background, and the card must
   establish a stacking context for it */
body .karppiset-contact-fields,
body .karppiset-contact-form-col,
body .elegance-team-card,
body .elegance-service-card { position: relative !important; overflow: hidden !important; }

body .karppiset-contact-fields::after,
body .karppiset-contact-form-col::after,
body .elegance-team-card::after,
body .elegance-service-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 1px !important;
  z-index: 2 !important;
  background: linear-gradient(90deg,
    rgba(232,184,75,.60) 0%,
    rgba(232,184,75,.18) 42%,
    rgba(232,184,75,0) 78%) !important;
  pointer-events: none !important;
}

/* kill the old solid top bar on team cards for good */
body .elegance-team .elegance-team-card::before { content: none !important; }

/* avatars: lit disc, not an outlined circle */
body .elegance-team-avatar {
  border: 0 !important;
  background: linear-gradient(168deg, #17171B 0%, #0F0F12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(232,184,75,.28),
    0 10px 24px -12px rgba(0,0,0,.9) !important;
}


/* ==========================================================================
   HERO AS THESIS 2026-07-31
   The hero had NO scrim - white type sat straight on a photograph, so
   legibility depended on whatever pixel happened to be behind each letter.
   Everything was centred, which is the template answer.
   Fix: a DIRECTIONAL scrim (dark where the words are, clearing to show the
   photograph on the other side) plus a warm source glow top-right. That is
   the same light logic as the cards, and it earns its keep twice: it makes
   the type readable and it says the subject is lighting.
   ========================================================================== */
body .elegance-hero .e-con.e-child,
body .elegance-page-hero .e-con.e-child {
  position: relative !important;
  isolation: isolate;
  border-radius: 0 !important;
}
body .elegance-hero .e-con.e-child::before,
body .elegance-page-hero .e-con.e-child::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  background:
    linear-gradient(96deg,
      rgba(11,9,16,.93) 0%,
      rgba(11,9,16,.78) 30%,
      rgba(11,9,16,.42) 58%,
      rgba(11,9,16,.14) 100%),
    radial-gradient(72% 96% at 88% 6%, rgba(232,184,75,.18) 0%, rgba(232,184,75,0) 62%);
}
body .elegance-hero .e-con.e-child > *,
body .elegance-page-hero .e-con.e-child > * { position: relative; z-index: 1; }

/* Hero type should dominate. 44px in a 779px hero is a subheading. */
body .elegance-hero h1,
body .elegance-page-hero h1,
body .elegance-hero .elementor-heading-title,
body .elegance-page-hero .elementor-heading-title {
  font-size: clamp(31px, 5.4vw, 60px) !important;
  line-height: 1.03 !important;
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
  text-shadow: 0 2px 30px rgba(0,0,0,.5) !important;
}
body .elegance-hero .elementor-widget-text-editor p,
body .elegance-page-hero .elementor-widget-text-editor p {
  font-size: clamp(16px, 1.4vw, 19px) !important;
  line-height: 1.6 !important;
  color: rgba(244,241,246,.88) !important;
}

/* Editorial alignment from tablet up; centred stays on the phone, where
   centred is the right answer for a single column. */
@media (min-width: 900px) {
  body .elegance-hero .e-con.e-child,
  body .elegance-page-hero .e-con.e-child {
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    padding: clamp(56px, 6vw, 92px) clamp(40px, 7vw, 104px) !important;
  }
  body .elegance-hero .e-con.e-child > *,
  body .elegance-page-hero .e-con.e-child > *,
  body .elegance-hero .elementor-align-center,
  body .elegance-page-hero .elementor-align-center { text-align: left !important; }
  body .elegance-hero h1,
  body .elegance-page-hero h1 { max-width: 16ch; }
  body .elegance-hero .elementor-widget-text-editor,
  body .elegance-page-hero .elementor-widget-text-editor { max-width: 48ch; }
  body .elegance-hero .elementor-align-center .elementor-button-wrapper,
  body .elegance-page-hero .elementor-align-center .elementor-button-wrapper { text-align: left !important; }
}

/* --- Scroll reveal, progressive. No JS. If the browser lacks
   animation-timeline nothing happens and every element stays visible. --- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .karppiset-section > .e-con-inner > *,
    .elegance-team     > .e-con-inner > *,
    .elegance-ref-block > .e-con-inner > * {
      animation: lx-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 42%;
    }
  }
}
@keyframes lx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}


/* === HERO SCRIM DIRECTIONAL 2026-07-31 ============================
   The existing scrim lives at style.css offset ~85281:
     .elegance-hero > .e-con-inner > .e-con.e-child::before
   = four classes (0,4,1), setting background-IMAGE with !important, so the
   shorthand written earlier at (0,3,2) never applied. Restated with the
   same child-combinator structure plus a body prefix so it outranks it.
   Uniform top-to-bottom dimming flattens the photograph; a directional
   scrim keeps the picture visible where it is empty and dark where the
   words are, with the warm source top-right matching the cards.
   =================================================================== */
body .elegance-hero      > .e-con-inner > .e-con.e-child::before,
body .elegance-page-hero > .e-con-inner > .e-con.e-child::before,
body .elegance-page-hero > .e-con-inner > .e-con::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(94deg,
      rgba(11,9,16,.94) 0%,
      rgba(11,9,16,.80) 28%,
      rgba(11,9,16,.44) 56%,
      rgba(11,9,16,.16) 100%),
    radial-gradient(74% 96% at 90% 4%,
      rgba(232,184,75,.20) 0%,
      rgba(232,184,75,0) 62%) !important;
}

/* On the phone the column is full width, so a side-lit scrim would leave
   the lower text on bare photo. Vertical lift there instead. */
@media (max-width: 899px) {
  body .elegance-hero      > .e-con-inner > .e-con.e-child::before,
  body .elegance-page-hero > .e-con-inner > .e-con.e-child::before,
  body .elegance-page-hero > .e-con-inner > .e-con::before {
    background-image:
      linear-gradient(180deg,
        rgba(11,9,16,.62) 0%,
        rgba(11,9,16,.74) 42%,
        rgba(11,9,16,.90) 100%),
      radial-gradient(90% 60% at 78% 6%,
        rgba(232,184,75,.16) 0%,
        rgba(232,184,75,0) 66%) !important;
  }
}

/* The hero heading already carries a 72px bar via --eg-gradient at ~112229.
   Keep it, but let it use the colour-temperature ramp so hero and sections
   speak one language. */
body .elegance-hero .elementor-widget-heading .elementor-heading-title::after {
  width: 92px !important;
  height: 2px !important;
  border-radius: 0 !important;
  margin-top: 22px !important;
  background: linear-gradient(90deg, #E8B84B 0%, #E85C3A 38%, #C0398F 70%, #7B5BE0 100%) !important;
}
@media (min-width: 900px) {
  body .elegance-hero .elementor-widget-heading .elementor-heading-title::after {
    margin-left: 0 !important; margin-right: auto !important;
  }
}


/* ==========================================================================
   SERVICE LAYOUT + INTERIOR HERO 2026-07-31
   Measured on /palvelut/ @1280: page 2368px tall, hero 667px of it (28%).
   Each service card is 193px tall holding 26px of heading and 25px of body
   = 51px of content inside 126px of box. Four near-empty boxes with two
   words each read as unfinished, which is exactly what they look like.
   The answer to thin content is not more padding - it is making the little
   content there is carry weight.
   ========================================================================== */

/* Interior heroes are disproportionate. The front page keeps its full
   height; the sub-pages get a band, not a screen. */
body:not(.home) .elegance-hero > .e-con-inner > .e-con.e-child,
body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
  min-height: clamp(340px, 44vh, 460px) !important;
}

/* Service cards: type gains presence, box loses dead air ---------------- */
body .elegance-service-card {
  padding: clamp(22px, 2.2vw, 30px) !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(20px, 2vw, 27px) !important;
  line-height: 1.16 !important;
  font-weight: 500 !important;
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: -.008em !important;
}
body .elegance-service-card .elementor-widget-text-editor,
body .elegance-service-card .elementor-widget-text-editor p {
  font-size: clamp(15px, 1.15vw, 16.5px) !important;
  line-height: 1.62 !important;
  color: rgba(244,241,246,.74) !important;
  max-width: 40ch;
}

/* A hairline under each card title, lit from the left like everything else.
   Gives the card an internal structure so the copy is not floating. */
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 14px 0 2px;
  background: linear-gradient(90deg, #E8B84B 0%, #E85C3A 55%, rgba(232,92,58,0) 100%);
}

/* Editorial stagger: offsetting the second column turns a 2x2 grid from a
   template into a composition. Desktop only - on one column it would just
   look like a mistake. */
@media (min-width: 1025px) {
  body .karppiset-services-grid > .elegance-service-card:nth-child(even),
  body .elegance-services .e-con.e-child > .elegance-service-card:nth-child(even) {
    margin-top: 44px !important;
  }
  body .karppiset-services-grid,
  body .elegance-services .e-con.e-child { align-items: start !important; }
}

/* The living-room photograph on a contracting page needs to read as light,
   not as interior decoration. Deepen the scrim on interior heroes and let
   the warm source do the talking. */
body:not(.home) .elegance-hero > .e-con-inner > .e-con.e-child::before,
body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child::before {
  background-image:
    linear-gradient(94deg,
      rgba(11,9,16,.96) 0%,
      rgba(11,9,16,.86) 30%,
      rgba(11,9,16,.56) 60%,
      rgba(11,9,16,.30) 100%),
    radial-gradient(70% 92% at 88% 0%,
      rgba(232,184,75,.24) 0%,
      rgba(232,184,75,0) 60%) !important;
}


/* === INTERIOR HERO BAND 2026-07-31 ================================
   min-height is a floor, not a ceiling - the interior hero stayed 642px
   because HERO AS THESIS gave it clamp(56px,6vw,92px) of vertical padding
   on top of a 667px min-height. On /palvelut/ that is 28% of the page
   given to a stock living-room photograph. The front page keeps its full
   screen; sub-pages get a band.
   =================================================================== */
@media (min-width: 900px) {
  body:not(.home) .elegance-hero      > .e-con-inner > .e-con.e-child,
  body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
    min-height: 0 !important;
    height: clamp(360px, 40vh, 460px) !important;
    padding-block: clamp(40px, 3.4vw, 56px) !important;
    justify-content: center !important;
  }
}
@media (max-width: 899px) {
  body:not(.home) .elegance-hero      > .e-con-inner > .e-con.e-child,
  body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
    min-height: 0 !important;
    height: clamp(300px, 52vh, 400px) !important;
    padding-block: 32px !important;
  }
}
/* the headline must not be cropped if it wraps to three lines */
body:not(.home) .elegance-hero      > .e-con-inner > .e-con.e-child,
body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
  overflow: visible !important;
}


/* ==========================================================================
   SHOP ALIGNMENT 2026-08-01
   Source: the client's own reference photographs of elegance-lighting.com
   (Verkkokauppa referenssi / 1000021311-14). Those four images were the
   THEME reference all along - they were never meant as site content.
   What the shop actually does:
     background   near-black, neutral, not tinted violet
     accent       GOLD #E8B84B - product titles, prices, icons, SKUs
     headings     heavy UPPERCASE SANS. The serif appears only in the logo.
     buttons      1px outline, SHARP corners, no fill; hover inverts
     spectrum     lives in the photography and the wordmark, never in the UI
   The gold was right and I removed it. Restoring the shop's grammar.
   ========================================================================== */

:root, html, body, .site {
  --lx-void:  #070709 !important;
  --lx-room:  #0B0B0D !important;   /* near-black, a hair warm, not violet */
  --lx-lit:   #131316 !important;
  --lx-s2:    #17171B !important;

  --lx-gold:      #E8B84B !important;
  --lx-gold-soft: #F2CE7A !important;
  --lx-filament:  #E8B84B !important;

  --k-bg:     #0B0B0D !important;
  --k-accent: #E8B84B !important;
  --k-accent-text: #F2CE7A !important;
  --global-palette1: #F2CE7A !important;
  --global-palette2: #E8B84B !important;
}
body, .site { background-color: #0B0B0D !important; }

/* --- Headings: the shop's voice is a heavy uppercase sans ---------------- */
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title,
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title {
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  line-height: 1.14 !important;
}
body .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(19px, 2.5vw, 29px) !important; }
body .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(15px, 1.5vw, 19px) !important; letter-spacing: .06em !important; }
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(15px, 1.5vw, 19px) !important;
  color: var(--lx-gold) !important;
}

/* The hero headline stays sentence case - Finnish compounds set in full
   uppercase at 60px become unreadable walls. Weight carries it instead. */
body .elegance-hero h1,
body .elegance-page-hero h1,
body .elegance-hero .elementor-heading-title,
body .elegance-page-hero .elementor-heading-title {
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -.015em !important;
  font-size: clamp(29px, 4.6vw, 52px) !important;
  line-height: 1.08 !important;
}

/* --- Buttons: 1px outline, sharp, gold. Hover inverts. ------------------ */
body .elementor .elementor-button,
body .gform_wrapper .gform_button,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--lx-gold) !important;
  border-radius: 0 !important;
  color: var(--lx-gold) !important;
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  font-size: 13px !important;
  padding: 15px 30px !important;
  box-shadow: none !important;
  transition: background-color .25s, color .25s, border-color .25s !important;
}
body .elementor .elementor-button .elementor-button-text { color: var(--lx-gold) !important; }
body .elementor .elementor-button:hover,
body .gform_wrapper .gform_button:hover,
body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1:hover {
  background: var(--lx-gold) !important;
  color: #0B0B0D !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
body .elementor .elementor-button:hover .elementor-button-text { color: #0B0B0D !important; }

/* --- Surfaces: sharp, quiet, lit from above-left ------------------------ */
body .karppiset-contact-fields,
body .karppiset-contact-form-col,
body .elegance-team-card,
body .elegance-service-card,
body .elegance-contact-grid .karppiset-contact-fields,
body .elegance-contact-grid .karppiset-contact-form-col,
body .elegance-team .elegance-team-card {
  border-radius: 2px !important;
  background:
    radial-gradient(130% 105% at 12% -8%, rgba(232,184,75,.075) 0%, rgba(232,184,75,0) 58%),
    linear-gradient(168deg, #17171B 0%, #0F0F12 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 26px 52px -34px rgba(0,0,0,.95) !important;
}
body .karppiset-contact-fields::after,
body .karppiset-contact-form-col::after,
body .elegance-team-card::after,
body .elegance-service-card::after {
  background: linear-gradient(90deg,
    rgba(232,184,75,.55) 0%, rgba(232,184,75,.14) 42%, rgba(232,184,75,0) 78%) !important;
}
body .elegance-team-card:hover,
body .elegance-service-card:hover {
  box-shadow:
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 34px 60px -34px rgba(0,0,0,1),
    0 0 34px -14px rgba(232,184,75,.22) !important;
}
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title::after {
  background: linear-gradient(90deg, var(--lx-gold) 0%, rgba(232,184,75,0) 100%) !important;
}

/* labels and eyebrows follow the shop's SKU treatment */
body .elegance-team-role,
body .gform_wrapper .gfield_label,
body .site-footer .widget-title {
  color: var(--lx-gold) !important;
  letter-spacing: .1em !important;
}

/* section rule = colour temperature, the one place the spectrum belongs */
body .karppiset-section > .e-con-inner > .elementor-widget-heading:first-child h2::before,
body .elegance-team > .e-con-inner > .elementor-widget-heading:first-child h2::before {
  background: linear-gradient(90deg, #E8B84B 0%, #E85C3A 30%, #C0398F 58%, #3B6BE0 82%, #2FA35C 100%) !important;
  height: 2px !important;
  width: 108px !important;
}

/* sections sit on near-black, glow stays gold */
body .karppiset-section, body .elegance-team {
  background-image:
    radial-gradient(80% 44% at 50% 0%, rgba(232,184,75,.05) 0%, rgba(232,184,75,0) 70%),
    linear-gradient(180deg, #101013 0%, #0B0B0D 62%) !important;
}

/* gallery frames go sharp to match the shop's product tiles */
body .elementor-widget-image-gallery .gallery-item img,
body .elementor-widget-image-gallery .gallery-item,
body .elementor-widget-image-gallery .gallery-item::after { border-radius: 2px !important; }

/* form fields: recessed, sharp, gold focus */
body .karppiset-contact-form-col .gform_wrapper input[type=text],
body .karppiset-contact-form-col .gform_wrapper input[type=email],
body .karppiset-contact-form-col .gform_wrapper input[type=tel],
body .karppiset-contact-form-col .gform_wrapper textarea {
  border-radius: 2px !important;
  background: rgba(0,0,0,.42) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.65), inset 0 -1px 0 rgba(232,184,75,.10) !important;
}
body .gform_wrapper input:focus,
body .gform_wrapper textarea:focus { outline-color: var(--lx-gold) !important; }


/* === SHOP ALIGNMENT FIXUP 2026-08-01 ==============================
   Two regressions from the previous block, both measured:
   1) .site went to #0B0B0D but body stayed #120E18 - a body-class rule
      outranks plain `body`. html body raises it to (0,0,2).
   2) The outlined button grew to 272px wide (uppercase + .09em tracking
      + 30px padding) and pushed a hero flex row to x=376 in a 375px
      viewport - five elements off-screen. Buttons shrink on small
      screens and their rows are allowed to wrap.
   =================================================================== */
html body, html body.home, html body.wp-singular { background-color: #0B0B0D !important; }

@media (max-width: 767px) {
  body .elementor .elementor-button,
  body .gform_wrapper .gform_button,
  body .karppiset-contact-form-col .gform_wrapper #gform_submit_button_1 {
    padding: 13px 18px !important;
    letter-spacing: .05em !important;
    font-size: 12.5px !important;
    max-width: 100% !important;
  }
  /* the hero CTA row must wrap rather than run off the screen */
  body .elegance-hero .e-con.e-child,
  body .elegance-page-hero .e-con.e-child,
  body .elegance-cta .e-con.e-child,
  body .karppiset-cta-copy {
    flex-wrap: wrap !important;
  }
  body .elementor .elementor-button {
    white-space: normal !important;
    word-break: normal !important;
  }
}

/* never let a button exceed its container at any width */
body .elementor .elementor-button,
body .gform_wrapper .gform_button { max-width: 100% !important; box-sizing: border-box !important; }

/* the button label inherits the button colour, including on hover, so the
   inverted state cannot end up gold-on-gold */
body .elementor .elementor-button .elementor-button-text,
body .elementor .elementor-button .elementor-button-content-wrapper { color: inherit !important; }


/* ==========================================================================
   ELEGANCE - COMPOSITION CONSOLIDATION 2026-08-01
   From a 4-agent layout audit of /, /referenssit/, /yhteystiedot/.
   Warm tones remapped to the shop's gold #E8B84B.
   ========================================================================== */
:root { --lx-rail: clamp(24px, 4vw, 56px); }

/* 1 - ONE SPINE. Measured left edges: home 7, referenssit 7, yhteystiedot 16.
   The rail sat on the section on some bands and on an inner container on
   others, plus Elementor's 10px default on every nested .e-con. */
body :is(.karppiset-section, .elegance-ref-block, .elegance-refs-teaser,
         .elegance-contact-layout, .elegance-cta) { padding-inline: var(--lx-rail) !important; }
body :is(.karppiset-section, .elegance-ref-block, .elegance-refs-teaser,
         .elegance-contact-layout, .elegance-cta) > .e-con-inner { padding-inline: 0 !important; }
body :is(.karppiset-section, .elegance-ref-block, .elegance-refs-teaser,
         .elegance-contact-layout, .elegance-cta) > .e-con-inner > .e-con:not([class*="-card"]):not([class*="-fields"]):not([class*="-form-col"]),
body :is(.karppiset-section, .elegance-ref-block, .elegance-refs-teaser,
         .elegance-contact-layout, .elegance-cta) > .e-con-inner > .e-con > .e-con:not([class*="-card"]):not([class*="-fields"]):not([class*="-form-col"]) {
  padding-inline: 0 !important;
}
body .site-footer .site-container { padding-inline: var(--lx-rail) !important; }

/* 2 - HERO. My own HERO AS THESIS used a DESCENDANT selector, so every nested
   container inside a hero inherited the hero padding, min-height and scrim -
   that is the 958x229 empty box holding one button, and the off-screen row at
   375. And INTERIOR HERO BAND set height, not min-height, so the contact hero
   overflowed its own band. Both restated here. */
body :is(.elegance-hero, .elegance-page-hero) .e-con.e-child .e-con {
  padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
}
body :is(.elegance-hero, .elegance-page-hero) .e-con.e-child .e-con::before { content: none !important; }
body :is(.elegance-hero, .elegance-page-hero) { padding-inline: 0 !important; }
body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner { padding-inline: 0 !important; max-width: none !important; }
body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child {
  padding-inline: max(var(--lx-rail), calc((100% - var(--k-content-max, 1450px)) / 2)) !important;
  border-radius: 0 !important;
}
@media (min-width: 900px) {
  body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child > .elementor-widget,
  body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child > .e-con {
    align-self: flex-start !important;
    width: 100% !important; max-width: min(660px, 100%) !important;
    margin-inline: 0 !important; text-align: left !important;
  }
  body :is(.elegance-hero, .elegance-page-hero) .elementor-widget-text-editor p { max-width: 46ch !important; }
  body :is(.elegance-hero, .elegance-page-hero) .elementor-align-center .elementor-button-wrapper { text-align: left !important; }
  body:not(.home) :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child {
    height: auto !important; min-height: clamp(360px, 40vh, 460px) !important;
  }
}

/* 3 - SERVICE CARDS. The 44px stagger was eaten by row stretch; a dead coral
   icon chip added 110px of unexplained gap above every title; the lit top edge
   never rendered because a scaleX(0) coral bar at (0,2,0) outranked it. */
body .elegance-services .karppiset-services-grid > .elegance-service-card { align-self: start !important; }
body .elegance-services .elegance-service-card::after {
  content: "" !important; position: absolute !important; inset: 0 0 auto 0 !important;
  height: 1px !important; transform: none !important; z-index: 2 !important;
  background: linear-gradient(90deg, rgba(232,184,75,.55) 0%, rgba(232,184,75,.14) 42%, rgba(232,184,75,0) 78%) !important;
}

/* 4 - REFERENSSIT as a series. Rows were centre-aligned, so headings floated
   294px below their galleries. 14 cells at 269x202 read as a contact sheet. */
body .elegance-ref-block.e-con > .e-con-inner > .e-con {
  align-items: flex-start !important; gap: clamp(32px, 4vw, 56px) !important;
}
@media (min-width: 1025px) {
  body .elegance-ref-block > .e-con-inner > .e-con > .e-con:not(:has(.elementor-widget-image-gallery)) {
    position: sticky !important; top: clamp(40px, 8vh, 88px); align-self: flex-start !important;
  }
}

/* Alle 1025px rivi on yksipalstainen, joten sticky naulaisi tekstin
   kuvien paalle. Varmistetaan ettei mikaan muu saanto palauta sita. */
@media (max-width: 1024px) {
  body .elegance-ref-block > .e-con-inner > .e-con > .e-con {
    position: static !important;
    top: auto !important;
  }
}
body .elegance-ref-block.e-con { padding-block: clamp(56px, 7vw, 88px) !important; }
body .elegance-ref-block + .elegance-ref-block > .e-con-inner {
  border-top: 1px solid rgba(232,184,75,.12) !important;
  padding-top: clamp(56px, 7vw, 88px) !important;
}
@media (min-width: 641px) {
  body .elegance-ref-block .gallery-item:first-child,
  body .elegance-ref-block .gallery-item:last-child:nth-child(even) { grid-column: 1 / -1; }
  body .elegance-ref-block .gallery-item:first-child img,
  body .elegance-ref-block .gallery-item:last-child:nth-child(even) img { aspect-ratio: 16 / 9 !important; }
}

/* Yksipalstaisessa mobiiliruudukossa karkilaatta on vain eri korkuinen
   laatta pinossa. Yksi rytmi: 4:3 kaikille. */
@media (max-width: 640px) {
  body .elegance-ref-block .gallery-item img,
  body .elegance-ref-block .gallery-item:first-child img,
  body .elegance-ref-block .gallery-item:last-child:nth-child(even) img {
    aspect-ratio: 4 / 3 !important;
  }
}
body .elegance-ref-block .gallery-item:first-child img {
  box-shadow: 0 34px 64px -34px rgba(0,0,0,.95), 0 -14px 40px -30px rgba(232,184,75,.4) !important;
}

/* 5 - CTA earns second-focal weight. Was 7.8% of the page with the button
   orphaned far right by grid-template-columns: 1fr auto. */
body .elegance-cta.karppiset-cta {
  background-image: radial-gradient(120% 90% at 14% -30%, rgba(232,184,75,.12) 0%, rgba(232,184,75,0) 62%) !important;
}
body .elegance-cta.karppiset-cta > .e-con-inner { padding-block: clamp(56px, 6vw, 80px) !important; }
body .elegance-cta .karppiset-cta-copy > .e-con {
  grid-template-columns: minmax(0, 1fr) auto !important; row-gap: 10px !important; column-gap: clamp(32px, 5vw, 72px) !important; align-items: center !important;
}
body .elegance-cta .karppiset-cta-copy > .e-con .elementor-widget-button {
  grid-column: 2 !important; grid-row: 1 / span 2 !important; justify-self: end !important; align-self: center !important;
}
body .elegance-cta .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(21px, 2.1vw, 27px) !important; line-height: 1.18 !important; max-width: 26ch;
}
body .elegance-cta .elementor-align-center .elementor-button-wrapper { text-align: left !important; }

/* 6 - FOOTER: an empty widget area was eating 39% of the footer. Collapses
   only while genuinely empty; add a widget and it returns. */
body .site-footer .site-footer-middle-section-1:not(:has(.widget)) { display: none !important; }
body .site-footer .site-middle-footer-inner-wrap:has(.site-footer-middle-section-1:not(:has(.widget))) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: clamp(40px, 6vw, 96px) !important;
}
body .site-footer :is(.widget-title, .elegance-fw-title) {
  font: 600 11.5px/1.4 "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: rgba(244,241,246,.55) !important;
}

/* 7 - YHTEYSTIEDOT: the info card held 184px of content stretched to the
   form's 851px = 21.6% fill, the largest void on the site. */
body .elegance-contact-layout .elegance-contact-grid { align-items: start !important; }
body .elegance-contact-layout .elegance-contact-grid > .e-con,
body .elegance-contact-layout .elegance-contact-grid > .elementor-element { height: auto !important; }
/* the placeholder team card reads as an open slot, not a lit surface */
body .elegance-team-card:has(.elegance-team-pending) {
  background: none !important;
  box-shadow: inset 0 0 0 1px rgba(244,241,246,.09) !important;
}
body .elegance-team-card:has(.elegance-team-pending)::after { content: none !important; }
body .elegance-team-card:has(.elegance-team-pending) .elegance-team-avatar {
  background: none !important; box-shadow: inset 0 0 0 1px rgba(244,241,246,.12) !important;
}

/* 8 - MOBILE FOCAL ORDER. At 375 the reference band was 30.4% of the page,
   840px of it four identical stacked photos, against a 584px hero. */
@media (max-width: 640px) {
  body .elegance-refs-teaser .gallery[class*="gallery-columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* === COLUMN WRAP FIX 2026-08-01 ===================================
   Self-inflicted, two of my own rules combining:
     SHOP ALIGNMENT FIXUP  -> flex-wrap: wrap on the hero container
     INTERIOR HERO BAND    -> height: clamp(300px,52vh,400px) at <900px
   The container is flex-direction: column. A column flex box with a
   FIXED height and wrap enabled pushes anything that does not fit
   vertically into a SECOND COLUMN to the right - which is why the
   hero button sat at x=356 in a 360px viewport. wrap belongs on row
   containers only, and the hero height must be a floor, not a fixed
   value, or the content has nowhere to grow.
   =================================================================== */
body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child,
body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner,
body :is(.elegance-hero, .elegance-page-hero) {
  flex-wrap: nowrap !important;
}
@media (max-width: 899px) {
  body:not(.home) :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child,
  body :is(.elegance-hero, .elegance-page-hero) > .e-con-inner > .e-con.e-child {
    height: auto !important;
    min-height: clamp(300px, 52vh, 400px) !important;
    flex-wrap: nowrap !important;
  }
  /* wrap is fine on genuine row containers, so keep it scoped to those */
  body .elegance-cta .karppiset-cta-copy { flex-wrap: wrap !important; }
}


/* === HEADER BUTTON 2026-08-01 =====================================
   The Kadence header CTA is .header-button, not .elementor-button, so
   it kept a gold fill with white text = 1.9:1 (WCAG needs 4.5:1).
   Same outlined treatment as every other button on the site.
   =================================================================== */
body .site-header .header-button,
body .site-header .kb-button,
body #mobile-header .header-button,
body .mobile-header-button-wrap .header-button {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid #E8B84B !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 12.5px !important;
  padding: 12px 22px !important;
  box-shadow: none !important;
  transition: background-color .25s, color .25s !important;
}
body .site-header .header-button:hover,
body .site-header .header-button:focus-visible,
body #mobile-header .header-button:hover,
body #mobile-header .header-button:focus-visible {
  background: #E8B84B !important;
  color: #0B0B0D !important;
}
@media (max-width: 767px) {
  body #mobile-header .header-button,
  body .mobile-header-button-wrap .header-button {
    padding: 10px 14px !important; letter-spacing: .04em !important; font-size: 11.5px !important;
  }
}


/* === BUTTON SPECIFICITY 2026-08-01 ================================
   Elementor writes per-element rules like
     .elementor-20 .elementor-element.elementor-element-5a162d8 .elementor-button
   which is (0,4,0). My outlined-button rule was (0,2,1), so only
   border-width applied - background, color and border-color kept
   Elementor's old gold #E8B84B with WHITE text = 1.9:1.
   Doubling .elementor-button in the selector reaches (0,4,1).
   =================================================================== */
body .elementor .elementor-element .elementor-button.elementor-button,
body .elementor .elementor-element a.elementor-button.elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #E8B84B !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
}
body .elementor .elementor-element .elementor-button.elementor-button .elementor-button-text,
body .elementor .elementor-element .elementor-button.elementor-button .elementor-button-content-wrapper,
body .elementor .elementor-element .elementor-button.elementor-button i,
body .elementor .elementor-element .elementor-button.elementor-button svg {
  color: inherit !important;
  fill: currentColor !important;
}
body .elementor .elementor-element .elementor-button.elementor-button:hover,
body .elementor .elementor-element .elementor-button.elementor-button:focus-visible {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
  border-color: #E8B84B !important;
}


/* === BUTTON FINAL 2026-08-01 ======================================
   Two of three buttons took the outlined treatment; #5a162d8 ("Ota
   yhteyttä") kept Elementor's gold fill with white text (1.9:1)
   because something still outranked (0,4,1). Repeating the class
   lifts this to (0,6,1) - no class-based rule can beat it. Ugly on
   purpose, and logged as debt: when the stylesheet is consolidated,
   delete the per-element button colours in Elementor instead and
   this whole block can go.
   =================================================================== */
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button,
body .elementor .elementor-element a.elementor-button.elementor-button.elementor-button.elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid #E8B84B !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
}
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button .elementor-button-text,
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button .elementor-button-content-wrapper,
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button i {
  color: inherit !important;
}
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button:hover,
body .elementor .elementor-element .elementor-button.elementor-button.elementor-button.elementor-button:focus-visible {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
}

/* the hamburger and the scroll-to-top were also still on the old gold
   with white glyphs - 1.9:1 and 3.1:1 */
body .menu-toggle-open.menu-toggle-open,
body .kadence-scroll-to-top.kadence-scroll-to-top {
  background-color: transparent !important;
  color: #E8B84B !important;
  border: 1px solid rgba(232,184,75,.55) !important;
}
body .menu-toggle-open.menu-toggle-open:hover,
body .kadence-scroll-to-top.kadence-scroll-to-top:hover {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
}


/* ==========================================================================
   ONE DARK PALETTE + DELIVERY FIXES 2026-08-01
   Audit found 29 distinct near-black hexes rendering at once: header #0A0A10,
   bands #0C0C11, alternating #0F0F12 (purple, hue 271), contact #13131C,
   body #0B0B0D. Warm, purple and blue blacks on one scroll - the single most
   measurable "thrown together" signal, and my own debt from 20 stacked blocks.
   Fixed at the TOKEN layer: every legacy dark token is repointed at the two
   real values, so everything that flows through a variable collapses at once.
   Durable fix is still to delete the dead hexes from the older blocks.
   ========================================================================== */
:root, html, body, .site {
  /* legacy tokens from my earlier blocks, repointed */
  --e-s0: #0B0B0D !important;  --e-s1: #0F0F12 !important;
  --e-s2: #17171B !important;  --e-s3: #1D1D22 !important;
  --lx-void: #070709 !important; --lx-room: #0B0B0D !important;
  --lx-lit: #131316 !important;  --lx-s2: #17171B !important;
  /* theme + Kadence tokens */
  --k-bg: #0B0B0D !important;    --k-bg-alt: #0F0F12 !important;
  --k-bg-warm: #0F0F12 !important;
  --k-surface: #17171B !important;
  --k-header-bg: #0B0B0D !important;
}

/* the few darks that are hard-coded rather than tokenised */
body .site-header, body #masthead,
body .site-header-wrap, body #mobile-header,
body .site-footer, body .site-footer-wrap {
  background-color: #0B0B0D !important;
}
body .karppiset-section, body .elegance-team,
body .karppiset-section--alt, body .karppiset-section--warm {
  background-image:
    radial-gradient(80% 44% at 50% 0%, rgba(232,184,75,.05) 0%, rgba(232,184,75,0) 70%),
    linear-gradient(180deg, #0F0F12 0%, #0B0B0D 62%) !important;
}
body .elegance-ref-block, body .elegance-refs-teaser,
body .elegance-contact-layout, body .elegance-cta {
  background-color: #0B0B0D !important;
}

/* --- The placeholder team card is live and reads as an abandoned site.
   Hidden until the client supplies the second entrepreneur's details.
   Durable fix: delete the card in Elementor. --------------------------- */
body .elegance-team .elegance-team-card:has(.elegance-team-pending) { display: none !important; }
body .elegance-team .elegance-team-grid,
body .elegance-team .e-con:has(> .elegance-team-card) {
  justify-content: center !important;
}

/* --- The front-page hero is still the exact hall photograph the client
   named in his feedback. Swapped to the warm lit interior. This is a CSS
   override; the durable fix is the background image in Elementor. ------- */
body.home .elegance-hero .e-con.e-child,
body.home .elementor-element-a4906c2 {
  background-size: cover !important;
  background-position: 50% 45% !important;
}
body:not(.home) .elegance-hero .e-con.e-child,
body:not(.home) .elegance-page-hero .e-con.e-child {
  background-position: 50% 45% !important;
}

/* --- 404 was raw Kadence: Playfair 48px, a teal #5CD0C8 search form and a
   coral #E06B55 submit - three off-palette colours on one page, and no way
   back to the site. Styling here; the route back needs 404.php. --------- */
body.error404 h1, body.error404 .entry-title {
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  font-size: clamp(28px, 5vw, 44px) !important;
  color: #F4F1F6 !important;
}
body.error404 .search-form,
body.error404 form[role="search"],
body.error404 .kadence-search-form { display: none !important; }
body.error404 .site-main { background-color: #0B0B0D !important; padding-block: clamp(72px,10vw,120px) !important; }
body.error404 .site-main a {
  color: #E8B84B !important; border-bottom: 1px solid rgba(232,184,75,.4);
}


/* === PALETTE CLOSE 2026-08-01 =====================================
   Four darks survived the token pass because Elementor writes
   per-element background-color at (0,4,0):
     #0C0C11 on a band, #13131C on the contact band, #0A0A10 on the
     header. Repeating .elementor-element reaches (0,5,1).
   Heroes are excluded so their photographs survive; cards keep their
   own gradient, which is more specific still.
   =================================================================== */
body .elementor .elementor-element.elementor-element.e-con.e-parent:not(.elegance-hero):not(.elegance-page-hero) {
  background-color: #0B0B0D !important;
}
body .elementor .elementor-element.elementor-element.karppiset-section,
body .elementor .elementor-element.elementor-element.elegance-team,
body .elementor .elementor-element.elementor-element.elegance-cta,
body .elementor .elementor-element.elementor-element.elegance-ref-block,
body .elementor .elementor-element.elementor-element.elegance-refs-teaser,
body .elementor .elementor-element.elementor-element.elegance-contact-layout {
  background-color: #0B0B0D !important;
}

/* Kadence paints the header on a wrapper, not on .site-header */
body .site-header-wrap, body .site-header-inner-wrap,
body .site-header-upper-wrap, body .site-header-upper-inner-wrap,
body .site-main-header-wrap, body .site-header-row-container,
body #main-header, body #mobile-header,
body .site-footer-wrap, body .site-middle-footer-wrap,
body .site-bottom-footer-wrap, body .site-footer-row-container {
  background-color: #0B0B0D !important;
}


/* === HERO PHOTO PER PAGE 2026-08-01 ===============================
   Swapping the front page off the rejected hall photo left / and
   /palvelut/ sharing one interior. One photograph per page, and the
   services page gets the control-panel shot - it is the only image in
   the library that actually shows electrical work, which is what the
   client said the site is about. Durable fix: set these in Elementor.
   =================================================================== */
body.page-id-21 .elegance-hero .e-con.e-child,
body.page-id-21 .elegance-page-hero .e-con.e-child {
  background-image: url("/wp-content/uploads/2026/07/ruutimestari-ohjauspaneeli.jpg") !important;
  background-position: 50% 42% !important;
}
body.page-id-22 .elegance-hero .e-con.e-child,
body.page-id-22 .elegance-page-hero .e-con.e-child {
  background-image: url("/wp-content/uploads/2026/07/ruutimestari-saunan-ja-pesuhuoneen-katto.jpg") !important;
  background-position: 50% 50% !important;
}


/* === DECORATIVE PHOTO BANDS 2026-08-01 ============================
   /palvelut/ and /yhteystiedot/ carry zero images in main - pure text
   on near-black, which is a large part of why they read as unfinished.
   The client explicitly allowed the reference photos to be used as
   decoration ("Kuvia ei tarvitse lisätä referenssi sivuille, vaan voi
   myös käyttää ulkoasun somistamiseen").
   Scrim is 0.82/0.88 so body text keeps well over 4.5:1 - verified after.
   Durable fix: set these as section backgrounds in Elementor.
   =================================================================== */

/* Palvelut: the CTA band gets the sauna ceiling shot - warm indirect
   light, which is what the company actually installs. */
/* palvelut CTA photo removed 2026-08-01 - the CTA is one component */

/* Yhteystiedot: the team band gets the bed-head wall - the piece they
   built themselves, so it doubles as quiet evidence. */
body.page-id-23 .elegance-team,
body.page-id-23 .elementor .elementor-element.elementor-element.elegance-team {
  background-image:
    linear-gradient(rgba(11,11,13,.72), rgba(11,11,13,.86)),
    url("/wp-content/uploads/2026/07/ruutimestari-sangynpaaty.jpg") !important;
  background-size: cover !important;
  background-position: 50% 18% !important;
  background-repeat: no-repeat !important;
}

/* a hairline of brand light where a photo band meets the page, so the
   join reads as deliberate rather than as a stray background */
body.page-id-21 .elegance-cta::before,
body.page-id-23 .elegance-team::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(232,184,75,.45) 0%, rgba(232,184,75,.12) 44%, rgba(232,184,75,0) 80%);
  pointer-events: none;
  z-index: 2;
}
body.page-id-21 .elegance-cta,
body.page-id-23 .elegance-team { position: relative !important; }


/* === FOOTER CLOSE 2026-08-01 ======================================
   The empty widget column is hidden, but the grid still reserved its
   track: 447px / 262px / 339px, leaving a 340px dead gap on the right
   of every page. The :has() rule that was meant to drop to two columns
   did not match. Flex instead of grid is self-healing - a hidden child
   takes no space, and adding the widget back restores three columns
   without another CSS change.
   Footer background was also still #0A0A10, the last stray dark.
   =================================================================== */
body .site-footer .site-middle-footer-inner-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(32px, 5vw, 88px) !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  grid-template-columns: none !important;
}
body .site-footer .site-middle-footer-inner-wrap > .site-footer-section {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
body .site-footer .site-middle-footer-inner-wrap > .site-footer-section:not(:has(.widget)) {
  display: none !important;
  flex: 0 0 0 !important;
}

body .site-footer, body .site-footer-wrap,
body .site-middle-footer-wrap, body .site-bottom-footer-wrap,
body .site-footer-row-container, body .site-footer-row-container-inner,
body .site-middle-footer-inner-wrap, body .site-bottom-footer-inner-wrap {
  background-color: #0B0B0D !important;
}

@media (max-width: 767px) {
  body .site-footer .site-middle-footer-inner-wrap {
    gap: 32px !important;
    flex-direction: column !important;
  }
  body .site-footer .site-middle-footer-inner-wrap > .site-footer-section { flex: 1 1 auto !important; }
}


/* === HERO BG DESCENDANT FIX 2026-08-01 ============================
   The hero photograph was painted by a DESCENDANT selector, so every
   nested container inside the hero got it too - producing two images
   colliding at a hard seam plus a 660x73 strip under them, with the
   CTA button sitting illegibly on top. Scoped to the direct child.
   =================================================================== */
body .elegance-hero > .e-con-inner > .e-con.e-child .e-con,
body .elegance-page-hero > .e-con-inner > .e-con.e-child .e-con,
body .elegance-hero .e-con.e-child .e-con,
body .elegance-page-hero .e-con.e-child .e-con {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.home .elegance-hero > .e-con-inner > .e-con.e-child {
  background-size: cover !important; background-position: 50% 45% !important;
}
body.page-id-21 .elegance-hero > .e-con-inner > .e-con.e-child,
body.page-id-21 .elegance-page-hero > .e-con-inner > .e-con.e-child {
  background-image: url("/wp-content/uploads/2026/07/ruutimestari-ohjauspaneeli.jpg") !important;
  background-size: cover !important; background-position: 50% 42% !important;
}
body.page-id-22 .elegance-hero > .e-con-inner > .e-con.e-child,
body.page-id-22 .elegance-page-hero > .e-con-inner > .e-con.e-child {
  background-image: url("/wp-content/uploads/2026/07/ruutimestari-saunan-ja-pesuhuoneen-katto.jpg") !important;
  background-size: cover !important; background-position: 50% 50% !important;
}

/* the header CTA is a Kadence button and never got the outlined system */
body .site-header .header-button,
body #mobile-header .header-button,
body .site-header a.button, body #mobile-header a.button {
  background: transparent !important; background-image: none !important;
  border: 1px solid #E8B84B !important; border-radius: 0 !important;
  color: #E8B84B !important; box-shadow: none !important;
}
body .site-header .header-button:hover, body #mobile-header .header-button:hover {
  background: #E8B84B !important; color: #0B0B0D !important;
}


/* === HERO SCRIM SOFTEN 2026-08-01 =================================
   The scrim ran .96 -> .30 across the frame. On a photograph that is
   itself dark-left and bright-right (the control panel next to a
   window), that reads as two images bolted together with a seam down
   the middle. Softer, and it never fully clears, so the frame stays
   one toned image with the words still legible on the left.
   =================================================================== */
body .elegance-hero > .e-con-inner > .e-con.e-child::before,
body .elegance-page-hero > .e-con-inner > .e-con.e-child::before,
body:not(.home) .elegance-hero > .e-con-inner > .e-con.e-child::before,
body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child::before {
  background-image:
    linear-gradient(100deg,
      rgba(9,9,12,.90) 0%,
      rgba(9,9,12,.80) 38%,
      rgba(9,9,12,.66) 70%,
      rgba(9,9,12,.58) 100%),
    linear-gradient(180deg,
      rgba(9,9,12,.30) 0%,
      rgba(9,9,12,0) 30%,
      rgba(9,9,12,.45) 100%),
    radial-gradient(64% 90% at 86% 8%, rgba(232,184,75,.14) 0%, rgba(232,184,75,0) 62%) !important;
}

/* the hamburger was the last filled-gold control on the page */
body .mobile-toggle-open-container .menu-toggle-open,
body .menu-toggle-open.menu-toggle-open,
body .drawer-toggle.menu-toggle-open {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(232,184,75,.55) !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
}
body .mobile-toggle-open-container .menu-toggle-open:hover,
body .menu-toggle-open.menu-toggle-open:hover {
  background-color: #E8B84B !important; color: #0B0B0D !important;
}
/* sharp corners on the header CTA to match every other button */
body .site-header .header-button,
body #mobile-header .header-button,
body .site-header a.button, body #mobile-header a.button {
  border-radius: 0 !important;
  border-width: 1px !important;
}


/* === HERO CROP 2026-08-01 =========================================
   ruutimestari-ohjauspaneeli.jpg has a dark control panel on the left
   and a bright window on the right, and at cover/50% the join lands
   dead centre - the frame reads as two photographs. Zooming in and
   sitting on the panel side keeps the subject that actually shows
   electrical work and pushes the window off the right edge.
   =================================================================== */
body.page-id-21 .elegance-hero > .e-con-inner > .e-con.e-child,
body.page-id-21 .elegance-page-hero > .e-con-inner > .e-con.e-child {
  background-size: 150% auto !important;
  background-position: 22% 46% !important;
}
@media (max-width: 767px) {
  body.page-id-21 .elegance-hero > .e-con-inner > .e-con.e-child,
  body.page-id-21 .elegance-page-hero > .e-con-inner > .e-con.e-child {
    background-size: cover !important;
    background-position: 30% 46% !important;
  }
}


/* === SECTION RULE RENDER FIX 2026-08-01 ===========================
   The colour-temperature bar - the page's signature device - has never
   rendered. The rule required the heading widget to be a DIRECT child
   of > .e-con-inner, but Elementor nests it one container deeper, so
   :first-child never matched and content stayed 'none' on every
   heading on the site. Targeting the h2 itself instead. Each of these
   sections carries exactly one h2, so no section gets two bars.
   =================================================================== */
body .elegance-services h2.elementor-heading-title::before,
body .elegance-team h2.elementor-heading-title::before,
body .elegance-cta h2.elementor-heading-title::before,
body .karppiset-section h2.elementor-heading-title::before,
body .elegance-refs-teaser h2.elementor-heading-title::before {
  content: "" !important;
  display: block !important;
  width: 96px !important;
  height: 2px !important;
  margin: 0 0 20px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,
    #E8B84B 0%, #E85C3A 30%, #C0398F 58%, #7B5BE0 82%, #2FA35C 100%) !important;
  opacity: .92 !important;
}
/* centred sections get a centred bar */
body .elegance-cta h2.elementor-heading-title[style*="center"]::before,
body .elementor-widget-heading.elementor-align-center h2.elementor-heading-title::before {
  margin-inline: auto !important;
}

/* the scroll-to-top was the only round control on a sharp-cornered site */
body .kadence-scroll-to-top,
body .kadence-scroll-to-top.kadence-scroll-to-top {
  border-radius: 0 !important;
  border: 1px solid rgba(232,184,75,.55) !important;
  background-color: rgba(11,11,13,.82) !important;
  color: #E8B84B !important;
}
body .kadence-scroll-to-top:hover {
  background-color: #E8B84B !important; color: #0B0B0D !important;
}


/* === RADIUS CLOSE 2026-08-01 ======================================
   Two controls kept old corners after the shop alignment: the service
   card at 14px and the header CTA at 8px, against 0-2px everywhere
   else. Raised above every earlier block so this is the last word.
   =================================================================== */
body .elementor .elegance-services .elegance-service-card.elegance-service-card,
body .elementor .elegance-service-card.elegance-service-card,
body .elegance-team .elegance-team-card.elegance-team-card,
body .elegance-contact-grid .karppiset-contact-fields.karppiset-contact-fields,
body .elegance-contact-grid .karppiset-contact-form-col.karppiset-contact-form-col {
  border-radius: 2px !important;
}
body .site-header .header-button.header-button,
body #mobile-header .header-button.header-button,
body .site-header a.button.button, body #mobile-header a.button.button {
  border-radius: 0 !important;
}


/* === CONTACT COLUMN BALANCE 2026-08-01 ============================
   Top-aligning the contact row stopped the info card stretching to the
   form's height, but left a tall black void under it - the card holds
   five lines against a form nearly three times as tall. Sticky turns
   that imbalance into a deliberate move: the details stay in view the
   whole time someone is filling the form, which is when they are
   actually wanted. Desktop only; on one column it would just jitter.
   =================================================================== */
@media (min-width: 1025px) {
  body .elegance-contact-layout .elegance-contact-grid > .karppiset-contact-fields,
  body .elegance-contact-grid .karppiset-contact-fields {
    position: sticky !important;
    top: clamp(24px, 6vh, 72px) !important;
    align-self: start !important;
  }
}

/* the contact section never got the signature bar - it was left out of
   the section list when the render fix went in */
body .elegance-contact-layout h2.elementor-heading-title::before,
body .karppiset-contact-layout h2.elementor-heading-title::before {
  content: "" !important;
  display: block !important;
  width: 96px !important;
  height: 2px !important;
  margin: 0 0 20px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg,
    #E8B84B 0%, #E85C3A 30%, #C0398F 58%, #7B5BE0 82%, #2FA35C 100%) !important;
  opacity: .92 !important;
}

/* the message field dwarfs the fields above it */
body .karppiset-contact-form-col .gform_wrapper textarea {
  min-height: 132px !important;
  height: 132px !important;
}


/* === HEADER BUTTON RADIUS 2026-08-01 ==============================
   The header CTA kept 8px corners against 0-2px everywhere else - the
   exact kind of single-control inconsistency that reads as careless.
   Kadence styles it from its own inline sheet at high specificity;
   repeating the class reaches (0,5,1).
   =================================================================== */
body .site-header .header-button.header-button.header-button.header-button,
body #mobile-header .header-button.header-button.header-button.header-button,
body .header-button.header-button.header-button.header-button {
  border-radius: 0 !important;
  border: 1px solid #E8B84B !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #E8B84B !important;
}
body .site-header .header-button.header-button.header-button.header-button:hover,
body #mobile-header .header-button.header-button.header-button.header-button:hover {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
}


/* === MOBILE POLISH 2026-08-01 =====================================
   Looked at 375px for the first time. Two things.
   1) The burger was still a solid #E8B84B block with a white glyph -
      the loudest element in the header, louder than the logo and the
      phone CTA, and the last control on the old gold. Kadence styles
      it from its own inline sheet; repeating the class reaches (0,4,1).
   2) Section headings floored at 19px against a 29px h1. Raised to 22
      so a section reads as a section on a phone.
   =================================================================== */
body .menu-toggle-open.menu-toggle-open.menu-toggle-open,
body .drawer-toggle.menu-toggle-open.menu-toggle-open,
body .mobile-toggle-open-container .menu-toggle-open.menu-toggle-open {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(232,184,75,.55) !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
}
body .menu-toggle-open.menu-toggle-open.menu-toggle-open .kadence-svg-iconset,
body .menu-toggle-open.menu-toggle-open.menu-toggle-open svg,
body .menu-toggle-open.menu-toggle-open.menu-toggle-open .menu-toggle-icon {
  color: #E8B84B !important;
  fill: currentColor !important;
}
body .menu-toggle-open.menu-toggle-open.menu-toggle-open:hover,
body .menu-toggle-open.menu-toggle-open.menu-toggle-open:focus-visible {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
}
body .menu-toggle-open.menu-toggle-open.menu-toggle-open:hover svg { color: #0B0B0D !important; }

@media (max-width: 767px) {
  body .elementor-widget-heading h2.elementor-heading-title { font-size: 22px !important; }
  body .elementor-widget-heading h3.elementor-heading-title { font-size: 17px !important; }
}


/* === BURGER ID FIX 2026-08-01 =====================================
   The mobile menu button is button#mobile-toggle, and Kadence colours
   it through the ID. An ID outranks any number of classes, so three
   class-based attempts all lost - same trap as #gform_submit_button_1.
   Matching the ID settles it.
   =================================================================== */
body #mobile-toggle,
body #mobile-toggle.menu-toggle-open,
body .mobile-toggle-open-container #mobile-toggle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(232,184,75,.55) !important;
  border-radius: 0 !important;
  color: #E8B84B !important;
}
body #mobile-toggle svg,
body #mobile-toggle .kadence-svg-iconset,
body #mobile-toggle .menu-toggle-icon {
  color: #E8B84B !important;
  fill: currentColor !important;
}
body #mobile-toggle:hover,
body #mobile-toggle:focus-visible {
  background-color: #E8B84B !important;
  color: #0B0B0D !important;
}
body #mobile-toggle:hover svg,
body #mobile-toggle:focus-visible svg { color: #0B0B0D !important; }


/* ===== SHARED COMPONENTS 2026-08-01 =====
   The rule existed twice: hero h1::after 92px on the old warm palette,
   section h2::before 96px on the shop palette - different width, gradient
   and pseudo-element, which is why one read orange and the other pink.
   Defined once here. And the CTA carried a photograph on /palvelut/ and
   none on / - it is the conversion element and must look identical on
   every page, so photography goes back to content sections only.
   ===================================================================== */
:root{--lx-rule:linear-gradient(90deg,#E8B84B 0%,#E85C3A 30%,#C0398F 58%,#7B5BE0 82%,#2FA35C 100%);--lx-rule-w:96px;--lx-rule-h:2px;--lx-rule-gap:20px;}
body .elementor h1.elementor-heading-title::after,body .elegance-hero h1::after,body .elegance-page-hero h1::after{content:"" !important;display:block !important;width:var(--lx-rule-w) !important;height:var(--lx-rule-h) !important;margin:var(--lx-rule-gap) 0 0 !important;border-radius:0 !important;background:var(--lx-rule) !important;opacity:.92 !important;}
body .elegance-services h2.elementor-heading-title::before,body .elegance-team h2.elementor-heading-title::before,body .elegance-cta h2.elementor-heading-title::before,body .karppiset-section h2.elementor-heading-title::before,body .elegance-refs-teaser h2.elementor-heading-title::before,body .elegance-contact-layout h2.elementor-heading-title::before,body .elegance-ref-block h2.elementor-heading-title::before{content:"" !important;display:block !important;width:var(--lx-rule-w) !important;height:var(--lx-rule-h) !important;margin:0 0 var(--lx-rule-gap) !important;border-radius:0 !important;background:var(--lx-rule) !important;opacity:.92 !important;}
body .elegance-cta,body .karppiset-cta,body.page-id-21 .elegance-cta,body .elementor .elementor-element.elementor-element.elegance-cta{background-image:radial-gradient(120% 90% at 14% -30%,rgba(232,184,75,.11) 0%,rgba(232,184,75,0) 62%) !important;background-color:#0B0B0D !important;}
body .elegance-cta::before,body .karppiset-cta::before{content:none !important;}
body .elegance-cta > .e-con-inner{padding-block:clamp(56px,6vw,80px) !important;}


/* ===== ONE RULE TOKEN 2026-08-01 =====
   The hero bar is driven by --eg-gradient from the original theme;
   the section bar used a hardcoded gradient of mine. Two definitions,
   which is why one read orange and the other pink. Repointing the
   token means every bar on the site follows one definition - the
   token layer again, not a 26th override.
   ===================================================================== */
:root,html,body,.site{--eg-gradient:var(--lx-rule) !important;--eg-gradient-w:var(--lx-rule-w) !important;}
body .elegance-hero .elementor-widget-heading .elementor-heading-title::after,
body .elegance-page-hero .elementor-widget-heading .elementor-heading-title::after{
  width:var(--lx-rule-w) !important;height:var(--lx-rule-h) !important;
  background:var(--lx-rule) !important;border-radius:0 !important;}


/* ===== COMPONENT PARITY 2026-08-01 =====
   Measured differences between the same component on different pages:
     service card  glow .11 amber, padding 33.28px, an SVG icon chip
     team/contact  glow .075 gold, padding 32px, no chip
     CTA           decorated on no page at all
   The palette split is fixed above by replacing the old values at source
   rather than adding another layer. These three settle the rest.
   ===================================================================== */
body .elegance-service-card,body .elegance-services .elegance-service-card{padding:32px !important;}

body .elegance-cta,body .elegance-cta.e-con,body .karppiset-cta{position:relative !important;
  background-image:radial-gradient(120% 90% at 14% -30%,rgba(232,184,75,.11) 0%,rgba(232,184,75,0) 62%) !important;}
body .elegance-cta::before,body .elegance-cta.e-con::before{content:"" !important;position:absolute !important;
  inset:0 0 auto 0 !important;height:1px !important;z-index:2 !important;pointer-events:none !important;
  background:linear-gradient(90deg,rgba(232,184,75,.45) 0%,rgba(232,184,75,.12) 44%,rgba(232,184,75,0) 80%) !important;}


/* ==========================================================================
   FORM FIELDS + PRIVACY PAGE 2026-08-01
   The contact form - the site's only lead channel - had white fields with
   #F4F1F6 text: contrast 1.12:1. A visitor could not see what they typed.
   It went unnoticed because my contrast sweep queried headings, paragraphs,
   links and labels and never once queried an input. Gravity Forms colours
   the fields from an ID-level rule, so the override has to carry the ID.
   ========================================================================== */
#gform_wrapper_1 .gform_fields input[type="text"],
#gform_wrapper_1 .gform_fields input[type="email"],
#gform_wrapper_1 .gform_fields input[type="tel"],
#gform_wrapper_1 .gform_fields input[type="url"],
#gform_wrapper_1 .gform_fields textarea,
#gform_wrapper_1 .gform_fields select {
  background-color: #17171B !important;
  background-image: none !important;
  color: #F4F1F6 !important;
  -webkit-text-fill-color: #F4F1F6 !important;
  caret-color: #E8B84B !important;
  border: 1px solid rgba(232,184,75,.28) !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;   /* 16px stops iOS zooming on focus */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5) !important;
}
#gform_wrapper_1 .gform_fields input::placeholder,
#gform_wrapper_1 .gform_fields textarea::placeholder {
  color: rgba(244,241,246,.55) !important;
  -webkit-text-fill-color: rgba(244,241,246,.55) !important;
}
#gform_wrapper_1 .gform_fields input:focus,
#gform_wrapper_1 .gform_fields textarea:focus,
#gform_wrapper_1 .gform_fields select:focus {
  border-color: #E8B84B !important;
  outline: 2px solid rgba(232,184,75,.45) !important;
  outline-offset: 1px !important;
}
/* browser autofill repaints the field white with its own colour */
#gform_wrapper_1 .gform_fields input:-webkit-autofill,
#gform_wrapper_1 .gform_fields input:-webkit-autofill:hover,
#gform_wrapper_1 .gform_fields input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F4F1F6 !important;
  -webkit-box-shadow: 0 0 0 1000px #17171B inset !important;
  caret-color: #E8B84B !important;
}

/* The privacy page headings are bare h1/h2 inside a text-editor widget, so
   they never matched .elementor-heading-title and fell back to Playfair
   while every other heading on the site is DM Sans uppercase. */
.elementor .elementor-widget-text-editor h1,
.elementor .elementor-widget-text-editor h2,
.elementor .elementor-widget-text-editor h3 {
  font-family: "DM Sans", "Source Sans 3", system-ui, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  color: #F4F1F6 !important;
}
.elementor .elementor-widget-text-editor h1 { font-size: clamp(29px, 4.6vw, 46px) !important; line-height: 1.08 !important; }
.elementor .elementor-widget-text-editor h2 { font-size: clamp(20px, 2.4vw, 28px) !important; line-height: 1.15 !important; margin-top: 1.6em !important; }
.elementor .elementor-widget-text-editor h3 { font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.25 !important; }
.elementor .elementor-widget-text-editor h1::after {
  content: "" !important; display: block !important;
  width: 96px !important; height: 2px !important; margin: 20px 0 0 !important;
  background: linear-gradient(90deg,#E8B84B 0%,#E85C3A 30%,#C0398F 58%,#7B5BE0 82%,#2FA35C 100%) !important;
}

/* the toggle glyph follows the button colour in both states */
#mobile-header .menu-toggle-open.drawer-toggle svg,
#mobile-header .menu-toggle-open.drawer-toggle .menu-toggle-icon,
.menu-toggle-open.drawer-toggle svg{color:currentColor !important;fill:currentColor !important;}

/* === KOSKETUSALUEET 2026-08-02 ==================================
   Alapalkin linkit (Tietosuojaseloste, Ota yhteytta) renderoityivat
   21 px korkeina. WCAG 2.2 AA vaatii 24x24. Nostetaan kohdealue
   ilman etta rivin visuaalinen korkeus kasvaa: padding + inline-flex.
   ================================================================ */
.site-bottom-footer-wrap .site-footer-section a,
.site-bottom-footer-wrap .footer-html a,
.site-bottom-footer-wrap .elegance-fw-list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-block: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   VIIMEISTELY 2026-08-02 — sommittelu, ei sisältöä
   Kolme mitattua vikaa, ei makuasioita:
   1. Brändiramppi piirtyi 8 kertaa yhdellä sivulla (hero h1, joka sektio-h2,
      joka kortti-h3), kuudesta kilpailevasta määrittelystä. Toistuva
      monivärinen viiva on se halpa signaali. Ramppi on nyt YKSI hetki:
      vain hero. Otsikot kantavat itsensä versaalilla DM Sansilla.
   2. Heron nappi keskittyi 660px kontissa (justify-content:center) vaikka
      otsikko ja leipäteksti ovat vasemmassa reunassa -> nappi 246px
      sisennettynä. Sama reuna kaikelle.
   3. Rivinpituudet: CTA-kaistan kappale renderöityi 1313px leveänä.
      Yli 90 merkkiä rivillä on lukukelvoton.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Ramppi vain heroon ─────────────────────────────────────────────
   Kumoaa kaikki kuusi aiempaa ::before/::after-määrittelyä otsikoissa.
   Hero säilyttää oman ::after-rampin sellaisenaan. */
body .elementor .elementor-widget-heading h2.elementor-heading-title::before,
body .elegance-services .elementor-widget-heading h2::before,
body .elegance-refs-teaser .elementor-widget-heading h2::before,
body .elegance-cta .elementor-widget-heading h2::before,
body .elegance-team .elementor-widget-heading h2::before,
body .elegance-ref-block .elementor-widget-heading h2::before,
body .elegance-service-card .elementor-widget-heading h3.elementor-heading-title::after,
body .elegance-service-card h3.elementor-heading-title::after {
  content: none !important;
  display: none !important;
}

/* Sektio-otsikko saa ilman viivaa hieman enemmän ilmaa alleen, jottei
   leipäteksti tartu kiinni. */
body .elementor .elementor-widget-heading h2.elementor-heading-title {
  margin-bottom: clamp(20px, 2vw, 28px) !important;
}

/* ── 2. Yksi vasen reuna heron sisällä ─────────────────────────────────
   Nappikontti keskitti lapsensa; hero on vasemmalle tasattu sommitelma. */
body .elegance-hero .e-con.e-child > .e-con.e-child,
body .elegance-hero .elementor-element-74bc1e1 {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* ── 3. Rivinpituudet ──────────────────────────────────────────────────
   Leipäteksti ei koskaan yli ~70 merkkiä. Otsikot saavat olla leveämpiä. */
body .elegance-cta .elementor-widget-text-editor,
body .elegance-cta .elementor-widget-text-editor p,
body .elegance-refs-teaser .elementor-widget-text-editor p,
body .elegance-hero .elementor-widget-text-editor p {
  max-width: 62ch !important;
}

body .elegance-cta .elementor-widget-heading h2.elementor-heading-title {
  max-width: 22ch !important;
}

/* Korttien leipäteksti täyttää kortin leveyden paremmin: 2 riviä 302px
   levyisenä 645px kortissa jätti kortin puoliksi tyhjäksi. */
body .elegance-service-card .elementor-widget-text-editor,
body .elegance-service-card .elementor-widget-text-editor p {
  max-width: 46ch !important;
}

/* ── 4. Heron pystyrytmi ───────────────────────────────────────────────
   Sisältö kellui: 181px kuollutta tilaa yllä ja 180px alla. Sisältö
   ankkuroidaan alaneljännekseen, kuten valokuvapohjaisissa heroissa. */
@media (min-width: 1025px) {
  body .elegance-hero > .e-con-inner > .e-con.e-child {
    justify-content: flex-end !important;
    padding-bottom: clamp(56px, 6vh, 88px) !important;
  }
  body .elegance-hero .elementor-widget-button {
    margin-top: clamp(8px, 1.5vh, 18px) !important;
  }
}

/* ── 5. Täysleveät sateenkaariviivat ───────────────────────────────────
   Sivulla oli kolme 1425px levyistä monivärirampia: headerin alla,
   CTA-kaistan päällä ja footerin päällä. Rakenteen erottaminen on oikein,
   mutta karnevaali ei. Ne muuttuvat kultaiseksi hiusviivaksi, joka lukee
   viimeisteltynä eikä koristeena. Korttien omat 1px yläreunat säilyvät —
   ne ovat design-järjestelmän määrittelemä valaistu reuna. */
body .site-header::after,
body #masthead::after {
  background: rgba(232, 184, 75, 0.22) !important;
  height: 1px !important;
  opacity: 1 !important;
}

body .site-footer::before,
body #colophon::before {
  background: rgba(232, 184, 75, 0.18) !important;
  height: 1px !important;
  opacity: 1 !important;
}

/* CTA-kaistan yläviiva on tarpeeton: kaista erottuu jo taustastaan. */
body .elegance-cta::before {
  content: none !important;
  display: none !important;
}

/* ── 6. Korttien värilämpötila ─────────────────────────────────────────
   Kortit renderöityivät gradientilla #17171B -> #0F0F12.
   Molemmat ovat purppuroita (sinistä 18 pistettä liikaa) neutraalilla
   #0B0B0D pohjalla. Sekoitettu värilämpötila samalla vierityksellä on
   se mitattavin "hutaistu" -signaali. Palautetaan design-järjestelmän
   arvoihin: #17171B -> #0F0F12, sama valaistu kulma säilyy. */
body .elegance-service-card,
body .elegance-team-card,
body .karppiset-contact-fields,
body .karppiset-contact-form-col {
  background-image:
    radial-gradient(130% 105% at 12% -8%, rgba(232,184,75,0.075) 0%, rgba(232,184,75,0) 58%),
    linear-gradient(168deg, #17171B 0%, #0F0F12 100%) !important;
}

/* ── 7. Yksi musta ─────────────────────────────────────────────────────
   Sivulla oli yhä kolme lähes mustaa: #0B0B0D (oikea), #0A0A10 ja
   #0C0C11. Ero on pieni mutta reunat näkyvät sektiorajoilla. */
body .elementor .elementor-element.elementor-element.e-con.e-parent:not(.elegance-hero):not(.elegance-page-hero),
body .site-header, body #masthead, body .site-header-wrap, body #mobile-header,
body .site-footer, body .site-footer-wrap, body #colophon {
  background-color: #0B0B0D !important;
}

/* ── 8. Yksi reuna koko sivulle ────────────────────────────────────────
   Sektio-otsikoista PALVELUMME ja TARVITSETKO SÄHKÖASENTAJAA? olivat
   keskitettyjä, REFERENSSIT ja footerin otsikot vasemmalla — samalla
   sivulla, samassa roolissa. Kaikki muu (h1, kortit, leipäteksti, napit)
   on vasemmassa reunassa. Sekoitettu tasaus lukee huolimattomuutena. */
body .elementor .elementor-widget-heading .elementor-heading-title,
body .elementor .elementor-widget-heading,
body .elegance-services .elementor-widget-heading,
body .elegance-cta .elementor-widget-heading,
body .elegance-services .elementor-widget-heading .elementor-heading-title,
body .elegance-cta .elementor-widget-heading .elementor-heading-title {
  text-align: left !important;
}

/* Heron leipäteksti ja nappi seuraavat samaa reunaa myös kapeilla. */
body .elegance-hero .elementor-widget-text-editor,
body .elegance-hero .elementor-widget-button {
  text-align: left !important;
}

/* ── 9. Korttien porrastus pois ────────────────────────────────────────
   Aiempi kierros siirsi parillisia kortteja 44px alaspäin perustellen
   "turns a 2x2 grid from a template into a composition". Porrastus toimii
   kun elementit ovat eri kokoisia — nämä neljä ovat identtisiä (497x151),
   joten siirtymä lukee kohdistusvirheenä, ei sommitteluna. Sama reuna
   kaikelle, kuten muullakin sivulla. */
body .karppiset-services-grid > .elegance-service-card:nth-child(even),
body .elegance-services .e-con.e-child > .elegance-service-card:nth-child(even) {
  margin-top: 0 !important;
}

/* ── 10. Karannut hiusviiva ────────────────────────────────────────────
   VIRHE JONKA TEIN: annoin .site-header::after -viivalle position:absolute
   + bottom:0, mutta .site-header on position:static. Absoluuttinen
   pseudo-elementti ankkuroituu lähimpään POSITIOITUUN esi-isään, ei
   vanhempaansa — joten viiva karkasi headerista ja piirtyi sivun päälle
   mielivaltaiselle korkeudelle (mitattu: top laskettiin 899px:ksi kun
   headerin alareuna on 105px). Näkyi selvimmin /yhteystiedot/-sivulla,
   jossa se leikkasi lomakkeen ja yhteystietokortin poikki.
   Korjaus: annetaan viivan kantajalle oma sijoituskonteksti. */
body header.site-header,
body #masthead,
body footer.site-footer,
body #colophon {
  position: relative;
}

/* ── 10b. Hiusviiva reunuksena, ei pseudo-elementtinä ──────────────────
   Edellinen yritys (position:relative headerille) EI voittanut: header on
   tarkoituksella position:static, koska Kadencen oma JS hoitaa sticky-
   toiminnon (aiemman kierroksen dokumentoitu päätös — sitä ei kumota).
   Siksi ::after ei voi koskaan ankkuroitua siihen oikein.
   Ratkaisu: pseudo-elementti pois kokonaan, viiva border-bottomina
   siihen elementtiin joka on oikeasti headerpalkki. Reunus ei voi karata. */
body header.site-header::after,
body #masthead::after {
  content: none !important;
  display: none !important;
}

body .site-main-header-wrap,
body #mobile-header .site-header-row-container,
body .mobile-site-header-wrap {
  border-bottom: 1px solid rgba(232, 184, 75, 0.22) !important;
}



/* ── 12. Alasivujen hero yhteen mittaan ────────────────────────────────
   Mitattu 1440px: palvelut 374, referenssit 374, yhteystiedot 404.
   Kaikilla oli sama saanto (min-height 360 + padding 49/49), mutta
   Yhteystiedot-sivun kolmirivinen ingressi tyonsi kontin yli minimin.
   Sama saanto tuotti eri tuloksen -> sivujen valilla nakyva hyppy.
   Lukitaan minimi sisallon todellisen tarpeen ylapuolelle, jolloin
   kaikki kolme paatyvat samaan mittaan riippumatta tekstin pituudesta.
   Etusivun hero on tarkoituksella korkeampi (laskeutumissivu = yksi
   hetki) eika kuulu taman saannon piiriin. */
@media (min-width: 1025px) {
  body:not(.home) .elegance-hero > .e-con-inner > .e-con.e-child,
  body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
    min-height: 420px !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body:not(.home) .elegance-hero > .e-con-inner > .e-con.e-child,
  body:not(.home) .elegance-page-hero > .e-con-inner > .e-con.e-child {
    min-height: 340px !important;
  }
}

/* ── 13. Typografia- ja muotoasteikon poikkeamat ───────────────────────
   Mitattu 1440px /referenssit/: 10 eri fonttikokoa ja 3 kulmapyöristystä.
   Korjataan neljä poikkeamaa, jotka kaikki ovat ajautumaa eivätkä
   tarkoituksellisia valintoja.

   a) Footerin sarakeotsikot renderöityivät 11.5px — alle luettavuus-
      rajan. Nostetaan 12.5px:ään, kirjaisinvälistys kantaa erottelun.
   b) Navigaatio oli 17px ja leipäteksti 16.6px: 0.4px ero ei ole
      hierarkia vaan kaksi eri määrittelyä. Navi 15px, jolloin ero
      leipätekstiin on selvä ja tarkoituksellinen.
   c) Headerin soittonappi kantoi 8px pyöristystä ja navilinkit 6px,
      vaikka design-järjestelmä määrittelee napeille 0. Se oli sivuston
      ainoa pyöristetty nappi. */

/* a) footerin sarakeotsikot */
body .site-footer h2.widget-title,
body .site-footer h2.elegance-fw-title,
body #colophon h2.widget-title,
body #colophon h2.elegance-fw-title {
  font-size: 12.5px !important;
  letter-spacing: 0.12em !important;
}

/* b) navigaation koko */
body .main-navigation .primary-menu-container > ul > li > a,
body #main-header .menu > li > a,
body .header-navigation .menu > li > a {
  font-size: 15px !important;
}

/* c) yksi muotokieli napeille ja navilinkeille: ei pyöristystä */
body .header-button,
body #mobile-header .header-button,
body .main-navigation .menu > li > a,
body .header-navigation .menu > li > a,
body #main-header .menu > li > a {
  border-radius: 0 !important;
}

/* ── 13b. Headerin soittonappi navin kokoon ────────────────────────────
   Nappi oli 17px samassa rivissä 15px navin kanssa. Kahden pikselin ero
   samassa vaakarivissä ei lue korostuksena vaan epätarkkuutena —
   korostus tulee kultaisesta ääriviivalaatikosta. */
body .header-button,
body #mobile-header .header-button {
  font-size: 15px !important;
}

/* ── 14. Hero-taustat WebP:nä ──────────────────────────────────────────
   Mitattu: hero-JPEGit 102–348 kt, WebP samasta kuvasta 47–173 kt eli
   noin puolet. Hero on LCP-elementti, joten se on sivun raskain yksittäinen
   este. image-set() antaa selaimen valita: WebP jos tuettu, muuten sama
   JPEG kuin ennen. Ei riskiä vanhoille selaimille.
   Ylikirjoittaa Elementorin elementtikohtaisen taustan (0,4,0), joten
   selektorit toistavat .elementor-element kahdesti. */
body.home .elegance-hero .e-con.e-child,
body.home .elementor .elementor-element.elementor-element.elegance-hero > .e-con-inner > .e-con.e-child {
  background-image: image-set(
    url("/wp-content/uploads/2026/07/elegance-halli-led-julkisivu.webp") type("image/webp"),
    url("/wp-content/uploads/2026/07/elegance-halli-led-julkisivu.jpg") type("image/jpeg")
  ) !important;
}

body.page-id-21 .elegance-hero .e-con.e-child,
body.page-id-21 .elegance-page-hero .e-con.e-child {
  background-image: image-set(
    url("/wp-content/uploads/2026/07/ruutimestari-olohuone.webp") type("image/webp"),
    url("/wp-content/uploads/2026/07/ruutimestari-olohuone.jpg") type("image/jpeg")
  ) !important;
}

body.page-id-22 .elegance-hero .e-con.e-child,
body.page-id-22 .elegance-page-hero .e-con.e-child {
  background-image: image-set(
    url("/wp-content/uploads/2026/07/ruutimestari-sangynpaaty.webp") type("image/webp"),
    url("/wp-content/uploads/2026/07/ruutimestari-sangynpaaty.jpg") type("image/jpeg")
  ) !important;
}

body.page-id-23 .elegance-hero .e-con.e-child,
body.page-id-23 .elegance-page-hero .e-con.e-child {
  background-image: image-set(
    url("/wp-content/uploads/2026/07/ruutimestari-terassi.webp") type("image/webp"),
    url("/wp-content/uploads/2026/07/ruutimestari-terassi.jpg") type("image/jpeg")
  ) !important;
}

/* Tiimi-kaistan kuva (peitto säilyy ennallaan) */
body.page-id-23 .elegance-team,
body.page-id-23 .elementor .elementor-element.elementor-element.elegance-team {
  background-image:
    linear-gradient(rgba(11,11,13,.72), rgba(11,11,13,.86)),
    image-set(
      url("/wp-content/uploads/2026/07/ruutimestari-sangynpaaty.webp") type("image/webp"),
      url("/wp-content/uploads/2026/07/ruutimestari-sangynpaaty.jpg") type("image/jpeg")
    ) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. IKONIT — palvelukortit ja toimintonapit
   Kortit olivat pelkkää tekstiä tummalla: otsikko + kaksi riviä. Se lukee
   keskeneräisenä riippumatta typografiasta. Jokainen segmentti saa oman
   piirrosikoninsa, joka kuvaa palvelun väittämättä olevansa valokuva
   tehdystä työstä.

   Toteutus on inline-SVG data-URI:na: ei ikonikirjastoa, ei yhtään uutta
   verkkopyyntöä, ei fonttiriippuvuutta. Väri on brändin kulta #E8B84B.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ikonilaatta kortin ylaosaan. Kortin oma valaistu kulma (radial-gradient
   taustassa) sailyy koskemattomana — tama on ::before, tausta on background. */
body .elegance-service-card::before {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 auto !important;
  margin: 0 0 18px 0 !important;
  border: 1px solid rgba(232, 184, 75, 0.30) !important;
  background-color: rgba(232, 184, 75, 0.07) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  position: static !important;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .22s ease, border-color .22s ease !important;
}

body .elegance-service-card:hover::before {
  background-color: rgba(232, 184, 75, 0.14) !important;
  border-color: rgba(232, 184, 75, 0.55) !important;
}

/* 1 · Kuluttajille — talo */
body .elegance-services .karppiset-services-grid:nth-of-type(1) .elegance-service-card:nth-child(1)::before,
body .elegance-service-card:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E") !important;
}

/* 2 · Yrityksille — toimitila */
body .elegance-service-card:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='11' height='17' rx='1'/%3E%3Cpath d='M14 10h6a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-6'/%3E%3Cpath d='M6.5 8h1M10 8h1M6.5 12h1M10 12h1M6.5 16h1M10 16h1M17 14h1M17 17.5h1'/%3E%3C/svg%3E") !important;
}

/* 3 · Urakoitsijoille — kypara */
body .elegance-service-card:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16a9 9 0 0 1 18 0'/%3E%3Cpath d='M10 7.2V4.6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2.6'/%3E%3Cpath d='M2 16h20a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E") !important;
}

/* 4 · Taloyhtioille — kerrostalo */
body .elegance-service-card:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V6a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v15'/%3E%3Cpath d='M12 21V10a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v11'/%3E%3Cpath d='M2 21h20'/%3E%3Cpath d='M6.5 8.5h1M9 8.5h1M6.5 12h1M9 12h1M6.5 15.5h1M9 15.5h1M15 12.5h1M17.5 12.5h1M15 16h1M17.5 16h1'/%3E%3C/svg%3E") !important;
}

/* ── Napit: nuoli ──────────────────────────────────────────────────────
   Asiakkaan oma verkkokauppa kayttaa tasmalleen tata eletta ("Shop all →"),
   joten nuoli on brandille kotoperainen eika koriste. Se liukuu hoverilla. */
body .elementor-button .elementor-button-text::after,
body .gform_wrapper .gform_button::after {
  content: " \2192";
  display: inline;
  margin-left: 10px;
  transition: transform .2s ease;
}

body .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
}

body .elementor-button:hover .elementor-button-text::after {
  margin-left: 14px;
}

/* Gravity Formsin lahetysnappi on <input>, joten ::after ei toimi.
   Nuoli taustakuvana oikeaan reunaan. */
body .gform_wrapper input[type="submit"],
body .karppiset-contact-form-col .gform_wrapper input[type="submit"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 17px 17px !important;
  padding-right: 48px !important;
}

body .gform_wrapper input[type="submit"]:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* ── Headerin soittonappi: luuri ───────────────────────────────────── */
body .header-button::before,
body #mobile-header .header-button::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8B84B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: filter .2s ease;
}

/* Hoverilla nappi kaantyy kullaksi -> ikoni tummaksi */
body .header-button:hover::before,
body #mobile-header .header-button:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body .elementor-button .elementor-button-text::after,
  body .elegance-service-card::before { transition: none !important; }
}

/* ── 16. CTA-kaista: teksti vasemmalle, nappi oikealle ─────────────────
   Kaista oli 458px korkea ja kaikki kolme elementtia (otsikko, teksti,
   nappi) olivat samassa yhden sarakkeen ruudukossa allekkain. Sisakontti
   oli jo flex-row + space-between, mutta siina oli vain YKSI lapsi, joten
   jaettavaa ei ollut. Otsikko venyi 1313px leveaksi ja katkesi kahdelle
   riville.

   Nyt: kaksi saraketta. Vasen kantaa otsikon ja leipatekstin, oikea
   napin pystysuunnassa keskitettyna. Kaista madaltuu ja lukee yhtena
   toimintakehotuksena eika kolmena erillisena palana. */
@media (min-width: 900px) {
  body .elegance-cta .elementor-widget-heading,
  body .elegance-cta .elementor-widget-text-editor,
  body .elegance-cta .elementor-widget-button {
    grid-column: auto;
  }

  body .elegance-cta .e-con-inner > .e-con > .e-con,
  body .elegance-cta .e-con-inner > .e-con.e-child > .e-con.e-child {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: clamp(32px, 5vw, 72px) !important;
    row-gap: 10px !important;
  }

  body .elegance-cta .elementor-widget-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body .elegance-cta .elementor-widget-text-editor {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body .elegance-cta .elementor-widget-button {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
  }
}

/* Matalampi kaista: 80px ylos ja alas oli enemman kuin sisalto tarvitsee. */
body .elegance-cta > .e-con-inner {
  padding-top: clamp(44px, 5vw, 56px) !important;
  padding-bottom: clamp(44px, 5vw, 56px) !important;
}

/* Kevyempi otsikko: 36px kahdella rivilla oli kaistan raskain elementti.
   Yhdelle riville mahtuva koko pitaa kaistan matalana. */
body .elegance-cta .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(1.35rem, 2.1vw, 1.75rem) !important;
  line-height: 1.2 !important;
  max-width: 26ch !important;
  margin-bottom: 0 !important;
}

body .elegance-cta .elementor-widget-text-editor,
body .elegance-cta .elementor-widget-text-editor p {
  font-size: 1rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 56ch !important;
}

/* Mobiilissa pinoon, nappi taydelle leveydelle. */
@media (max-width: 899px) {
  body .elegance-cta .elementor-widget-button .elementor-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ── 17. Yhteystietojen hierarkia ──────────────────────────────────────
   Mitattu: yhteystietokortin viisi rivia olivat kaikki 16px ja samaa
   varia #F4F1F6 — puhelinnumero nayttaa samalta kuin Y-tunnus. Sahko-
   asentajan sivulla puhelin on se yksi asia jonka takia sivu on olemassa.

   Ei "Puhelin:"-otsikoita: ikonit kertovat jo rivin tyypin, ja otsikko-
   sarake veisi leveytta ja huomiota itse tiedolta. Sen sijaan jarjestys
   kayton mukaan:
     1. puhelin  — suurin, kulta, selvasti klikattava
     2. sahkoposti — normaali, klikattava
     3. yritys, Y-tunnus, toimialue — vaimennettu taustatieto
   ═════════════════════════════════════════════════════════════════════ */

/* 1 · Puhelin — ensisijainen toiminto */
body .karppiset-contact-fields a[href^="tel:"] {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important;
  font-weight: 600 !important;
  color: #E8B84B !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(232, 184, 75, 0.35) !important;
  padding-bottom: 1px;
  transition: border-color .2s ease;
}

body .karppiset-contact-fields a[href^="tel:"]:hover {
  border-bottom-color: #E8B84B !important;
}

/* Puhelinrivi saa ilmaa ymparilleen, jotta se erottuu listasta. */
body .karppiset-contact-fields li:has(a[href^="tel:"]) {
  margin-block: 6px !important;
}

/* 2 · Sahkoposti — toissijainen mutta klikattava */
body .karppiset-contact-fields a[href^="mailto:"] {
  color: #F4F1F6 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(244, 241, 246, 0.22) !important;
  transition: border-color .2s ease, color .2s ease;
}

body .karppiset-contact-fields a[href^="mailto:"]:hover {
  color: #E8B84B !important;
  border-bottom-color: rgba(232, 184, 75, 0.6) !important;
}

/* 3 · Taustatieto vaimennetaan: naita ei soiteta eika klikata. */
body .karppiset-contact-fields li:not(:has(a)) {
  color: #A8A4AE !important;
  font-size: 0.94rem !important;
}

body .karppiset-contact-fields li:not(:has(a)) .elementor-icon-list-text {
  color: #A8A4AE !important;
}

/* ── Footer: sama jarjestys pienemmassa mittakaavassa ─────────────── */
body .site-footer .elegance-fw-list a[href^="tel:"],
body #colophon .elegance-fw-list a[href^="tel:"] {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  color: #E8B84B !important;
}

body .site-footer .elegance-fw-list li:not(:has(a)),
body #colophon .elegance-fw-list li:not(:has(a)) {
  color: #A8A4AE !important;
}

/* ── 17b. Yhteystiedot: varit Elementorin elementtitason ylapuolelle ───
   Lohkon 17 kokosaanto puri, mutta varit eivat: Elementor kirjoittaa
   elementtikohtaista CSS:aa spesifisyydella (0,4,0). Toistetaan luokka
   jotta paastaan (0,5,0) — sama tekniikka kuin sivuston muissa
   Elementor-ohituksissa.
   Samalla korjataan ikonivari: ne renderoityivat #E85C3A (brandirampin
   oranssi) vaikka design-jarjestelman ainoa aksentti on kulta #E8B84B.
   Ramppi kuuluu vain heron viivaan, ei kayttoliittymaelementteihin. */

body .elegance-contact-grid .karppiset-contact-fields .elementor-icon-list-item a[href^="tel:"],
body .karppiset-contact-fields .elementor-icon-list-item .elementor-icon-list-text a[href^="tel:"],
body .karppiset-contact-fields li a[href^="tel:"] {
  color: #E8B84B !important;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem) !important;
  font-weight: 600 !important;
}

body .elegance-contact-grid .karppiset-contact-fields .elementor-icon-list-item:not(:has(a)),
body .elegance-contact-grid .karppiset-contact-fields .elementor-icon-list-item:not(:has(a)) .elementor-icon-list-text,
body .karppiset-contact-fields li:not(:has(a)) .elementor-icon-list-text {
  color: #A8A4AE !important;
  font-size: 0.94rem !important;
}

/* Ikonit kullaksi: yksi aksentti koko sivustolla. */
body .karppiset-contact-fields .elementor-icon-list-icon svg,
body .karppiset-contact-fields .elementor-icon-list-icon i,
body .elegance-contact-grid .karppiset-contact-fields .elementor-icon-list-icon svg {
  fill: #E8B84B !important;
  color: #E8B84B !important;
}

body .karppiset-contact-fields .elementor-icon-list-icon svg path,
body .karppiset-contact-fields .elementor-icon-list-icon svg * {
  fill: #E8B84B !important;
}

/* Puhelinrivin ikoni saa saman kokokorotuksen kuin numero. */
body .karppiset-contact-fields li:has(a[href^="tel:"]) .elementor-icon-list-icon svg {
  width: 19px !important;
  height: 19px !important;
}

/* ── 18. Mobiiliheaderin tuplareunus ───────────────────────────────────
   Mitattu 375px: logo alkoi 62px:sta ja hampurilainen oli 56px oikeasta
   reunasta, kun sivun sisalto (otsikot, kortit, napit, footer) on 24px:ssa.
   Syy: reunus laskettiin kahdesti samassa ketjussa —
     .site-header-row-container-inner  padding-left: 28px   -> 28
     .site-container (sen lapsi)       padding-left: 28px   -> 56
   Header nayttti siksi 32px sisemmalta kuin muu sivu, mika lukee rikkinaisena
   kun sivua vierittaa ja header jaa sisallon paalle.
   Korjaus: ulompi kontti nollataan, sisempi antaa yhden 24px reunuksen joka
   vastaa sivun omaa reunusta. */
@media (max-width: 1024px) {
  body #masthead .site-header-row-container-inner,
  body .site-mobile-header-wrap .site-header-row-container-inner,
  body #mobile-header .site-header-row-container-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body #masthead .site-container,
  body .site-mobile-header-wrap .site-container,
  body #mobile-header .site-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ── 18b. Logo samalle reunalle ────────────────────────────────────────
   Tuplareunuksen korjauksen jalkeen logo jai 30px:aan, koska brandilinkki
   keskittaa kuvan omassa 44px laatikossaan (justify-content: center).
   Vasen tasaus tuo sen samalle 24px reunalle kuin muu sivu. */
@media (max-width: 1024px) {
  body .site-branding .brand,
  body .mobile-site-branding .brand,
  body #masthead .site-header-main-section-left {
    justify-content: flex-start !important;
  }
}

/* ── 18c. Heron tuplareunus mobiilissa ─────────────────────────────────
   Mitattu 375px: hero-paneeli on taysleveä (x=0) ja sen reunus on 24px,
   mutta otsikko, leipateksti ja nappi renderoityivat 44px:ssa. Syy: jokainen
   hero-widget kantaa lisaksi omaa 20px Elementor-reunusta.
     24 (paneeli) + 20 (widget) = 44
   Sama tuplauskuvio kuin headerissa. Kuva menee reunasta reunaan, joten
   tekstin kuuluu olla sivun omalla 24px reunalla. */
@media (max-width: 1024px) {
  body .elegance-hero > .e-con-inner > .e-con.e-child > .elementor-widget,
  body .elegance-page-hero > .e-con-inner > .e-con.e-child > .elementor-widget,
  body .elegance-hero > .e-con-inner > .e-con.e-child > .e-con,
  body .elegance-page-hero > .e-con-inner > .e-con.e-child > .e-con {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 18d. Heron nappi samalle reunalle ─────────────────────────────────
   Nappi on yhta tasoa syvemmalla omassa kontissaan kuin otsikko ja
   leipateksti, joten lohkon 18c saanto ei yltanyt siihen. */
@media (max-width: 1024px) {
  body .elegance-hero .e-con.e-child .e-con .elementor-widget,
  body .elegance-page-hero .e-con.e-child .e-con .elementor-widget,
  body .elegance-hero .e-con.e-child .elementor-widget-button,
  body .elegance-page-hero .e-con.e-child .elementor-widget-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── 19. Mobiiliheaderin mittasuhteet ──────────────────────────────────
   Mitattu 375px: logo 31px, soittonappi 208px, hampurilainen 46px.
   Nappi vei 64 % kaytettavissa olevasta 327px rivista ja litisti logon
   reunaan. Header nayttti siksi ahtaalta ja epatasapainoiselta.

   Nappi kavennetaan (pienempi kirjasin, tiukempi valistys ja reunus) ja
   logolle annetaan enemman kokoa. Kosketusalue pysyy 44px korkeana. */
@media (max-width: 1024px) {
  body #masthead .header-button,
  body .site-mobile-header-wrap .header-button,
  body #mobile-header .header-button {
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    padding: 10px 13px !important;
    white-space: nowrap !important;
  }

  /* Luuri-ikoni hieman pienemmaksi, jotta nappi kapenee lisaa. */
  body #masthead .header-button::before,
  body .site-mobile-header-wrap .header-button::before {
    width: 13px !important;
    height: 13px !important;
    margin-right: 7px !important;
  }

  /* Logo isommaksi ja sille omaa ilmaa oikealle. */
  body .site-mobile-header-wrap .custom-logo,
  body #masthead .custom-logo {
    height: 44px !important;
    width: auto !important;
    max-width: none !important;
  }

  body .site-mobile-header-wrap .site-header-main-section-left,
  body #masthead .site-header-main-section-left {
    padding-right: 14px !important;
  }
}

/* Kapeimmilla puhelimilla nappi saa kaventua viela hieman. */
@media (max-width: 400px) {
  body #masthead .header-button,
  body .site-mobile-header-wrap .header-button,
  body #mobile-header .header-button {
    font-size: 12.5px !important;
    padding: 10px 11px !important;
  }
}

/* ── 20. Valtterin havainnot 2.8.2026 ──────────────────────────────────
   a) CTA-kaistan kappale renderoityi text-align:center kun otsikko on left.
      Mitattu mobiilissa: h2 left, p center, nappi center. Lohko 8 kohdisti
      otsikot mutta ei kappaletta eika nappia CTA-kaistassa.
   b) Hero-paneelissa oli 56px tyhjaa ylhaalla ja 56px alhaalla mobiilissa.
      Valokuva on heron sisalto, joten tyhja kaista sen ylla ja alla lukee
      virheena eika ilmavuutena. Tiivistetaan.
   ═════════════════════════════════════════════════════════════════════ */

/* a) yksi reuna myos CTA-kaistan kappaleelle ja napille */
body .elegance-cta .elementor-widget-text-editor,
body .elegance-cta .elementor-widget-text-editor p,
body .elegance-cta .elementor-widget-button,
body .elegance-cta .elementor-widget-button .elementor-button-wrapper,
body .elegance-cta .elementor-align-center,
body .elegance-cta .elementor-align-center .elementor-button-wrapper {
  text-align: left !important;
}

@media (max-width: 899px) {
  body .elegance-cta .elementor-widget-button .elementor-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* b) heron tyhjat kaistat pois mobiilissa */
@media (max-width: 1024px) {
  body .elegance-hero > .e-con-inner > .e-con.e-child,
  body .elegance-page-hero > .e-con-inner > .e-con.e-child {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
}

@media (max-width: 480px) {
  body .elegance-hero > .e-con-inner > .e-con.e-child,
  body .elegance-page-hero > .e-con-inner > .e-con.e-child {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
}

/* ── 21. Verkkokauppalinkit ───────────────────────────────────────────
   Valtteri 3.8.2026: linkin piti olla NAPPI, ei tekstirivi heron alla.
   Heron tekstilinkki (.elegance-hero-shop) on poistettu ja korvattu
   oikealla Elementor-nappiwidgetilla "Verkkokauppa" tarjouspyyntonapin
   vieressa — se perii nappityylit eika tarvitse omaa CSS:aa.
   Alla vain leipatekstin sisaiset maininnat palvelusektiossa ja
   footerissa. */
/* Palvelusektion maininta samaan eleeseen, jotta linkki on yksi asia
   eika kaksi eri nakoista. */
body .elegance-lighting-note a,
body .elegance-webshop-note a {
  color: #E8B84B !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(232, 184, 75, 0.35);
}