/* ============================================================
   Relion — jaettu pohja: tokenit + primitiivit.
   Käytetään globaalisti (header, footer, kaikki lohkot).
   Lähde: Claude Design (colors_and_type.css + relion.css).
   ============================================================ */

:root {
  /* --- Brändivärit (ENERGIA-paletti) --- */
  --relion-orange:     #F0502B;
  --relion-orange-aa:  #D23F1D;
  --relion-orange-aa-hover: #B5341A;
  --relion-orange-600: #D8421F;
  --relion-orange-700: #B5341A;
  --relion-orange-100: #FCE4DC;
  --relion-orange-50:  #FDF1EC;
  --relion-black:      #000000;
  --relion-slate-900:  #1C2024;
  --relion-slate-800:  #262B30;
  --relion-slate-700:  #3A4047;
  --relion-blue:       #B8D8DD;
  --relion-blue-600:   #8FBEC6;
  --relion-blue-50:    #F1F7F8;
  --relion-kesataivas: #E6F2F8;
  --relion-lempeys:    #FDE3DC;

  /* Neutraalit (lämminsävyiset) */
  --relion-paper:    #FAFAF8;
  --relion-white:    #FFFFFF;
  --relion-gray-50:  #F4F4F2;
  --relion-gray-100: #E8E8E4;
  --relion-gray-200: #D5D5CF;
  --relion-gray-400: #8A8A82;
  --relion-gray-500: #5F5F58;
  --relion-gray-600: #43433E;

  /* Semanttiset tokenit */
  --bg:            var(--relion-paper);
  --fg:            var(--relion-black);
  --fg-muted:      var(--relion-gray-600);
  --fg-subtle:     var(--relion-gray-500);
  --fg-link:       var(--relion-orange-700);
  --border:        var(--relion-gray-100);
  --border-strong: var(--relion-gray-200);

  /* Typografia — Work Sans */
  --font-sans:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Work Sans", var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-head: 700;
  --lh-normal: 1.45;

  /* Mitat & radii */
  --container-max: 1320px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --r-media: 16px;
  --r-card:  12px;
  --r-btn:   999px;

  /* Varjot */
  --shadow-lg: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}

/* --- Reset --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  text-wrap: pretty;
	overflow-x: clip;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
::selection { background: var(--relion-orange); color: #fff; }

/* --- Saavutettavuus --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.r-skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--relion-orange-aa); color: #fff; padding: 10px 16px;
  border-radius: var(--radius-pill); font-weight: 700; z-index: 200;
  text-decoration: none;
}
.r-skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--relion-orange); outline-offset: 3px; border-radius: 2px; }

/* --- Layout-primitiivit --- */
.wrap {
  width: 100%; max-width: var(--container-max);
  margin: 0 auto; padding: 0 32px;
}

/* --- Eyebrow --- */
.eb {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--fg-subtle); margin: 0 0 22px;
}
.eb::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--relion-orange); flex: none;
}
.eb--center { justify-content: center; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  padding: 14px 26px; font-weight: 700; font-size: 15.5px; cursor: pointer;
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.btn svg { flex: none; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.btn--lg { padding: 17px 32px; font-size: 16.5px; }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn--primary { background: var(--relion-orange-aa); color: #fff; }
.btn--primary:hover,
.btn--primary:active { background: var(--relion-orange-aa-hover); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ink { background: var(--relion-slate-900); color: #fff; }
.btn--ink:hover { background: var(--relion-slate-800); }
.btn--outline { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--fg); }
.btn--ghost-light { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.18); }

/* --- Ei WP-blockGapia full-bleed-osien väliin ---
   Sectionit hoitavat oman paddinginsa; pääosat (header/main/footer) ovat
   reunasta reunaan. Estetään WP:n is-layout-flow blockGap-margin niiden välistä
   (sisältösivujen kappaleväistys is-layout-constrainedissa säilyy). */
.wp-site-blocks > * { margin-block-start: 0; }
main.wp-block-group.is-layout-flow > * { margin-block-start: 0; }

/* Template-part-wrapperi (header/footer) ei saa muodostaa omaa laatikkoaan:
   muuten sticky .nav stickaisi vain headerin korkuisessa wrapperissa ja katoaisi.
   display:contents → lapset (mm. sticky .nav) osallistuvat .wp-site-blocks-layoutiin. */
.wp-site-blocks > .wp-block-template-part { display: contents; }

/* --- Section-primitiivit (jaettu lohkojen kesken) --- */
.section { padding: clamp(72px, 10vw, 132px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--white { background: var(--relion-white); }
.section--muted { background: var(--relion-gray-50); }
.section--ink   { background: var(--relion-slate-900); color: #fff; }
.section--sky   { background: var(--relion-kesataivas); }
.section--peach { background: var(--relion-lempeys); }
.section--blue  { background: var(--relion-blue); }
.section--ink .eb { color: rgba(255,255,255,0.62); }

.shead {
	font-size: clamp(30px, 4.2vw, 52px); font-weight: var(--fw-head);
	line-height: 1.06; letter-spacing: -0.025em; margin: 0;
}
.slead {
	font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
	color: var(--fg-muted); margin: 22px 0 0; max-width: 60ch;
}
.head-row {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 32px; margin-bottom: 52px; flex-wrap: wrap;
}
.head-row__lead { max-width: 44ch; }

/* --- Brand "on" -koristemerkki --- */
.brandmark {
  position: absolute; pointer-events: none; z-index: 0;
  aspect-ratio: 2088 / 1196;
  -webkit-mask: url(../img/relion-on.svg) no-repeat center / contain;
          mask: url(../img/relion-on.svg) no-repeat center / contain;
}

/* --- Kumppanuusohjelmat: sama logo + selite herossa ja oppaissa --- */
.partner-programs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}
.partner-program {
	display: flex;
	min-width: 0;
	min-height: 96px;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--relion-gray-50);
	text-align: center;
}
.partner-program__logo-wrap {
	display: grid;
	width: 100%;
	height: 56px;
	place-items: center;
}
.partner-program__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 56px;
	object-fit: contain;
}
.partner-program--procountor .partner-program__logo { max-height: 28px; }
.partner-program--fennoa .partner-program__logo { max-height: 58px; }
.partner-program__label {
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--fg-muted);
	text-wrap: balance;
}

/* --- Reveal-animaatio (progressiivinen: piilotetaan vain kun JS animoi) --- */
/* .reveal on näkyvä oletuksena → editori (ei reveal.js) + no-JS näyttävät sisällön. */
.reveal { opacity: 1; }
.js-reveal .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- Säilytetyn vanhan artikkelisisällön responsiivinen turvaverkko --- */
main figure.wp-caption,
main .wp-caption {
	width: auto !important;
	max-width: 100% !important;
}
main figure.wp-caption img,
main .wp-caption img,
main .wp-block-image img {
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
}
main a { overflow-wrap: anywhere; }

/* Cycle Groupin säilytetyt tekstilinkit tarvitsevat brandioranssia tummemman
   sävyn valkoisella, jotta normaali 20 px teksti ylittää WCAG AA -rajan. */
body.postid-316 .entry-content a.buttonlink { color: #d13c1a; }

/* Harjoittelu- ja kesätyösivu koostuu uusista full-bleed-sectioneista, mutta
   vanha sivupohja rajoittaa muuten koko lohkopuun 720 pikseliin. Sisäiset
   .wrap-elementit hoitavat varsinaisen sisältöleveyden muiden uusien sivujen
   tapaan. */
body.page-id-2522 main#main { padding-inline: 0; }
body.page-id-2522 .entry-content.wp-block-post-content {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
	padding-inline: 0;
}
body.page-id-2522 .entry-content.wp-block-post-content > * {
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

/* REST-lomakkeet eivät saa avata raakaa JSON-vastausta ilman JavaScriptiä. */
.relion-js-form { display: none; }
.js-reveal .relion-js-form { display: block; }
.relion-form-fallback {
	padding: 28px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	background: #fff;
}
.relion-form-fallback h2 { margin-top: 0; }

@media (max-width: 560px) {
	.wrap { padding-inline: 20px; }
	.shead { overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
	main table {
		display: block;
		max-width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}
/* ============================================================
   Section-tyylit jaettuihin osioihin (palvelusivu ym.).
   Lähde: Claude Design relion.css. Käytetään useissa lohkoissa.
   ============================================================ */

/* Split (kuva + teksti) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.split__media { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-media); background-size: cover; background-position: center; background-color: var(--relion-gray-50); }

/* Service hero */
.svc-hero { padding: clamp(28px, 3vw, 44px) 0 0; }
.svc-hero .split { align-items: center; }
.svc-hero__lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--fg-muted); line-height: 1.6; margin: 18px 0 0; }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.crumbs { font-size: 13.5px; color: var(--fg-subtle); }
.crumbs a { color: var(--fg-subtle); text-decoration: none; }
.crumbs a:hover { color: var(--relion-orange); }
.svc-trust { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--border); }
.svc-trust__item { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.svc-trust__item svg { color: var(--relion-orange); flex: none; }
.svc-trust__item b { font-family: var(--font-display); font-weight: var(--fw-head); color: var(--fg); }

/* Prose (keskitetty + longform) */
.svc-prose { max-width: 780px; margin: 0 auto; text-align: center; }
.svc-prose .eb { justify-content: center; }
.svc-prose__lead { font-size: clamp(18px, 1.7vw, 22px); color: var(--fg); font-weight: 500; line-height: 1.55; margin: 0 auto 24px; max-width: 720px; }
.svc-prose p { font-size: 17px; color: var(--fg-muted); line-height: 1.72; margin: 0 auto 18px; max-width: 700px; }
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(26px, 3vw, 38px); font-weight: var(--fw-head); letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 18px; }
.prose h3 { font-size: 21px; font-weight: 700; margin: 36px 0 10px; }
.prose p { font-size: 17px; line-height: 1.7; color: var(--fg-muted); margin: 0 0 18px; }
.longform-grid { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: clamp(40px, 5vw, 76px); align-items: start; }
.longform-grid .prose { max-width: none; }
.longform-grid .prose > p:first-of-type { font-size: 19px; color: var(--fg); line-height: 1.6; }
.ticks { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--fg); }
.ticks li > svg { color: var(--relion-orange); flex: none; margin-top: 2px; }
.aside-card { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--relion-orange); border-radius: var(--r-card); padding: 30px; box-shadow: 0 6px 20px rgba(28,32,36,0.08); position: sticky; top: 110px; }
.aside-card__person { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.aside-card__person .sales-card__avatar { width: 36px; height: 36px; font-size: 13px; background: var(--relion-orange-50); color: var(--relion-orange); }
.aside-card__badge { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-subtle); }
.aside-card h3 { margin: 0 0 8px; font-size: 19px; font-weight: var(--fw-head); letter-spacing: -0.015em; }
.aside-card p { margin: 0 0 20px; font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; }
.aside-card .btn { width: 100%; }
.aside-card__micro { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px 0 0 !important; font-size: 12px; color: var(--fg-subtle); text-align: center; }
.aside-card__micro svg { color: var(--relion-orange); flex: none; }
.aside-list { list-style: none; padding: 0; margin: 22px 0 0; border-top: 1px solid var(--border); }
.aside-list li { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.aside-list__ic { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; }

/* Pain cards */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; display: flex; flex-direction: column; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08); border-color: var(--border-strong); }
.pcard__qmark { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: .5; height: 24px; display: block; color: var(--relion-orange); }
.pcard__q { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 18px; letter-spacing: -0.015em; line-height: 1.32; color: var(--fg); margin: 18px 0 0; }
.pcard__solution { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.pcard__check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; margin-top: 1px; }
.pcard__a { font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; margin: 0; }

/* Included */
.incl { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 68px); align-items: center; }
.incl__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin: 4px 0 0; padding: 0; list-style: none; }
.incl__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: var(--fg); }
.incl__list svg { color: var(--relion-orange); flex: none; margin-top: 2px; }
.incl__panel { background: var(--relion-slate-900); color: #fff; border-radius: 20px; padding: clamp(30px, 3.5vw, 44px); position: relative; overflow: hidden; }
.incl__panel .brandmark { right: -46px; bottom: -56px; width: 220px; background: var(--relion-orange); opacity: 0.18; }
.incl__panel-eb { position: relative; z-index: 1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--relion-orange); }
.incl__panel h3 { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--fw-head); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.15; margin: 16px 0 14px; color: #fff; }
.incl__panel p { position: relative; z-index: 1; font-size: 15.5px; color: rgba(255,255,255,0.74); line-height: 1.6; margin: 0 0 26px; }
.incl__panel .btn { position: relative; z-index: 1; }

/* Steps band (numeroidut kortit) */
.switch__head { max-width: 640px; }
.switch3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 52px; }
.scard__num { font-family: var(--font-display); font-weight: var(--fw-head); font-size: clamp(46px, 5.5vw, 70px); letter-spacing: -0.04em; line-height: 1; color: var(--relion-orange); margin: 0 0 18px; }
.scard h3 { font-size: 22px; font-weight: var(--fw-head); letter-spacing: -0.015em; margin: 0 0 10px; line-height: 1.2; }
.scard p { font-size: 15.5px; color: var(--relion-gray-600); line-height: 1.6; margin: 0; }
.switch__cta { margin-top: clamp(40px, 5vw, 60px); }

/* Feat-list (proof) */
.feat-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.feat-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--relion-orange-50); color: var(--relion-orange-700); display: flex; align-items: center; justify-content: center; }
.feat-list h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 700; }
.feat-list p { margin: 0; font-size: 15.5px; color: var(--fg-muted); line-height: 1.55; }
.ratingbox { background: var(--relion-lempeys); border-radius: var(--r-media); padding: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 320px; }
.ratingbox__num { font-family: var(--font-display); font-weight: var(--fw-head); font-size: clamp(72px, 9vw, 120px); line-height: 0.9; letter-spacing: -0.04em; color: #1A1A1A; }
.ratingbox__scale { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 22px; color: var(--relion-orange); margin-top: 6px; }
.ratingbox__label { font-size: 16px; font-weight: 600; color: var(--fg); margin: 22px 0 0; max-width: 26ch; line-height: 1.4; }
.ratingbox__sub { font-size: 14.5px; color: var(--fg-muted); margin: 8px 0 0; }

/* Media-text (bleedsec, vasen/oikea) — käytetään myös feature-mediassa */
.media-text__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.media-text__text { max-width: 540px; }
.media-text__media { width: 100%; min-height: clamp(380px, 36vw, 520px); background-size: cover; background-position: center; background-color: var(--relion-gray-50); border-radius: var(--r-media); box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05); }
.media-text--reverse .media-text__media { order: -1; }

/* Tekstilinkki nuolella */
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--fg); transition: gap 200ms ease, color 160ms ease; }
.tlink svg { color: var(--relion-orange); transition: transform 220ms cubic-bezier(.2,.7,.2,1); flex: none; }
.tlink:hover { color: var(--relion-orange-700); }
.tlink:hover svg { transform: translateX(4px); }

/* Quote band */
.quote-band { max-width: 940px; margin: 0 auto; text-align: center; }
.quote-band__mark { font-family: var(--font-display); font-weight: 800; font-size: 80px; line-height: 0.5; color: var(--relion-orange); display: block; height: 44px; }
.quote-band__text { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.015em; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.3; margin: 28px 0 0; color: var(--fg); text-wrap: balance; }
.section--ink .quote-band__text { color: #fff; }
.quote-band__cite { margin: 32px 0 0; }
.quote-band__cite b { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 17px; display: block; }
.quote-band__cite span { font-size: 14px; color: var(--fg-subtle); }
.section--ink .quote-band__cite span { color: rgba(255,255,255,0.6); }
.quote-band__cta { margin-top: 30px; }

/* Booking (sales-card + lomake — Kari vasemmalla plain-tekstinä, lomake oikealla korttina) */
.contact-grid { display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(36px, 5vw, 68px); align-items: start; }
.contact-form__title { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.015em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; margin: 0 0 8px; }
.contact-form__sub { font-size: 16px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 28px; }
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 6px 16px rgba(28,32,36,0.08); padding: clamp(26px, 3vw, 38px); }
.field { display: block; margin-bottom: 18px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-muted); margin-bottom: 8px; }
.field__control { position: relative; display: block; }
.field input { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 15px 16px; font-family: inherit; font-size: 16px; background: var(--relion-gray-50); color: var(--fg); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field input::placeholder { color: var(--relion-gray-400); }
.field input:focus { outline: none; background: #fff; border-color: var(--relion-orange); box-shadow: 0 0 0 3px rgba(240,80,43,0.14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.contact-form .btn { width: 100%; margin-top: 4px; }
.contact-form__micro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--fg-subtle); }
.contact-form__micro svg { color: var(--relion-orange); flex: none; }
.squeeze__done { text-align: center; padding: 16px 0 8px; }
.squeeze__done-ic { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; }
.squeeze__done h2 { margin-bottom: 10px; }
.squeeze__done p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 24px; }
.sales-card { background: var(--relion-slate-900); color: #fff; border-radius: 20px; overflow: hidden; position: relative; }
.sales-card .brandmark { right: -50px; bottom: -60px; width: 240px; background: var(--relion-orange); opacity: 0.16; }
.sales-card__inner { position: relative; z-index: 1; padding: clamp(28px, 3vw, 38px); }
.sales-card__eb { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; color: var(--relion-orange); }
.sales-card__person { display: flex; align-items: center; gap: 16px; margin: 20px 0 22px; }
.sales-card__avatar { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.12); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-head); font-size: 22px; color: #fff; flex: none; }
.sales-card__avatar--photo { object-fit: cover; background: none; }
.sales-card__name { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 20px; letter-spacing: -0.01em; }
.sales-card__role { font-size: 13.5px; color: rgba(255,255,255,0.66); margin-top: 2px; }
.sales-card__links { display: grid; gap: 2px; }
.sales-card__link { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.12); color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s ease; }
.sales-card__link:hover { color: var(--relion-orange); }
.sales-card__link svg { color: var(--relion-orange); flex: none; }
.sales-card__note { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,0.72); line-height: 1.6; }

/* Sticky booking bar */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #1A1A1A; color: #fff; transform: translateY(115%); transition: transform .32s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -8px 30px rgba(0,0,0,0.18); }
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; }
.sticky-cta__msg { font-size: 15px; color: rgba(255,255,255,0.82); }
.sticky-cta__msg b { font-family: var(--font-display); font-weight: var(--fw-head); color: #fff; display: block; font-size: 17px; letter-spacing: -0.01em; }
.sticky-cta__actions { display: flex; gap: 12px; flex: none; }
.sticky-cta__call { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 0 6px; }
.sticky-cta__call svg { color: var(--relion-orange); }

/* ==========================================================================
   Ota yhteyttä / toimipiste — jaetut osiot (kanoninen, Claude Design)
   ========================================================================== */

/* Contact hero — vasen + täysleveä kuva */
.contact-hero { padding: clamp(40px, 5vw, 76px) 0 0; }
.contact-hero__top { max-width: 760px; }
.contact-hero__photo { margin-top: clamp(36px, 4vw, 56px); width: 100%; height: clamp(300px, 38vw, 520px); border-radius: var(--r-media); background-size: cover; background-position: center top; box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05); }

/* Team / people */
.team-block + .team-block { margin-top: clamp(40px, 5vw, 64px); }
.team-block__label { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 21px; letter-spacing: -0.01em; margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.people--key { grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 760px; }
.person { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.person:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08); border-color: var(--border-strong); }
.person__top { display: flex; align-items: center; gap: 15px; }
.person__avatar { width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-head); font-size: 17px; letter-spacing: -0.01em; }
.av0 { background: var(--relion-orange-50); color: var(--relion-orange-700); }
.av1 { background: var(--relion-blue); color: #235; }
.av2 { background: var(--relion-lempeys); color: #9a4a32; }
.av3 { background: #D1D2D4; color: #1A1A1A; }
.person__name { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 16.5px; letter-spacing: -0.01em; line-height: 1.2; }
.person__role { font-size: 12.5px; color: var(--fg-subtle); margin-top: 3px; line-height: 1.35; }
.person__badge { display: inline-block; margin-top: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--relion-orange); background: var(--relion-orange-50); padding: 3px 9px; border-radius: var(--radius-pill); }
.person__contacts { margin-top: 18px; display: grid; gap: 7px; }
.person__contacts a { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--fg-muted); text-decoration: none; transition: color .15s ease; }
.person__contacts a:hover { color: var(--relion-orange); }
.person__contacts svg { color: var(--relion-gray-400); flex: none; }
.person__contacts a:hover svg { color: var(--relion-orange); }
.person--key { padding: 28px; }
.person--key .person__avatar { width: 60px; height: 60px; font-size: 20px; }
.person--key .person__name { font-size: 19px; }

/* Toimistokortit + yhteystiedot */
.local__head { max-width: 720px; margin-bottom: 44px; }
.contact-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ocard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px 28px 26px; text-decoration: none; color: inherit; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease; }
.ocard:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(28,32,36,0.08); border-color: var(--border-strong); }
.ocard__ic { width: 48px; height: 48px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; transition: background .2s ease, color .2s ease; }
.ocard:hover .ocard__ic { background: var(--relion-orange); color: #fff; }
.ocard__city { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 22px; letter-spacing: -0.01em; margin: 18px 0 6px; }
.ocard__addr { font-size: 14.5px; color: var(--fg-muted); line-height: 1.5; }
.ocard__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--fg); }
.ocard__more svg { color: var(--relion-orange); transition: transform .2s ease; }
.ocard:hover .ocard__more svg { transform: translateX(4px); }
.contact-info { display: flex; flex-wrap: wrap; gap: 36px 56px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border-strong); }
.contact-info__col h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); margin: 0 0 10px; }
.contact-info__col a { display: block; font-size: 15px; color: var(--fg); text-decoration: none; line-height: 1.7; }
.contact-info__col a:hover { color: var(--relion-orange); }
.contact-info__col p { font-size: 15px; color: var(--fg-muted); margin: 0; line-height: 1.7; }
.contact-billing { margin-top: 36px; padding: 28px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg); }
.contact-billing h2 { font-size: clamp(22px, 2.5vw, 30px); margin: 0 0 22px; }
.contact-billing dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; margin: 0; }
.contact-billing dl div { min-width: 0; }
.contact-billing dt { color: var(--fg-subtle); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.contact-billing dd { color: var(--fg); font-size: 15px; margin: 5px 0 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .contact-billing dl { grid-template-columns: 1fr; } }

/* Responsive */
@media (max-width: 1080px) { .pcards { grid-template-columns: repeat(2, 1fr); } .sticky-cta__msg { display: none; } .sticky-cta__inner { justify-content: center; } .people { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
	.split, .incl, .contact-grid, .longform-grid, .media-text__grid { grid-template-columns: minmax(0, 1fr); }
	.contact-grid > *, .incl > * { min-width: 0; width: 100%; }
	.switch3 { grid-template-columns: 1fr; }
	.aside-card { position: static; }
	.media-text--reverse .media-text__media { order: 0; }
	.split__media, .media-text__media { aspect-ratio: 16 / 11; min-height: 0; }
	.people, .people--key { grid-template-columns: repeat(2, 1fr); }
	.contact-offices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.pcards, .incl__list, .field-row, .people, .people--key { grid-template-columns: 1fr; }
	.svc-hero__actions .btn, .incl__panel .btn, .contact-form .btn { width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
	.sticky-cta__inner {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		justify-content: flex-start;
		padding: 12px 86px 12px 14px;
	}
	.sticky-cta__actions { width: 100%; min-width: 0; }
	.sticky-cta__call { display: none; }
	.sticky-cta__actions .btn {
		width: 100%;
		min-width: 0;
		min-height: 48px;
		justify-content: center;
		padding-inline: 10px;
		white-space: normal;
		line-height: 1.2;
		text-align: center;
	}
}
.reference-archive__intro { margin-bottom: 52px; }
.reference-archive__intro .slead { max-width: 54ch; }
.reference-grid__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.reference-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.reference-card:hover {
	transform: translateY(-4px);
	border-color: var(--border-strong);
	box-shadow: 0 10px 28px rgba(28,32,36,.09);
}
.reference-card .wp-block-post-featured-image,
.reference-card__image { display: block; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: var(--relion-gray-50); }
.reference-card .wp-block-post-featured-image a { display: block; height: 100%; }
.reference-card .wp-block-post-featured-image img,
.reference-card__image img { width: 100% !important; height: 100% !important; object-fit: cover; }
.reference-card__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 26px; }
.reference-card__body .wp-block-post-title,
.reference-card__title { margin: 0; font-size: 21px; line-height: 1.24; }
.reference-card__body .wp-block-post-title a,
.reference-card__title a { color: var(--fg); text-decoration: none; }
.reference-card__body .wp-block-post-excerpt,
.reference-card__excerpt { flex: 1; margin: 0; color: var(--fg-muted); font-size: 15px; line-height: 1.6; }
.reference-card__body .wp-block-post-excerpt__more-link,
.reference-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--fg); font-weight: 700; text-decoration: none; }
.reference-card__more svg { color: var(--relion-orange); }
.reference-pagination { display: flex; justify-content: center; gap: 16px; margin-top: 42px; }

.person-profile__grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(40px, 7vw, 96px); }
.person-profile__media {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 24px;
	background: var(--relion-gray-50);
	color: var(--relion-orange);
	font-size: clamp(64px, 11vw, 132px);
	font-weight: 750;
}
.person-profile__media img { width: 100% !important; height: 100% !important; object-fit: cover; }
.person-profile__role { margin: 24px 0 0; color: var(--fg); font-size: clamp(19px, 2vw, 24px); font-weight: 650; }
.person-profile__office { margin: 8px 0 0; color: var(--fg-muted); }
.person-profile__contacts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 30px 0; }
.person-profile__contacts a { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-weight: 650; text-decoration: none; }
.person-profile__contacts svg { color: var(--relion-orange); }

@media (max-width: 900px) {
	.reference-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.person-profile__grid { grid-template-columns: minmax(220px, 420px); justify-content: center; }
}
@media (max-width: 620px) {
	.reference-grid__items { grid-template-columns: 1fr; }
	.reference-card__body { padding: 22px; }
}
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter {
	padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
	background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--fg-muted);
	cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.filter:hover { border-color: var(--relion-orange); color: var(--relion-orange); }
.filter.is-active { background: #1A1A1A; border-color: #1A1A1A; color: #fff; }

.featured-post {
	display: grid; grid-template-columns: 1.08fr 0.92fr; overflow: hidden;
	background: #fff; border: 1px solid var(--border); border-radius: 22px; margin-bottom: 32px;
	text-decoration: none; color: inherit; transition: box-shadow .26s ease, border-color .26s ease;
}
.featured-post:hover { box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.featured-post__media { background-size: cover; background-position: center; background-color: var(--relion-gray-50); min-height: 320px; }
.featured-post__body { padding: clamp(30px, 3.6vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.featured-post__title { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.02em; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.16; margin: 16px 0 14px; color: var(--fg); }
.featured-post__excerpt { font-size: 16px; color: var(--fg-muted); line-height: 1.62; margin: 0 0 24px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post {
	display: flex; flex-direction: column; padding: 30px 28px;
	background: #fff; border: 1px solid var(--border); border-radius: 16px;
	text-decoration: none; color: inherit;
	transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.post__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.post__cat { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--relion-orange); }
.post__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }
.post__date { font-size: 13px; color: var(--fg-subtle); }
.post__title { font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-head); letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 12px; }
.post__excerpt { font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 22px; flex: 1; }
.post__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--fg); }
.post__more svg { color: var(--relion-orange); transition: transform .2s ease; }
.post:hover .post__more svg { transform: translateX(4px); }

@media (max-width: 1080px) {
	.post-grid { grid-template-columns: repeat(2, 1fr); }
	.featured-post { grid-template-columns: 1fr; }
	.featured-post__media { min-height: 240px; }
}
@media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } }
.calc { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.calc__panel { background: #fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05); overflow: hidden; }
.calc__progress { height: 4px; background: var(--relion-gray-100); }
.calc__progress-fill { height: 100%; background: var(--relion-orange); border-radius: 0 999px 999px 0; transition: width 360ms cubic-bezier(.2,.7,.2,1); }
.calc__inner { padding: clamp(26px, 3vw, 38px); }
.calc__list { list-style: none; padding: 0; margin: 32px 0 0; }
.calc__list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); font-size: 16px; font-weight: 600; color: var(--fg); }
.calc__list li:last-child { border-bottom: 1px solid var(--border); }
.calc__tick { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; }
.calc__formtitle { font-size: 20px; font-weight: var(--fw-head); letter-spacing: -0.015em; margin: 0 0 6px; }
.calc__formsub { font-size: 14px; color: var(--fg-muted); margin: 0 0 24px; }
.calc__micro { font-size: 12.5px; color: var(--fg-subtle); text-align: center; margin: 14px 0 0; }

.field { display: block; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-muted); margin-bottom: 8px; }
.field__optional { font-weight: 400; color: var(--fg-subtle); }
.field__control { position: relative; display: block; }
.field input, .field textarea {
	width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 15px 16px;
	font-family: inherit; font-size: 16px; background: var(--relion-gray-50); color: var(--fg);
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.field textarea { resize: vertical; min-height: 90px; }
.field__control--unit input { padding-right: 94px; }
.field input::placeholder, .field textarea::placeholder { color: var(--relion-gray-400); }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--relion-orange); box-shadow: 0 0 0 3px rgba(240,80,43,0.14); }
.field__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13.5px; font-weight: 600; color: var(--fg-subtle); pointer-events: none; }

@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.calc__result { background: var(--relion-slate-900); color: #fff; border-radius: 14px; padding: 24px 26px; margin-bottom: 20px; }
.calc__result-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--relion-orange); }
.calc__result-price { font-size: 50px; font-weight: var(--fw-head); letter-spacing: -0.04em; line-height: 1; margin-top: 10px; color: #fff; }
.calc__result-price small { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.6); margin-left: 6px; letter-spacing: 0; }
.calc__result-note { margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,0.72); line-height: 1.55; }
.calc__actions { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.acard {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
	padding: 34px 32px 30px; text-decoration: none; color: inherit; min-height: 360px;
	transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.acard:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.acard__ic { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--relion-slate-900); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; }
.acard__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--relion-orange-aa); margin: 0 0 10px; }
.acard__title { font-size: 23px; font-weight: var(--fw-head); letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.15; }
.acard__body { font-size: 15.5px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 24px; flex: 1; }
.acard__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--fg); }
.acard__more svg { color: var(--relion-orange); transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.acard:hover .acard__more svg { transform: translateX(4px); }

@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } }
.bleedsec { overflow: hidden; }
.bleedsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.bleedsec__text { max-width: 540px; }
.bleedsec__media {
	width: calc(100% + 32px + max(0px, (100vw - var(--container-max)) / 2));
	min-height: clamp(420px, 40vw, 560px);
	background-size: cover; background-position: center; background-color: var(--relion-gray-50);
	border-radius: var(--r-media) 0 0 var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
.bleedsec--overlap:not(.section--blue) { background: var(--relion-gray-50); }
.bleedsec--overlap .bleedsec__grid { gap: 0; align-items: center; }
.bleedsec--overlap .bleedsec__text {
	position: relative; z-index: 2; max-width: none; background: #fff;
	padding: clamp(30px, 3.4vw, 52px); border-radius: var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
.bleedsec--overlap:not(.bleedsec--left) .bleedsec__text { margin-right: clamp(-104px, -6vw, -52px); }

@media (max-width: 900px) {
	.bleedsec__grid { grid-template-columns: 1fr; }
	.bleedsec__media { width: 100%; min-height: 0; aspect-ratio: 16 / 11; border-radius: var(--r-media); }
	.bleedsec--overlap .bleedsec__text { margin: -44px 16px 0 !important; z-index: 2; }
}
.closing { position: relative; overflow: hidden; }
.closing__mark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(880px, 80%); background: var(--relion-orange); opacity: 0.16; }
.closing__inner { text-align: center; max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.closing__title { font-size: clamp(34px, 5vw, 60px); font-weight: var(--fw-head); letter-spacing: -0.03em; line-height: 1.05; margin: 0; color: #fff; }
.closing__sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.72); margin: 24px auto 0; max-width: 52ch; }
.closing__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.faq { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.faq__head { position: sticky; top: 110px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; transition: border-color 200ms ease, box-shadow 200ms ease; }
.faq__item[open] { border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(28,32,36,0.05); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; padding: 22px 26px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__pm { position: relative; width: 20px; height: 20px; flex: none; color: var(--relion-orange); }
.faq__pm::before, .faq__pm::after { content: ""; position: absolute; background: currentColor; transition: transform 240ms ease; }
.faq__pm::before { top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); }
.faq__pm::after { left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.faq__item[open] .faq__pm::after { transform: translateX(-50%) rotate(90deg); }
.faq__ans { padding: 0 26px 24px; color: var(--fg-muted); line-height: 1.65; font-size: 15.5px; }
.faq__ans p { margin: 0; }

@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__head { position: static; } }
.bleedsec { overflow: hidden; }
.bleedsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.bleedsec__text { max-width: 540px; }
.bleedsec__media {
	width: calc(100% + 32px + max(0px, (100vw - var(--container-max)) / 2));
	min-height: clamp(420px, 40vw, 560px);
	background-size: cover; background-position: center; background-color: var(--relion-gray-50);
	border-radius: var(--r-media) 0 0 var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}

/* Overlap: teksti kelluu kuvan päälle */
.bleedsec--overlap:not(.section--blue) { background: var(--relion-gray-50); }
.bleedsec--overlap .bleedsec__grid { gap: 0; align-items: center; }
.bleedsec--overlap .bleedsec__text {
	position: relative; z-index: 2; max-width: none; background: #fff;
	padding: clamp(30px, 3.4vw, 52px); border-radius: var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
.bleedsec--overlap:not(.bleedsec--left) .bleedsec__text { margin-right: clamp(-104px, -6vw, -52px); }

/* Ominaisuuslista */
.feat-list { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; }
.feat-list li { display: flex; gap: 14px; align-items: flex-start; }
.feat-ic { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--relion-orange-50); color: var(--relion-orange-700); display: flex; align-items: center; justify-content: center; }
.feat-list h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 700; }
.feat-list p { margin: 0; font-size: 15.5px; color: var(--fg-muted); line-height: 1.55; }

@media (max-width: 900px) {
	.bleedsec__grid { grid-template-columns: 1fr; }
	.bleedsec__media { width: 100%; min-height: 0; aspect-ratio: 16 / 11; border-radius: var(--r-media); }
	.bleedsec--overlap .bleedsec__text { margin: -44px 16px 0 !important; z-index: 2; }
}
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guide {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--border); border-radius: 18px;
	transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease;
}
.guide:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.guide__cover { position: relative; overflow: hidden; aspect-ratio: 16 / 10; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.guide__cover--orange { background: var(--relion-orange); color: #fff; }
.guide__cover--sky    { background: var(--relion-blue);    color: #1A1A1A; }
.guide__cover--peach  { background: var(--relion-lempeys); color: #1A1A1A; }
.guide__cover .brandmark { right: -40px; bottom: -52px; width: 220px; background: currentColor; opacity: 0.12; }
.guide__kicker { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; }
.guide__cover-title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--fw-head); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.16; letter-spacing: -0.015em; margin: 0; }
.guide__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.guide__title { font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-head); letter-spacing: -0.01em; margin: 0 0 10px; }
.guide__desc { font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 22px; flex: 1; }
.guide__dl { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-weight: 600; font-size: 14.5px; color: var(--relion-orange); text-decoration: none; }
.guide__dl svg { transition: transform .2s ease; }
.guide:hover .guide__dl svg { transform: translateY(2px); }

@media (max-width: 1080px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .guide-grid { grid-template-columns: 1fr; } }
.guide-cta { background: var(--relion-gray-50); border: 1px solid var(--border); border-radius: 20px; padding: clamp(26px, 3vw, 38px); margin: 40px 0; }
.guide-cta__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 48px); align-items: center; }
.guide-cta__title { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.015em; font-size: clamp(20px, 2vw, 25px); line-height: 1.2; margin: 10px 0 8px; }
.guide-cta__sub { font-size: 15px; color: var(--fg-muted); line-height: 1.6; margin: 0; }
.guide-cta__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.guide-cta__form .field { flex: 1 1 180px; margin-bottom: 0; }
.guide-cta__form .btn { flex: none; }
.guide-cta__done { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.guide-cta__done p { font-size: 15px; color: var(--fg); margin: 0; flex: 1 1 200px; }

@media (max-width: 900px) {
	.guide-cta__inner { grid-template-columns: 1fr; }
	.guide-cta__form { flex-direction: column; align-items: stretch; }
	.guide-cta__form .btn { width: 100%; }
}
.hero { padding: clamp(48px, 7vw, 92px) 0 0; text-align: center; }
.hero__pill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 16px 8px 10px; border-radius: var(--radius-pill);
	background: #fff; border: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(28,32,36,0.05); white-space: nowrap;
	font-size: 13.5px; font-weight: 600; color: var(--fg-muted); margin-bottom: 30px; max-width: 100%;
}
.hero__pill b { color: var(--fg); font-weight: 700; }
.hero__pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #2F8F5F; flex: none; }
.hero__title { font-size: clamp(38px, 5.6vw, 76px); font-weight: var(--fw-head); line-height: 1.04; letter-spacing: -0.035em; margin: 0; }
.hero__title .accent, .hero__title .dotmark { color: var(--relion-orange); }
.hero__sub { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--fg-muted); max-width: 60ch; margin: 28px auto 0; text-wrap: pretty; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.hero__note { margin-top: 20px; font-size: 13.5px; color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 8px; }
.hero__note svg { color: #2F8F5F; }
.hero__badge {
	position: absolute; left: 32px; bottom: -28px;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04);
	padding: 16px 22px; display: flex; align-items: center; gap: 18px;
}
.hero__badge--systems {
	width: min(600px, calc(100% + 22px));
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 18px 20px 20px;
}
.hero__badge-kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); }

/* Split-hero */
.hero--split { text-align: left; padding: clamp(40px, 5vw, 76px) 0 clamp(8px, 2vw, 24px); overflow: hidden; }
.hero--split .hero__grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 5.5vw, 84px); align-items: center; }
.hero--split .hero__col { max-width: 620px; }
.hero--split .hero__pill { margin-bottom: 24px; }
.hero--split .hero__title { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.05; }
.hero--split .hero__sub { margin: 22px 0 0; max-width: 52ch; }
.hero--split .hero__actions { justify-content: flex-start; margin-top: 32px; }
.hero--split .hero__note { margin-top: 22px; }

.hero__sidewrap { position: relative; }
.hero__sidephoto {
	width: calc(100% + 32px + max(0px, (100vw - var(--container-max)) / 2));
	height: clamp(420px, 42vw, 560px);
	border-radius: var(--r-media) 0 0 var(--r-media);
	background-size: cover; background-position: center; background-color: var(--relion-gray-50);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
.hero__sidewrap .hero__badge { left: -22px; bottom: 26px; }

.herostats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 38px; border-top: 1px solid var(--border); padding-top: 26px; }
.herostat { padding-right: 32px; margin-right: 32px; border-right: 1px solid var(--border); }
.herostat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.herostat b { display: block; font-family: var(--font-display); font-weight: var(--fw-head); font-size: 28px; letter-spacing: -0.03em; line-height: 1; }
.herostat b .u { color: var(--relion-orange-aa); }
.herostat span { font-size: 13px; color: var(--fg-subtle); }

@media (max-width: 900px) {
	.hero--split .hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.hero--split { text-align: center; }
	.hero--split .hero__col { max-width: 640px; margin: 0 auto; }
	.hero--split .hero__actions, .herostats { justify-content: center; }
	.hero--split .hero__sub { margin-left: auto; margin-right: auto; }
	.hero__sidephoto { width: 100%; height: auto; aspect-ratio: 16 / 11; border-radius: var(--r-media); }
	.hero__sidewrap .hero__badge {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		width: 100%;
		margin-top: 18px;
	}
}

@media (max-width: 480px) {
	.hero__badge--systems { padding: 14px 12px 16px; }
	.partner-programs--hero { gap: 8px; }
	.partner-programs--hero .partner-program { min-height: 92px; padding: 8px 5px; }
	.partner-programs--hero .partner-program__logo-wrap { height: 48px; }
	.partner-programs--hero .partner-program__logo { max-height: 48px; }
	.partner-programs--hero .partner-program--procountor .partner-program__logo { max-height: 22px; }
	.partner-programs--hero .partner-program__label { font-size: 10.5px; }
	.herostats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; justify-content: initial; }
	.herostat { border-right: 0; margin-right: 0; padding-right: 0; }
}
.logowall { text-align: center; }
.logowall__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-subtle); margin: 0 0 36px; }
/* auto-fit: 1–6+ logoa täyttävät rivin tasaisesti — kiinteä 6-sarakkeinen jätti tyhjät raiteet harmaana möykkynä kun rivejä oli vähän. */
.logowall__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
	background: var(--border); border: 1px solid var(--border);
	border-radius: var(--radius-lg); overflow: hidden;
}
.logocell { background: var(--bg); min-height: 96px; display: flex; align-items: center; justify-content: center; padding: 18px; }
.logoipsum { display: inline-flex; align-items: center; gap: 11px; filter: grayscale(1); }
.logoipsum svg { width: 27px; height: 27px; flex: none; color: var(--relion-gray-200); }
/* Uploadatut asiakaslogot: kiinteä korkeus + leveyskatto. HUOM: max-height+width:auto
   romahtaa SVG:n 0×0:aan inline-flex-kontekstissa — height pitää olla eksplisiittinen. */
.logoipsum img { height: 34px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.72; }
.logoipsum__txt { font-size: 17px; letter-spacing: -0.015em; font-weight: 600; color: var(--relion-gray-400); }
.logoipsum__txt b { font-weight: 800; color: var(--relion-gray-500); }

@media (max-width: 1080px) { .logowall__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (max-width: 560px) { .logowall__grid { grid-template-columns: repeat(2, 1fr); } }
/* Office single — vain office-spesifit. Contact-hero/people/person/team-block
   tulevat kanonisesti sections.css:stä (jaettu ota-yhteyttä-sivun kanssa). */

.hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 26px; transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08); border-color: var(--border-strong); }
.tile__ic { width: 48px; height: 48px; border-radius: 12px; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; margin-bottom: 18px; }
.tile h3 { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 18px; letter-spacing: -0.01em; margin: 0 0 8px; }
.tile p { font-size: 14px; color: var(--fg-muted); line-height: 1.55; margin: 0; }

/* NAP + map */
.local-map { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(28px, 4vw, 52px); align-items: stretch; }
.local-nap { display: grid; gap: 24px; align-content: start; }
.local-nap__row h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-subtle); margin: 0 0 8px; }
.local-nap__row a { display: block; font-size: 16px; color: var(--fg); text-decoration: none; line-height: 1.7; }
.local-nap__row a:hover { color: var(--relion-orange); }
.local-nap__row p { font-size: 16px; color: var(--fg); margin: 0; line-height: 1.6; }
.local-nap__cta { margin-top: 6px; }
.map-frame { position: relative; min-height: 320px; border-radius: var(--r-media); overflow: hidden; border: 1px solid var(--border); background: var(--relion-blue); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.2) contrast(1.02); }

/* Closing */
.closing { position: relative; overflow: hidden; }
.closing__mark { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(880px, 80%); background: var(--relion-orange); opacity: 0.16; }
.closing__inner { text-align: center; max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.closing__title { font-size: clamp(34px, 5vw, 60px); font-weight: var(--fw-head); letter-spacing: -0.03em; line-height: 1.05; margin: 0; color: #fff; }
.closing__sub { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: rgba(255,255,255,0.72); margin: 24px auto 0; max-width: 52ch; }
.closing__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } .local-map { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
.local__head { max-width: 720px; margin-bottom: 44px; }
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.officecard {
	position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border);
	border-radius: 18px; display: flex; flex-direction: column; text-decoration: none; color: inherit;
	transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms ease, border-color 260ms ease;
}
.officecard:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.officecard__photo { width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--relion-gray-50); }
.officecard__body { padding: 24px 26px 26px; position: relative; }
.officecard b { font-family: var(--font-display); font-size: 22px; font-weight: var(--fw-head); letter-spacing: -0.01em; display: block; }
.officecard span { font-size: 14px; color: var(--fg-subtle); margin-top: 6px; display: block; }
.officecard__arrow { position: absolute; top: 26px; right: 26px; color: var(--relion-gray-400); opacity: 0; transform: translateX(-6px); transition: opacity 220ms ease, transform 220ms ease, color 220ms ease; }
.officecard:hover .officecard__arrow { opacity: 1; transform: translateX(0); color: var(--relion-orange); }

@media (max-width: 900px) { .offices { grid-template-columns: 1fr; } }
.learn-hero { text-align: center; padding: clamp(48px, 6vw, 92px) 0 clamp(8px, 2vw, 20px); }
.learn-hero .eb { justify-content: center; white-space: nowrap; }
.learn-hero__title { max-width: 17ch; margin: 0 auto; }
.learn-hero__sub { max-width: 58ch; margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--fg-muted); line-height: 1.62; }
.pcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pcard {
	background: #fff; border: 1px solid var(--border); border-radius: 18px;
	padding: 30px 28px; display: flex; flex-direction: column;
	transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, border-color 240ms ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(28,32,36,0.08), 0 2px 4px rgba(28,32,36,0.04); border-color: var(--border-strong); }
.pcard__qmark { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: .5; height: 24px; display: block; color: var(--relion-orange); }
.pcard__q { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 18px; letter-spacing: -0.015em; line-height: 1.32; color: var(--fg); margin: 18px 0 0; }
.pcard__solution { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.pcard__check { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; margin-top: 1px; }
.pcard__a { font-size: 14.5px; color: var(--fg-muted); line-height: 1.6; margin: 0; }

@media (max-width: 1080px) { .pcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pcards { grid-template-columns: 1fr; } }
/* ============= Footer ============= */
.footer { position: relative; overflow: hidden; background: var(--relion-slate-900); color: #C8CCD0; padding: 84px 0 36px; }
.footer .wrap { position: relative; z-index: 1; }
.footer__mark { right: -48px; bottom: -64px; width: 440px; background: var(--relion-orange); opacity: 0.14; }

.footer__top { display: grid; grid-template-columns: 1.7fr 1.05fr 0.95fr 0.8fr 1fr; gap: 40px; }
.footer__brand img.flogo { height: 32px; width: auto; filter: brightness(0) invert(1); margin-bottom: 20px; }
/* Oikea vaalea logo on jo tummalle taustalle suunniteltu → ei valkaisua. */
.footer__brand img.flogo--asis { filter: none; }
.footer__about { font-size: 14.5px; line-height: 1.65; margin: 0 0 24px; max-width: 320px; }
.footer__badge-chip { display: inline-flex; max-width: 190px; background: #fff; border-radius: var(--radius-lg); padding: 12px 14px; overflow: visible; }
.footer__badge { display: block; width: 160px; max-width: 100%; height: auto; object-fit: contain; }

/* Sarakeotsikot (aiemmin h5, nyt h2.footer__h) */
.footer__h { color: #fff; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 16px; line-height: 1.3; }
.footer__col { margin: 0; }

.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 6px 0; font-size: 14.5px; line-height: 1.5; }
.footer a { color: #C8CCD0; text-decoration: none; transition: color 150ms ease; }
.footer a:hover { color: #fff; }
.footer__offices li { padding: 8px 0; }
.footer__offices b { display: block; color: #fff; font-weight: 700; font-size: 14px; }
.footer__offices span { font-size: 13px; color: #9AA0A6; line-height: 1.4; }
.footer__contact li { padding: 9px 0; display: flex; flex-direction: column; gap: 2px; }
.footer__contact a { display: inline-flex; align-items: center; min-height: 24px; }
.footer__clabel { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #9AA0A6; font-weight: 700; margin-bottom: 3px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.footer__social a { font-size: 13.5px; }

.footer__invoice {
	margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--relion-slate-700);
}
.footer__invoice-list { display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; }
.footer__invoice-list div { display: flex; flex-direction: column; gap: 3px; }
.footer__invoice-list dt { color: #9AA0A6; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer__invoice-list dd { color: #fff; font-size: 14px; margin: 0; }

.footer__slogan {
	margin-top: 60px; padding-top: 36px; border-top: 1px solid var(--relion-slate-700);
	font-family: var(--font-display); font-weight: var(--fw-head);
	font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; color: #fff;
}
.footer__legal {
	margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--relion-slate-700);
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font-size: 13px; color: #9AA0A6;
}
.footer__legal a { color: #C8CCD0; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1080px) {
	.footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer__top { grid-template-columns: 1fr; gap: 32px; }
	.footer { padding: 56px 0 32px; }
	.footer__invoice-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
}
/* ============= Topbar ============= */
.topbar {
	background: var(--relion-slate-900);
	color: rgba(255,255,255,0.72);
	font-size: 13px; position: relative; z-index: 90;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 42px; }
.topbar__msg {
	margin: 0; line-height: 1; display: inline-flex; align-items: center; gap: 10px;
	font-weight: 600; color: rgba(255,255,255,0.9); min-width: 0;
}
.topbar__msg .pulse {
	width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
	background: var(--relion-orange); box-shadow: 0 0 0 0 rgba(240,80,43,0.55);
	animation: topbarPulse 2.4s ease-out infinite;
}
@keyframes topbarPulse {
	0%   { box-shadow: 0 0 0 0 rgba(240,80,43,0.5); }
	70%  { box-shadow: 0 0 0 7px rgba(240,80,43,0); }
	100% { box-shadow: 0 0 0 0 rgba(240,80,43,0); }
}
@media (prefers-reduced-motion: reduce) { .topbar__msg .pulse { animation: none; } }
.topbar__msg span.txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__msg a {
	color: #fff; text-decoration: none; font-weight: 700;
	border-bottom: 1px solid rgba(255,255,255,0.35); white-space: nowrap;
	transition: border-color 150ms ease, color 150ms ease;
}
.topbar__msg a:hover { color: var(--relion-orange); border-color: var(--relion-orange); }
.topbar__links { display: flex; align-items: center; gap: 22px; white-space: nowrap; }
.topbar__item {
	display: inline-flex; align-items: center; gap: 7px;
	color: rgba(255,255,255,0.72); text-decoration: none; font-weight: 600;
	transition: color 150ms ease;
}
.topbar__item svg { opacity: 0.75; }
a.topbar__item:hover { color: #fff; }
a.topbar__item:hover svg { color: var(--relion-orange); opacity: 1; }

/* ============= Top nav ============= */
.nav {
	position: sticky; top: 0; z-index: 100;
	background: rgba(250,250,248,0.72);
	backdrop-filter: saturate(150%) blur(8px);
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid transparent;
	will-change: transform;
	transition: transform 420ms cubic-bezier(.16,1,.3,1), background 280ms ease, border-color 280ms ease, box-shadow 280ms ease, backdrop-filter 280ms ease;
}
/* Skrollatessa: tiiviimpi frosted-blur + reuna + varjo */
.nav.is-scrolled {
	background: rgba(250,250,248,0.88);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--border);
	box-shadow: 0 1px 0 rgba(28,32,36,0.02), 0 8px 24px rgba(28,32,36,0.05);
}
/* Headroom: piilotetaan alas skrollatessa (JS), liu'utetaan takaisin ylös skrollatessa */
.nav.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
	.nav { transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease; }
	.nav.is-hidden { transform: none; }
}
.nav__inner { position: relative; display: flex; align-items: center; gap: 24px; height: 80px; }
.nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__brand img { height: 32px; width: auto; }
.nav__nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav__menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 4px; }

/* Linkit JA button-triggerit näyttävät samalta */
.nav__menu > li > a,
.nav__menu > li > .nav__trigger {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 11px 13px; border-radius: var(--radius-md);
	color: var(--fg); text-decoration: none; white-space: nowrap;
	font-weight: 500; font-size: 14.5px; cursor: pointer;
	transition: color 150ms ease;
}
.nav__trigger { background: none; border: 0; font-family: inherit; }
.nav__menu > li > a:hover,
.nav__has:hover > .nav__trigger,
.nav__has.is-open > .nav__trigger { color: var(--relion-orange); }
.nav__trigger svg { transition: transform 220ms ease; opacity: .65; }
.nav__has.is-open > .nav__trigger svg { transform: rotate(180deg); }
.nav__has { position: relative; }

/* Lista-dropdown */
.nav__sub {
	position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); padding: 8px; list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms; z-index: 120;
}
.nav__sub::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav__has:hover > .nav__sub,
.nav__has.is-open > .nav__sub {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.nav__sub a { position: relative; isolation: isolate; display: block; padding: 11px 14px; border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; font-size: 14.5px; font-weight: 600; }
/* Sama hover-gradientti kuin megamenussa: harmaa vasen → feidaantuu taustaan. */
.nav__sub a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, var(--relion-gray-50) 0%, transparent 78%); opacity: 0; transition: opacity 200ms ease; }
.nav__sub a:hover::before { opacity: 1; }

/* ============= Megamenu ============= */
.nav__has--mega { position: static; }
.megamenu {
	position: absolute; top: calc(100% + 12px); left: 0; right: 0;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); padding: 22px; z-index: 120;
	display: grid; grid-template-columns: 1fr 312px; gap: 22px;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
}
.megamenu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav__has--mega:hover > .megamenu,
.nav__has--mega.is-open > .megamenu {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
.mega__item { position: relative; isolation: isolate; display: flex; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); text-decoration: none; color: var(--fg); }
/* Hover: harmaa vasemmalla → feidaantuu taustaan oikealle (pehmeä opacity-fade). */
.mega__item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, var(--relion-gray-50) 0%, transparent 78%); opacity: 0; transition: opacity 220ms ease; }
.mega__item:hover::before { opacity: 1; }
.mega__ic {
	width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
	background: var(--relion-orange-50); color: var(--relion-orange);
	display: grid; place-items: center; transition: background 150ms ease, color 150ms ease;
}
.mega__item:hover .mega__ic { background: var(--relion-orange); color: #fff; }
.mega__txt { min-width: 0; }
.mega__t { display: block; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.mega__d { display: block; font-size: 13px; color: var(--fg-subtle); margin-top: 3px; line-height: 1.45; }
.mega__feat { background: var(--relion-slate-900); color: #fff; border-radius: var(--radius-md); padding: 26px; display: flex; flex-direction: column; }
.mega__feat-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--relion-orange); }
/* Ei <h4> — koristeellinen "otsikko" on tavallinen teksti (saavutettavuus) */
.mega__feat-h { font-size: 21px; font-weight: var(--fw-head); letter-spacing: -0.02em; line-height: 1.15; margin: 12px 0 0; color: #fff; }
.mega__feat p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.7); margin: 10px 0 0; }
.mega__feat .btn { margin-top: 20px; }
.mega__feat-call { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 700; font-size: 14px; }
.mega__feat-call svg { color: var(--relion-orange); }
.mega__feat-call:hover { color: #fff; }

/* ============= CTA + burger ============= */
.nav__cta { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav__call { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; color: var(--fg); text-decoration: none; white-space: nowrap; }
.nav__call svg { color: var(--relion-orange); }
.nav__call:hover { color: var(--relion-orange); }
.nav__burger { display: none; }
.nav__mobile-cta { display: none; } /* näkyy vain mobiilivalikossa */

/* ============= Responsive ============= */
@media (max-width: 1080px) {
	.nav__nav { display: none; }
	.nav__nav.is-open {
		display: block; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-lg);
		padding: 10px 0; max-height: calc(100vh - 122px); overflow-y: auto;
	}
	.nav__nav.is-open .nav__menu { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 16px; }
	.nav__nav.is-open .nav__menu > li > a,
	.nav__nav.is-open .nav__menu > li > .nav__trigger { width: 100%; justify-content: space-between; padding: 14px 12px; font-size: 16px; }
	.nav__burger { display: inline-flex; margin-left: auto; }
	.topbar__links .topbar__item--loc { display: none; }

	/* Mobiilissa paneelit avautuvat staattisesti is-open-tilassa */
	.nav__nav.is-open .megamenu,
	.nav__nav.is-open .nav__sub {
		position: static; display: none; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-radius: 0; padding: 4px 0 8px; min-width: 0; background: transparent;
	}
	.nav__nav.is-open .nav__has.is-open > .megamenu,
	.nav__nav.is-open .nav__has.is-open > .nav__sub { display: block; }
	.nav__nav.is-open .megamenu { grid-template-columns: 1fr; gap: 8px; padding: 4px 0 8px; }
	.nav__nav.is-open .mega__grid { grid-template-columns: 1fr; gap: 2px; } /* kortit allekkain mobiilissa */
	.nav__nav.is-open .mega__item { padding: 12px; }
	.nav__nav.is-open .mega__feat { display: none; }

	/* "Varaa tapaaminen" + puhelin siirretään yläpalkista valikon pohjalle. */
	.nav__cta { display: none; }
	.nav__nav.is-open .nav__mobile-cta {
		display: flex; flex-direction: column; gap: 12px;
		margin: 8px 16px 4px; padding: 16px 0 4px; border-top: 1px solid var(--border);
	}
	.nav__nav.is-open .nav__mobile-cta .nav__call { justify-content: center; padding: 10px; font-size: 16px; }
	.nav__nav.is-open .nav__mobile-cta .nav__call span { display: inline; }
	.nav__nav.is-open .nav__mobile-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 760px) {
	.topbar__links { display: none; }
	.topbar__inner { justify-content: center; }
}
@media (max-width: 560px) {
	.nav__call span { display: none; }
	.nav__nav.is-open .mega__d { display: none; }
	.nav__nav.is-open .mega__item {
		min-height: 52px;
		gap: 10px;
		align-items: center;
		padding: 8px 12px;
	}
	.nav__nav.is-open .mega__ic { width: 36px; height: 36px; border-radius: 9px; }
	.nav__nav.is-open .mega__t { font-size: 14px; line-height: 1.3; }
	.nav__nav.is-open .nav__mobile-cta { gap: 8px; padding-top: 10px; }
}
.svc-list { border-top: 1px solid var(--border-strong); }
.svc {
	display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 22px;
	padding: 26px 8px; border-bottom: 1px solid var(--border);
	text-decoration: none; color: inherit;
	transition: padding 220ms cubic-bezier(.2,.7,.2,1), background 200ms ease;
}
.svc:hover { padding-left: 20px; padding-right: 20px; background: #fff; }
.svc__ic { color: var(--relion-orange); display: flex; }
.svc__name { font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -0.015em; }
.svc__desc { font-size: 15px; color: var(--fg-muted); margin-top: 4px; line-height: 1.5; max-width: 52ch; }
.svc__arrow { color: var(--relion-gray-400); transition: color 200ms ease, transform 220ms cubic-bezier(.2,.7,.2,1); }
.svc:hover .svc__arrow { color: var(--relion-orange); transform: translateX(4px); }

@media (max-width: 560px) {
	.svc { grid-template-columns: 40px 1fr; }
	.svc__arrow { display: none; }
}
.squeeze { min-height: 100vh; display: flex; flex-direction: column; background: var(--relion-gray-50); position: relative; overflow: hidden; }
.squeeze__mark { left: -120px; bottom: -140px; width: 560px; background: var(--relion-orange); opacity: 0.06; }
.squeeze-nav { position: relative; z-index: 2; }
.squeeze-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.squeeze-nav__brand img { height: 30px; width: auto; display: block; }
.squeeze-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg-muted); text-decoration: none; transition: color .15s ease; }
.squeeze-back:hover { color: var(--relion-orange); }
.squeeze-back svg { transform: rotate(180deg); }

.squeeze-hero { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: clamp(40px, 6vw, 88px); align-items: center; padding: clamp(36px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.squeeze__pitch { max-width: 560px; }
.squeeze__pitch h1 { margin: 0 0 20px; }
.squeeze__lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--fg-muted); line-height: 1.62; margin: 0 0 30px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--fg); }
.ticks li > svg { color: var(--relion-orange); flex: none; margin-top: 2px; }
.squeeze__trust { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border); }
.squeeze__rating { display: inline-flex; align-items: center; gap: 10px; }
.squeeze__stars { display: inline-flex; color: var(--relion-orange); gap: 1px; }
.squeeze__rating b { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 17px; }
.squeeze__rating span { font-size: 13.5px; color: var(--fg-subtle); }
.partner-programs--squeeze { flex: 1 1 360px; }
.partner-programs--squeeze .partner-program { background: #fff; }

/* Offer card + opaskansi */
.squeeze__offer { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05); padding: clamp(28px, 3vw, 40px); padding-top: 0; }
.opasbook { position: relative; width: 150px; margin: -40px auto 8px; transform: rotate(-3deg); filter: drop-shadow(0 18px 30px rgba(20,20,30,0.22)); }
.opasbook__cover { position: relative; aspect-ratio: 3 / 4; border-radius: 4px 8px 8px 4px; background: var(--relion-orange); color: #fff; overflow: hidden; padding: 16px 16px 16px 20px; display: flex; flex-direction: column; justify-content: space-between; }
.opasbook__cover--sky   { background: var(--relion-blue);    color: #1A1A1A; }
.opasbook__cover--peach { background: var(--relion-lempeys); color: #1A1A1A; }
.opasbook__cover::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: rgba(0,0,0,0.16); }
.opasbook .brandmark { right: -28px; bottom: -34px; width: 130px; background: currentColor; opacity: 0.14; }
.opasbook__kicker { position: relative; z-index: 1; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.opasbook__title { position: relative; z-index: 1; font-family: var(--font-display); font-weight: var(--fw-head); font-size: 15px; line-height: 1.18; letter-spacing: -0.01em; margin: 0; }
/* Logo CSS-maskina → täyttyy kannen tekstivärillä (valkoinen oranssilla, tumma sky/peachilla). */
.opasbook__brand { position: relative; z-index: 1; display: block; width: 64px; height: 20px; background-color: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }

.squeeze__offer h2 { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.015em; font-size: 24px; line-height: 1.15; text-align: center; margin: 0 0 8px; }
.squeeze__offer-sub { text-align: center; font-size: 14.5px; color: var(--fg-muted); line-height: 1.55; margin: 0 0 26px; }

/* Lomakekentät (itsenäinen) */
.field { display: block; margin-bottom: 18px; }
.field__label { display: block; font-size: 13px; font-weight: 600; color: var(--fg-muted); margin-bottom: 8px; }
.field__control { position: relative; display: block; }
.field input { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 15px 16px; font-family: inherit; font-size: 16px; background: var(--relion-gray-50); color: var(--fg); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.field input::placeholder { color: var(--relion-gray-400); }
.field input:focus { outline: none; background: #fff; border-color: var(--relion-orange); box-shadow: 0 0 0 3px rgba(240,80,43,0.14); }
.squeeze-form .field:last-of-type { margin-bottom: 22px; }
.squeeze-form .btn { width: 100%; }
.squeeze__micro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--fg-subtle); text-align: center; }
.squeeze__micro svg { flex: none; color: var(--relion-orange); }

/* Success */
.squeeze__done { text-align: center; padding: 16px 0 8px; }
.squeeze__done-ic { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; }
.squeeze__done h2 { margin-bottom: 10px; }
.squeeze__done p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; margin: 0 0 24px; }

.squeeze-foot { position: relative; z-index: 1; border-top: 1px solid var(--border); }
.squeeze-foot__inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; padding: 22px 0; font-size: 13px; color: var(--fg-subtle); }
.squeeze-foot a { color: var(--fg-subtle); text-decoration: none; }
.squeeze-foot a:hover { color: var(--relion-orange); }

@media (max-width: 1080px) {
	.squeeze-hero { grid-template-columns: 1fr; gap: 44px; }
	.squeeze__pitch { max-width: none; }
	.squeeze__offer { max-width: 460px; }
}

/* Turvavälit kapeilla näytöillä — sama vasen/oikea tila kuin muualla sivustolla (.wrap). */
@media (max-width: 480px) {
	.squeeze-nav__inner, .squeeze-hero, .squeeze-foot__inner { padding-left: 20px; padding-right: 20px; }
	.squeeze__offer { padding-left: 20px; padding-right: 20px; }
	.partner-programs--squeeze { gap: 8px; }
	.partner-programs--squeeze .partner-program { min-height: 92px; padding: 8px 5px; }
	.partner-programs--squeeze .partner-program__logo-wrap { height: 48px; }
	.partner-programs--squeeze .partner-program__logo { max-height: 48px; }
	.partner-programs--squeeze .partner-program--procountor .partner-program__logo { max-height: 22px; }
	.partner-programs--squeeze .partner-program__label { font-size: 10.5px; }
}
.bleedsec { overflow: hidden; }
.bleedsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.bleedsec__media {
	width: calc(100% + 32px + max(0px, (100vw - var(--container-max)) / 2));
	min-height: clamp(420px, 40vw, 560px);
	background-size: cover; background-position: center; background-color: var(--relion-gray-50);
	border-radius: var(--r-media) 0 0 var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
/* Vasempaan vuotava kuva, teksti oikealla */
.bleedsec--left .bleedsec__grid { align-items: stretch; }
.bleedsec--left .bleedsec__media {
	margin-left: calc(-32px - max(0px, (100vw - var(--container-max)) / 2));
	border-radius: 0 var(--r-media) var(--r-media) 0;
}
.bleedsec--overlap .bleedsec__grid { gap: 0; align-items: center; }
.bleedsec--overlap .bleedsec__text {
	position: relative; z-index: 2; background: #fff;
	padding: clamp(30px, 3.4vw, 52px); border-radius: var(--r-media);
	box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
}
.bleedsec--overlap.bleedsec--left .bleedsec__text { margin-left: clamp(-104px, -6vw, -52px); }

.switch-steps { display: grid; gap: 22px; margin: 34px 0 0; }
.vstep { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.vstep__num { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 30px; letter-spacing: -0.03em; line-height: 1; color: var(--relion-orange); }
.vstep h3 { font-size: 19px; font-weight: var(--fw-head); letter-spacing: -0.015em; margin: 0 0 5px; }
.vstep p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--relion-gray-600); }
.switch__col .btn { margin-top: 34px; }

@media (max-width: 900px) {
	.bleedsec__grid { grid-template-columns: 1fr; }
	.bleedsec__media { width: 100%; min-height: 0; aspect-ratio: 16 / 11; border-radius: var(--r-media); }
	.bleedsec--left .bleedsec__media { margin-left: 0; border-radius: var(--r-media); order: -1; }
	.bleedsec--overlap .bleedsec__text { margin: -44px 16px 0 !important; z-index: 2; }
}
.story { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.story__media {
	position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-media);
	background-size: cover; background-position: center top; background-color: var(--relion-gray-50); overflow: hidden;
}
.story__play {
	position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,0.92); color: var(--relion-orange); cursor: pointer;
	display: grid; place-items: center; box-shadow: 0 16px 40px rgba(28,32,36,0.10), 0 4px 10px rgba(28,32,36,0.05);
	transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 200ms ease;
}
.story__play:hover { transform: scale(1.07); background: #fff; }
.story__play svg { width: 30px; height: 30px; margin-left: 5px; }
.story__videolabel {
	position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px;
	background: rgba(28,32,36,0.66); color: #fff; font-size: 12.5px; font-weight: 700;
	padding: 8px 13px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story__videolabel .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--relion-orange); }
.story__quote { font-size: clamp(22px, 2.5vw, 32px); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; margin: 0 0 28px; }
.story__quote .mark { color: var(--relion-orange); }
.story__cite { margin-bottom: 30px; }
.story__cite b { display: block; font-size: 16px; font-weight: 800; }
.story__cite span { font-size: 14px; color: var(--fg-muted); }

@media (max-width: 900px) { .story { grid-template-columns: 1fr; } .story__media { aspect-ratio: 16 / 11; } }

.story-modal {
	position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
	background: rgba(11,13,15,0.88); padding: clamp(16px, 4vw, 48px);
}
.story-modal__frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.story-modal__frame video, .story-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.story-modal__close {
	position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
.story-modal__close:hover { background: rgba(255,255,255,0.22); }
body.story-modal-open { overflow: hidden; }
.subscribe { background: var(--relion-kesataivas); }
.subscribe__inner { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 56px); align-items: center; }
.subscribe__title { font-family: var(--font-display); font-weight: var(--fw-head); letter-spacing: -0.02em; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; margin: 0 0 12px; }
.subscribe__sub { font-size: 16.5px; color: var(--fg-muted); line-height: 1.6; margin: 0; max-width: 48ch; }
.subscribe__form { display: flex; gap: 12px; min-width: min(420px, 80vw); }
.subscribe__form input {
	flex: 1; border: 1px solid var(--border-strong); border-radius: 12px; padding: 15px 16px;
	font-family: inherit; font-size: 16px; background: #fff; color: var(--fg);
	transition: border-color .16s ease, box-shadow .16s ease;
}
.subscribe__form input:focus { outline: none; border-color: var(--relion-orange); box-shadow: 0 0 0 3px rgba(240,80,43,0.14); }

@media (max-width: 1080px) { .subscribe__inner { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .subscribe__form { flex-direction: column; min-width: 0; width: 100%; } }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); padding: 32px 30px; }
.tcard__logo { height: 44px; margin-bottom: 24px; display: flex; align-items: center; }
.tcard__logo-img { height: 100%; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.logomark { display: inline-flex; align-items: center; gap: 9px; color: var(--relion-gray-500); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; filter: grayscale(1); }
.logomark__glyph { width: 22px; height: 22px; border-radius: 5px; background: var(--relion-gray-300); flex: none; }
.logomark__glyph--circle { border-radius: 50%; }
.logomark__glyph--diamond { border-radius: 4px; transform: rotate(45deg); }
.tcard__stars { display: flex; gap: 3px; color: var(--relion-orange); margin-bottom: 16px; }
.tcard__text { font-size: 16px; line-height: 1.6; color: var(--fg); margin: 0 0 24px; flex: 1; }
.tcard__by { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.tcard__by b { font-size: 14.5px; font-weight: 800; display: block; }
.tcard__by span { font-size: 13px; color: var(--fg-muted); }

@media (max-width: 900px) { .tgrid { grid-template-columns: 1fr; } }
.text-page { background: var(--bg); }
.text-page__hero { background: var(--relion-sky, #b8d8dd); padding: clamp(72px, 9vw, 128px) var(--wp--preset--spacing--s) clamp(48px, 7vw, 88px); }
.text-page__hero .wp-block-post-title { font-family: var(--font-display); font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.04em; line-height: 1.02; margin: 0; max-width: 900px; }
.text-page__body { padding: clamp(52px, 8vw, 104px) var(--wp--preset--spacing--s); }
.text-page__body .wp-block-post-content { font-size: 17px; line-height: 1.75; }
.text-page__body .wp-block-post-content > :first-child { margin-top: 0; }
.text-page__body .wp-block-post-content h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.025em; margin-top: 2.1em; }
.text-page__body .wp-block-post-content h3 { font-size: clamp(21px, 3vw, 27px); margin-top: 1.8em; }
.text-page__body .wp-block-post-content p,
.text-page__body .wp-block-post-content li { color: var(--fg-muted); }
.text-page__body .wp-block-post-content ul,
.text-page__body .wp-block-post-content ol { padding-left: 1.35em; }
.text-page__body .wp-block-post-content a { font-weight: 600; text-underline-offset: 3px; }
.text-page__body .wp-block-post-content strong { color: var(--fg); }
.vcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 36px 32px; display: flex; flex-direction: column; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease, border-color .24s ease; }
.vcard:hover { transform: translateY(-5px); box-shadow: 0 6px 16px rgba(28,32,36,0.08); border-color: var(--border-strong); }
.vcard__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--relion-orange-50); color: var(--relion-orange); display: grid; place-items: center; margin-bottom: 24px; }
.vcard__title { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 22px; letter-spacing: -0.015em; margin: 0 0 12px; }
.vcard__body { font-size: 15.5px; color: var(--fg-muted); line-height: 1.62; margin: 0; }
.vcard__stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.vcard__stat b { font-family: var(--font-display); font-weight: var(--fw-head); font-size: 30px; letter-spacing: -0.03em; color: var(--relion-orange); }
.vcard__stat span { font-size: 13px; color: var(--fg-subtle); line-height: 1.35; }
.vcard__stat-nps { flex-basis: 100%; font-weight: 600; color: var(--fg-muted); }

@media (max-width: 900px) { .vcards { grid-template-columns: 1fr; } }