/* ==========================================================================
   Maatio 2026 - design system
   Navy + lime brand, light mode, practical B2B. No frameworks.
   ========================================================================== */

:root {
  --navy: #23325F;
  --navy-700: #1B2A55;
  --navy-900: #121B3A;
  --ink: #171F33;
  --muted: #5B6478;
  --muted-2: #8A93A6;
  --line: #E3E8F0;
  --line-2: #D3DAE6;
  --bg: #FFFFFF;
  --bg-soft: #F5F7FB;
  --lime: #E1FF69;
  --lime-600: #C9EB3E;
  --lime-100: #F4FFC7;
  --teal: #AACDD2;
  --danger: #D9534F;
  --ok: #2E9E5B;
  --warn: #E7B416;

  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(23, 31, 51, .08);
  --shadow-lg: 0 24px 60px rgba(23, 31, 51, .16);
  --container: 1200px;
  --gutter: clamp(20px, 3vw, 32px);
  --section: clamp(48px, 8vw, 104px);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  /* Word breaking: overflow-wrap stays 'normal' (a word is never cut at an arbitrary letter). Long Finnish words in
     narrow boxes carry soft hyphens from content/hyphenation.json; hyphens:auto is only an extra for browsers with
     Finnish patterns (Firefox, Safari). See the "Word breaking" block at the end of this file. */
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime-600); outline-offset: 3px; border-radius: 4px; }
.icon { width: 24px; height: 24px; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container.narrow { max-width: 780px; }
.center { text-align: center; }
.small { font-size: .875rem; color: var(--muted); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--navy); padding: 8px 14px; border-radius: 8px; z-index: 1000; }
.skip-link:focus { left: 8px; }
/* In-page anchors (#paketit, #asiakastarinat, #showcase, #asiakkaat, pricing sections) stop below the sticky header */
main [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: .95rem; line-height: 1.2;
  border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration: none !important; white-space: nowrap;
}
.btn__icon { width: 18px; height: 18px; transition: transform .15s ease; }
.btn--primary { background: var(--lime); color: var(--navy); border-color: var(--lime); box-shadow: 0 6px 18px rgba(201, 235, 62, .35); }
.btn--primary:hover { background: var(--lime-600); border-color: var(--lime-600); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--lg { padding: 16px 28px; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(23,31,51,.06); }
/* flex-wrap only matters at very large text zoom (200 %): the nav then drops to a second row instead of overflowing the screen */
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; min-height: var(--header-h); }
.site-header__logo { flex: none; } /* never let the logo shrink (a flex item holding an img with max-width:100% can collapse to 0) */
.site-header__logo img { width: 150px; height: auto; }
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; list-style: none; }
.site-nav__item { position: relative; }
.site-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px; font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.site-nav__link:hover { text-decoration: none; background: var(--bg-soft); color: var(--navy); }
.site-nav__item.is-active > .site-nav__link { color: var(--navy); font-weight: 600; }
.site-nav__item.is-active > .site-nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--lime-600); border-radius: 2px; }
.site-nav__chev { transition: transform .2s; }
.site-nav__item--has-children.is-open .site-nav__chev, .site-nav__item--has-children:hover .site-nav__chev { transform: rotate(180deg); }
.site-nav__dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
.site-nav__item--has-children:hover .site-nav__dropdown, .site-nav__item--has-children.is-open .site-nav__dropdown, .site-nav__item--has-children:focus-within .site-nav__dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown { list-style: none; }
.dropdown__link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.dropdown__link:hover, .dropdown__link.is-active { background: var(--bg-soft); text-decoration: none; }
.dropdown__label { font-weight: 600; color: var(--navy); }
.dropdown__desc { font-size: .82rem; color: var(--muted); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.lang__link { color: var(--muted-2); padding: 10px 6px; min-width: 36px; text-align: center; }
.lang__link.is-active { color: var(--navy); }
.lang__link:hover { text-decoration: none; color: var(--navy); }
.lang__sep { color: var(--line-2); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; border-radius: 10px; }
.nav-toggle__bar { display: block; width: 24px; height: 2px; background: var(--navy); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav__mobile-extra { display: none; }

@media (max-width: 1080px) {
  .site-header__cta { display: none; }
  .lang:not(.lang--mobile) { display: none; }
  .site-header__actions { margin-left: auto; } /* the menu button sits at the right edge (the nav itself is out of the flow here) */
  .nav-toggle { display: flex; }
  .site-nav { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; overflow-y: auto; padding: 12px var(--gutter) 40px; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; margin: 0; z-index: 99; }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-bottom: 1px solid var(--line); }
  .site-nav__link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.08rem; border-radius: 0; white-space: normal; }
  .site-nav__item.is-active > .site-nav__link::after { display: none; }
  .site-nav__dropdown { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 8px 8px; opacity: 1; visibility: visible; transform: none; display: none; }
  .site-nav__item--has-children.is-open .site-nav__dropdown { display: block; }
  .site-nav__item--has-children:hover .site-nav__dropdown:not(.is-open) { display: none; }
  .site-nav__item--has-children.is-open:hover .site-nav__dropdown { display: block; }
  .site-nav__mobile-extra { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; align-items: center; }
  .lang--mobile { display: inline-flex; font-size: 1rem; }
  body.nav-open { overflow: hidden; }
  body.nav-open .chat { display: none; } /* the bubble would float over the open menu */
}

/* ---------- Section primitives ---------- */
.section { padding: var(--section) 0; }
.section--soft { background: var(--bg-soft); }
.section--tall { padding: calc(var(--section) * 1.6) 0; }
.kicker { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.kicker--lime { color: var(--lime); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head--split > div { max-width: 720px; }
.section-title { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 700; }
.section-title--sm { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.section-text { font-size: 1.08rem; color: var(--muted); margin: 0; }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.two-col--wide { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 900px) { .two-col, .two-col--wide { grid-template-columns: 1fr; } }
.lead-p { font-size: 1.12rem; color: var(--ink); }
.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list .icon { color: var(--navy); background: var(--lime); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: 2px; }
.check-list--tight { gap: 8px; }
.check-list--tight li { font-size: .95rem; }
.num-list { padding-left: 0; list-style: none; counter-reset: n; display: grid; gap: 12px; }
.num-list li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; }
.num-list li::before { content: counter(n); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--lime); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips--hero { margin: -8px 0 24px; }
.chip { font-size: .82rem; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line-2); padding: 6px 12px; border-radius: 999px; }
.terms-note { font-size: .875rem; color: var(--muted); max-width: 820px; margin: 24px auto 0; text-align: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: 8px 0; }
.breadcrumb { font-size: .875rem; color: var(--muted); margin-bottom: 12px; }
.breadcrumb a, .page-hero__note a, .terms-note a, .chat__alt a, .ref-empty a { display: inline-block; padding: 8px 0; margin: -8px 0; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { margin: 0 6px; color: var(--line-2); }

/* ---------- Placeholder (filled before launch) ---------- */
.placeholder { --ph-h: 480px; min-height: min(var(--ph-h), 75vh); display: grid; place-items: center; background: repeating-linear-gradient(135deg, #EEF1F6 0 12px, #E7EBF2 12px 24px); border: 2px dashed var(--line-2); border-radius: var(--radius); color: var(--muted); }
.placeholder__label { font-family: var(--font-head); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; background: #fff; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line-2); }

/* ---------- Third-party embeds (Elfsight LinkedIn feeds): the widget sizes itself, min-height only stops the layout jumping while it loads ---------- */
.embed { min-height: 160px; }
.embed--meeting { min-height: 615px; } /* HubSpot Meetings iframe: min-height 615px, resizes itself via postMessage */
/* HubSpot forms (contact page, onboarding page): --embed-h reserves the room while the form loads; main.js adds is-ready on HubSpot's onFormReady */
.embed--form { min-height: min(var(--embed-h, 560px), 80vh); }
.embed--form.is-ready { min-height: 0; }
.embed__fallback { margin: 14px 0 0; font-size: .9rem; }
.embed__fallback a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
/* Fixed-size video iframe (Google Drive on the onboarding page) made fluid */
.embed--video { max-width: 640px; aspect-ratio: 4 / 3; min-height: 0; margin: 1.2em 0; }
.embed--video iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; background: var(--navy-900); }

/* ---------- Onboarding page (/b2b-markkinointipalvelun-aloitus/) ---------- */
.prose .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.2em 0 1.6em; }
.prose .btn-row .btn { white-space: normal; text-align: center; overflow-wrap: normal; } /* long labels wrap at spaces, never inside a word */
.form-block, .form-block + .prose { margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.form-block { scroll-margin-top: calc(var(--header-h) + 16px); }
.form-block__title { font-size: 1.5rem; margin-bottom: 8px; }
.form-block__text { font-size: 1.05rem; margin-bottom: 20px; }

/* ---------- Hero ---------- */
/* Flat, clean background: no gradients, no grid (review 22.9.2026) */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 7vw, 96px); background: var(--bg); }
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.hero__title { font-size: clamp(2.1rem, 4.2vw, 3.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.hero__title-accent { box-shadow: inset 0 -.32em 0 var(--lime); padding: 0 4px; margin: 0 -4px; }
.hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 560px; margin-bottom: 28px; }
.hero__lead--note { font-size: 1rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions--center { justify-content: center; margin-top: 24px; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; font-size: .9rem; color: var(--muted); }
.hero__trust p { margin: 0; flex: 1 1 220px; min-width: 0; }
.avatar-stack { display: flex; }
.avatar-stack img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); margin-left: -12px; }
.avatar-stack img:first-child { margin-left: 0; }
.hero__media { position: relative; }
.hero__video { width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; box-shadow: var(--shadow-lg); }
.hero__video img { width: 100%; height: 100%; object-fit: cover; }
.hero__video-caption { position: absolute; left: 18px; bottom: 16px; color: #fff; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.hero__card { position: absolute; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); font-size: .85rem; }
.hero__card div { display: flex; flex-direction: column; line-height: 1.3; }
.hero__card strong { color: var(--navy); font-size: .92rem; }
.hero__card span:not(.hero__card-icon) { color: var(--muted); }
.hero__card-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: var(--lime); display: grid; place-items: center; flex: none; }
.hero__card-icon--lime { background: var(--lime); color: var(--navy); }
.hero__card--a { top: -18px; left: -24px; }
.hero__card--b { right: -18px; bottom: -22px; }
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { margin-top: 8px; }
  .hero__card--a { top: -16px; left: 12px; bottom: auto; }
  .hero__card--b { display: none; }
}
@media (max-width: 560px) { .hero__card { display: none; } .hero__video { border-radius: 16px; } }

/* ---------- Channels block (heading + logo row + industry photo strip) ---------- */
.kicker--light { color: var(--teal); }
.channels { background: var(--navy); color: #fff; padding: clamp(44px, 6vw, 80px) 0 0; overflow: hidden; }
.channels__head { margin-bottom: clamp(24px, 3vw, 36px); }
.channels__head .section-title { color: #fff; }
.channels__head .section-text { color: rgba(255,255,255,.78); }
.logo-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1040px; margin-inline: auto; }
.logo-row__item { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; font-weight: 600; font-size: .9rem; color: #fff; background: rgba(255,255,255,.04); }
.logo-row__item img { width: 24px; height: 24px; filter: brightness(0) invert(1); opacity: .95; }
.industries { margin-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(44px, 6vw, 72px); }
.industries__title { font-family: var(--font-head); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); text-align: center; margin-bottom: 18px; }
.industries__track { display: flex; width: max-content; animation: industries 70s linear infinite; }
.industries:hover .industries__track { animation-play-state: paused; }
.industries__set { list-style: none; display: flex; gap: 14px; padding-right: 14px; }
.industry { position: relative; width: clamp(220px, 24vw, 320px); aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: var(--navy-900); }
.industry img { width: 100%; height: 100%; object-fit: cover; }
.industry__label { position: absolute; left: 12px; bottom: 12px; font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--navy); background: #fff; padding: 6px 12px; border-radius: 999px; }
@keyframes industries { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .industries__track { animation: none; width: auto; justify-content: center; padding-inline: var(--gutter); }
  .industries__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .industries__set[aria-hidden="true"] { display: none; }
  .industry { width: clamp(200px, 30vw, 300px); }
}

/* ---------- Carousel (customer stories) ---------- */
.carousel { --bleed: var(--gutter); position: relative; margin-inline: calc(-1 * var(--bleed)); }
.carousel__track { list-style: none; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bleed); padding: 4px var(--bleed) 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .carousel { --bleed: 16px; } }
@media (max-width: 360px) { .carousel { --bleed: 14px; } }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 min(100% - 40px, 380px); scroll-snap-align: start; min-width: 0; }
.carousel__nav { display: flex; gap: 8px; }
.carousel__btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--navy); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.carousel__btn:hover { background: var(--navy); color: #fff; }
.carousel__btn[disabled] { opacity: .35; cursor: default; }
.carousel__btn[disabled]:hover { background: #fff; color: var(--navy); }
.carousel__btn-icon--prev { transform: rotate(180deg); }
.story__body { padding: 12px 4px 0; display: grid; gap: 2px; }
.story__industry { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.story__name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0; }
.story__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; padding: 6px 0; }
.stories__foot { margin-top: 24px; }
.stories__foot .center { margin-top: 26px; }
.value-pair { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 28px; }
.value-pair li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 4px; }
.value-pair strong { font-family: var(--font-head); font-size: 1.25rem; color: var(--navy); }
.value-pair span { font-size: .9rem; color: var(--muted); }
.dash__sub { font-size: .78rem; color: var(--muted); margin: -8px 0 10px; }
.btn--ghost { background: transparent; color: var(--navy); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-soft); }

/* ---------- Service cards (grid: see "Card grids" below) ---------- */
.service-grid { gap: 20px; }
.service-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-decoration: none !important; }
.service-card__icon { width: 54px; height: 54px; border-radius: 14px; background: var(--navy); color: var(--lime); display: grid; place-items: center; margin-bottom: 6px; }
.service-card__icon .icon { width: 26px; height: 26px; }
.service-card__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.service-card__title { font-size: 1.35rem; margin: 0; }
.service-card__text { color: var(--muted); margin: 0; }
.service-card__points { list-style: none; display: grid; gap: 8px; margin: 8px 0 4px; font-size: .92rem; }
.service-card__points li { display: flex; gap: 8px; align-items: flex-start; }
.service-card__points .icon { color: var(--navy); background: var(--lime); border-radius: 50%; padding: 3px; width: 20px; height: 20px; margin-top: 1px; }
.service-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.service-card__price { font-size: .92rem; color: var(--muted); }
.service-card__price strong { color: var(--navy); font-family: var(--font-head); font-size: 1.15rem; }
.service-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.service-card--compact { padding: 24px; }
.service-card--static { cursor: default; }

/* ---------- Stats ---------- */
.stats { padding: clamp(48px, 6vw, 80px) 0; background: var(--lime-100); border-block: 1px solid #E9F5B8; }
.stats__title { text-align: center; font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: 36px; }
/* 9.5rem columns: six at normal text size, three at 200 % text zoom (long stat labels then need the wider cell) */
.stats__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 16px; }
@media (max-width: 1000px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: center; padding: 18px 10px; }
.stat__value { display: block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.9rem); color: var(--navy); letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
/* Small "n." prefix (about 40 % of the number), sits on the number's baseline so "30 %" stays on one row */
.stat__prefix { font-size: max(.4em, .75rem); font-weight: 600; letter-spacing: normal; color: var(--muted); vertical-align: baseline; } /* never under 12px */
.stat__label { display: block; margin-top: 10px; font-size: .9rem; color: var(--muted); }

/* ---------- Case banner ---------- */
.case-banner { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--navy-900); color: #fff; border-radius: 22px; overflow: hidden; margin-bottom: 24px; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.case-banner--wide { grid-template-columns: 1fr 1.2fr; }
.case-banner__media { min-height: 260px; }
.case-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.case-banner__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.case-banner__title { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); margin: 0; }
/* 4 metrics as two rows of two: the banner body is at most about 620px wide, four cells would be too narrow for the labels (auto-fit also gave 3 + 1 at some widths) */
.case-banner__metrics { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0; }
.case-banner__metrics li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: rgba(255,255,255,.06); border-radius: 12px; }
.case-banner__metrics strong { font-family: var(--font-head); font-size: 1.6rem; color: var(--lime); line-height: 1; }
.case-banner__metrics span { font-size: .8rem; color: rgba(255,255,255,.75); }
.case-banner__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lime); }
@media (max-width: 860px) { .case-banner, .case-banner--wide { grid-template-columns: 1fr; } .case-banner__media { min-height: 220px; } }

/* ---------- Video tiles (grid: see "Card grids" below) ---------- */
.video-grid { gap: 18px; }
.video-tile { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--navy-900); cursor: pointer; text-align: left; }
.video-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: rgba(18,27,58,.72); }
.video-tile__play { position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--navy); display: grid; place-items: center; z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: transform .2s, background .2s; }
.video-tile__play .icon { width: 26px; height: 26px; margin-left: 3px; }
.video-tile__play--lg { width: 78px; height: 78px; }
.video-tile__play--lg .icon { width: 34px; height: 34px; }
.video-tile__label { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.video-tile__dur { font-size: .75rem; font-weight: 600; background: rgba(255,255,255,.18); padding: 3px 8px; border-radius: 999px; }
.client-row { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.client-row li { font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--navy); background: var(--bg-soft); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; }

/* ---------- Data / dashboard mock ---------- */
.data { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .data { grid-template-columns: 1fr; } }
.data__copy .check-list { margin: 0 0 28px; }
.data__visual { position: relative; padding-bottom: 64px; }
.dash { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px 18px 14px; font-size: .86rem; }
.dash__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash__title { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.dash__pill { font-size: .75rem; font-weight: 600; background: var(--lime-100); color: var(--navy); padding: 4px 10px; border-radius: 999px; }
.dash__cols, .dash__row { display: grid; grid-template-columns: 1.6fr 1.1fr .7fr .7fr; gap: 10px; align-items: center; }
.dash__cols { color: var(--muted-2); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 8px; border-bottom: 1px solid var(--line); }
.dash__row { padding: 10px 8px; border-bottom: 1px solid var(--bg-soft); }
.dash__row:hover { background: var(--bg-soft); }
.dash__company { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.dash__logo { width: 24px; height: 24px; border-radius: 6px; background: var(--teal); flex: none; opacity: .8; }
.dash__bars { display: flex; gap: 3px; }
.dash__bars i { width: 16px; height: 8px; border-radius: 2px; background: var(--line); }
.dash__bars i.is-on { background: var(--navy); }
.dash__foot { padding-top: 12px; }
.dash__badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); background: var(--lime-100); padding: 6px 12px; border-radius: 999px; font-size: .8rem; }
.dash-mini { position: absolute; right: -14px; bottom: 0; width: min(13.75rem, 100%); background: var(--navy); color: #fff; border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-lg); display: grid; gap: 6px; }
.dash-mini > * { min-width: 0; } /* at 200 % text zoom the label breaks at its soft hyphen instead of pushing out of the card */
.dash-mini__label { font-size: .75rem; color: var(--teal); text-transform: uppercase; letter-spacing: .06em; }
.dash-mini__value { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--lime); }
.dash-mini__spark { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.dash-mini__spark i { flex: 1; background: var(--lime); opacity: .85; border-radius: 3px 3px 0 0; }
@media (max-width: 560px) { .dash-mini { position: static; width: 100%; margin-top: 14px; } .data__visual { padding-bottom: 0; } .dash__cols span:last-child, .dash__row span:last-child { display: none; } .dash__cols, .dash__row { grid-template-columns: 1.6fr 1fr .6fr; } }

/* ---------- Compare table ---------- */
.compare-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.compare { width: 100%; border-collapse: collapse; min-width: 820px; font-size: .92rem; }
.compare th, .compare td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: center; }
.compare thead th { font-family: var(--font-head); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-soft); }
.compare thead th:first-child, .compare tbody th { text-align: left; }
.compare tbody th { width: 38%; font-weight: 500; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare__area { display: block; font-family: var(--font-head); font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.compare__points { list-style: none; color: var(--muted); font-size: .85rem; display: grid; gap: 2px; }
.compare__points[hidden] { display: none; }
.compare__points li::before { content: "· "; color: var(--lime-600); font-weight: 900; }
.compare__maatio { background: var(--lime-100) !important; color: var(--navy) !important; font-weight: 800 !important; }
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.mark--yes { background: #DDF5E6; color: var(--ok); }
.mark--partial { background: #FCF1CC; color: #A6780C; }
.mark--no { background: #FBE3E2; color: var(--danger); }
.compare__legend { text-align: center; font-size: .85rem; color: var(--muted); margin-top: 16px; display: flex; justify-content: center; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.compare__legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } /* icon and label wrap as one unit */
/* Compact variant (homepage): one row per area, marks only; reasons open on request */
.compare-wrap--compact { max-width: 980px; margin-inline: auto; box-shadow: none; }
.compare--compact { min-width: 680px; font-size: .86rem; }
.compare--compact th, .compare--compact td { padding: 10px 12px; }
.compare--compact tbody th { width: 30%; }
.compare--compact .compare__area { margin-bottom: 0; font-size: .92rem; }
.compare--compact .compare__points { margin-top: 6px; }
.compare--compact .mark { width: 26px; height: 26px; }
.compare--compact .mark .icon { width: 15px; height: 15px; }
.compare__foot { max-width: 980px; margin: 14px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.compare__foot .compare__legend { margin: 0; justify-content: flex-start; }
.compare__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); color: #fff; padding: clamp(48px, 7vw, 88px) 0; }
.cta-band__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 900px) { .cta-band__inner { grid-template-columns: 1fr; } }
.cta-band__title { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.cta-band__lead { font-size: 1.1rem; color: rgba(255,255,255,.8); margin: 0; max-width: 560px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.cta-band__note { flex-basis: 100%; text-align: right; font-size: .85rem; color: var(--teal); margin: 6px 0 0; }
@media (max-width: 900px) { .cta-band__actions { justify-content: flex-start; } .cta-band__note { text-align: left; } }

/* ---------- LinkedIn ---------- */
.linkedin { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .linkedin { grid-template-columns: 1fr; } }
.linkedin .section-head { margin-bottom: 20px; }

/* ---------- Page hero ---------- */
.page-hero { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: clamp(36px, 5vw, 64px) 0 clamp(36px, 5vw, 56px); }
.page-hero--compact { padding-bottom: clamp(28px, 4vw, 44px); }
.page-hero__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .page-hero__inner { grid-template-columns: 1fr; } }
.page-hero__title { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.page-hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 640px; margin-bottom: 24px; }
.page-hero__note { color: var(--muted); }
.page-hero__facts { list-style: none; display: grid; gap: 12px; }
.page-hero__facts li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.page-hero__facts .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--navy); color: var(--lime); }
.page-hero__facts span { display: flex; flex-direction: column; font-size: .9rem; color: var(--muted); }
.page-hero__facts strong { color: var(--navy); font-size: 1rem; }
.page-hero__icon { justify-self: end; width: 180px; height: 180px; border-radius: 40px; background: var(--navy); color: var(--lime); display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.page-hero__icon .icon { width: 84px; height: 84px; stroke-width: 1.4; }
.page-hero__media img, .page-hero__media .video-tile { border-radius: 18px; box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .page-hero__icon { display: none; } }
.metric-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric { background: var(--navy); color: #fff; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.metric strong { font-family: var(--font-head); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--lime); line-height: 1; }
.metric span { font-size: .85rem; color: rgba(255,255,255,.8); }

/* ---------- Includes / aside (grid: see "Card grids" below) ---------- */
.includes-grid { gap: 18px; }
.includes { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.includes__title { font-size: 1.1rem; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.aside-card__title { font-size: 1.1rem; margin-bottom: 14px; }
.aside-card--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.aside-card--navy .aside-card__title { color: #fff; }
.aside-card--navy p { color: rgba(255,255,255,.82); }
.aside-stack { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 900px) { .aside-stack { position: static; } }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: .95rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.reasons { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .reasons { grid-template-columns: 1fr; } }
.reasons__list { list-style: none; display: grid; gap: 12px; }
.reasons__list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.reasons__list .icon { color: var(--navy); background: var(--lime); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: 2px; }

/* ---------- Pricing ---------- */
.pricing-group__title { text-align: center; font-size: 1.3rem; margin: 40px 0 20px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-grid--2 { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.price-grid--1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
@media (max-width: 1024px) { .price-grid { grid-template-columns: repeat(2, 1fr); } .price-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .price-grid--1 { grid-template-columns: minmax(0, 440px); } }
@media (max-width: 680px) { .price-grid, .price-grid--2, .price-grid--1 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.price-card--recommended { border: 2px solid var(--navy); box-shadow: var(--shadow-lg); }
.price-card__badge { position: absolute; top: -14px; left: 24px; background: var(--lime); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.price-card__category { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.price-card__name { font-size: 1.4rem; margin: 0; }
.price-card__subtitle { color: var(--muted); margin: 0 0 8px; }
.price-card__price { margin: 4px 0 0; color: var(--navy); }
.price-card__from { font-size: .9rem; color: var(--muted); }
.price-card__price strong { font-family: var(--font-head); font-weight: 800; font-size: 2.3rem; letter-spacing: -.02em; }
.price-card__unit { color: var(--muted); }
.price-card__terms { font-size: .82rem; color: var(--muted); margin: 0 0 8px; }
.price-card__budget { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--navy); background: var(--lime); border-radius: 10px; padding: 9px 12px; margin: 4px 0 8px; }
.price-card__budget .icon { color: var(--navy); }
.price-card__list { list-style: none; display: grid; gap: 8px; margin: 8px 0 22px; font-size: .92rem; }
.price-card__list li { display: flex; gap: 8px; align-items: flex-start; }
.price-card__list .icon { color: var(--ok); margin-top: 3px; }
.price-card .btn { margin-top: auto; }

.price-card__badge--new { background: var(--navy); color: var(--lime); }

/* ---------- Icon lists (one distinct icon per item) ---------- */
.icon-list { list-style: none; display: grid; gap: 12px; }
.icon-list li { display: flex; gap: 12px; align-items: flex-start; }
.icon-list__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--lime-100); color: var(--navy); display: grid; place-items: center; }
.icon-list__icon .icon { width: 18px; height: 18px; }
.icon-list li > span:last-child { padding-top: 6px; min-width: 0; }
.icon-list--cards li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; align-items: center; }
.icon-list--cards li > span:last-child { padding-top: 0; }
.icon-list--cards .icon-list__icon { background: var(--lime); }

/* ---------- Service page extras ---------- */
.page-hero__side { display: grid; gap: 18px; justify-items: end; }
.page-hero__facts--tight { width: 100%; max-width: 380px; }
@media (max-width: 900px) { .page-hero__side { justify-items: stretch; } .page-hero__facts--tight { max-width: none; } }
.stat-callout { display: flex; align-items: center; gap: 18px; margin: 8px 0 0; padding: 18px 22px; background: var(--lime-100); border-radius: 16px; }
.stat-callout strong { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.stat-callout span { color: var(--navy); font-size: 1rem; }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .section-title { color: #fff; }
.section--navy .section-text { color: rgba(255,255,255,.78); }
.prompts__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .prompts__inner { grid-template-columns: 1fr; } }
.prompts__copy .section-head { margin-bottom: 0; }
.ai-chat { display: grid; gap: 14px; background: var(--navy-900); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: clamp(18px, 3vw, 28px); }
.ai-chat__q, .ai-chat__a { display: flex; gap: 12px; align-items: flex-start; }
.ai-chat__q { justify-content: flex-end; }
.ai-chat__q .ai-chat__avatar { order: 2; }
.ai-chat__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.ai-chat__avatar--ai { background: var(--lime); color: var(--navy); }
.ai-chat__bubble { max-width: 88%; background: #fff; color: var(--ink); border-radius: 16px; padding: 12px 16px; font-size: .95rem; margin: 0; }
.ai-chat__bubble--q { background: var(--lime-100); color: var(--navy); font-weight: 600; min-height: 46px; border-top-right-radius: 6px; }
.ai-chat__a .ai-chat__bubble { border-top-left-radius: 6px; display: grid; gap: 8px; }
.ai-chat__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--navy); margin-left: 2px; vertical-align: -0.15em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ai-chat__label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ai-chat__list { list-style: none; display: grid; gap: 6px; }
.ai-chat__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--navy); }
.ai-chat__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime-600); flex: none; }
.ai-chat__ad { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--navy); background: var(--lime-100); padding: 6px 10px; border-radius: 8px; justify-self: start; }
@media (prefers-reduced-motion: reduce) { .ai-chat__caret { display: none; } }
.video-grid--showcase { margin-bottom: clamp(28px, 4vw, 44px); }
.showcase__gallery-title { margin-bottom: 20px; }
.video-tile--placeholder { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #EEF1F6 0 12px, #E7EBF2 12px 24px); border: 2px dashed var(--line-2); cursor: default; }
.video-tile--placeholder::after { display: none; }
.video-tile--placeholder .video-tile__label { color: var(--navy); }
.cta-band--booking .cta-band__inner { margin-bottom: clamp(28px, 4vw, 44px); }
.cta-band__embed { background: #fff; border-radius: 20px; padding: clamp(16px, 2.5vw, 28px); color: var(--ink); }
.cta-band__embed-title { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin: 0 0 14px; }

/* ---------- Steps ---------- */
/* 13rem columns: four at normal text size, two at 200 % text zoom (a 17-letter word then needs the wider cell) */
.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 18px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.steps__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.steps__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lime); color: var(--navy); font-family: var(--font-head); font-weight: 800; margin-bottom: 12px; }
.steps__item h3 { font-size: 1.1rem; }
.steps__item p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 20px; }
.faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { transition: transform .2s; color: var(--muted); }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 0 18px; color: var(--muted); }
.faq__a p { margin: 0; }

/* ---------- References ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 40px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.filter:hover { border-color: var(--navy); }
.filter.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.ref-grid { gap: 20px; } /* grid: see "Card grids" below */
.ref-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ref-card.is-hidden { display: none; }
.ref-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--navy-900); overflow: hidden; }
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ref-card__mono { width: 100%; height: 100%; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); text-align: center; padding: 20px; }
.ref-card__mono span { border: 2px solid rgba(255,255,255,.35); padding: 10px 18px; border-radius: 12px; }
.ref-card__tag { position: absolute; top: 12px; left: 12px; background: var(--lime); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.ref-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ref-card__industry { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.ref-card__title { font-size: 1.15rem; margin: 0; }
.ref-card__text { color: var(--muted); font-size: .95rem; margin: 0 0 8px; }
.ref-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }

/* ---------- Prose ---------- */
.prose h2 { font-size: 1.5rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin-top: 1.4em; }
.prose p, .prose li { font-size: 1.05rem; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; display: grid; gap: .4em; }
.prose img { border-radius: 14px; margin: 1.4em 0; }
/* Inline links: vertical padding on an inline element does not move any text, it only widens the tap area to 40px */
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; padding-block: calc((40px - 1.6em) / 2); }
/* A list item that is only a link (link lists at the end of blog posts): the link becomes a 40px tall block of its own */
.prose li > a:only-child:not(.btn) { display: inline-block; min-height: 40px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.2em 0; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose__figure { margin: 1.6em 0; }
.prose__figure img { margin: 0; }
.prose--legal p, .prose--legal li { font-size: .98rem; }
.quote { margin: 2em 0; padding: 28px 28px 24px 30px; background: var(--lime-100); border-radius: 18px; border: 0; position: relative; }
.quote__icon { color: var(--lime-600); width: 34px; height: 34px; position: absolute; top: -12px; left: 24px; background: #fff; border-radius: 50%; padding: 5px; }
.quote p { font-family: var(--font-head); font-weight: 600; color: var(--navy); font-size: 1.15rem; line-height: 1.5; margin: 0 0 12px; }
.quote footer { font-size: .9rem; color: var(--muted); }

/* ---------- Team (grid: see "Card grids" below) ---------- */
.team-grid { gap: 22px; }
.person { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.person__photo { aspect-ratio: 4 / 5; background: var(--bg-soft); overflow: hidden; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.person__name { font-size: 1.1rem; margin: 16px 18px 2px; }
.person__title { color: var(--muted); font-size: .9rem; margin: 0 18px 10px; }
.person__contact { list-style: none; display: grid; gap: 0; margin: auto 18px 12px; font-size: .85rem; }
.person__contact a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 0; } /* e-mails break after the @ (template <wbr>), overflow-wrap below is the last resort */
.person__contact .icon { color: var(--muted); }
.office { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .office { grid-template-columns: 1fr; } }
.office__media img { border-radius: 18px; box-shadow: var(--shadow); }
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; }
.badges img { height: 72px; width: auto; }

/* ---------- Blog (post grid: see "Card grids" below) ---------- */
.post-grid { gap: 22px; }
.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.post-card__media { aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__mono { width: 100%; height: 100%; display: grid; place-items: center; background: var(--navy); color: var(--lime); font-family: var(--font-head); font-weight: 800; font-size: 3rem; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__meta { font-size: .82rem; color: var(--muted); margin: 0; }
.post-card__title { font-size: 1.15rem; margin: 0; }
.post-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.post__header { background: var(--bg-soft); padding: clamp(36px, 5vw, 64px) 0 0; }
.post__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; }
.post__meta { color: var(--muted); margin-bottom: 28px; }
.post__hero { max-width: 980px; }
.post__hero img { border-radius: 18px; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: -60px; position: relative; z-index: 1; }
.post .prose--post { padding-top: clamp(80px, 9vw, 110px); }
.post__cta { margin: 40px 0 var(--section); padding: 26px 28px; background: var(--lime-100); border-radius: 18px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.post__cta p { margin: 0; max-width: 520px; }

/* ---------- Team groups, photo placeholders, office slot ---------- */
.team-group + .team-group { margin-top: clamp(36px, 5vw, 56px); }
.team-group__title { font-size: 1.15rem; letter-spacing: .02em; padding-bottom: 12px; margin-bottom: 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.team-group__title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--lime-600); }
.person__initials { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; background: repeating-linear-gradient(135deg, #EEF1F6 0 12px, #E7EBF2 12px 24px); color: var(--navy); }
.person__initials span { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; letter-spacing: -.02em; }
.person__initials small { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #fff; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.page-hero__media-caption { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .9rem; color: var(--muted); }
.prose__video { margin: 1.2em 0 1.8em; }
.prose__video .video-tile { border-radius: 16px; }
.ref-empty { margin: 24px 0 0; padding: 18px 20px; background: var(--bg-soft); border-radius: 12px; color: var(--muted); }

/* ---------- Blog: newspaper-style index ---------- */
.news-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 900px) { .news-head { grid-template-columns: 1fr; } }
.news-teaser { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.news-teaser__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.news-teaser > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.news-teaser strong { color: var(--navy); }
.news-teaser small { color: var(--muted); font-size: .85rem; }
.news-meta { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.news-meta__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
.news-top { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; padding-bottom: clamp(28px, 4vw, 48px); margin-bottom: clamp(28px, 4vw, 48px); border-bottom: 2px solid var(--navy); }
@media (max-width: 900px) { .news-top { grid-template-columns: 1fr; } }
.news-lead { display: grid; gap: 18px; color: var(--ink); text-decoration: none !important; }
.news-lead__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--navy); }
.news-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-lead__title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12; margin: 0 0 10px; }
.news-lead:hover .news-lead__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.news-lead__excerpt { color: var(--muted); font-size: 1.05rem; margin: 0 0 10px; }
.news-latest__title { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.news-list { list-style: none; display: grid; }
.news-list li + li { border-top: 1px solid var(--line); }
.news-list a { display: flex; gap: 14px; padding: 14px 0; color: var(--ink); text-decoration: none !important; }
.news-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.news-list__num { flex: none; font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--teal); line-height: 1; width: 26px; }
.news-list a > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.news-list strong { color: var(--navy); font-family: var(--font-head); font-weight: 600; font-size: .98rem; line-height: 1.3; }
.news-list time { font-size: .78rem; color: var(--muted); }
.news-section-title { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.news-grid { gap: clamp(20px, 3vw, 36px) 28px; } /* grid: see "Card grids" below */
.news-item { display: grid; gap: 12px; color: var(--ink); text-decoration: none !important; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.news-item__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--navy); }
.news-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-item__title { font-size: 1.12rem; line-height: 1.25; margin: 0 0 6px; }
.news-item:hover .news-item__title { text-decoration: underline; text-underline-offset: 3px; }
.news-item__excerpt { color: var(--muted); font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Google Business Profile card (replaces the map iframe) ---------- */
.gbp-card { display: flex; align-items: center; gap: 18px; padding: clamp(18px, 3vw, 28px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.gbp-card__icon { flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--navy); color: var(--lime); display: grid; place-items: center; }
.gbp-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.gbp-card__body strong { font-family: var(--font-head); color: var(--navy); font-size: 1.1rem; }
.gbp-card__body span { color: var(--muted); }
.gbp-card__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); white-space: nowrap; }
@media (max-width: 640px) { .gbp-card { flex-wrap: wrap; } .gbp-card__cta { white-space: normal; } }

/* ---------- Contact / booking ---------- */
.contact, .booking { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .contact, .booking { grid-template-columns: 1fr; } }
.contact__aside, .booking__aside { display: grid; gap: 18px; }
.contact-people { list-style: none; display: grid; gap: 14px; }
.contact-person { display: flex; gap: 14px; align-items: flex-start; }
.contact-person img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.contact-person div { display: flex; flex-direction: column; font-size: .92rem; min-width: 0; }
.contact-person div a { display: inline-block; padding: 8px 0; min-height: 40px; } /* 40px tap target */
/* E-mail addresses and phone numbers are not words: they may break anywhere (see also the "Word breaking" block) */
.contact-person a, .person__contact a, .site-footer__address a { overflow-wrap: anywhere; }
.contact-person strong { color: var(--navy); }
.contact-person span { color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
.contact__generic { display: grid; gap: 6px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: .92rem; }
.contact__generic a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 0; }

/* ---------- Footer ---------- */
/* Bottom padding 100px = the footer's own 28px + room for the fixed chat bubble (52px tall, 20px from the screen
   edge). When the page is scrolled to the very end the bubble then floats over empty navy space instead of covering
   the "Palveluehdot" / "In English" links. Print is unaffected: the footer is hidden there. Phone value in the 640px block. */
.site-footer { background: var(--navy-900); color: rgba(255,255,255,.8); padding: clamp(48px, 6vw, 72px) 0 100px; }
.site-footer a { color: rgba(255,255,255,.85); }
.site-footer a:hover { color: var(--lime); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 960px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand img { width: 160px; margin-bottom: 18px; }
.site-footer__brand p { font-size: .95rem; max-width: 380px; }
.site-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); }
.site-footer__social a:hover { background: var(--lime); color: var(--navy); }
.site-footer__heading { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.site-footer__links { list-style: none; display: grid; gap: 2px; font-size: .95rem; }
.site-footer__links a, .site-footer__legal a, .site-footer__address a { display: inline-block; padding: 9px 0; min-width: 44px; }
.site-footer__address { font-style: normal; font-size: .95rem; }
.site-footer__address p { margin-bottom: 10px; }
.site-footer__address strong { color: #fff; }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; color: rgba(255,255,255,.6); }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { list-style: none; display: flex; gap: 18px; }

.site-footer__contact { margin-top: 8px; }
/* Footer links are white; the lime button must keep navy text to stay readable */
.site-footer .btn--primary, .site-footer .btn--primary:hover { color: var(--navy); }
.badge-new { display: inline-block; vertical-align: middle; margin-left: 6px; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); color: var(--navy); padding: 2px 7px; border-radius: 999px; }

/* ---------- Chat-style contact bubble ----------
   .chat spans the screen from left to right (with pointer-events: none, so the empty part is click-through) only so
   that the panel's percentage width is measured without a desktop scrollbar; 100vw would include the scrollbar and
   push the panel off the right edge. --consent-h is set on <html> by main.js while a CookieYes banner is open at
   the bottom of the screen: the bubble and panel then move up above the banner. env(safe-area-inset-bottom) keeps
   the bubble above the iPhone home indicator. */
.chat { --chat-edge: 20px; position: fixed; left: var(--chat-edge); right: var(--chat-edge); bottom: calc(var(--chat-edge) + env(safe-area-inset-bottom, 0px) + var(--consent-h, 0px)); z-index: 150; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.chat > * { pointer-events: auto; }
.chat__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 10px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; font-size: .92rem; cursor: pointer; box-shadow: 0 10px 30px rgba(23,31,51,.28); transition: transform .15s, background .15s; }
.chat__toggle:hover { background: var(--navy-700); }
.chat__toggle-icon { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; flex: none; }
.chat__toggle-icon .icon { width: 20px; height: 20px; }
.chat__toggle-close { position: absolute; opacity: 0; transform: rotate(-90deg); transition: opacity .15s, transform .15s; }
.chat__toggle[aria-expanded="true"] .chat__toggle-icon .icon:not(.chat__toggle-close) { opacity: 0; }
.chat__toggle[aria-expanded="true"] .chat__toggle-close { opacity: 1; transform: none; }
/* Panel height: the screen minus the bubble row (52px + 12px gap + the bottom edge) and a little air on top; the
   consent banner height is taken off too. 100dvh = the visible part of a phone screen, 100vh is the fallback. */
.chat__panel { --chat-room: calc(100px + var(--consent-h, 0px)); width: min(380px, 100%); max-height: min(640px, calc(100vh - var(--chat-room))); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px; }
.chat__panel[hidden] { display: none; }
/* A calendar view is open: wider and taller panel */
.chat__panel--wide { --chat-room: calc(96px + var(--consent-h, 0px)); width: min(560px, 100%); max-height: calc(100vh - var(--chat-room)); }
@supports (height: 100dvh) {
  .chat__panel { max-height: min(640px, calc(100dvh - var(--chat-room))); }
  .chat__panel--wide { max-height: calc(100dvh - var(--chat-room)); }
}
/* HubSpot Meetings iframe inside the panel: full panel width, never wider; the panel scrolls when the calendar is taller than the screen */
.chat__panel iframe { display: block; width: 100% !important; max-width: 100%; border: 0; }
.chat__embed { min-height: 0; }
.chat__head { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.chat__title { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin: 0 0 2px; font-size: 1rem; }
.chat__text, .chat__alt { font-size: .88rem; color: var(--muted); margin: 0; }
.avatar-stack--sm img { width: 36px; height: 36px; border-width: 2px; margin-left: -10px; }
.chat__view { display: none; }
.chat__view.is-active { display: grid; gap: 10px; }
.chat__option { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.chat__option:hover { border-color: var(--navy); background: var(--bg-soft); }
.chat__option > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.chat__option strong { color: var(--navy); font-size: .95rem; }
.chat__option small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.chat__option-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--lime); color: var(--navy); display: grid; place-items: center; flex: none; }
.chat__option-icon .icon { width: 20px; height: 20px; }
.chat__back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); font-size: .85rem; font-weight: 600; min-height: 40px; padding: 6px 0; cursor: pointer; }
.chat__back:hover { color: var(--navy); }
.chat__back-icon { transform: rotate(180deg); }
.chat__subtitle { font-family: var(--font-head); font-weight: 700; color: var(--navy); margin: 0; }
@media (max-width: 640px) {
  .chat { --chat-edge: 12px; }
  .chat__toggle-label { display: none; }
  .chat__toggle { padding: 8px; }
  .chat__panel { --chat-room: calc(88px + var(--consent-h, 0px)); width: 100%; padding: 16px; }
  .chat__panel--wide { padding: 12px; } /* 360px screen: 336px panel - 24px = 312px, the iframe's minimum width */
}
body.chat-open .chat__toggle-label { display: none; }
body.chat-open .chat__toggle { padding: 8px; }

/* ---------- Video modal ---------- */
.video-modal { --modal-pad: 20px; position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--modal-pad); }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(9, 13, 30, .86); backdrop-filter: blur(4px); }
/* The 16:9 dialog is also limited by the screen height, so the player and its controls stay on screen in landscape */
.video-modal__dialog { position: relative; width: min(100%, 1040px, calc((100vh - 2 * var(--modal-pad)) * 16 / 9)); background: #000; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
@supports (height: 100dvh) { .video-modal__dialog { width: min(100%, 1040px, calc((100dvh - 2 * var(--modal-pad)) * 16 / 9)); } }
.video-modal__frame { aspect-ratio: 16 / 9; }
.video-modal__frame video { width: 100%; height: 100%; }
.video-modal__title { position: absolute; top: 12px; left: 16px; z-index: 2; margin: 0; color: #fff; font-weight: 600; font-size: .9rem; background: rgba(0,0,0,.45); padding: 6px 12px; border-radius: 999px; pointer-events: none; }
.video-modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.video-modal__close:hover { background: var(--lime); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; } }

/* ---------- Reference monogram variations (flat colours) ---------- */
.ref-card:nth-child(3n+2) .ref-card__mono { background: #2B3F78; }
.ref-card:nth-child(3n) .ref-card__mono { background: var(--navy-700); }
.ref-card:nth-child(4n+1) .ref-card__mono { background: var(--navy-900); }


/* ==========================================================================
   Responsive refinements (tablet / phone / print)
   Breakpoints: 1200 xl, 1080 nav, 1024 lg, 900 md+, 768 md, 640 sm, 480 xs, 360 xxs
   ========================================================================== */

/* Header: tighter between nav switch and 1200px so 6 items + FI|EN + the CTA fit on one row (measured: 1081px is the tightest) */
@media (min-width: 1081px) and (max-width: 1200px) {
  .site-nav__link { padding: 10px 8px; font-size: .9rem; gap: 4px; }
  .site-nav__item.is-active > .site-nav__link::after { left: 8px; right: 8px; }
  .site-header__cta { padding: 10px 14px; font-size: .86rem; }
  .site-header__logo img { width: 124px; }
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 8px; }
  .lang__link { min-width: 30px; padding: 10px 4px; }
}
@media (min-width: 1081px) and (max-width: 1140px) {
  .site-header__cta .btn__icon { display: none; } /* the sparkle icon is the first thing to go when space is tight */
}

/* Tablet */
@media (max-width: 1024px) {
  .hero__title { font-size: clamp(2rem, 5.2vw, 3rem); }
  .page-hero__inner { align-items: start; }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .two-col--wide { grid-template-columns: 1.3fr 1fr; }
}
@media (max-width: 900px) {
  /* 2 or 3 fact cards side by side (auto-fit: as many as fit, so 3 facts never leave one alone on a second row) */
  .page-hero__facts { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .page-hero__facts li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-hero__media { max-width: 640px; }
  .section-head--split .btn { align-self: flex-start; }
}

/* Comparison table becomes stacked cards on small screens */
@media (max-width: 768px) {
  .compare-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .compare { min-width: 0; display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tbody tr { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 8px; margin-bottom: 14px; box-shadow: var(--shadow); }
  .compare tbody th { width: auto; padding: 0 0 12px; border-bottom: 1px solid var(--line); text-align: left; }
  .compare tbody td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); text-align: left; }
  .compare tbody td:last-child { border-bottom: 0; }
  .compare tbody td::before { content: attr(data-label); font-size: .9rem; color: var(--muted); }
  .compare tbody td.compare__maatio { background: var(--lime-100) !important; margin: 0 -18px; padding: 10px 18px; border-bottom: 0; }
  .compare tbody td.compare__maatio::before { color: var(--navy); font-weight: 700; }
  .compare__legend { justify-content: flex-start; }
}

/* Phone landscape and small tablets */
@media (max-width: 768px) {
  .metric-grid { gap: 10px; }
  .stats__grid { gap: 8px; }
  .stat { padding: 12px 6px; }
  .post__hero img { margin-bottom: -36px; }
  .post .prose--post { padding-top: 64px; }
  .post__cta { padding: 22px; }
  .post__cta .btn { width: 100%; }
  .video-modal { --modal-pad: 10px; }
  .video-modal__dialog { border-radius: 10px; }
  .video-modal__title { font-size: .8rem; }
  .office__media img { aspect-ratio: 16 / 9; object-fit: cover; }
}

/* Phones */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .site-header__logo img { width: 118px; }
  .container { width: min(100% - 32px, var(--container)); }
  .section-title { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .section-text, .page-hero__lead, .hero__lead { font-size: 1.02rem; }
  .hero { padding-top: 28px; }
  .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); margin-bottom: 14px; }
  .hero__eyebrow { font-size: .82rem; }
  .hero__trust { gap: 10px; }
  .hero__video-caption { font-size: .82rem; left: 12px; bottom: 10px; }
  .service-card { padding: 22px; }
  .service-card__title { font-size: 1.2rem; }
  .stats { padding: 40px 0; }
  .stats__title { margin-bottom: 20px; }
  .stat__value { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .stat__label { font-size: .82rem; }
  .case-banner { border-radius: 16px; }
  .case-banner__title { font-size: 1.3rem; }
  .case-banner__metrics strong { font-size: 1.35rem; }
  .video-grid { gap: 12px; }
  .client-row { gap: 8px; margin-top: 22px; }
  .client-row li { font-size: .8rem; padding: 6px 11px; }
  .dash { padding: 14px 12px 10px; font-size: .8rem; border-radius: 14px; }
  .cta-band__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .cta-band__lead { font-size: 1rem; }
  .page-hero { padding: 28px 0 32px; }
  .page-hero__title { font-size: clamp(1.75rem, 7.6vw, 2.4rem); }
  .page-hero__facts { grid-template-columns: 1fr; }
  .page-hero__facts li { flex-direction: row; align-items: center; }
  .metric strong { font-size: 1.5rem; }
  .includes, .aside-card, .steps__item, .price-card { padding: 20px; }
  .price-card__price strong { font-size: 2rem; }
  .pricing-group__title { margin: 28px 0 16px; }
  .faq__item { padding: 0 16px; }
  .faq__q { padding: 15px 0; font-size: .98rem; }
  .ref-card__body { padding: 16px 18px 18px; }
  .post-card__body { padding: 18px; }
  .post__title { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .prose p, .prose li { font-size: 1rem; }
  .prose h2 { font-size: 1.3rem; }
  .quote { padding: 24px 20px 20px; }
  .quote p { font-size: 1.05rem; }
  .person__name { font-size: 1rem; margin-top: 14px; }
  .badges img { height: 60px; }
  .placeholder { min-height: min(var(--ph-h), 420px); }
  .placeholder__label { font-size: .8rem; padding: 8px 14px; }
  .contact-person img { width: 56px; height: 56px; }
  .site-footer { padding-top: 40px; padding-bottom: 84px; } /* 28px + chat bubble (52px, 12px from the edge on phones) */
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__legal { gap: 14px; flex-wrap: wrap; }
  .terms-note { font-size: .82rem; text-align: left; }
}

/* Narrow phones */
@media (max-width: 480px) {
  .hero__actions .btn, .cta-band__actions .btn, .section-head--split .btn { width: 100%; }
  .cta-band__actions { justify-content: stretch; }
  .btn--lg { padding: 14px 20px; font-size: .98rem; }
  .avatar-stack img { width: 38px; height: 38px; border-width: 2px; margin-left: -10px; }
  .service-card__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .filters { width: 100%; }
  .filter { flex: 1 1 auto; text-align: center; }
  .chips { gap: 6px; }
  .chip { font-size: .78rem; padding: 5px 10px; }
  .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dt { margin-top: 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
  .team-grid { gap: 12px; }
  .person__contact { font-size: .8rem; margin-inline: 12px; }
  .person__name { margin-inline: 12px; }
  .person__title { margin-inline: 12px; font-size: .875rem; } /* body text stays 14px on phones */
  .post__cta { flex-direction: column; align-items: stretch; }
  .breadcrumb { font-size: .8rem; }
}

/* Very narrow phones */
@media (max-width: 360px) {
  .container { width: min(100% - 28px, var(--container)); }
  .hero__title { font-size: 1.75rem; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .dash__cols, .dash__row { grid-template-columns: 1.3fr 1fr .5fr; } /* company column wide enough for "Kiinteistö-" + the header "Kiinnostus" */
  .dash__logo { display: none; }
  .site-header__logo img { width: 104px; }
}

/* Short landscape phones: keep the menu usable */
@media (max-height: 520px) and (max-width: 1080px) {
  .site-nav { padding-bottom: 24px; }
  .site-nav__link { padding: 11px 4px; font-size: 1rem; }
  .site-nav__mobile-extra { padding-top: 14px; gap: 10px; }
}

/* Large screens: a little more air */
@media (min-width: 1600px) {
  .hero { padding-block: 96px 112px; }
  .hero__title { font-size: 3.5rem; }
}

/* Print: navigation, footer, calls to action, embeds, the animated strip and the chat are left out; dark blocks print
   on white; cards are never cut by a page break; scroll-reveal elements are always visible */
@media print {
  .site-header, .site-footer, .cta-band, .video-modal, .nav-toggle, .placeholder, .linkedin, .hero__card, .skip-link, .chat,
  .embed, .embed__fallback, .industries, .carousel__nav, .compare__actions, .hero__actions, .video-tile__play, .video-tile__dur,
  .dash-mini, .filters, .btn { display: none !important; }
  body { color: #000; }
  .section, .stats, .channels, .page-hero, .hero, .post__header { padding: 18px 0; }
  a { text-decoration: none; color: inherit; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .channels, .section--navy, .ai-chat, .ai-chat__bubble, .metric, .aside-card--navy, .case-banner, .stats, .video-tile, .ref-card__media,
  .news-lead__media, .news-item__media, .post-card__mono, .ref-card__mono, .person__initials, .compare__maatio, .quote, .stat-callout,
  .post__cta, .placeholder, .site-nav__dropdown { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .channels *, .section--navy *, .ai-chat *, .metric *, .aside-card--navy *, .case-banner *, .ref-card__mono *, .post-card__mono * { color: #000 !important; }
  .logo-row__item { border-color: #999; }
  .logo-row__item img { filter: none; }
  .carousel { margin-inline: 0; }
  .carousel__track { overflow: visible; flex-wrap: wrap; padding: 0; } /* every customer story prints, not only the visible slides */
  .carousel__slide { flex-basis: calc(50% - 9px); } /* two stories per row on A4 */
  .compare-wrap { overflow: visible; }
  .service-card, .price-card, .ref-card, .steps__item, .includes, .aside-card, .stat, .person, .post-card, .news-item, .faq__item,
  .quote, .video-tile, .hero__video, .value-pair li, .metric, .case-banner, .compare tbody tr, .carousel__slide, .icon-list li,
  .reasons__list li, .contact-person, .gbp-card, .dash, .stat-callout { box-shadow: none; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* Grid and flex children may shrink below their content width (prevents page overflow on narrow phones) */
.service-grid > *, .price-grid > *, .ref-grid > *, .video-grid > *, .team-grid > *, .post-grid > *, .steps > *,
.includes-grid > *, .stats__grid > *, .site-footer__grid > *, .two-col > *, .data > *, .hero__inner > *, .page-hero__inner > *,
.contact > *, .booking > *, .reasons > *, .office > *, .linkedin > *, .cta-band__inner > *, .metric-grid > *, .case-banner > *,
.section-head--split > *, .hero__trust > *, .check-list li > span, .price-card__list li > span,
.dash__company, .dash__bars { min-width: 0; } /* dashboard mock: company names wrap (soft hyphens), bars shrink; the header cells keep their natural width */

/* ==========================================================================
   Word breaking (review 28.9.2026: "vientimarkkinointi / a" in the stats band)
   - No natural-language text may break at an arbitrary letter: overflow-wrap is never 'anywhere' or 'break-word'
     for words. `overflow-wrap: anywhere` also lets grid columns shrink below the longest word, which is what caused
     the arbitrary breaks in the first place.
   - Long Finnish words that sit in narrow boxes get soft hyphens (&shy;) at reviewed break points from
     content/hyphenation.json (Jinja filter `shy` in tools/build.py). The browser then breaks "vienti-" /
     "markkinointia" with a visible hyphen, in every browser.
   - `hyphens: auto` (set on body) is an extra for browsers that ship Finnish patterns (Firefox, Safari); Chrome has
     none. hyphenate-limit-chars keeps it to words of 10+ letters with 4+ letters on each side. Headings, buttons,
     navigation, kickers and numbers stay 'manual' (soft hyphens still work there).
   - Only e-mail addresses, phone numbers and URLs may break anywhere.
   ========================================================================== */
h1, h2, .btn, .site-nav__link, .kicker, .hero__eyebrow, .lang, .breadcrumb, .stat__value, .stat-callout strong,
.price-card__price, code, pre, a[href^="mailto:"], a[href^="tel:"], .site-footer__legal, .video-modal__title,
.dash__cols { hyphens: manual; -webkit-hyphens: manual; }
.prose a[href^="http"], .facts__url { overflow-wrap: anywhere; }
/* Short labels: 'balance' makes the browser break at a soft hyphen only when that saves a whole line, otherwise
   the word moves to the next line intact ("kanssamme / vientimarkkinointia", not "kanssamme vienti- / markkinointia").
   Left-aligned list items get 'pretty' (Chrome, Safari), which avoids needless hyphens as well. */
.stat__label, .stat-callout span, .price-card__name, .price-card__subtitle, .includes__title, .service-card__title,
.service-card__kicker, .ref-card__title, .ref-card__industry, .story__industry, .story__name, .metric span,
.case-banner__metrics span, .page-hero__facts span, .hero__card div, .value-pair span, .steps__item h3,
.compare__area, .compare thead th, .video-tile__label, .dash-mini__label, .dropdown__label, .dropdown__desc, .chip,
.aside-card__title, .person__title { text-wrap: balance; }
.check-list li > span, .icon-list li > span:last-child, .price-card__list li > span, .num-list li, .service-card__points span,
.compare__points li, .site-footer__links a, .faq__q, .facts dd { text-wrap: pretty; }

/* Layout fixes so that the longest words fit their boxes (measured with the word-break audit, 320 to 1601 px) */
@media (min-width: 1001px) and (max-width: 1100px) {
  /* 6 stat cells are only 123-139 px wide here; "vientimarkkinointia" needs 127 px, so keep 3 columns until 1100 */
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
}
.stat-callout strong { white-space: nowrap; flex: none; } /* "80 %" stays on one row, the label wraps */
.gbp-card__body { flex: 1 1 240px; } /* the text block keeps a real width; the CTA wraps to its own row on phones */
.aside-card .btn, .post__cta .btn { white-space: normal; text-align: center; } /* long button labels wrap on 320 px instead of pushing the card wider than the screen */
@media (max-width: 360px) {
  .post__title { font-size: clamp(1.4rem, 7vw, 2.2rem); } /* room for 20-letter title words on the narrowest phones */
}

/* ==========================================================================
   Card grids (responsive checkup 28.9.2026)
   Service, reference, blog, news, video and "what is included" grids: 3 columns, 2 columns below 1000px, 1 column
   below 640px (one shared pair of breakpoints instead of 1024/1000/960/900 and 640/600/560). The team grid: 4 / 3 /
   2 / 1 at 1000 / 700 / 360.
   The grids are built on 12 equal tracks and every card spans 12 / columns tracks, which gives exactly the same card
   widths and gutters as repeat(N, 1fr). The extra tracks make it possible to centre the cards that are left over on
   the last row (a lone card sits in the middle, a pair sits around the middle) instead of leaving them hanging at the
   left. The one-column layouts use a single track (12 tracks plus 11 gutters would be wider than a 320px screen).
   A filtered reference grid (JS adds .is-filtered) skips the centring, because hidden cards still count as children.
   No widths are set on the cards, so long content still shrinks with the columns (min-width: 0 above).
   ========================================================================== */
.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid, .team-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* 3 columns */
:is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > * { grid-column: span 4; }
:is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):last-child { grid-column: 5 / span 4; }
:is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):nth-last-child(2) { grid-column: 3 / span 4; }
.ref-grid.is-filtered > :nth-child(3n+1):last-child, .ref-grid.is-filtered > :nth-child(3n+1):nth-last-child(2) { grid-column: span 4; }
/* "What is included" with two groups: always two columns */
.includes-grid--2 > *, .includes-grid--2 > :nth-child(3n+1):last-child, .includes-grid--2 > :nth-child(3n+1):nth-last-child(2) { grid-column: span 6; }
/* 4 columns (team) */
.team-grid > * { grid-column: span 3; }
.team-grid > :nth-child(4n+1):last-child { grid-column: 5 / span 3; }
.team-grid > :nth-child(4n+1):nth-last-child(2) { grid-column: 4 / span 3; }
@media (max-width: 1000px) {
  /* 2 columns */
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > *,
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):last-child,
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):nth-last-child(2) { grid-column: span 6; }
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(2n+1):last-child { grid-column: 4 / span 6; }
  .ref-grid.is-filtered > :nth-child(3n+1):last-child, .ref-grid.is-filtered > :nth-child(3n+1):nth-last-child(2),
  .ref-grid.is-filtered > :nth-child(2n+1):last-child { grid-column: span 6; }
  /* team: 3 columns */
  .team-grid > *, .team-grid > :nth-child(4n+1):last-child, .team-grid > :nth-child(4n+1):nth-last-child(2) { grid-column: span 4; }
  .team-grid > :nth-child(3n+1):last-child { grid-column: 5 / span 4; }
  .team-grid > :nth-child(3n+1):nth-last-child(2) { grid-column: 3 / span 4; }
}
@media (max-width: 700px) {
  /* team: 2 columns */
  .team-grid > *, .team-grid > :nth-child(4n+1):last-child, .team-grid > :nth-child(4n+1):nth-last-child(2),
  .team-grid > :nth-child(3n+1):last-child, .team-grid > :nth-child(3n+1):nth-last-child(2) { grid-column: span 6; }
  .team-grid > :nth-child(2n+1):last-child { grid-column: 4 / span 6; }
}
@media (max-width: 640px) {
  /* 1 column: a single track */
  .service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid { grid-template-columns: minmax(0, 1fr); }
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > *,
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):last-child,
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(3n+1):nth-last-child(2),
  :is(.service-grid, .ref-grid, .post-grid, .news-grid, .video-grid, .includes-grid) > :nth-child(2n+1):last-child,
  .ref-grid.is-filtered > :nth-child(3n+1):last-child, .ref-grid.is-filtered > :nth-child(3n+1):nth-last-child(2),
  .ref-grid.is-filtered > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
  .video-grid { gap: 12px; }
}
@media (max-width: 360px) {
  /* team: 1 column */
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .team-grid > *, .team-grid > :nth-child(4n+1):last-child, .team-grid > :nth-child(4n+1):nth-last-child(2),
  .team-grid > :nth-child(3n+1):last-child, .team-grid > :nth-child(3n+1):nth-last-child(2), .team-grid > :nth-child(2n+1):last-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   Hover effects only for devices that can hover (mouse, trackpad). On touch screens a tap would otherwise leave a card
   "lifted" until the next tap. Colour changes and focus-visible outlines stay for everyone.
   ========================================================================== */
@media (hover: hover) {
  .btn:hover .btn__icon { transform: translateX(3px); }
  .btn--primary:hover { transform: translateY(-1px); }
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
  .service-card--static:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .case-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .video-tile:hover img { transform: scale(1.04); }
  .video-tile:hover .video-tile__play { transform: translate(-50%, -50%) scale(1.08); background: var(--lime); }
  .ref-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
  .ref-card:hover .ref-card__media img { transform: scale(1.04); }
  .person:hover .person__photo img { transform: scale(1.03); }
  .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .news-teaser:hover { border-color: var(--teal); box-shadow: var(--shadow); }
  .news-lead:hover .news-lead__media img { transform: scale(1.03); }
  .news-item:hover .news-item__media img { transform: scale(1.03); }
  .gbp-card:hover { border-color: var(--teal); box-shadow: var(--shadow); }
  .chat__toggle:hover { transform: translateY(-1px); }
}

/* Small text links: an exact 40px tall tap area without moving the surrounding text (padding and negative margin cancel out) */
.breadcrumb a, .page-hero__note a, .terms-note a, .chat__alt a, .ref-empty a, .embed__fallback a { padding-block: calc((40px - 1.6em) / 2); margin-block: calc((1.6em - 40px) / 2); }