/*
Theme Name: Famkro
Theme URI: https://famkro.fi/
Description: Famkro Ab child theme for Twenty Twenty-Five.
Author: WebAula Oy
Author URI: https://webaula.fi/
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: famkro
*/

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

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Text links ease between colours on hover. Components with their own
   transition (buttons, cards) override this. */
a {
	transition:
		color 0.25s ease-in-out,
		border-color 0.25s ease-in-out,
		text-decoration-color 0.25s ease-in-out;
}

/* Sections sit flush against each other on full-width pages. */
.fk-main {
	margin-block-start: 0;
}

.fk-main .wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Anchor targets clear the fixed header. */
.fk-main [id] {
	scroll-margin-top: 72px;
}

/* --- Paragraph styles (registered in functions.php) --- */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.22em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.is-style-eyebrow + .wp-block-heading {
	margin-block-start: 22px;
}

.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}

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

.fk-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	/* Shared by the background fade and every colour change in the header,
	   so text and logo switch in step with the background. */
	--fk-header-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Solid background and blur live on a pseudo-element: backdrop-filter on the
   header itself would trap the fixed mobile menu inside the header bar. */
.fk-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background-color: rgba(250, 249, 245, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	opacity: 0;
	transition: opacity 0.45s var(--fk-header-ease);
}

.admin-bar .fk-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Pages without a hero: keep content clear of the fixed header. */
body:not(.home) .wp-site-blocks {
	padding-top: 70px;
}

/* In the site editor the header stays in flow, on navy so the white links read. */
.editor-styles-wrapper .fk-header {
	position: relative;
	background-color: var(--wp--preset--color--navy);
}

.fk-header__bar {
	gap: 32px;
	padding-block: 22px;
}

.fk-header__menu {
	gap: 38px;
}

/* --- Logo: white over the hero, original once the header turns solid --- */

.fk-header__logo img {
	display: block;
	width: auto;
	height: 26px;
	filter: brightness(0) invert(1);
	transition: filter 0.45s var(--fk-header-ease);
}

/* --- Navigation links --- */

.fk-header .fk-nav {
	gap: 34px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.fk-header .fk-nav .wp-block-navigation__container {
	gap: 34px;
}

/* Transition only on the links: one on the parent as well stacks with the
   inherited colour change and makes the text lag behind the background. */
.fk-header .fk-nav a {
	color: inherit;
	transition: color 0.45s var(--fk-header-ease);
}

.fk-header .fk-nav a:hover,
.fk-header .fk-nav a:focus-visible {
	color: var(--wp--preset--color--sky);
}

/* --- Language switcher --- */

.fk-lang {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.55);
}

.fk-lang a,
.fk-lang__sep {
	color: inherit;
	transition: color 0.45s var(--fk-header-ease);
}

.fk-lang a:hover,
.fk-lang a:focus-visible {
	color: #fff;
}

.fk-lang .fk-lang__current {
	color: var(--wp--preset--color--sky);
}

.fk-lang__sep {
	margin-inline: 6px;
	opacity: 0.35;
}

/* --- Solid state: after scrolling, and on pages without a hero --- */

.fk-header.is-solid::before {
	opacity: 1;
}

.fk-header.is-solid .fk-header__logo img {
	filter: none;
}

.fk-header.is-solid .fk-nav {
	color: #3c4e63;
}

.fk-header.is-solid .fk-nav a:hover,
.fk-header.is-solid .fk-nav a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.fk-header.is-solid .fk-lang {
	color: var(--wp--preset--color--subtle);
}

.fk-header.is-solid .fk-lang .fk-lang__current {
	color: var(--wp--preset--color--accent);
}

.fk-header.is-solid .fk-lang a:hover,
.fk-header.is-solid .fk-lang a:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* --- Hamburger and mobile overlay --- */

.fk-header .wp-block-navigation__responsive-container-open {
	color: #fff;
	transition: color 0.45s var(--fk-header-ease);
}

.fk-header.is-solid .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--navy);
}

.fk-header .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 28px clamp(20px, 4vw, 32px) 40px;
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 72px;
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 18px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	text-transform: none;
	color: #fff;
}

.fk-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--sky);
}

.fk-nav .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

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

.wp-block-cover.fk-hero {
	align-items: flex-end;
	min-height: 96vh;
	min-height: 96dvh;
	padding: 180px clamp(20px, 4vw, 32px) 92px;
	background-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* Hairline along the bottom edge. */
.wp-block-cover.fk-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 1px;
	background: linear-gradient(90deg, rgba(87, 168, 255, 0.6), rgba(255, 255, 255, 0));
}

/* Video fades in once it has a frame to show. */
.fk-js .fk-hero .wp-block-cover__video-background {
	opacity: 0;
	transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-js .fk-hero .wp-block-cover__video-background.is-ready {
	opacity: 1;
}

/* Three layered gradients over the video, as in the design. */
.fk-hero .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background:
		radial-gradient(120% 90% at 78% 18%, rgba(41, 79, 122, 0.4) 0%, rgba(11, 28, 48, 0) 62%),
		linear-gradient(0deg, rgba(7, 18, 31, 0.9) 0%, rgba(7, 18, 31, 0.3) 42%, rgba(7, 18, 31, 0.55) 100%),
		linear-gradient(90deg, rgba(7, 18, 31, 0.94) 0%, rgba(7, 18, 31, 0.82) 42%, rgba(7, 18, 31, 0.6) 100%) !important;
}

/* Core pins positioned content to the edge; keep it on the wide grid instead. */
.wp-block-cover.fk-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
.wp-block-cover.fk-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Zero-specificity reset so the per-element margins below win. */
:where(.fk-hero .wp-block-cover__inner-container) > * {
	max-width: 920px;
	margin-block: 0;
}

.fk-hero .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 34px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.6);
}

.fk-hero .is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 38px;
	height: 1px;
	background: var(--wp--preset--color--sky);
}

.fk-hero h1 {
	max-width: 15ch;
	margin-bottom: 34px;
	color: #fff;
}

.fk-hero p:not(.is-style-eyebrow) {
	max-width: 56ch;
	margin-bottom: 44px;
	font-size: 19px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
}

.fk-hero .wp-block-buttons {
	gap: 14px;
}

.fk-hero .wp-block-button__link {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, border-color 0.25s ease;
}

.fk-hero .wp-block-button__link:active {
	transform: translateY(1px);
}

.fk-hero .is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.28);
	color: #fff;
}

.fk-hero .is-style-outline .wp-block-button__link:hover {
	border-color: rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   Content sections
   ========================================================================== */

.fk-section {
	padding-block: clamp(88px, 11vw, 148px);
}

/* --- Split layout: label and heading left, body right --- */

.fk-split.wp-block-columns {
	gap: clamp(40px, 7vw, 110px);
}

.fk-split .wp-block-column > p:last-child {
	margin-bottom: 0;
}

.fk-split .wp-block-column > p:not(.is-style-lead):not(.is-style-eyebrow) {
	max-width: 62ch;
}

.fk-split .is-style-lead {
	margin-bottom: 30px;
}

/* --- Paper section with hairlines (Sijoitustoiminta) --- */

.fk-section.has-paper-background-color {
	padding-block: clamp(80px, 9vw, 124px);
	border-block: 1px solid var(--wp--preset--color--line);
}

/* --- Intro row: label and heading left, photo right --- */

.fk-intro.wp-block-columns {
	gap: clamp(36px, 5vw, 72px);
	margin-bottom: clamp(54px, 6vw, 84px);
}

.fk-intro > .wp-block-column:first-child > * {
	max-width: 44ch;
}

/* --- Photo with caption --- */

.wp-block-image.fk-figure {
	margin: 0;
}

.wp-block-image.fk-figure img {
	width: 100%;
	filter: saturate(0.92);
}

.wp-block-image.fk-figure figcaption {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-align: left;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* --- Numbered features: number comes from a CSS counter, so a third
   column added in the editor becomes 03 automatically --- */

.fk-features.wp-block-columns {
	gap: 0;
	margin-block: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	counter-reset: fk-feature;
}

.fk-features > .wp-block-column {
	padding: 44px 0 48px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.fk-features > .wp-block-column:not(:first-child) {
	padding-left: 48px;
	border-left: 1px solid var(--wp--preset--color--line);
}

.fk-features > .wp-block-column:not(:last-child) {
	padding-right: 48px;
}

.fk-features h3 {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 26px;
	font-size: 28px;
}

.fk-features h3::before {
	counter-increment: fk-feature;
	content: counter(fk-feature, decimal-leading-zero);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--accent);
}

.fk-features p {
	max-width: 44ch;
	margin: 0;
}

/* --- Dark group style "Tumma" (registered in functions.php) --- */

.is-style-dark {
	background-color: var(--wp--preset--color--navy);
	color: #fff;
}

.is-style-dark :is(h1, h2, h3, h4) {
	color: #fff;
}

.is-style-dark p {
	color: rgba(255, 255, 255, 0.78);
}

.is-style-dark p:not([class*="is-style-"]) {
	line-height: 1.8;
}

.is-style-dark .is-style-eyebrow {
	color: var(--wp--preset--color--sky);
}

.is-style-dark .is-style-lead {
	color: #fff;
}

/* Diagonal line texture behind a dark section. */
.fk-lines {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cpath d='M0 600L600 0M200 600L800 0M400 600L1000 0M600 600L1200 0M800 600L1400 0' fill='none' stroke='%237FA3C9' stroke-opacity='.22' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* --- Pull quote under body text --- */

.wp-block-quote.fk-quote {
	margin: 56px 0 0;
	padding: 34px 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.is-style-dark .wp-block-quote.fk-quote {
	border-top-color: rgba(255, 255, 255, 0.16);
}

.wp-block-quote.fk-quote p {
	max-width: 44ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(23px, 2.6vw, 34px);
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
}

.is-style-dark .wp-block-quote.fk-quote p {
	color: #fff;
}

/* --- Paragraph style "Tekstilinkki": uppercase link with underline --- */

.is-style-textlink {
	margin-top: 40px;
}

.is-style-textlink a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(15, 91, 181, 0.35);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.is-style-textlink a:hover {
	border-bottom-color: currentColor;
}

.is-style-dark .is-style-textlink a {
	border-bottom-color: rgba(87, 168, 255, 0.45);
	color: var(--wp--preset--color--sky);
}

.is-style-dark .is-style-textlink a:hover {
	border-bottom-color: var(--wp--preset--color--sky);
}

/* ==========================================================================
   Portfolio
   ========================================================================== */

/* --- Section heading row: heading left, intro text right --- */

.fk-head.wp-block-columns {
	margin-bottom: clamp(48px, 6vw, 76px);
}

.fk-head .wp-block-column > p:not([class*="is-style-"]) {
	max-width: 50ch;
}

/* --- Logo grid: any image or paragraph dropped in becomes a tile --- */

.fk-logos.wp-block-group {
	gap: 10px;
}

.fk-logos > * {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 10px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e9e5de;
	text-align: center;
	transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.fk-logos > *:hover {
	border-color: #cbd5e0;
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -18px rgba(11, 28, 48, 0.28);
}

/* The square logo files carry their own whitespace, hence the zoom. */
.fk-logos > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transform: scale(1.28);
}

.fk-logos > .wp-block-image.fk-logo-sm img {
	width: 52%;
	height: 52%;
	transform: none;
}

/* Companies without a logo file. */
.fk-logos > p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* --- Carousel heading row, arrows added by famkro.js --- */

.fk-carousel-head.wp-block-group {
	align-items: flex-end;
	gap: 24px;
	margin-top: clamp(64px, 7vw, 96px);
	padding-top: 34px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.fk-carousel-head h3 {
	margin: 0;
}

.fk-carousel-nav {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.fk-carousel-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #d9d4cc;
	background: transparent;
	font-size: 17px;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.fk-carousel-nav button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--accent);
	background-color: rgba(15, 91, 181, 0.06);
}

.fk-carousel-nav button:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Carousel track: first card on the content edge, row bleeds right --- */

.fk-carousel.wp-block-group {
	--fk-gutter: max(var(--wp--style--root--padding-left, 20px), calc(50% + var(--wp--style--root--padding-left, 0px) - var(--wp--style--global--wide-size) / 2));
	align-items: stretch;
	gap: 18px;
	margin-top: 32px;
	padding-inline: var(--fk-gutter);
	overflow-x: auto;
	scroll-padding-inline: var(--fk-gutter);
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.fk-carousel::-webkit-scrollbar {
	display: none;
}

.fk-carousel:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* --- Company card (Cover block) --- */

.fk-carousel > .wp-block-cover.fk-card {
	flex: 0 0 auto;
	width: min(330px, 82vw);
	min-height: 430px;
	margin: 0;
	padding: 26px 24px;
	border-radius: 14px;
	overflow: hidden;
	scroll-snap-align: start;
}

.fk-card .wp-block-cover__background.has-background-dim {
	opacity: 1;
	background: linear-gradient(180deg, rgba(7, 18, 31, 0) 18%, rgba(7, 18, 31, 0.62) 58%, rgba(7, 18, 31, 0.94) 100%) !important;
}

.fk-card .wp-block-cover__image-background {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-card:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

.wp-block-cover.fk-card .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	color: #fff;
}

.fk-card .wp-block-cover__inner-container > * {
	margin: 0;
}

.fk-card h3 {
	font-size: 22px;
	color: #fff;
}

.fk-card p {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.fk-card .is-style-textlink a {
	padding-bottom: 3px;
	border-bottom-color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.14em;
	color: #fff;
}

.fk-card .is-style-textlink a:hover {
	border-bottom-color: #fff;
}

/* With a mouse the link slides in on hover; on touch screens it is always shown. */
@media (hover: hover) {
	.fk-card .is-style-textlink {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.fk-card:hover .is-style-textlink,
	.fk-card:focus-within .is-style-textlink,
	.editor-styles-wrapper .fk-card .is-style-textlink {
		opacity: 1;
		transform: none;
	}
}

/* --- Dots, added by famkro.js: 24px tap target, 7px dot --- */

.fk-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: 18px;
}

.fk-carousel-dots[hidden] {
	display: none;
}

.fk-carousel-dots button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.fk-carousel-dots button::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(11, 28, 48, 0.22);
	transition: background-color 0.3s ease;
}

.fk-carousel-dots button[aria-current="true"]::before {
	background: var(--wp--preset--color--navy);
}

/* ==========================================================================
   Yhteystiedot
   ========================================================================== */

.fk-section.fk-contact {
	padding-block: clamp(88px, 11vw, 148px);
	border-bottom: 0;
}

/* --- Stacked heading: label above heading, left on the wide grid --- */

.fk-stack-head.wp-block-group {
	margin-bottom: clamp(48px, 6vw, 72px);
}

.fk-stack-head > * {
	max-width: 56ch;
	margin-block: 0;
}

.fk-contact__cols.wp-block-columns {
	gap: clamp(36px, 5vw, 72px);
	margin-bottom: 0;
}

/* --- Staggered photo collage: Linus and Lizette stacked, Kenneth and
   Camilla offset. Column widths are fr so the collage scales down. --- */

.fk-people-photos.wp-block-group {
	display: grid;
	grid-template-columns: 168fr 184fr 174fr;
	align-items: start;
	gap: 12px;
	max-width: 550px;
}

.fk-people-photos > .wp-block-image {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	transition: opacity 0.4s ease;
}

.fk-people-photos > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.88);
	transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.fk-people-photos > .wp-block-image:nth-child(1) {
	grid-area: 1 / 1;
	aspect-ratio: 168 / 178;
}

.fk-people-photos > .wp-block-image:nth-child(2) {
	grid-area: 2 / 1;
	aspect-ratio: 168 / 178;
}

.fk-people-photos > .wp-block-image:nth-child(3) {
	grid-area: 1 / 2 / span 2;
	aspect-ratio: 184 / 194;
	margin-top: 64px;
}

.fk-people-photos > .wp-block-image:nth-child(4) {
	grid-area: 1 / 3 / span 2;
	aspect-ratio: 174 / 184;
	margin-top: 28px;
}

/* --- Person rows --- */

.fk-people.wp-block-group {
	gap: 26px;
}

.fk-person.wp-block-group {
	gap: 8px;
	transition: opacity 0.3s ease;
}

.fk-person > * {
	margin: 0;
}

.fk-person h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 21px;
	line-height: 1;
	transition: color 0.3s ease;
}

.fk-person h3::before {
	content: "";
	flex: none;
	width: 16px;
	height: 10px;
	border-radius: 5px;
	background: rgba(11, 28, 48, 0.2);
	transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

.fk-person p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding-left: 28px;
	line-height: 1.5;
}

.fk-person a[href^="tel:"] {
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink);
}

.fk-person a[href^="mailto:"] {
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--subtle);
}

/* Small dot between phone and email. */
.fk-person a + a::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 14px;
	border-radius: 50%;
	background: #c3ccd6;
	vertical-align: middle;
}

.fk-person a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- Highlight: hovering a photo or a row lights up that person
   (classes toggled by famkro.js) --- */

.fk-people-photos > .is-active img {
	filter: grayscale(0) brightness(1);
}

.fk-people-photos > .is-dimmed {
	opacity: 0.55;
}

.fk-person.is-dimmed {
	opacity: 0.45;
}

.fk-person.is-active h3 {
	color: var(--wp--preset--color--accent);
}

.fk-person.is-active h3::before {
	width: 22px;
	background: var(--wp--preset--color--accent);
}

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

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

.fk-footer {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.6);
}

.fk-footer p {
	margin: 0;
	color: inherit;
}

.fk-footer a {
	color: #fff;
}

.fk-footer a:hover {
	color: var(--wp--preset--color--sky);
}

.fk-footer__main.wp-block-group {
	gap: clamp(40px, 6vw, 90px);
	padding-block: 72px 44px;
}

.fk-footer__brand {
	flex: 1 1 280px;
	min-width: 0;
}

.fk-footer__brand p {
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--small);
}

.fk-footer__logo {
	margin-bottom: 20px;
}

.fk-footer__logo img {
	display: block;
	width: auto;
	height: 30px;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* 24px column gap lets all four items fit on one row at full width. */
.fk-footer__info.wp-block-group {
	flex: 1.4 1 460px;
	min-width: 0;
	gap: 32px 24px;
}

.fk-footer__info p {
	font-size: 16px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.fk-footer__info .fk-footer__label {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky);
}

.fk-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fk-footer__bottom > p {
	max-width: var(--wp--style--global--wide-size);
	padding-block: 20px;
	font-size: var(--wp--preset--font-size--tiny);
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Text pages (Tietosuojaseloste): smaller headings for long reading.
   Body class added in functions.php; global heading sizes are untouched.
   ========================================================================== */

.fk-text-page .wp-block-post-title {
	font-size: clamp(32px, 4vw, 44px);
	letter-spacing: -0.022em;
	line-height: 1.1;
}

.fk-text-page .wp-block-post-content h2 {
	margin-block: 56px 16px;
	font-size: 28px;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.fk-text-page .wp-block-post-content h3 {
	margin-block: 32px 10px;
	font-size: 24px;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.fk-text-page .wp-block-post-content h2 + h3 {
	margin-top: 20px;
}

.fk-text-page .wp-block-post-content :is(h2, h3) + :is(p, ul) {
	margin-top: 0;
}

.fk-text-page .wp-block-post-content li + li {
	margin-top: 6px;
}

/* ==========================================================================
   Scroll reveal (classes added by assets/js/famkro.js)
   ========================================================================== */

.fk-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--fk-delay, 0ms);
}

.fk-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.fk-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

/* Tablet and below: core switches to the overlay menu only under 600px,
   but the five links no longer fit next to the logo below ~1024px. */
@media (max-width: 1023px) {
	.fk-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.fk-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.fk-header__bar {
		padding-block: 16px;
	}

	body:not(.home) .wp-site-blocks {
		padding-top: 62px;
	}

	.fk-header__menu {
		gap: 22px;
	}

	.fk-header__menu .fk-lang {
		order: -1;
	}

	/* Contact: photos above the list. !important is needed to beat core's
	   nowrap above 782px and the column's inline flex-basis. */
	.wp-block-columns.fk-contact__cols {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.fk-contact__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 781px) {
	.wp-block-cover.fk-hero {
		padding-top: 140px;
		padding-bottom: 64px;
	}

	.fk-hero .is-style-eyebrow {
		margin-bottom: 26px;
	}

	.fk-hero h1 {
		margin-bottom: 26px;
	}

	.fk-hero p:not(.is-style-eyebrow) {
		margin-bottom: 36px;
		font-size: 17px;
	}

	.fk-split.wp-block-columns {
		gap: 28px;
	}

	.fk-intro.wp-block-columns {
		gap: 32px;
	}

	.fk-features > .wp-block-column,
	.fk-features > .wp-block-column:not(:first-child),
	.fk-features > .wp-block-column:not(:last-child) {
		padding: 36px 0 40px;
		border-left: 0;
	}

	.fk-features h3 {
		margin-bottom: 18px;
		font-size: 24px;
	}

	.wp-block-quote.fk-quote {
		margin-top: 40px;
		padding-top: 28px;
	}

	.fk-footer__main.wp-block-group {
		gap: 36px;
		padding-block: 56px 36px;
	}

	.fk-text-page .wp-block-post-content h2 {
		margin-top: 44px;
		font-size: 24px;
	}

	.fk-text-page .wp-block-post-content h3 {
		font-size: 21px;
	}

	/* Keep the diagonals at a similar angle on tall, narrow sections. */
	.fk-lines {
		background-position: center;
		background-size: 1100px 100%;
	}
}

@media (max-width: 480px) {
	.fk-hero .is-style-eyebrow {
		align-items: flex-start;
		letter-spacing: 0.18em;
	}

	.fk-hero .is-style-eyebrow::before {
		width: 24px;
		margin-top: 0.75em;
	}

	.fk-hero .wp-block-buttons,
	.fk-hero .wp-block-button {
		width: 100%;
	}

	.fk-hero .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	/* Three smaller logo tiles per row instead of six rows of two. */
	.fk-logos.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.fk-logos > * {
		padding: 6px;
	}

	.fk-logos > p {
		font-size: 9px;
		letter-spacing: 0.06em;
	}
}