/* ============================================================
   TAPATURVA LP2.0 — frontend stylesheet
   Tokens + header, footer, hero, intro, feature row, tiles,
   testimonial, contact panel, divider, buttons.
   Scoped to .tap20-* and .tap20-btn to avoid bleeding into Astra.
   ============================================================ */

@font-face {
	font-family: 'Outfit';
	src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
	     url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--tap20-green:        #00875F;
	--tap20-green-deep:   #016B4B;
	--tap20-green-mint:   #2AC3A5;
	--tap20-cyan:         #5ED4E2;
	--tap20-cyan-deep:    #38B9C9;
	--tap20-yellow:       #EED000;
	--tap20-yellow-deep:  #D6BB00;
	--tap20-magenta:      #EE2597;
	--tap20-magenta-deep: #D31580;
	--tap20-ink:          #21252E;
	--tap20-slate:        #676A71;
	--tap20-line:         #D7D8DC;
	--tap20-surface:      #F1F1F3;
	--tap20-surface-2:    #E6E7EA;
	--tap20-font:         'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--tap20-maxw:         1200px;
}

/* ---------- Layout helpers ---------- */
.tap20-container {
	max-width: var(--tap20-maxw);
	margin: 0 auto;
	padding: 0 32px;
}

/* ---------- LP2.0 page-level resets ----------
   When a page contains the LP2.0 hero block, body gets the .tap20-page class
   (added in bootstrap.php). We use that to suppress Astra's page-title bar
   and zero the content padding so the hero photo sits flush under the nav. */
.tap20-page .entry-header,
.tap20-page .ast-page-header,
.tap20-page .ast-archive-description,
.tap20-page .ast-no-thumbnail .ast-page-header-wrap,
.tap20-page .ast-single-post .entry-title,
.tap20-page .entry-title { display: none !important; }

.tap20-page .site-content > .ast-container,
.tap20-page .ast-container > #primary,
.tap20-page #primary > article,
.tap20-page .entry-content { padding-top: 0 !important; margin-top: 0 !important; }

.tap20-page .ast-container { max-width: none !important; padding: 0 !important; }
.tap20-page #primary { width: 100% !important; max-width: none !important; padding: 0 !important; }
.tap20-page .entry-content { max-width: none !important; }

/* ---------- Full-bleed break-out ----------
   The LP2.0 blocks are full-width by design (hero photo, divider, footer-style
   colored panels). When the page renders inside Astra's .entry-content (which
   caps at ~1200px), every LP2.0 block breaks out with vw-based negative margins.
   This works whether or not the page template is "full width" and is overridden
   by Gutenberg's alignfull class. */
.entry-content > .tap20-hero,
.entry-content > .tap20-intro,
.entry-content > .tap20-feature,
.entry-content > .tap20-tiles,
.entry-content > .tap20-cards,
.entry-content > .tap20-compare,
.entry-content > .tap20-testimonial,
.entry-content > .tap20-contact,
.entry-content > .tap20-contact-form,
.entry-content > .tap20-divider,
.entry-content > .tap20-team,
.entry-content > .tap20-map,
.tap20-hero.alignfull,
.tap20-intro.alignfull,
.tap20-feature.alignfull,
.tap20-tiles.alignfull,
.tap20-cards.alignfull,
.tap20-compare.alignfull,
.tap20-testimonial.alignfull,
.tap20-contact.alignfull,
.tap20-contact-form.alignfull,
.tap20-divider.alignfull,
.tap20-team.alignfull,
.tap20-map.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.tap20-eyebrow {
	font-family: var(--tap20-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tap20-green);
	margin: 0 0 12px;
}

/* ---------- Buttons ---------- */
/* Button selectors are prefixed with #content to outrank Astra/UAGB's
   `#content a { font-weight: bold !important; color: var(--linkit) }` rule
   that wins by specificity AND !important otherwise.
   The selector list also includes the un-prefixed form so the rules still apply
   in editor previews (where #content may not be the wrapping ID). */
.tap20-btn,
#content .tap20-btn,
#content a.tap20-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--tap20-font);
	font-weight: 500 !important;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1;
	padding: 15px 30px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s ease, color .16s ease;
}
.tap20-btn .tap20-icon,
#content .tap20-btn .tap20-icon { color: inherit !important; }

#content .tap20-btn--yellow, #content a.tap20-btn--yellow,
#content .tap20-btn--yellow:hover, #content .tap20-btn--yellow:focus, #content .tap20-btn--yellow:visited,
.tap20-btn--yellow { color: var(--tap20-ink) !important; }

#content .tap20-btn--magenta, #content a.tap20-btn--magenta,
#content .tap20-btn--magenta:hover, #content .tap20-btn--magenta:focus, #content .tap20-btn--magenta:visited,
.tap20-btn--magenta { color: #fff !important; }

#content .tap20-btn--cyan, #content a.tap20-btn--cyan,
#content .tap20-btn--cyan:hover, #content .tap20-btn--cyan:focus, #content .tap20-btn--cyan:visited,
.tap20-btn--cyan { color: var(--tap20-ink) !important; }

#content .tap20-btn--mint, #content a.tap20-btn--mint,
#content .tap20-btn--mint:hover, #content .tap20-btn--mint:focus, #content .tap20-btn--mint:visited,
.tap20-btn--mint { color: var(--tap20-ink) !important; }

#content .tap20-btn--green, #content a.tap20-btn--green,
#content .tap20-btn--green:hover, #content .tap20-btn--green:focus, #content .tap20-btn--green:visited,
.tap20-btn--green { color: #fff !important; }

#content .tap20-btn--white, #content a.tap20-btn--white,
#content .tap20-btn--white:hover, #content .tap20-btn--white:focus, #content .tap20-btn--white:visited,
.tap20-btn--white { color: var(--tap20-ink) !important; background: #fff !important; }
.tap20-btn--white:hover, #content .tap20-btn--white:hover { background: #f1f1f3 !important; }
.tap20-btn:hover { text-decoration: none; }
.tap20-btn--green   { background: var(--tap20-green);      color: #fff; }
.tap20-btn--green:hover   { background: var(--tap20-green-deep); }
.tap20-btn--yellow  { background: var(--tap20-yellow);     color: var(--tap20-ink); }
.tap20-btn--yellow:hover  { background: var(--tap20-yellow-deep); }
.tap20-btn--magenta { background: var(--tap20-magenta);    color: #fff; }
.tap20-btn--magenta:hover { background: var(--tap20-magenta-deep); }
.tap20-btn--cyan    { background: var(--tap20-cyan);       color: #15323A; }
.tap20-btn--cyan:hover    { background: var(--tap20-cyan-deep); }
.tap20-btn--mint    { background: var(--tap20-green-mint); color: #fff; }
.tap20-btn--mint:hover    { background: #1FA589; }
.tap20-btn--white   { background: #fff; color: var(--tap20-green); }
.tap20-btn--outline {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 2px #fff;
}
.tap20-btn--outline:hover { background: rgba(255,255,255,.14); }

/* ---------- Pills ---------- */
.tap20-pill {
	/* PSD: 168 × 42 (Verkkokauppa) / 161 × 42 (Tapaturvalaki) */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 4px;
	padding: 12px 22px;
	min-height: 42px;
	box-sizing: border-box;
	font-family: var(--tap20-font);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background .16s ease;
}
.tap20-pill--yellow  { background: var(--tap20-yellow);  color: var(--tap20-ink); }
.tap20-pill--yellow:hover  { background: var(--tap20-yellow-deep); }
.tap20-pill--magenta { background: var(--tap20-magenta); color: #fff; }
.tap20-pill--magenta:hover { background: var(--tap20-magenta-deep); }

/* ---------- Divider (PSD: 1230 × 9, cyan) ---------- */
.tap20-divider               { background: var(--tap20-cyan); width: 100%; min-height: 9px; }
.tap20-divider--green        { background: var(--tap20-green); }
.tap20-divider--yellow       { background: var(--tap20-yellow); }
.tap20-divider--magenta      { background: var(--tap20-magenta); }
.tap20-divider--mint         { background: var(--tap20-green-mint); }

/* ============================================================
   HEADER
   Grey bar is 89px tall (per PSD). The green sign logo is 152px
   tall and sits at the top-left, overhanging the bar by ~63px so
   it visually drops onto the hero photo below. overflow:visible on
   the sticky header is required for the overhang to render.
   ============================================================ */
.tap20-header {
	background: #EDEDED;
	position: sticky;
	top: 0;
	z-index: 40;
	height: 89px;
	overflow: visible;
	font-family: var(--tap20-font);
}
.tap20-header__row {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 89px;
	position: relative;
}
.tap20-header__logo {
	position: absolute;
	left: 32px;
	top: 0;
	height: 124px;
	z-index: 2;
	display: flex;
	align-items: flex-start;
}
.tap20-header__logo img {
	height: clamp(96px, 12.4vw, 124px);
	display: block;
	max-height: none;
}
.tap20-header__spacer { flex: 1; }
.tap20-header__hamburger {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px;
	display: flex;
	color: var(--tap20-green);
}
/* Reserve space so other header items don't sit under the logo. */
.tap20-header__row::before {
	content: '';
	display: block;
	width: 270px;
	height: 1px;
	flex: 0 0 auto;
}

/* Mobile drawer */
.tap20-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}
.tap20-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20,23,28,.5);
	opacity: 0;
	transition: opacity .25s ease;
}
.tap20-drawer.is-open .tap20-drawer__scrim { opacity: 1; }
.tap20-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(380px, 86vw);
	background: var(--tap20-green);
	box-shadow: 0 18px 48px rgba(20,23,28,.16);
	padding: 28px 32px;
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex;
	flex-direction: column;
	font-family: var(--tap20-font);
	color: #fff;
}
.tap20-drawer.is-open .tap20-drawer__panel { transform: translateX(0); }
.tap20-drawer__close {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	margin-left: auto;
	color: #fff;
	margin-bottom: 18px;
}
.tap20-drawer__list { list-style: none; margin: 0; padding: 0; }
.tap20-drawer__list a {
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,.18);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tap20-drawer__contact {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-weight: 700;
}
.tap20-drawer__contact .tap20-icon { color: var(--tap20-yellow); margin-right: 10px; vertical-align: middle; }

/* ============================================================
   HERO
   ============================================================ */
.tap20-hero { background: #1c2a30; font-family: var(--tap20-font); }
.tap20-hero__media {
	position: relative;
	height: 698px; /* PSD: hero photo region = 89 (bar) → 787 (divider top) */
	overflow: hidden;
}
.tap20-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tap20-hero__scrim {
	position: absolute;
	inset: 0;
/* 	background: linear-gradient(180deg, rgba(20,30,35,.25) 0%, rgba(20,30,35,.15) 45%, rgba(0,90,62,.78) 100%); */
}
.tap20-hero__badge {
	position: absolute;
	top: 38px;
	right: 48px;
	width: 118px;
	height: 118px;
	border: 2px solid rgba(255,255,255,.85);
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.tap20-hero__badge-n { font-size: 44px; font-weight: 800; line-height: 1; }
.tap20-hero__badge-l { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.tap20-hero__badge--image {
	border: 0;
	width: clamp(110px, 10vw, 160px);
	height: auto;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
.tap20-hero__badge--image img {
	width: 100%;
	height: auto;
	display: block;
	max-width: none;
}
.tap20-hero__social {
	position: absolute;
	right: 0;
	bottom: 90px;
	display: flex;
	flex-direction: column;
}
.tap20-hero__social span {
	width: 34px;
	height: 34px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}
.tap20-hero__inner {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;   /* PSD: headline vertically centered (y=341-442 in 787px region) */
	align-items: center;       /* PSD: headline horizontally centered (x=303-922 on 1230 canvas) */
	text-align: center;
}
.tap20-hero__headline {
	margin: 0;
	color: #fff;
	font-size: clamp(34px, 5.4vw, 64px);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: -.01em;
	text-shadow: 0 2px 24px rgba(0,40,28,.4);
	max-width: 900px;
}
.tap20-hero__play {
	/* PSD: play tile y=478, label y=546 → stacked vertically, both centered. */
	margin-top: 32px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	align-self: center;
	padding: 0;
}
.tap20-hero__play-icon {
	width: 57px;
	height: 57px;
	background: var(--tap20-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #15323A;
}
.tap20-hero__play-label { font-size: 13px; text-align: center; line-height: 1.4; font-weight: 500; }
.tap20-hero__play-label small { opacity: .8; font-size: 12px; }

/* ============================================================
   INTRO (PSD: 833 → 1286 ≈ 453px tall)
   ============================================================ */
.tap20-intro {
	background: var(--tap20-surface);
	padding: 64px 0 72px;
	min-height: 453px;
	display: flex;
	align-items: center;
	font-family: var(--tap20-font);
}
.tap20-intro__inner {
	max-width: 760px;
	text-align: center;
}
.tap20-intro__title {
	margin: 0 0 22px;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .005em;
	color: var(--tap20-ink);
}
.tap20-intro__body p {
	margin: 0 0 16px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--tap20-ink);
}
.tap20-intro__caps {
	margin: 24px 0 24px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tap20-ink);
}
/* Top-of-section eyebrow variant (no big h2 above it). Sits flush with the
   section's top padding rather than stacking an extra 24px on. */
.tap20-intro__caps--top {
	margin: 0 0 28px;
}
/* Lead-in intros (top eyebrow + body, no big title) — tighten the section to
   match PSD spacing. Modern :has() support: Chrome 105+, Safari 15.4+, FF 121+.
   The min-height fallback below still applies on older browsers. */
.tap20-intro:has(.tap20-intro__caps--top):not(:has(.tap20-intro__title)) {
	padding: 56px 0 56px;
	min-height: 0;
}
/* Within a lead-in, drop the final body paragraph's bottom margin so the
   section's own padding controls the rhythm. */
.tap20-intro:has(.tap20-intro__caps--top):not(:has(.tap20-intro__title)) .tap20-intro__body p:last-child {
	margin-bottom: 0;
}
.tap20-intro__cta {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================================
   FEATURE ROW
   ============================================================ */
.tap20-feature { background: var(--tap20-surface); font-family: var(--tap20-font); }
.tap20-feature__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.tap20-feature--flip .tap20-feature__media { order: 2; }
.tap20-feature--flip .tap20-feature__text  { order: 1; }
.tap20-feature__grid > * { min-height: 523px; } /* PSD: each module = 523px */
.tap20-feature__media { background: #ccd2d0; }
.tap20-feature__media img {
	width: 100%;
	height: 100%;
	min-height: 523px;
	object-fit: cover;
	display: block;
}
.tap20-feature__text {
	padding: 64px clamp(24px, 4vw, 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.tap20-feature__title {
	margin: 0 0 18px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .005em;
	color: var(--tap20-ink);
	line-height: 1.25;
}
.tap20-feature__body p {
	margin: 0 0 14px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--tap20-ink);
}
.tap20-feature__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 10px;
}

/* ============================================================
   SERVICE TILES
   ============================================================ */
.tap20-tiles {
	background: #fff;
	padding: 76px 0;
	font-family: var(--tap20-font);
}
.tap20-tiles__head { text-align: center; margin-bottom: 40px; }
.tap20-tiles__title {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tap20-ink);
}
.tap20-tiles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.tap20-tile {
	background: var(--tap20-surface);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
}
.tap20-tile__icon {
	width: 56px;
	height: 56px;
	background: var(--tap20-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.tap20-tile__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	color: var(--tap20-ink);
}
.tap20-tile__body {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tap20-slate);
}
.tap20-tile__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tap20-green);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
}

/* ============================================================
   SERVICE CARDS  (Palvelut subpage — priced 3-up cards)
   PSD: 3-column grid on light-grey surface. Each card is a flat
   white tile with photo top, eyebrow + title + price header,
   description body and two CTAs in a row at the bottom.
   ============================================================ */
.tap20-cards {
	background: var(--tap20-surface);
	padding: 56px 0 72px;
	font-family: var(--tap20-font);
}
.entry-content > .tap20-cards,
.tap20-cards.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.tap20-cards__head {
	text-align: center;
	margin-bottom: 40px;
}
.tap20-cards__title {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tap20-ink);
}
.tap20-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px 24px;
}
/* Card: image-area is the only "card" surface (white bg + thin border).
   Body and CTAs sit transparently on the section's light-grey surface. */
.tap20-card {
	display: flex;
	flex-direction: column;
	background: transparent;
}
/* White matte around the image (mockup spec): photo sits inside a white
   padded frame with a thin line-grey border on the outer edge. */
.tap20-card__media {
	background: #fff;
	border: 1px solid var(--tap20-line);
	padding: 10px;
	box-sizing: border-box;
}
.tap20-card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.tap20-card__body {
	padding: 20px 0 4px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.tap20-card__heads { margin-bottom: 18px; }
.tap20-card__eyebrow {
	font-size: 14px;
	font-weight: 400;
	color: var(--tap20-ink);
	margin-bottom: 2px;
	letter-spacing: 0;
	text-transform: none;
}
.tap20-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tap20-ink);
}
/* Price tag — fuses the supplied tag-price.png (used as a CSS mask, mint-
   tinted, at natural 44×49 aspect so chamfer/hole/string aren't distorted)
   with a rectangular mint chip that carries the white "alk. 3500,-" text.
   The PNG ::before hangs to the left of the chip and slightly above, so
   the string loop is visible above the chip's top edge. */
.tap20-card__price {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.tap20-card__price-tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 130px;
	height: 44px;
	padding: 0 22px 0 18px;
	margin-left: 38px; /* room for the PNG shape pseudo-element */
	background: var(--tap20-green-mint);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}
.tap20-card__price-tag::before {
	content: '';
	position: absolute;
	right: 100%;           /* anchor to the left of the chip */
	margin-right: -14px;   /* hover slightly over the chip so the tag appears to float onto the price */
	top: 50%;
	transform: translateY(-52%);
	width: 50px;
	height: 56px;          /* taller than chip so the string loop sticks up above */
	background: url('assets/tag-price.png') no-repeat center / contain;
	pointer-events: none;
	z-index: 1;            /* float on top of the chip */
}
.tap20-card__price-note {
	font-size: 11px;
	font-style: italic;
	color: var(--tap20-slate);
	max-width: 140px;
	line-height: 1.3;
}
.tap20-card__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tap20-ink);
	margin-bottom: 18px;
	flex: 1 1 auto;
}
.tap20-card__text p { margin: 0 0 10px; }
.tap20-card__text p:last-child { margin-bottom: 0; }
.tap20-card__cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: auto;
}
.tap20-card__cta .tap20-btn {
	padding: 11px 20px;
	font-size: 12px;
	letter-spacing: .08em;
}
.tap20-cards__footnote {
	margin: 36px auto 0;
	text-align: center;
	font-size: 13px;
	font-style: italic;
	color: var(--tap20-slate);
	max-width: 720px;
}

@media (max-width: 980px) {
	.tap20-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.tap20-cards__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPARISON TABLE — 360 page "Mitä Tapaturva 360° sisältää?"
   Pill-grid: each header, row-label, and cell is an independent
   rounded rectangle with visible spacing between them.
   ============================================================ */
.tap20-compare {
	background: var(--tap20-surface);
	padding: 56px 0 72px;
	font-family: var(--tap20-font);
	--tap20-compare-cell-bg: #B7D2C3;     /* desaturated mint cell fill */
	--tap20-compare-cell-on: #A4C9B5;     /* slightly deeper when checked */
	--tap20-compare-pill:   var(--tap20-green);
	--tap20-compare-radius: 14px;
}
.tap20-compare__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 28px;
}
.tap20-compare__title {
	margin: 0 0 14px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .005em;
	color: var(--tap20-ink);
}
.tap20-compare__intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tap20-ink);
}
.tap20-compare__wrap {
	max-width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--tap20-compare-radius);
}
.tap20-compare__table,
.entry-content .tap20-compare__table {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	border: 0 !important;
	font-family: var(--tap20-font);
	table-layout: fixed;
}
.tap20-compare__table th,
.tap20-compare__table td,
.entry-content .tap20-compare__table th,
.entry-content .tap20-compare__table td {
	border: 0 !important;
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 0;
}

/* ---- Top-left blank cell ---- */
.tap20-compare__rowhead--blank {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	width: 38%;
	min-width: 230px;
}

/* ---- Column header pills (S/M/L/XL) ---- */
.tap20-compare__col {
	background: var(--tap20-compare-pill);
	color: #fff;
	padding: 16px 14px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	line-height: 1.15;
}
.tap20-compare__col-top {
	display: block;
	font-size: 18px;
}
.tap20-compare__col-label {
	font-weight: 800;
	letter-spacing: 0;
}
.tap20-compare__col-sub {
	font-weight: 500;
	margin-left: 4px;
	opacity: .95;
	font-size: 15px;
}
.tap20-compare__col-price {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	font-weight: 500;
	opacity: .95;
}

/* ---- Row labels (left column) ---- */
.tap20-compare__table tbody th.tap20-compare__rowhead {
	text-align: left;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.35;
	color: #fff;
	background: var(--tap20-compare-pill);
	padding: 16px 22px;
	width: 38%;
	min-width: 230px;
}

/* ---- Data cells (check or empty) ---- */
.tap20-compare__cell {
	background: var(--tap20-compare-cell-bg);
	color: var(--tap20-green);
	text-align: center;
	padding: 16px 12px;
	vertical-align: middle;
	line-height: 0;
}
.tap20-compare__cell.is-on {
	background: var(--tap20-compare-cell-on);
}
.tap20-compare__cell .tap20-icon {
	display: inline-block;
	stroke-width: 2.6;
}

.tap20-compare__footnote {
	margin: 24px auto 0;
	max-width: 720px;
	text-align: center;
	font-size: 13px;
	font-style: italic;
	color: var(--tap20-slate);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

@media (max-width: 860px) {
	.tap20-compare__table tbody th.tap20-compare__rowhead,
	.tap20-compare__rowhead--blank { min-width: 180px; width: 34%; }
	.tap20-compare__col { padding: 10px 8px 12px; }
	.tap20-compare__col-top { font-size: 16px; }
	.tap20-compare__col-sub { font-size: 13px; }
	.tap20-compare__col-price { font-size: 13px; margin-top: 4px; }
	.tap20-compare__cell { padding: 12px 8px; }
}
@media (max-width: 520px) {
	.tap20-compare__table tbody th.tap20-compare__rowhead,
	.tap20-compare__rowhead--blank { min-width: 140px; width: 38%; font-size: 13px; padding: 12px 14px; }
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.tap20-testimonial { background: var(--tap20-surface); font-family: var(--tap20-font); }
.tap20-testimonial__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.tap20-testimonial--flip .tap20-testimonial__media { order: 1; }
.tap20-testimonial--flip .tap20-testimonial__text  { order: 2; }
.tap20-testimonial__grid > * { min-height: 523px; } /* PSD: each module = 523px */
.tap20-testimonial__media img {
	width: 100%;
	height: 100%;
	min-height: 523px;
	object-fit: cover;
	display: block;
}
.tap20-testimonial__text {
	padding: 64px clamp(24px, 4vw, 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* Reset Astra's blockquote styling (border-left, padding, background, quote marks)
   so the testimonial body sits flush. */
.tap20-testimonial__quote {
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-left: 0 !important;
	background: transparent !important;
	color: var(--tap20-ink);
	max-width: 473px;
	quotes: none;
}
.tap20-testimonial__quote::before,
.tap20-testimonial__quote::after { content: none !important; display: none !important; }
.tap20-testimonial__quote p {
	margin: 0 0 18px;
	padding: 0;
	font-size: 15px;
	line-height: 1.65;
	font-style: italic; /* default (SSAB-style) — overridden by --plain */
}
.tap20-testimonial__quote p:last-child { margin-bottom: 0; }
/* First paragraph: the bold all-caps headline (e.g. "VOI KUN OLISIMME..." / "SUOSITTELEN!") */
.tap20-testimonial__quote-head {
	font-size: clamp(20px, 1.9vw, 24px) !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-transform: uppercase;
	line-height: 1.22 !important;
	letter-spacing: 0 !important;
	margin: 0 0 24px !important;
}
/* --plain modifier: subpage testimonial with no italic body
   (matches the Pekka Jyllinkoski / "Suosittelen!" reference). */
.tap20-testimonial--plain .tap20-testimonial__quote p,
.tap20-testimonial--plain .tap20-testimonial__quote-head {
	font-style: normal !important;
}
.tap20-testimonial__attribution {
	margin-top: 22px;
	font-size: 15px;
	color: var(--tap20-slate);
}
.tap20-testimonial__attribution strong { color: var(--tap20-ink); }

/* Yellow "Karin haastattelu" play CTA inside a testimonial.
   Reference: larger tile (~80×80) with bigger play triangle, narrow label column
   to the right with "Karin haastattelu" wrapping naturally and "(2 min)" below. */
.tap20-testimonial__video {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
	text-decoration: none;
	color: var(--tap20-ink);
}
.tap20-testimonial__video-icon {
	width: 80px;
	height: 80px;
	background: var(--tap20-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
	transition: background .16s ease;
}
.tap20-testimonial__video-icon .tap20-icon { width: 30px; height: 30px; }
.tap20-testimonial__video:hover .tap20-testimonial__video-icon { background: var(--tap20-yellow-deep); }
.tap20-testimonial__video-label {
	max-width: 90px;
	font-size: 12px;
	line-height: 1.3;
	font-weight: 300; /* PSD: Outfit-Thin */
	color: var(--tap20-ink);
}
.tap20-testimonial__video-label u {
	text-decoration: underline;
	text-underline-offset: 2px;
	display: inline;
}
.tap20-testimonial__video-label small {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	opacity: .85;
	font-weight: 300;
}

/* ============================================================
   CONTACT PANEL
   ============================================================ */
.tap20-contact {
	background: var(--tap20-surface);
	font-family: var(--tap20-font);
}
/* Full-bleed grid — no .tap20-container wrapper so the two columns reach the
   viewport edges, matching the reference. Inner padding gives the content the
   ~1200px-centered feel by shifting it inward from the left edge. */
.tap20-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 540px;
}
.tap20-contact__panel {
	background: var(--tap20-green);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Right padding stays modest; left padding ramps to align content with the
	   centered ~1200px column on wide viewports. */
	padding: 56px clamp(32px, 4vw, 64px) 56px clamp(32px, calc((100vw - 1200px) / 2 + 32px), 200px);
}
.tap20-contact__title {
	margin: 0 0 28px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.18;
	color: #fff; /* PSD fillColor: rgb(255,255,255) */
}
.tap20-contact__form input,
.tap20-contact__form textarea {
	width: 100%;
	padding: 13px 14px;
	border: 0;
	border-radius: 0;
	font-family: var(--tap20-font);
	font-size: 15px;
	color: var(--tap20-ink);
	outline: none;
	margin-bottom: 12px;
	box-sizing: border-box;
	background: #fff;
}
.tap20-contact__form textarea { resize: none; }

/* Per reference: contact panel CTA is a SOLID WHITE wide button, ink text. */
.tap20-contact__cta {
	background: #fff !important;
	color: var(--tap20-ink) !important;
	box-shadow: none;
	display: flex;
	width: 100%;
	max-width: 420px;
	justify-content: center;
	padding: 18px 28px;
	margin-bottom: 32px;
	font-weight: 500;
	letter-spacing: .08em;
}
.tap20-contact__cta:hover { background: #f1f1f3 !important; }
.tap20-contact__sent {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255,255,255,.18);
	padding: 18px 20px;
	margin-bottom: 24px;
	color: #fff;
}
.tap20-contact__sent .tap20-icon { color: var(--tap20-yellow); }
.tap20-contact__body {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: #fff;
	font-weight: 300;
}
.tap20-contact__body p { margin: 0 0 16px; }
.tap20-contact__body p:last-child { margin-bottom: 0; }
.tap20-contact__person {
	font-weight: 400;
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
}
.tap20-contact__person strong { font-weight: 500; }
.tap20-contact__person span { font-weight: 300; opacity: .9; display: block; }
/* Contact panel phone/email links:
   - text: WHITE (per client confirmation 2026-06-03)
   - icon: YELLOW
   Same #content prefix as .tap20-btn so we outrank Astra/UAGB's
   `#content a { color: var(--linkit); font-weight: bold !important }`. */
.tap20-contact__link,
#content .tap20-contact__link,
#content a.tap20-contact__link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700 !important;
	font-size: 17px;
	color: #fff !important;
	text-decoration: none !important;
	margin-bottom: 6px;
	white-space: nowrap;
}
.tap20-contact__link:hover,
#content .tap20-contact__link:hover { color: rgba(255,255,255,.82) !important; }
.tap20-contact__link .tap20-icon,
#content .tap20-contact__link .tap20-icon { color: var(--tap20-yellow) !important; }
.tap20-contact__photo img {
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* ============================================================
   FOOTER (PSD: 1236 × 550)
   ============================================================ */
.tap20-footer {
	background: var(--tap20-slate);
	color: #fff;
	font-family: var(--tap20-font);
	min-height: 550px;
	display: flex;
	align-items: stretch;
}
.tap20-footer__inner {
	padding-top: 0;
	padding-bottom: 40px;
	width: 100%;
}
.tap20-footer__brand {
	text-align: center;
	margin-bottom: 28px;
	padding-top: 0;
	margin-top: 0;
}
.tap20-footer__brand img {
	height: clamp(110px, 11vw, 152px); /* PSD: Taso 309 kopio = 270 × 152 */
	display: inline-block;
}
.tap20-footer__slogan {
	margin-top: 20px;
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1.04;
	letter-spacing: -.01em;
	margin-bottom: 40px;
}
.tap20-footer__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 40px;
	align-items: start;
}
.tap20-footer__col--center {
	grid-column: 2;
	text-align: center;
}
.tap20-footer__company { font-weight: 700; font-size: 18px; }
.tap20-footer__address { opacity: .85; font-size: 15px; line-height: 1.6; margin-top: 4px; }
.tap20-footer__contact {
	margin-top: 20px;
	display: inline-flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
}
.tap20-footer__contact span,
#content .tap20-footer__contact span {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--tap20-yellow) !important;
	font-weight: 700 !important;
	font-size: 17px;
	white-space: nowrap;
}
.tap20-footer__contact span .tap20-icon { color: var(--tap20-yellow) !important; }
.tap20-footer__note { opacity: .8; font-size: 13px; margin-top: 14px; }
.tap20-footer__einvoice {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.6;
	opacity: .9;
}
.tap20-footer__col--right {
	grid-column: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
/* Footer link styles armoured against Astra/UAGB's #content a override —
   footer normally fires outside #content but UAGB layouts sometimes inject
   into the content wrapper, so we cover both cases. */
.tap20-footer a,
.tap20-footer__col--right a,
#content .tap20-footer a,
#content .tap20-footer__col--right a {
	color: #fff !important;
	opacity: .92;
	text-decoration: none !important;
	font-size: 18px;
	font-weight: 400 !important;
}
.tap20-footer__cta,
.tap20-footer a.tap20-footer__cta,
.tap20-footer__col--right a.tap20-footer__cta,
#content .tap20-footer a.tap20-footer__cta,
#content .tap20-footer__col--right a.tap20-footer__cta {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--tap20-yellow) !important;
	font-weight: 700 !important;
	opacity: 1 !important;
}
.tap20-footer__cta .tap20-icon,
.tap20-footer__col--right a.tap20-footer__cta .tap20-icon,
#content .tap20-footer__col--right a.tap20-footer__cta .tap20-icon { color: var(--tap20-yellow) !important; }

/* Bottom row: 3-column layout matching reference — credits LEFT,
   social links CENTER, trust badges RIGHT. */
.tap20-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.18);
	gap: 24px;
}
.tap20-footer__credits {
	font-size: 13px;
	line-height: 1.55;
	opacity: .85;
}
.tap20-footer__social {
	display: flex;
	justify-content: center;
	gap: 26px;
	flex-wrap: wrap;
}
.tap20-footer__social a,
#content .tap20-footer__social a {
	color: #fff !important;
	opacity: .9;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 400 !important;
}

/* Trust badges — text approximations of the third-party graphics
   in the PSD (Suomalaista Palvelua / AAA / Kauppalehti Menestyjät).
   PRODUCTION-TODO: swap to the official badge SVG/PNG files when supplied. */
.tap20-footer__badges {
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	align-items: center;
}
.tap20-footer__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	background: rgba(255,255,255,.08);
	border-radius: 4px;
	line-height: 1.1;
	font-size: 9px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.tap20-footer__badge--fi .tap20-footer__badge-flag {
	font-size: 16px;
	margin-right: 4px;
}
.tap20-footer__badge--fi .tap20-footer__badge-text {
	font-size: 8px;
	line-height: 1.2;
}
.tap20-footer__badge--fi strong { font-weight: 700; }
.tap20-footer__badge--aaa { background: #fff; color: #d3082f; padding: 4px 10px; }
.tap20-footer__badge--aaa strong { font-size: 22px; font-weight: 800; letter-spacing: 0; line-height: 1; }
.tap20-footer__badge--aaa small { font-size: 7px; color: #4a4a4a; font-weight: 700; line-height: 1.2; letter-spacing: .02em; }
.tap20-footer__badge--kl {
	background: linear-gradient(180deg, #2b5184 0%, #1e3a6b 100%);
	color: #fff;
	flex-direction: column;
	padding: 8px 14px;
	text-align: center;
	border-radius: 50%;
	min-width: 56px;
	min-height: 56px;
	justify-content: center;
}
.tap20-footer__badge--kl strong { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.tap20-footer__badge--kl small { font-size: 8px; opacity: .9; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
	.tap20-feature__grid,
	.tap20-testimonial__grid,
	.tap20-contact__grid,
	.tap20-tiles__grid { grid-template-columns: 1fr !important; }
	.tap20-feature--flip .tap20-feature__media,
	.tap20-feature--flip .tap20-feature__text,
	.tap20-testimonial--flip .tap20-testimonial__media,
	.tap20-testimonial--flip .tap20-testimonial__text { order: initial; }
	.tap20-footer__grid { grid-template-columns: 1fr; }
	.tap20-footer__col--center,
	.tap20-footer__col--right { grid-column: 1; align-items: center; text-align: center; }
	.tap20-hero__media { height: 420px; }
	.tap20-header__row { padding: 0 20px; gap: 8px; }
	.tap20-pill { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tap20-btn,
	.tap20-pill,
	.tap20-drawer__panel,
	.tap20-drawer__scrim { transition: none; }
}

/* ============================================================
   CONTACT FORM  (YHTEYSLOMAKE subpage — standalone form section)
   PSD: title at ~25px, uppercase, ink. Inputs are 367×48 white
   rectangles on the light surface (no border, square corners). Two
   side-by-side selects across the top, five inputs on the left,
   a 367×188 textarea on the right, magenta LÄHETÄ button below.
   ============================================================ */
.tap20-contact-form {
	background: var(--tap20-surface);
	padding: 56px 0 64px;
	font-family: var(--tap20-font);
}
.tap20-contact-form__title {
	margin: 0 0 32px;
	text-align: center;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: var(--tap20-ink);
}
.tap20-contact-form__form {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tap20-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	align-items: start;
}
.tap20-contact-form__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.tap20-contact-form__field {
	display: block;
	position: relative;
}
.tap20-contact-form__field input,
.tap20-contact-form__field textarea,
.tap20-contact-form__select {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font-family: var(--tap20-font);
	font-size: 15px;
	font-weight: 300;
	color: var(--tap20-ink);
	outline: none;
	box-sizing: border-box;
	box-shadow: 0 0 0 1px var(--tap20-line) inset;
	transition: box-shadow .16s ease;
}
.tap20-contact-form__field input::placeholder,
.tap20-contact-form__field textarea::placeholder {
	color: var(--tap20-ink);
	font-weight: 300;
	opacity: 1;
}
.tap20-contact-form__field input:focus,
.tap20-contact-form__field textarea:focus,
.tap20-contact-form__select:focus {
	box-shadow: 0 0 0 2px var(--tap20-cyan) inset;
}
.tap20-contact-form__field textarea {
	resize: vertical;
	min-height: 188px;
	font-weight: 300;
}
/* Native select with a custom chevron — matches the PSD's small grey arrow chip. */
.tap20-contact-form__field--select { position: relative; }
.tap20-contact-form__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	cursor: pointer;
}
.tap20-contact-form__field--select::after {
	content: '';
	position: absolute;
	right: 16px;
	top: 50%;
	width: 12px;
	height: 8px;
	pointer-events: none;
	background: var(--tap20-ink);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 6 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 6 5-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
	transform: translateY(-50%);
}
/* LÄHETÄ button sits flush-left under the textarea on a centered chip per PSD. */
.tap20-contact-form__submit,
#content .tap20-contact-form__submit {
	margin-top: 6px;
	align-self: center;
	min-width: 199px;
	justify-content: center;
	padding: 20px 30px;
	font-size: 14px;
	letter-spacing: .12em;
}
.tap20-contact-form__shortcode { max-width: 800px; margin: 0 auto; }

/* ----- Gravity Forms output, rendered via .tap20-contact-form shortcode -----
   GF emits its own field grid (.gform_fields with --gf-grid-column-count: 12)
   so we re-flow it: each .tap20-gf-half spans 6 columns. The textarea spans
   6 columns AND 5 rows so it stands tall beside the five left-column inputs.
   PSD widths (367px × 6 rows per side) translate to the 12-col grid. */
.tap20-contact-form .gform_wrapper,
.tap20-contact-form__shortcode .gform_wrapper {
	max-width: 800px;
	margin: 0 auto;
	font-family: var(--tap20-font);
}
.tap20-contact-form .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}
.tap20-contact-form .gform_wrapper .gfield.tap20-gf-half {
	grid-column: span 6;
}
/* Selects sit on the top row, both half-width. */
.tap20-contact-form .gform_wrapper .gfield.tap20-gf-select { grid-column: span 6; }
/* Left-col inputs naturally fall under the first select. */
.tap20-contact-form .gform_wrapper .gfield.tap20-gf-left-col { grid-column: 1 / span 6; }
/* Textarea spans the right column over five rows (selects + 5 inputs to the
   left = 6 total rows; textarea covers rows 2..6 = 5 rows). */
.tap20-contact-form .gform_wrapper .gfield.tap20-gf-right-col {
	grid-column: 7 / span 6;
	grid-row: 2 / span 5;
}

/* Input/textarea/select skins — match the static form. */
.tap20-contact-form .gform_wrapper input[type="text"],
.tap20-contact-form .gform_wrapper input[type="email"],
.tap20-contact-form .gform_wrapper input[type="tel"],
.tap20-contact-form .gform_wrapper input[type="url"],
.tap20-contact-form .gform_wrapper input[type="number"],
.tap20-contact-form .gform_wrapper textarea,
.tap20-contact-form .gform_wrapper select {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: 0;
	background: #fff;
	font-family: var(--tap20-font);
	font-size: 15px;
	font-weight: 300;
	color: var(--tap20-ink);
	box-sizing: border-box;
	box-shadow: 0 0 0 1px var(--tap20-line) inset;
	transition: box-shadow .16s ease;
	outline: none;
	line-height: 1.3;
}
.tap20-contact-form .gform_wrapper textarea {
	resize: vertical;
	min-height: 100%;
	height: 100%;
}
.tap20-contact-form .gform_wrapper input::placeholder,
.tap20-contact-form .gform_wrapper textarea::placeholder {
	color: var(--tap20-ink);
	opacity: 1;
	font-weight: 300;
}
.tap20-contact-form .gform_wrapper input:focus,
.tap20-contact-form .gform_wrapper textarea:focus,
.tap20-contact-form .gform_wrapper select:focus {
	box-shadow: 0 0 0 2px var(--tap20-cyan) inset;
}
/* Native select with custom chevron — same SVG mask as the static form. */
.tap20-contact-form .gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 6 5-6' fill='none' stroke='%2321252E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

/* Hide GF's stock labels (we use placeholders per PSD). */
.tap20-contact-form .gform_wrapper .gfield_label { display: none; }
.tap20-contact-form .gform_wrapper .gfield_description { font-size: 13px; color: var(--tap20-slate); margin-top: 4px; }
.tap20-contact-form .gform_wrapper .gfield_required { color: var(--tap20-magenta); margin-left: 4px; }

/* Submit button — magenta LÄHETÄ, centered, matching the tap20-btn--magenta variant. */
.tap20-contact-form .gform_wrapper .gform_footer {
	display: flex;
	justify-content: center;
	margin-top: 18px;
}
.tap20-contact-form .gform_wrapper .gform_footer input[type="submit"],
.tap20-contact-form .gform_wrapper .gform_footer button[type="submit"],
#content .tap20-contact-form .gform_wrapper .gform_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 199px;
	padding: 20px 30px;
	border: 0;
	border-radius: 0;
	background: var(--tap20-magenta) !important;
	color: #fff !important;
	font-family: var(--tap20-font);
	font-weight: 500 !important;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .16s ease;
}
.tap20-contact-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.tap20-contact-form .gform_wrapper .gform_footer button[type="submit"]:hover {
	background: var(--tap20-magenta-deep) !important;
}

/* Validation / confirmation messages — keep GF defaults but tone down. */
.tap20-contact-form .gform_wrapper .gform_validation_errors {
	background: #fff;
	border-left: 4px solid var(--tap20-magenta);
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 14px;
}
.tap20-contact-form .gform_confirmation_message {
	background: rgba(0,135,95,.08);
	border-left: 4px solid var(--tap20-green);
	padding: 16px 20px;
	color: var(--tap20-ink);
	font-size: 15px;
	max-width: 800px;
	margin: 0 auto;
}

@media (max-width: 720px) {
	.tap20-contact-form .gform_wrapper .gfield.tap20-gf-half,
	.tap20-contact-form .gform_wrapper .gfield.tap20-gf-select,
	.tap20-contact-form .gform_wrapper .gfield.tap20-gf-left-col,
	.tap20-contact-form .gform_wrapper .gfield.tap20-gf-right-col {
		grid-column: 1 / -1;
		grid-row: auto;
	}
	.tap20-contact-form .gform_wrapper textarea { min-height: 160px; height: auto; }
}

@media (max-width: 720px) {
	.tap20-contact-form__row,
	.tap20-contact-form__row--selects,
	.tap20-contact-form__row--body {
		grid-template-columns: 1fr;
	}
	.tap20-contact-form__field textarea { min-height: 160px; }
}

/* ============================================================
   YHTEYSLOMAKE HERO — full-bleed envelope graphic under the header.
   Same pattern as YHTEYDET hero: core/image alignfull, capped height.
   ============================================================ */
.entry-content > .wp-block-image.tap20-yhteyslomake-hero,
.wp-block-image.tap20-yhteyslomake-hero.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
}
.wp-block-image.tap20-yhteyslomake-hero img {
	width: 100%;
	height: clamp(420px, 46vw, 640px);
	object-fit: cover;
	display: block;
}

/* ============================================================
   YHTEYDET HERO — full-bleed image immediately under the header.
   The page uses a core/image block (alignfull) instead of an ACF
   hero because there is no headline/badge overlay on this subpage.
   ============================================================ */
.entry-content > .wp-block-image.tap20-yhteydet-hero,
.wp-block-image.tap20-yhteydet-hero.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
}
.wp-block-image.tap20-yhteydet-hero img {
	width: 100%;
	height: auto;
	max-height: 591px;
	object-fit: cover;
	display: block;
}

/* ============================================================
   YHTEYDET-scoped intro overrides
   PSD measurements (Tapaturva_alasivu_YHTEYDET.psd):
     • "yhteystiedot" eyebrow  → Outfit-Medium 10.67pt × 2.355 scale
                                 = 25px effective · tracking 15
                                 (rendered as <h2> when there's no title)
     • Address body            → Outfit-ExtraLight 17.98pt × 0.985 scale
                                 = 17.7px effective · leading 25 (lh 1.41)
   These differ from the LP2.0 main-page intro, so they're scoped to the
   YHTEYDET page via the .tap20-intro--yhteydet wrapper className.
   ============================================================ */
.tap20-intro--yhteydet h2.tap20-intro__caps--top,
.tap20-intro--yhteydet p.tap20-intro__caps--top,
.entry-content .tap20-intro--yhteydet h2.tap20-intro__caps--top {
	font-family: var(--tap20-font);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.17;
	letter-spacing: .015em;
	text-transform: uppercase;
	margin: 0 0 22px;
	padding: 0;
	color: var(--tap20-ink);
}
.tap20-intro--yhteydet .tap20-intro__body p,
.entry-content .tap20-intro--yhteydet .tap20-intro__body p {
	font-size: 18px;
	font-weight: 200;
	line-height: 1.41;
	letter-spacing: .015em;
	color: var(--tap20-ink);
	margin: 0 0 8px;
}
.tap20-intro--yhteydet .tap20-intro__body p:last-child { margin-bottom: 0; }
.tap20-intro--yhteydet .tap20-intro__body strong { font-weight: 500; }
.tap20-intro--yhteydet .tap20-intro__body em { font-style: italic; font-weight: 200; }

/* ============================================================
   TEAM GRID  (Yhteydet subpage — TEAM TAPATURVA)
   PSD measurements (1 px ≈ 1 pt at the 1230-wide canvas):
     • Eyebrow    Outfit-Medium     10.67pt · tracking 15
     • Name       Outfit-Light      21.16pt · leading 25.39 (lh ≈ 1.20)
     • Role       Outfit-ExtraLight 17.98pt · leading 25.39 (lh ≈ 1.41)
     • Phone/mail Outfit-ExtraLight 17.98pt · leading 25.39
     • Bio        Outfit-ExtraLight 14.81pt · leading 16.93 (lh ≈ 1.14)
     • LinkedIn   Outfit-ExtraLight 17.98pt
     • Credit     Outfit-ExtraLight 17.98pt  (same as role text)
   ============================================================ */
.tap20-team {
	background: var(--tap20-surface);
	padding: 56px 0 64px;
	font-family: var(--tap20-font);
}
/* PSD eyebrow: Outfit-Medium 10.67pt × 2.355 scale = 25px effective.
   Rendered as <h2> (section heading) — zero out browser defaults. */
h2.tap20-team__eyebrow,
.entry-content h2.tap20-team__eyebrow {
	font-family: var(--tap20-font);
	margin: 0 0 40px;
	padding: 0;
	text-align: center;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.17;
	text-transform: uppercase;
	letter-spacing: .015em;
	color: var(--tap20-ink);
}
.tap20-team__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px 32px;
}
.tap20-team__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--tap20-ink);
	max-width: 340px;
	margin: 0 auto;
}
/* Portrait: 200px green-filled circle, photo masked inside. */
.tap20-team__portrait {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--tap20-green);
	overflow: hidden;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tap20-team__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}
.tap20-team__name {
	margin: 0 0 2px;
	font-size: 21px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--tap20-ink);
}
.tap20-team__role {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 200;
	line-height: 1.41;
	color: var(--tap20-ink);
}
.tap20-team__contact,
#content .tap20-team__contact,
#content a.tap20-team__contact {
	color: var(--tap20-ink) !important;
	font-weight: 200 !important;
	font-size: 18px;
	line-height: 1.41;
	text-decoration: none !important;
	display: block;
}
.tap20-team__contact:hover,
#content .tap20-team__contact:hover { color: var(--tap20-green) !important; }
.tap20-team__bio {
	margin: 18px 0 14px;
	font-size: 15px;
	font-weight: 200;
	line-height: 1.14;
	letter-spacing: .015em;
	color: var(--tap20-ink);
}
.tap20-team__linkedin,
#content .tap20-team__linkedin,
#content a.tap20-team__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 200 !important;
	line-height: 1.41;
	color: var(--tap20-ink) !important;
	text-decoration: none !important;
	margin-bottom: 10px;
}
.tap20-team__linkedin:hover,
#content .tap20-team__linkedin:hover { color: var(--tap20-green) !important; }
.tap20-team__linkedin span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 3px;
	background: var(--tap20-green);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	font-family: var(--tap20-font);
}
.tap20-team__credit {
	margin: auto 0 0;
	font-size: 18px;
	font-weight: 200;
	line-height: 1.41;
	color: var(--tap20-ink);
	padding-top: 8px;
}

@media (max-width: 960px) {
	.tap20-team__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}
@media (max-width: 600px) {
	.tap20-team__grid { grid-template-columns: 1fr; gap: 40px; }
	.tap20-team__portrait { width: 168px; height: 168px; }
}

/* ============================================================
   MAP + DIRECTIONS  (Yhteydet subpage — "Näin saavut meille.")
   PSD measurements:
     • Title  Outfit-Light 21.16pt · leading 25.39
     • Map layer Taso 352: 1063 × 333 px on the 1230-wide canvas →
       essentially the full content column. aspect-ratio matches PSD.
   ============================================================ */
.tap20-map {
	background: var(--tap20-surface);
	padding: 32px 0 56px;
	font-family: var(--tap20-font);
}
.tap20-map__title {
	margin: 0 0 20px;
	text-align: center;
	font-size: 21px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--tap20-ink);
	text-transform: none;
	letter-spacing: 0;
}
.tap20-map__frame {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	aspect-ratio: 1063 / 333;
	border: 1px solid var(--tap20-line);
	overflow: hidden;
	background: #e9eaec;
}
.tap20-map__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.tap20-map__pdf {
	margin: 18px 0 0;
	text-align: center;
	font-size: 15px;
}
.tap20-map__pdf a,
#content .tap20-map__pdf a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tap20-green) !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.tap20-map__pdf a:hover,
#content .tap20-map__pdf a:hover { color: var(--tap20-green-deep) !important; }
.tap20-map__einvoice {
	margin: 28px 0 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.7;
	color: var(--tap20-ink);
}
.tap20-map__einvoice-label { display: block; font-weight: 400; }
.tap20-map__einvoice-id,
.tap20-map__einvoice-op {
	display: block;
	font-weight: 700;
	letter-spacing: .02em;
}