/*
Theme Name: Duel Energy
Theme URI: https://duelenergy.fi
Author: Duel Energy
Description: Tumma, neonsininen block-teema DUEL Energy -energiajuomabrändille. Gutenberg-lohkoihin ja theme.json-tokeneihin perustuva block-teema.
Version: 2.5.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: duel-energy
*/

/* ==========================================================================
   Self-hosted webfonts
   Served from this theme rather than Google's CDN, so no visitor IP is
   disclosed to a third party and the page makes zero external requests.
   Unbounded, Space Grotesk and Manrope are all SIL Open Font License 1.1,
   which permits redistribution inside a theme.
   Paths are relative to style.css, so they survive a subdirectory install.
   ========================================================================== */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/manrope-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/manrope-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/manrope-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/manrope-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/manrope-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/manrope-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/space-grotesk-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/unbounded-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/unbounded-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/unbounded-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Unbounded';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('assets/fonts/unbounded-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Base / accessibility
   ========================================================================== */

/* One shared type scale. Every section heading resolves to the same step, so
   the page reads as designed rather than assembled. --header-h is measured
   from the real header at runtime (functions.php); the value here covers the
   first paint and the no-JS case. */
:root {
	--type-h1: clamp(2.5rem, 5vw, 3.5rem);
	--type-h2: clamp(1.75rem, 3.4vw, 2.5rem);
	--type-h3: clamp(1.0625rem, 1.6vw, 1.25rem);
	--header-h: 88px;
}

/* scroll-padding on the scroll container is the ONLY header offset here. It
   covers both hash navigation and scroll-snap alignment. Adding a matching
   scroll-margin-top on [id] targets as well makes the two compound, landing
   every anchor jump a full header-height short. */
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
	scroll-padding-top: var(--header-h);
}

/* Section-by-section scroll snapping (desktop only — see responsive block). */
@media (min-width: 782px) {
	html {
		scroll-snap-type: y proximity;
	}
	.hero-section,
	.nosto-section,
	.news-section,
	.products-section,
	.eco-section,
	.retailers-section,
	.usecases-section,
	.team-section,
	.facts-section,
	.story-section,
	.cta-banner,
	.contact-section {
		scroll-snap-align: start;
	}
}

/* Links: colour is always inherited from surrounding (already AA-checked)
   text colour; the accent shows up only as a decorative underline. */
a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
	transition: text-decoration-thickness 0.15s ease;
}
a:hover,
a:focus-visible {
	text-decoration-thickness: 3px;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

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

/* Fine film grain across the whole page. A flat #0A0D12 fill reads as cheap;
   ~5% noise over it reads as printed matter. Static, ~1 kB, non-interactive. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Scroll progress + active section in the nav
   ========================================================================== */

.duel-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 200;
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--lime));
}

.site-nav .wp-block-navigation-item > a {
	position: relative;
}
.site-nav .wp-block-navigation-item.is-current > a,
.site-nav .wp-block-navigation-item.is-current > a:hover {
	color: var(--wp--preset--color--accent);
}
.site-nav .wp-block-navigation-item.is-current > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--lime);
}

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

.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header {
	border-bottom: 1px solid rgba(51, 214, 255, 0.15);
	background: var(--wp--preset--color--dark);
}

/* Solid backdrop + shadow once the page has scrolled under the header. */
.wp-site-blocks > header.is-stuck .site-header {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
	border-bottom-color: rgba(51, 214, 255, 0.35);
}

.site-header-inner {
	align-items: center;
	width: 100%;
}

.site-logo {
	margin: 0 !important;
}
.site-logo img,
.site-logo-footer img {
	transition: transform 0.3s ease, filter 0.3s ease;
}
.site-logo a:hover img,
.site-logo a:focus-visible img {
	transform: scale(1.05);
	filter: drop-shadow(0 0 10px rgba(51, 214, 255, 0.65));
}
.site-logo img {
	height: 30px;
	width: auto;
}
.site-logo-footer img {
	height: 26px;
	width: auto;
}

/* Mobile menu overlay. Core ships this as a white sheet with 13px black
   links, which is both off-brand and unreadable coming off a black header. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--dark) !important;
	color: var(--wp--preset--color--white) !important;
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 2.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--white);
	font-size: 1.375rem;
	padding: 0.6rem 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
	color: var(--wp--preset--color--accent);
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: currentColor;
}
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--accent);
}

/* Nav: bold modern grotesk, uppercase, tracked out */
.site-nav,
.site-nav-footer {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 600;
}
.site-nav .wp-block-navigation-item a,
.site-nav-footer .wp-block-navigation-item a {
	font-size: 0.975rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	padding: 0.4rem 0;
}
.site-nav .wp-block-navigation-item a:hover,
.site-nav-footer .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--accent);
}
.site-nav-footer .wp-block-navigation-item a {
	padding: 0.15rem 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-section.wp-block-cover {
	background-color: #000000;
}
.hero-section .wp-block-cover__inner-container {
	max-width: clamp(320px, 44vw, 560px);
	width: 100%;
}
/* Force the full product photo to stay visible — WP's default cover crop
   can clip the can's top/reflection on very wide, short viewports. */
.hero-section > .wp-block-cover__image-background {
	object-fit: contain !important;
	/* Fades the photograph out toward the headline instead of ending on a
	   visible edge. The plate is black already, so it blends into the ground. */
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.25) 22%, #000 54%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0.25) 22%, #000 54%);
}

.hero-title {
	max-width: 14ch;
}

.hero-lede {
	max-width: 42ch;
	line-height: 1.6;
	opacity: 0.85;
}

.hero-facts {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	opacity: 0.75;
	margin: 0 !important;
}

.hero-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 !important;
}
.hero-kicker::before {
	content: "";
	display: block;
	width: 4px;
	height: 1.1em;
	background: var(--wp--preset--color--lime);
	flex-shrink: 0;
}

.wp-block-buttons.fade-up .btn-outline .wp-block-button__link {
	box-shadow: none;
}

/* ==========================================================================
   Shared "tag" and price elements
   ========================================================================== */

.tag-box {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.5rem 0.9rem;
	margin: 0 !important;
	/* The badge owns the whole gap to the heading below it. Headings carry a
	   mix of inline margin-top and .section-label's `margin: 0 !important`, so
	   the only way to get one predictable gap everywhere is to zero theirs and
	   measure from here. */
	margin-bottom: 2.75rem !important;
}

.tag-box + .wp-block-heading {
	margin-top: 0 !important;
}

.tag-box-outline {
	background: transparent;
	border: 2px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.tag-box-lime {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--background);
}

.tag-box-center {
	display: table;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* `opacity` is not a block attribute, so it cannot be set inline in template
   markup: the editor re-runs each block's save() function and flags any block
   whose stored HTML differs from the regenerated output. These carry it. */
.retailer-note,
.contact-intro {
	opacity: 0.7;
}
.facts-note {
	opacity: 0.6;
}

.price-tag {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 1.75rem;
	margin: 0 0 1rem 0 !important;
}

.read-more a {
	font-weight: 600;
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Buttons — notched, glowing CTAs instead of a plain flat rectangle
   ========================================================================== */

.wp-block-button__link {
	position: relative;
	clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
	box-shadow: 0 0 0 rgba(51, 214, 255, 0);
	transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.wp-block-button:not(.btn-outline) .wp-block-button__link {
	box-shadow: 0 0 16px rgba(51, 214, 255, 0.35);
}
.wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.6em;
	color: inherit;
	transition: transform 0.2s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-3px);
}
.wp-block-button:not(.btn-outline) .wp-block-button__link:hover,
.wp-block-button:not(.btn-outline) .wp-block-button__link:focus-visible {
	box-shadow: 0 0 28px rgba(51, 214, 255, 0.7);
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	transform: translateX(4px);
}

.btn-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--accent) !important;
	border: 2px solid var(--wp--preset--color--accent);
}
.btn-outline .wp-block-button__link:hover,
.btn-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--background) !important;
}

/* ==========================================================================
   Nosto module
   ========================================================================== */

.nosto-columns {
	align-items: center;
}

.nosto-visual {
	text-align: center;
}
.nosto-icon {
	margin: 0 auto !important;
	max-width: 84px;
	overflow: hidden;
	border-radius: 4px;
}
.nosto-icon img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.col-divider {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 2rem;
}

.nosto-cta {
	text-align: left;
}

/* ==========================================================================
   Ajankohtaista / news cards
   ========================================================================== */

h2.wp-block-heading {
	font-size: var(--type-h2);
	letter-spacing: 0.02em;
	line-height: 1.08;
}

/* Cards keep their own, smaller step. */
.news-card .wp-block-heading,
.news-card .wp-block-post-title,
.eco-card .wp-block-heading,
.usecase-card .wp-block-heading,
.team-card .wp-block-heading {
	font-size: var(--type-h3);
	line-height: 1.25;
}

.section-label {
	margin: 0 !important;
}

.news-card {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--white);
	padding: 1.5rem;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid rgba(51, 214, 255, 0.12);
}
.news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
	border-color: rgba(51, 214, 255, 0.35);
}
.news-card .news-date {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.6;
	margin-bottom: 0.4rem !important;
}
.news-card .wp-block-heading {
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
}

.news-thumb {
	width: 100%;
	height: 160px;
	margin: 0 0 1rem 0 !important;
	position: relative;
	overflow: hidden;
}
.news-thumb-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.news-card:hover .news-thumb-photo img {
	transform: scale(1.05);
}

/* ==========================================================================
   Duotone photography — pulls the stock lifestyle shots into one campaign
   ========================================================================== */

.duotone-media {
	position: relative;
	/* Own stacking context: keeps the colour blend on the photo instead of
	   letting it bleed onto the card behind it. */
	isolation: isolate;
}
.duotone-media img {
	filter: grayscale(1) contrast(1.15) brightness(1.02);
	transition: filter 0.35s ease, transform 0.3s ease;
}
.duotone-media::before,
.duotone-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}
/* Takes hue + saturation from this layer, luminosity from the photo. */
.duotone-media::before {
	z-index: 1;
	background: linear-gradient(150deg, #33d6ff 0%, #1d4f8a 55%, #0a0d12 100%);
	mix-blend-mode: color;
	opacity: 0.9;
	transition: opacity 0.35s ease;
}
/* Bottom vignette so the card copy underneath has something to sit against. */
.duotone-media::after {
	z-index: 2;
	background: linear-gradient(180deg, rgba(10, 13, 18, 0) 45%, rgba(10, 13, 18, 0.5) 100%);
}
/* Hover lets the real colour back through. */
.news-card:hover .duotone-media::before,
.team-card:hover .duotone-media::before {
	opacity: 0.22;
}
.news-card:hover .duotone-media img,
.team-card:hover .duotone-media img {
	filter: grayscale(0.15) contrast(1.05) brightness(1);
}

/* ==========================================================================
   Product spec panel / story visuals
   ========================================================================== */

/* Key-figure panel: carries the same visual weight the logo tile did, but
   states the product spec instead of repeating the mark a third time.
   Figures are derived from the nutrition table further down the page
   (32 mg and 3 kcal per 100 ml x 2.5 = one 250 ml can). */
.spec-panel {
	background:
		linear-gradient(160deg, rgba(51, 214, 255, 0.08), rgba(51, 214, 255, 0) 62%),
		var(--wp--preset--color--background);
	border: 1px solid rgba(51, 214, 255, 0.25);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}
.spec-panel-title {
	margin: 0 0 1.25rem 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.spec-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 0;
	border-top: 1px solid rgba(245, 247, 250, 0.14);
}
.spec-row:last-child {
	padding-bottom: 0;
}
.spec-value {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
	line-height: 1;
	color: var(--wp--preset--color--accent);
	/* Fixed-width digits so the count-up animation doesn't reflow the row. */
	font-variant-numeric: tabular-nums;
}
.spec-label {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.65;
	text-align: right;
}

.story-panel {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(51, 214, 255, 0.18);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.story-panel-mark {
	margin: 0 0 1.5rem 0 !important;
	width: clamp(64px, 7vw, 96px);
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 4px;
}
.story-panel-mark img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.story-quote {
	margin: 0 0 0.85rem 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	line-height: 1.3;
}
.story-quote-meta {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ==========================================================================
   Social section
   ========================================================================== */

.social-inner {
	align-items: center;
	width: 100%;
}
.social-label {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--type-h3);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.social-link {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.social-link a {
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Use-case cards
   ========================================================================== */

.usecase-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(51, 214, 255, 0.12);
	padding: 2rem 1.5rem;
	height: 100%;
	text-align: center;
	align-items: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.usecase-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5);
	border-color: rgba(51, 214, 255, 0.35);
}
.usecase-tag {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 1rem 0 !important;
}
.usecase-card .wp-block-heading {
	margin: 0 0 0.5rem 0 !important;
}
.usecase-card p:not(.wp-block-heading) {
	margin: 0 !important;
	opacity: 0.85;
}

/* ==========================================================================
   Nutrition / facts table
   ========================================================================== */

.facts-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--label);
}
.facts-table th,
.facts-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid rgba(245, 247, 250, 0.15);
}
.facts-table thead th {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}
.facts-table td:last-child,
.facts-table th:last-child {
	text-align: right;
	font-weight: 600;
}
.facts-table tbody tr:last-child td {
	border-bottom: none;
}

/* ==========================================================================
   Retailer placeholder slots
   ========================================================================== */

.retailer-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	margin: 0 !important;
	border: 1px dashed rgba(245, 247, 250, 0.3);
	color: rgba(245, 247, 250, 0.4);
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   Team / community cards
   ========================================================================== */

.team-card {
	background: var(--wp--preset--color--background);
	border: 1px solid rgba(51, 214, 255, 0.12);
	padding: 1.75rem;
	height: 100%;
}
.team-photo {
	margin: 0 0 1.25rem 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 4px;
}
.team-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.team-card > p:not(.team-avatar):not(.team-role) {
	margin: 0 0 1rem 0 !important;
	opacity: 0.9;
}
.team-role {
	margin: 0 !important;
	opacity: 0.6;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   CTA banner — animated turquoise-to-lime gradient
   ========================================================================== */

.cta-banner {
	gap: 1.5rem;
	background: linear-gradient(115deg, #33d6ff 0%, #33d6ff 40%, #b9f24a 75%, #d7ff00 100%);
	background-size: 220% 220%;
	animation: duelGradientShift 8s ease-in-out infinite;
}
.cta-banner-copy .wp-block-heading {
	margin: 0 !important;
}
.cta-banner-copy p {
	max-width: 42ch;
	opacity: 0.8;
}
.cta-banner-form {
	align-items: stretch;
	gap: 0.75rem;
}
.cta-banner-input {
	display: flex;
	align-items: center;
	margin: 0 !important;
	min-width: 240px;
	padding: 0 1.1rem;
	background: var(--wp--preset--color--dark);
	color: rgba(245, 247, 250, 0.55);
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.875rem;
}
.btn-lime .wp-block-button__link {
	background: var(--wp--preset--color--dark) !important;
	color: var(--wp--preset--color--lime) !important;
	box-shadow: 0 0 16px rgba(215, 255, 0, 0.35) !important;
}
.btn-lime .wp-block-button__link:hover,
.btn-lime .wp-block-button__link:focus-visible {
	box-shadow: 0 0 28px rgba(215, 255, 0, 0.6) !important;
}

@keyframes duelGradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

/* ==========================================================================
   Contact section
   ========================================================================== */

.contact-group {
	padding-top: 1.25rem;
	margin-top: 1.75rem;
	border-top: 1px solid var(--wp--preset--color--accent);
}
.contact-group:first-child {
	margin-top: 0;
}
.contact-group p {
	margin: 0 0 0.35rem 0 !important;
}
.contact-label {
	font-family: var(--wp--preset--font-family--label);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
	margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer-inner {
	align-items: center;
}
.footer-copyright,
.footer-legal {
	margin: 0 !important;
	opacity: 0.65;
}
.footer-legal a {
	margin-left: 1rem;
	text-decoration-thickness: 1px;
}
.footer-legal a:first-child {
	margin-left: 0;
}

/* ==========================================================================
   Equal-height cards (shared pattern)
   ========================================================================== */

.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-items: stretch;
}
.equal-cards .cta-bottom {
	margin-top: auto !important;
}

/* ==========================================================================
   Animation & motion
   ========================================================================== */

.fade-up {
	opacity: 0;
	transform: translateY(30px);
	animation: duelFadeUp 0.7s ease forwards;
}

/* Hero H1: rotates into place rather than a plain fade */
.flip-in {
	opacity: 0;
	transform: perspective(900px) rotateX(-75deg);
	transform-origin: center bottom;
	animation: duelFlipIn 0.9s cubic-bezier(0.22, 0.8, 0.24, 1) 0.05s forwards;
}
@keyframes duelFlipIn {
	to {
		opacity: 1;
		transform: perspective(900px) rotateX(0deg);
	}
}

.fade-up.hero-lede {
	animation-delay: 0.2s;
}
.hero-badges.fade-up {
	animation-delay: 0.3s;
}
.wp-block-buttons.fade-up {
	animation-delay: 0.4s;
}

.js .animate-on-scroll {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .animate-on-scroll.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.js .stagger-children > * {
	opacity: 0;
	transform: translateY(20px);
}
.js .animate-on-scroll.is-visible .stagger-children > * {
	animation: duelFadeUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.35s; }

.float {
	animation: duelFloat 4s ease-in-out infinite;
}

@keyframes duelFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes duelFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	.animate-on-scroll,
	.fade-up,
	.flip-in,
	.stagger-children > *,
	.float {
		opacity: 1 !important;
		transform: none !important;
	}
	html {
		scroll-behavior: auto;
		scroll-snap-type: none !important;
	}
}

/* Keep animated content visible while editing in the block editor, where the
   front-end scroll observer script never runs. */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .flip-in,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > * {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 781px) {

	.col-divider {
		border-left: none;
		border-top: 2px solid var(--wp--preset--color--accent);
		padding-left: 0;
		padding-top: 1.5rem;
		margin-top: 1.5rem !important;
	}
	.nosto-visual {
		margin-bottom: 0.5rem;
	}
	.cta-banner {
		text-align: center;
		justify-content: center !important;
	}
	.cta-banner-copy,
	.cta-banner-form {
		justify-content: center;
		text-align: center;
	}
	.cta-banner-copy p {
		max-width: none;
	}
	.cta-banner-input {
		min-width: 0;
		flex: 1 1 auto;
	}
	.hero-section.wp-block-cover {
		min-height: 520px !important;
	}
	.hero-section .wp-block-cover__inner-container {
		max-width: 100%;
	}
	.hero-section .wp-block-cover__background {
		opacity: 0.45 !important;
	}
}

@media (max-width: 480px) {
	.hero-title {
		max-width: 100%;
	}
	.tag-box {
		font-size: 0.7rem;
	}
}

/* ==========================================================================
   Image focal points (per-photo crop tuning)
   ========================================================================== */

.focus-c32 img { object-position: center 32% !important; }
.focus-c35 img { object-position: center 35% !important; }
.focus-c45 img { object-position: center 45% !important; }
.focus-c58 img { object-position: center 58% !important; }
.focus-c72 img { object-position: center 72% !important; }
.focus-c75 img { object-position: center 75% !important; }

/* ==========================================================================
   Promise band — brand promise ticker under the hero
   ========================================================================== */

.promise-band {
	overflow: hidden;
	border-top: 1px solid rgba(10, 13, 18, 0.25);
	border-bottom: 1px solid rgba(10, 13, 18, 0.25);
}
.promise-track {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	animation: duelTicker 38s linear infinite;
}
@keyframes duelTicker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   Section lede
   ========================================================================== */

.section-lede {
	max-width: 60ch;
	opacity: 0.8;
}
.has-text-align-center.section-lede {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Product ecosystem cards
   ========================================================================== */

.eco-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(51, 214, 255, 0.12);
	padding: 0 0 1.75rem 0;
	height: 100%;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.eco-card:hover {
	transform: translateY(-4px);
	border-color: rgba(51, 214, 255, 0.35);
}
.eco-photo {
	margin: 0 0 1.5rem 0 !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--dark);
}
.eco-photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.35s ease;
}
.eco-card:hover .eco-photo img {
	transform: scale(1.04);
}
.eco-card > *:not(.eco-photo) {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}
.eco-tag {
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.6rem 0 !important;
}
.eco-card .wp-block-heading {
	margin: 0 0 0.5rem 0 !important;
}
.eco-items {
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--lime);
	margin: 0 0 0.85rem 0 !important;
}
.eco-card p:not(.eco-tag):not(.eco-items) {
	margin: 0 !important;
	opacity: 0.85;
}
.eco-disclaimer {
	opacity: 0.55;
	max-width: 70ch;
}

/* ==========================================================================
   Archive / search listing (templates/index.html)
   ========================================================================== */

.archive-list {
	gap: 1.5rem !important;
	padding: 0;
	margin: 0;
}
.archive-list > li {
	list-style: none;
	margin: 0;
}
.news-card .wp-block-post-title {
	margin: 0 0 0.6rem 0 !important;
}
.news-card .wp-block-post-date {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.6;
	margin: 0 0 0.4rem 0 !important;
}
.news-card .wp-block-post-excerpt {
	margin: 0 !important;
}
.news-card .wp-block-post-excerpt__excerpt {
	opacity: 0.85;
}
.archive-pagination {
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.archive-pagination .page-numbers.current {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* ==========================================================================
   Section visibility switch
   ==========================================================================
   Add "on-piilossa" to a block's Advanced -> Additional CSS class field to take
   that section off the live page without deleting it. Inside the editor the
   section stays visible but dimmed and outlined, so it can be found and
   switched back on. */

.on-piilossa {
	display: none !important;
}
.editor-styles-wrapper .on-piilossa {
	display: revert !important;
	opacity: 0.45;
	outline: 2px dashed rgba(51, 214, 255, 0.55);
	outline-offset: -2px;
}

/* ==========================================================================
   Timeline — DUEL:n tulevaisuuden suunnitelma
   ========================================================================== */

.timeline-section {
	position: relative;
	overflow: hidden;
}

/* Atmosphere: the wet, droplet-covered floor from the can shoot, anchored to
   the bottom at its natural aspect so it is never upscaled, with a gradient
   over it that keeps the copy well above AA contrast. */
.timeline-section::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(180deg, rgba(16, 27, 46, 0.98) 0%, rgba(16, 27, 46, 0.9) 55%, rgba(16, 27, 46, 0.84) 100%),
		url("assets/images/timeline-bg.jpg");
	background-size: auto, 100% auto;
	background-position: center, center bottom;
	background-repeat: no-repeat, no-repeat;
}

/* Electric glow spilling in from the top of the section. */
.timeline-section::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: min(1000px, 95%);
	height: 340px;
	transform: translateX(-50%);
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 0%, rgba(51, 214, 255, 0.22), rgba(51, 214, 255, 0) 70%);
}

.timeline-section > * {
	position: relative;
	z-index: 1;
}

.timeline {
	position: relative;
	padding: 0.5rem 0;
}

/* The unfilled track. */
.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: rgba(245, 247, 250, 0.14);
}

/* The filled portion, appended by the footer script. The gradient is what
   makes the line shift colour as the reader moves down the section. */
.timeline-fill {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 0;
	transform: translateX(-50%);
	background: linear-gradient(180deg, #33d6ff 0%, #7ae8c0 55%, #d7ff00 100%);
	box-shadow: 0 0 16px rgba(51, 214, 255, 0.7);
	transition: height 0.15s linear;
}

/* No cards — the steps are set as type against the background, and the
   alternation is carried by alignment rather than by a border. */
.timeline-step {
	position: relative;
	width: calc(50% - 3.5rem);
	margin: 0 !important;
	padding: 0;
}
.timeline-step + .timeline-step {
	margin-top: 4rem !important;
}
.timeline-step:nth-child(even) {
	margin-left: calc(50% + 3.5rem) !important;
}
.timeline-step:nth-child(odd) {
	text-align: right;
}

.timeline-phase {
	margin: 0 0 0.25rem 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2.75rem, 6vw, 4.5rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
}
/* Outline treatment only where text-stroke exists, so the numeral can never
   disappear on an unsupporting browser. */
@supports (-webkit-text-stroke: 2px black) {
	.timeline-phase {
		color: transparent;
		-webkit-text-stroke: 2px rgba(51, 214, 255, 0.8);
	}
}

.timeline-step .wp-block-heading {
	margin: 0 0 0.75rem 0 !important;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.2;
}
.timeline-step p:not(.timeline-phase) {
	margin: 0 !important;
	opacity: 0.88;
	font-size: 0.9375rem;
	line-height: 1.75;
}

/* Node on the centre line. */
.timeline-step::after {
	content: "";
	position: absolute;
	top: 1.4rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
	border: 2px solid var(--wp--preset--color--accent);
	animation: duelNodePulse 3.2s ease-in-out infinite;
}
.timeline-step:nth-child(odd)::after {
	right: calc(-3.5rem - 10px);
}
.timeline-step:nth-child(even)::after {
	left: calc(-3.5rem - 10px);
}
.timeline-step:nth-child(2)::after { animation-delay: 0.7s; }
.timeline-step:nth-child(3)::after { animation-delay: 1.4s; }

@keyframes duelNodePulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(51, 214, 255, 0.10), 0 0 14px rgba(51, 214, 255, 0.55); }
	50%      { box-shadow: 0 0 0 10px rgba(51, 214, 255, 0.05), 0 0 28px rgba(51, 214, 255, 0.95); }
}

/* Each step's imagery sits mirrored across the line, filling the side the copy
   leaves empty. No frame: a soft radial mask dissolves the edges so the shots
   sink into the background instead of sitting in boxes. */
.timeline-media {
	position: absolute;
	top: 0;
	width: 100%;
	align-items: stretch;
	pointer-events: none;
}
.timeline-step:nth-child(odd) .timeline-media {
	left: calc(100% + 7rem);
}
.timeline-step:nth-child(even) .timeline-media {
	right: calc(100% + 7rem);
}
.timeline-media-item {
	margin: 0 !important;
	flex: 1 1 0;
	min-width: 0;
}
.timeline-media-item img {
	width: 100%;
	height: clamp(160px, 20vw, 260px);
	object-fit: contain;
	opacity: 0.92;
	-webkit-mask-image: radial-gradient(ellipse 74% 70% at 50% 50%, #000 26%, rgba(0, 0, 0, 0) 70%);
	mask-image: radial-gradient(ellipse 74% 70% at 50% 50%, #000 26%, rgba(0, 0, 0, 0) 70%);
}

.timeline-vision {
	max-width: 54ch;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.375rem);
	line-height: 1.4;
	text-shadow: 0 0 26px rgba(51, 214, 255, 0.3);
}

/* ==========================================================================
   Messuosasto
   ========================================================================== */

.booth-columns {
	align-items: center;
}
.booth-photo {
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid rgba(51, 214, 255, 0.18);
}
.booth-photo img {
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Product section can
   ========================================================================== */

.product-can {
	margin: 0 !important;
}
.product-can img {
	width: 100%;
	height: auto;
	-webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 32%, rgba(0, 0, 0, 0) 76%);
	mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 32%, rgba(0, 0, 0, 0) 76%);
}

/* Timeline, hero and product imagery on small screens. This block must come
   after the desktop rules above: the shared responsive section earlier in the
   file loses to them on specificity-tie, regardless of viewport. */
@media (max-width: 781px) {
	.timeline::before,
	.timeline-fill {
		left: 8px;
		transform: none;
	}
	.timeline-step,
	.timeline-step:nth-child(odd),
	.timeline-step:nth-child(even) {
		width: auto;
		margin-left: 3rem !important;
		text-align: left;
	}
	.timeline-step:nth-child(odd)::after,
	.timeline-step:nth-child(even)::after {
		left: -47px;
		right: auto;
	}
	.timeline-step:nth-child(odd) .timeline-media,
	.timeline-step:nth-child(even) .timeline-media {
		position: static;
		left: auto;
		right: auto;
		flex-wrap: wrap;
		margin-top: 1.25rem;
	}
	/* The hero plate is composed wide with the can off to the right. Contain
	   would shrink it to a sliver on a phone, so crop to the can instead. */
	.hero-section > .wp-block-cover__image-background {
		object-fit: cover !important;
		object-position: 72% 50% !important;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ==========================================================================
   Subpage content: product cards and team roster
   ========================================================================== */

/* The long-form heading treatment above is meant for a document's own
   headings. Cards carry their own scale, so exempt them — otherwise a card
   title inherits the 2.75rem top margin and the section rule. */
.entry-content .eco-card .wp-block-heading,
.entry-content .person-card .wp-block-heading {
	margin-top: 0 !important;
	margin-bottom: 0.5rem !important;
	font-size: var(--type-h3);
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	padding-bottom: 0;
	border-bottom: 0;
}
.entry-content .eco-card p,
.entry-content .person-card p {
	margin-bottom: 0 !important;
}

.range-photo {
	margin: 2.5rem 0 0 0 !important;
	overflow: hidden;
	border: 1px solid rgba(51, 214, 255, 0.18);
}
.range-photo img {
	width: 100%;
	height: auto;
}

.person-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(51, 214, 255, 0.14);
	padding: 1.75rem;
	height: 100%;
	text-align: center;
	align-items: center;
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.person-card:hover {
	transform: translateY(-4px);
	border-color: rgba(51, 214, 255, 0.4);
}

/* Deliberately a marked placeholder rather than a stock portrait: these are
   slots for real people, not stand-ins pretending to be staff. */
.person-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin: 0 auto 1.25rem auto !important;
	border: 1px dashed rgba(51, 214, 255, 0.45);
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(245, 247, 250, 0.5);
}
.person-role {
	margin: 0 0 0.85rem 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.person-card p:not(.person-avatar):not(.person-role) {
	opacity: 0.85;
	font-size: 0.9375rem;
}

/* ==========================================================================
   404
   ========================================================================== */

.error-section {
	text-align: center;
}
.error-code {
	margin: 0 0 0.5rem 0 !important;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(4.5rem, 15vw, 9rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	/* Solid accent is the base; the outline treatment only replaces it where
	   text-stroke is actually supported, so the digits can never vanish. */
	color: var(--wp--preset--color--accent);
}
@supports (-webkit-text-stroke: 2px black) {
	.error-code {
		color: transparent;
		-webkit-text-stroke: 2px var(--wp--preset--color--accent);
	}
}
.error-title {
	max-width: 20ch;
	margin: 0 auto 1.25rem auto !important;
}
.error-lede {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 46ch;
}

/* ==========================================================================
   Content pages (tietosuoja, kayttoehdot, evasteet ...)
   ========================================================================== */

.page-title {
	margin: 0 !important;
	font-size: var(--type-h2);
	letter-spacing: 0.02em;
	line-height: 1.08;
}

/* Long-form copy. The global heading style is uppercase display type sized for
   section headers, which is unreadable in a privacy policy. Inside page content
   the headings step down to a documentary scale in sentence case. */
.entry-content > *:first-child {
	margin-top: 0 !important;
}
.entry-content h2.wp-block-heading,
.entry-content h3.wp-block-heading,
.entry-content h4.wp-block-heading {
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
	margin-top: 2.75rem !important;
	margin-bottom: 0.75rem !important;
}
.entry-content h2.wp-block-heading {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(51, 214, 255, 0.25);
}
.entry-content h3.wp-block-heading {
	font-size: 1.1875rem;
}
.entry-content h4.wp-block-heading {
	font-size: 1.0625rem;
	color: var(--wp--preset--color--accent);
}
.entry-content p {
	margin: 0 0 1.15rem 0;
	line-height: 1.75;
}
.entry-content ul,
.entry-content ol {
	margin: 0 0 1.5rem 0;
	padding-left: 1.4rem;
}
.entry-content li {
	margin-bottom: 0.55rem;
	line-height: 1.7;
}
.entry-content a {
	color: var(--wp--preset--color--accent);
}
.entry-content blockquote {
	margin: 2rem 0;
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--accent);
}
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.entry-content th,
.entry-content td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid rgba(245, 247, 250, 0.15);
}
.entry-content th {
	font-family: var(--wp--preset--font-family--label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--accent);
}
.entry-content hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid rgba(245, 247, 250, 0.15);
}

.footer-tagline {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--label);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

@media (prefers-reduced-motion: reduce) {
	.promise-track,
	.timeline-step::after {
		animation: none !important;
	}
}