/* =========================================================================
   NextBuild Oy - style.css
   Dark, industrial. Big light grotesk headings, near-black surfaces,
   copper/orange brand accent (from the NB logo), angular (chamfered /
   diagonal) edges.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Trust -> Intro -> Services ->
   Why -> Dark feature -> Before/after -> Reviews -> CTA -> Form -> Footer ->
   Utilities -> Animations -> Media queries
   ========================================================================= */

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Brand (Varavävy-demo): asiakkaan oma oranssi mustan ja valkoisen päällä.
     #ff5829 on poimittu prospektin omasta paletista (Wix --color_17: 255,88,41).
     Sävyt pidetään täysin neutraaleina, jotta paletti on puhdas
     valkoinen / musta / oranssi ilman sinertävää tai lämmintä vivahdetta. */
  --color-primary: #ff5829;       /* brändioranssi, valkoinen teksti tämän päällä */
  --color-primary-dark: #d8431a;  /* tummempi oranssi (hover-pyyhkäisy / painallus) */
  --color-primary-soft: rgba(255, 88, 41, 0.13); /* haalea oranssi tausta */
  --color-accent: #ff5829;        /* sama oranssi korostuksissa ja linkeissä */
  --color-accent-soft: rgba(255, 88, 41, 0.18);
  --color-on-primary: #ffffff;    /* teksti/ikonit oranssin päällä */

  /* Pinnat: valkoinen perusta, mustat kaistat (hero, asiakaspalautteet, footer) */
  --color-bg: #000000;            /* sivun perusta: musta (näkyy ylivierityksessä) */
  --color-bg-alt: #000000;        /* alt-osiot + mobiilivalikon laatikko */
  --color-bg-band: #ffffff;       /* "Miksi meidät" -kaista kääntyy valkoiseksi */
  --color-surface: #0e0e0e;       /* kohotetut kortit mustalla kaistalla */
  --color-surface-2: #161616;     /* kelluvat pinnat / lomakekentät */
  --color-ink: #000000;           /* tumman kaistan tausta */
  --color-ink-deep: #000000;      /* hero ja footer */

  /* Text */
  --color-heading: #f7f7f7;       /* headings + strong text */
  --color-text: #e2e2e2;          /* body text */
  --color-text-light: #a1a1a1;    /* muted body */
  --color-text-faint: #6f6f6f;    /* faint labels */
  --color-white: #ffffff;

  /* On-light surfaces — the Palvelut + Ennen ja jälkeen sections flip to white.
     These tokens only colour text that sits directly on that white background;
     image cards keep their own dark overlay + light text. */
  --color-light-bg: #ffffff;          /* white section background */
  --color-on-light-heading: #111111;  /* headings on white */
  --color-on-light-muted: #585858;    /* muted text on white */
  --color-on-light-field: #f4f4f4;    /* input fill inside the white contact block */
  --color-brand-plate: #ffffff;       /* white plate the partner logos sit on */
  --color-star: #fbbc05;              /* Google review star gold */

  /* Borders / hairlines: neutraalit harmaat, ei sinertävää vivahdetta */
  --color-border: #1e1e1e;        /* hairline on dark */
  --color-border-strong: #333333;
  --color-border-dark: #141414;   /* hairline inside the darkest bands */

  /* Form-state colours */
  --color-error: #e0635e;
  --color-error-bg: rgba(224, 99, 94, 0.12);
  --color-error-border: rgba(224, 99, 94, 0.4);
  --color-error-text: #f0a6a3;
  --color-success-bg: rgba(64, 190, 122, 0.12);
  --color-success-text: #8fe0b0;
  --color-success-border: rgba(64, 190, 122, 0.4);
  /* Same states on the white contact section — darkened for AA contrast */
  --color-success-text-on-light: #17794a;
  --color-success-bg-on-light: rgba(23, 121, 74, 0.10);
  --color-success-border-on-light: rgba(23, 121, 74, 0.32);
  --color-error-text-on-light: #a8322d;
  --color-error-bg-on-light: rgba(168, 50, 45, 0.09);
  --color-error-border-on-light: rgba(168, 50, 45, 0.3);

  --font-heading: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Raleway", system-ui, -apple-system, sans-serif;  /* h1 + h2 only */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --max-width: 1240px;
  --shell-width: 1500px;
  --pad-x: clamp(1.25rem, 5vw, 3.25rem);

  /* Spacing scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 7rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Radii - sharp square corners on boxes & images (no chamfers, no rounding) */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 100px;

  /* Legacy tokens kept for compatibility; corners are now rounded and section
     dividers are straight, so these are no longer used for clipping. */
  --chamfer: 22px;
  --chamfer-lg: 40px;
  --edge: clamp(38px, 6vw, 86px);

  /* Shadows - deep on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.55);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Whole-page zoom factor — see media queries below. Kept in lockstep with the
     body { zoom } rules so vh-based heights (hero) stay exactly one viewport. */
  --zoom-factor: 1;
}

/* ----------------------------- Large-screen zoom ----------------------- */
@media (min-width: 1400px) {
  body { zoom: 1.11; }
  :root { --zoom-factor: 1.11; }
}
@media (min-width: 1600px) {
  body { zoom: 1.17; }
  :root { --zoom-factor: 1.17; }
}
@media (min-width: 2000px) {
  body { zoom: 1.25; }
  :root { --zoom-factor: 1.25; }
}

/* ----------------------------- Reset & Base ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(92px * var(--zoom-factor)); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1.02rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

/* Skip link (WCAG 2.4.1) — off-screen until it takes keyboard focus, then it
   drops in above the fixed header so the first Tab press can jump the nav. */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 2000;
  transform: translate(-50%, -120%);
  padding: 0.85rem 1.5rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .skip-link { transition: transform 0.2s var(--ease-soft); }
}

/* ----------------------------- Typography ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-heading);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 450;              /* big + light is the signature */
  text-wrap: balance;
}
h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 7.2vw, 5.1rem); letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 5.2vw, 3.7rem); letter-spacing: -0.035em; line-height: 1.0; font-weight: 540; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.35rem); font-weight: 560; letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: 1.05rem; font-weight: 560; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }
.accent { color: var(--color-accent); }

/* Eyebrow: tracked label with a small angular (electric) tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 11px;
  background: var(--color-primary);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  flex-shrink: 0;
}
.eyebrow--center { justify-content: center; }

.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--color-text-light); line-height: 1.55; }

/* ----------------------------- Rounded utilities ----------------------- */
.clip-chamfer { border-radius: var(--radius-lg); overflow: hidden; }
.clip-tr { border-radius: var(--radius-xl); overflow: hidden; }
.clip-bl { border-radius: var(--radius-xl); overflow: hidden; }

/* Section dividers are straight now (no diagonal clip). */
.edge-top, .edge-bottom, .edge-both { clip-path: none; }

/* ----------------------------- Layout ---------------------------------- */
.shell { max-width: var(--shell-width); margin-inline: auto; }
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
#tyomme { background: var(--color-bg); }
/* #meista oli aiemmin valkoinen kaista. Nyt lohko on tumma brand-kaista, joten
   taustan hoitaa .dark eikä id-kohtaista ohitusta tarvita (se myös voittaisi
   spesifisyydellä ja jättäisi osion valkoiseksi). */
#arvostelut { background: var(--color-bg-alt); }
#yhteydenotto { background: var(--color-bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 720px; }
.section-head h2 { margin-top: 0.25rem; }
.section-head p:not(.eyebrow) { color: var(--color-text-light); margin-top: 1.25rem; font-size: 1.12rem; max-width: 52ch; }

.section-head--split {
  display: grid;
  gap: 1.5rem 3rem;
  max-width: none;
  align-items: end;
}
.section-head--split .section-head__aside { color: var(--color-text-light); }
.section-head--split .section-head__aside p { font-size: 1.05rem; margin-bottom: 1.1rem; }

/* ----------------------------- Buttons --------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  line-height: 1;
  min-height: 54px;
  overflow: hidden;
  transition: color 0.34s var(--ease-soft), border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.12s ease;
  isolation: isolate;
}
.btn svg { width: 26px; height: 26px; transition: transform 0.25s var(--ease-soft); }
.btn:active { transform: translateY(1px); }

/* Primary: copper fill, white text, deep copper sweeps in from the left */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.36s var(--ease-soft);
  z-index: -1;
}
.btn-primary:hover { color: var(--color-on-primary); }
.btn-primary:hover::before { transform: scaleX(1); }
.btn-primary:hover svg { transform: translate(3px, -3px); }

.btn-secondary { background: transparent; color: var(--color-heading); border: 1.5px solid var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); background: transparent; }
.btn-secondary:hover svg { transform: translate(3px, -3px); }

/* Ghost / on-dark */
.btn-ghost { background: transparent; color: var(--color-white); border: 1.5px solid rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,0.06); }
.btn-ghost:hover svg { transform: translate(3px, -3px); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.72rem 1.2rem; min-height: 46px; font-size: 0.92rem; }

/* Disabled (form submit while the request is in flight): dim it and hold back
   the hover sweep so the button reads as busy rather than clickable. */
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:disabled::before { transform: scaleX(0); }
.btn:disabled svg { transform: none; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.95rem;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-soft); }
.link-arrow:hover { color: var(--color-accent); }
.link-arrow:hover svg { transform: translate(4px, -4px); }
.link-arrow--muted { color: var(--color-text-light); }
.link-arrow--muted:hover { color: var(--color-accent); }

/* Circular "go" arrow used on image cards */
.card-go {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--color-white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background-color 0.3s var(--ease-soft), color 0.3s ease, transform 0.3s var(--ease-soft);
}
.card-go svg { width: 20px; height: 20px; transition: transform 0.3s var(--ease-soft); }

/* mobile-only CTA */
.cta-mobile { display: flex; margin-top: var(--spacing-md); }
.cta-mobile .btn { width: 100%; }
@media (min-width: 768px) { .cta-mobile { display: none; } }

/* ----------------------------- Header / Nav ---------------------------- */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--color-white);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  will-change: transform;
}
.header__inner {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding: 1rem var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.logo { display: inline-flex; align-items: center; transition: opacity 0.25s ease; position: relative; justify-self: start; }
.logo:hover { opacity: 0.82; }
/* Leveä vaakalogo: korkeus skaalautuu, jotta se mahtuu navipalkkiin myös
   kapeammilla näytöillä. */
.logo img { height: clamp(30px, 3.4vw, 40px); width: auto; }
/* Kaksi varianttia päällekkäin: vaalea läpinäkyvän navipalkin päällä, tumma
   kun palkki on kääntynyt valkoiseksi. Ristiinhäivytys samalla ajastuksella
   kuin taustan vaihto. */
.logo__img { transition: opacity 0.35s ease; }
.logo__img--tumma {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.header.scrolled .logo__img--vaalea { opacity: 0; }
.header.scrolled .logo__img--tumma { opacity: 1; }

.nav { display: contents; }
.nav__links { display: flex; align-items: center; gap: 0.1rem; justify-self: center; }
.nav__actions { display: flex; align-items: center; gap: 0.4rem; justify-self: end; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: currentColor;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.4rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-soft);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* Puhelinnumero näkyy vain mobiilivalikossa. Työpöydällä ja muilla isoilla
   näytöillä se on piilotettu navipalkista, jotta navi pysyy väljänä; numero
   palautetaan näkyviin 980px-katkolla mobiilivalikkoon. */
.nav__phone {
  display: none;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.94rem;
  padding-inline: 0.9rem 0.5rem;
  white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--color-accent); }

/* ===================== Kielivalitsin =====================
   Yksi linkki, joka vie tämän saman sivun toiskieliseen versioon. Sijaitsee
   nav__actions-lohkossa ennen puhelinnumeroa ja noudattaa navin muuta
   typografiaa. Mobiilivalikossa se asettuu omalle rivilleen puhelinnumeron
   yläpuolelle. Kohdeosoite on aina kirjoitettu sivun HTML:ään, joten linkki
   toimii myös ilman JavaScriptia ja hakukone näkee sen tavallisena linkkinä. */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.86rem;
  letter-spacing: -0.01em;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: currentColor;
  opacity: 0.75;
  white-space: nowrap;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.nav__lang svg { width: 14px; height: 14px; }
/* Varauspainike ei saa rivittya, kun navissa on nyt myos kielivalitsin. */
.nav__cta { white-space: nowrap; }
.nav__lang:hover,
.nav__lang:focus-visible { opacity: 1; }
.header.scrolled .nav__lang { color: var(--color-on-light-heading); }

@media (max-width: 1024px) {
  /* Mobiilivalikossa navin toiminnot ovat allekkain koko laatikon levyisinä.
     Kielivalitsin saa saman kohtelun, jotta se ei jää puolikkaaksi napiksi. */
  .nav__lang {
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.8rem 1rem;
    font-size: 1rem;
    color: var(--color-text);
  }
}

/* Vieritettynä navipalkki kääntyy valkoiseksi ja sisältö tummaksi. */
.header.scrolled {
  background: var(--color-light-bg);
  color: var(--color-on-light-heading);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}
.header.scrolled .nav__links a { color: var(--color-on-light-heading); }
.header.scrolled .nav__phone { color: var(--color-on-light-heading); }
/* Pudotusvalikko seuraa valkoista palkkia. */
.header.scrolled .nav__dd-menu {
  background: var(--color-light-bg);
  border-color: rgba(17, 17, 17, 0.09);
}
.header.scrolled .nav__dd-menu a { color: var(--color-on-light-heading); }
/* Sama myös Yrityksille-alavalikolle, muuten se jää tummaksi valkoisen alle. */
.header.scrolled .nav__sub-menu {
  background: var(--color-light-bg);
  border-color: rgba(17, 17, 17, 0.09);
}
.header.scrolled .nav__sub-menu a { color: var(--color-on-light-heading); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  border-radius: 0;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease-soft), opacity 0.2s ease; margin-inline: auto; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------- Hero ------------------------------------ */
.hero {
  position: relative;
  min-height: calc(95vh / var(--zoom-factor));
  min-height: calc(95dvh / var(--zoom-factor));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 8rem 0 6rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Left-weighted scrim: darkest behind the text on the left edge, fading out
     toward the right so the photo stays readable there. The vertical + radial
     layers below it are kept light so the two do not stack into mud. */
  background:
    /* Short top scrim keeps the transparent navbar readable over bright photos. */
    linear-gradient(to bottom, rgba(8,9,11,0.4) 0%, rgba(8,9,11,0.15) 110px, rgba(8,9,11,0) 190px),
    linear-gradient(to right, rgba(8,9,11,0.78) 0%, rgba(8,9,11,0.64) 26%, rgba(8,9,11,0.36) 58%, rgba(8,9,11,0.13) 85%, rgba(8,9,11,0.06) 100%),
    linear-gradient(to bottom, rgba(8,9,11,0.3) 0%, rgba(8,9,11,0.21) 42%, rgba(8,9,11,0.48) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(8,9,11,0.05) 28%, rgba(8,9,11,0.3) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }

/* Hero slideshow (index): stacked slides inside an overscanned wrapper. The
   wrapper carries the JS parallax translate; each slide crossfades via opacity
   and zooms slowly (Ken Burns) while it is visible. */
.hero__slides { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; z-index: 2; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
/* Each slide is a <picture>; its <img> fills and covers the slide box. */
.hero__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active { opacity: 1; }

.hero__inner {
  position: relative;
  width: 100%;
  /* Same shell + padding as .header__inner, so hero text lines up with the logo. */
  max-width: var(--shell-width);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.hero h1 { color: var(--color-white); margin: 1.5rem 0 1.4rem; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 560; letter-spacing: -0.04em; line-height: 1.0; text-shadow: 0 2px 30px rgba(0,0,0,0.5); max-width: 20ch; }
.hero h1 .accent { color: var(--color-accent); }
.hero__lead { color: rgba(255,255,255,0.86); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 66ch; margin: 0 0 2.2rem; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: flex-start; align-items: center; }

/* Hero Google rating — free-standing, no box */
.hero__rating { display: inline-flex; align-items: center; gap: 0.7rem; }
.hero__rating-logo { width: 24px; height: 24px; flex-shrink: 0; }
.hero__rating-text { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; color: var(--color-white); }
.hero__rating-score { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-white); letter-spacing: 0.01em; }
.hero__rating-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-star); }
.hero__rating-stars svg { width: 15px; height: 15px; }

/* Hero secondary action */
.hero__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-white); font-family: var(--font-heading); font-weight: 500; font-size: 1.06rem; letter-spacing: -0.01em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,255,255,0.5); transition: text-decoration-color 0.25s ease, color 0.25s ease; }
.hero__link svg { width: 28px; height: 28px; transition: transform 0.25s var(--ease-soft); }
.hero__link:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
.hero__link:hover svg { transform: translate(3px, -3px); color: var(--color-accent); }

/* ----------------------------- Trust strip ----------------------------- */
.trustbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-block: clamp(1.5rem, 3vw, 2.1rem); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.9rem 2.6rem; }
.trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 540; font-size: 1rem; color: var(--color-text); letter-spacing: -0.01em; }
.trust-item svg { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; }

/* ----------------------------- Intro / split --------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; object-fit: cover; border-radius: 2px; }
.split__media--portrait img { aspect-ratio: 4 / 5; height: auto; }

/* Copper stat badge with an angular cut */
.stat-badge {
  position: absolute;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 1.05rem 1.3rem;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat-badge__num { font-family: var(--font-heading); font-weight: 560; font-size: 2.1rem; letter-spacing: -0.04em; }
.stat-badge__label { font-size: 0.82rem; font-weight: 500; margin-top: 0.15rem; }
.stat-badge--br { right: -0.7rem; bottom: -0.9rem; }
.stat-badge--tl { left: -0.7rem; top: -0.9rem; }

.feature-list { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
/* Lisäpalvelut-osiossa feature-list seuraa section-headia, ei split-bodya, joten
   se saa saman otsikkovälin kuin .steps ja .svc-grid muissa osioissa. */
#lisapalvelut .feature-list { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-accent); border-radius: 0; }
.feature__icon svg { width: 23px; height: 23px; }
.feature h3 { margin-bottom: 0.3rem; }
.feature p { color: var(--color-text-light); font-size: 0.97rem; }
.intro__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ----------------------------- Services -------------------------------- */
.svc-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.svc-card {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  isolation: isolate;
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease-soft);
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s var(--ease-soft); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,9,11,0.94) 2%, rgba(8,9,11,0.64) 38%, rgba(8,9,11,0.18) 72%, rgba(8,9,11,0.05) 100%); }
.svc-card:hover img { transform: scale(1.06); }
.svc-card__body { padding: 1.4rem 1.45rem 1.5rem; }
.svc-card h3 { color: var(--color-white); font-size: 1.42rem; font-weight: 620; margin-bottom: 0.5rem; }
.svc-card p { color: rgba(255,255,255,0.82); font-size: 0.92rem; margin-bottom: 0; }
.svc-card .card-go { position: absolute; top: 1.2rem; right: 1.2rem; }
.svc-card:hover .card-go { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.svc-card:hover .card-go svg { transform: translate(2px, -2px); }

/* ----------------------------- Why / checklist ------------------------- */
/* container-type: kuvan leveys on .why__certs -laattojen mittayksikko.
   > img rajaa saannot lohkon paakuvaan: kuvan paalla olevien sertifikaattien
   omat kuvat eivat saa periytya taalta. */
.why__media { position: relative; container-type: inline-size; }
.why__media > img { width: 100%; border-radius: 2px; }
.checklist { display: grid; gap: 0; margin-top: 1.8rem; }
.check { display: grid; grid-template-columns: 30px 1fr; gap: 1rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--color-border); }
.check:last-child { border-bottom: 1px solid var(--color-border); }
.check__mark { width: 30px; height: 30px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; flex-shrink: 0; border-radius: 0; }
.check__mark svg { width: 16px; height: 16px; }
.check b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); margin-bottom: 0.2rem; }
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

/* ----------------------------- Collage (intro) ------------------------- */
.collage { position: relative; }
.collage__main { width: 100%; border-radius: var(--radius-xl); }
.collage__inset { position: absolute; width: 46%; border: 5px solid var(--color-ink); left: -1.2rem; bottom: -1.6rem; border-radius: var(--radius-lg); }

/* ----------------------------- Dark feature / brands ------------------- */
/* Solid dark band — no gradient, no border. The clean diagonal top & bottom
   edges come from clipping the section to a parallelogram and overlapping the
   neighbouring sections, so the cut corners reveal the ACTUAL adjacent sections
   (etusivulla #asiakkaat above, #tyomme below) with no stray off-colour
   triangle. */
.dark { background: var(--color-ink); color: rgba(255, 255, 255, 0.82); }
.dark .eyebrow { color: rgba(255, 255, 255, 0.72); }
.dark .eyebrow::before { background: var(--color-accent); }
.dark h2 { color: var(--color-white); }

.brand-section {
  --brand-edge: clamp(42px, 5vw, 78px);
  position: relative;
  z-index: 1;
  clip-path: polygon(0 var(--brand-edge), 100% 0, 100% calc(100% - var(--brand-edge)), 0 100%);
  margin-block: calc(var(--brand-edge) * -1);
  padding-block: calc(var(--section-y) + var(--brand-edge));
}

/* Header: heading on the left, short intro on the right */
.brand-head { display: grid; gap: 0.9rem 3rem; }
.brand-head__text { color: rgba(255, 255, 255, 0.72); font-size: 1.04rem; line-height: 1.65; margin: 0; }

/* Brand boxes — side by side, each framed with a turquoise border */
.brand-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.2rem, 4vw, 3rem); }
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--color-surface-2); }
.brand-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.brand-card__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 96px;
  background: var(--color-brand-plate);
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
}
.brand-card__logo img { width: auto; max-width: 76%; max-height: 48px; height: auto; }
.brand-card__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 600; font-size: 0.95rem; }
.brand-card__link svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease-soft); }
.brand-card:hover .brand-card__link svg { transform: translate(2px, -2px); }

/* Scanoffice importer mention — no card/border, sits beside the Mitsubishi card */
.importer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.25rem 0.25rem 0.25rem clamp(0.25rem, 1.5vw, 0.75rem);
}
.importer__logo { display: inline-flex; align-items: center; opacity: 0.95; transition: opacity 0.25s var(--ease-soft); }
.importer__logo:hover { opacity: 1; }
.importer__logo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.importer__logo img { height: 52px; width: auto; }
.importer__text { color: rgba(255, 255, 255, 0.66); font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 42ch; }

@media (min-width: 620px) {
  .brand-grid { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
}
@media (min-width: 880px) {
  .brand-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .brand-head__text { padding-bottom: 0.4rem; }
}

/* ----------------------------- Before / after -------------------------- */
.ba-lead { max-width: 60ch; }
.ba-main { margin-top: clamp(2rem, 5vw, 3rem); display: flex; flex-direction: column; gap: clamp(2rem, 8vw, 3rem); }
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  cursor: ew-resize;
  box-shadow: var(--shadow-lg);
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* "After" sits on top, clipped from the left to the handle position */
.ba-slider__after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.ba-slider__label {
  position: absolute;
  top: 1rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  background: rgba(8,9,11,0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.4rem 0.8rem;
  border-radius: 0;
  pointer-events: none;
}
.ba-slider__label--before { left: 1rem; }
.ba-slider__label--after { right: 1rem; }
.ba-slider__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 3px;
  background: var(--color-white);
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 14px rgba(0,0,0,0.5);
}
.ba-slider__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.85);
}
.ba-slider__grip svg { width: 24px; height: 24px; }
/* Invisible range input drives the slider for keyboard + a11y */
.ba-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-slider__range:focus-visible + .ba-slider__handle .ba-slider__grip { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.ba-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.ba-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-ink); }
.ba-figure img { width: 100%; display: block; }
.ba-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1rem; color: var(--color-white); background: linear-gradient(to top, rgba(8,9,11,0.85), rgba(8,9,11,0)); font-family: var(--font-heading); font-weight: 540; font-size: 0.98rem; }
.ba-figure__chip { position: absolute; top: 1rem; left: 1rem; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); font-weight: 560; font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.35rem 0.7rem; border-radius: var(--radius); }

/* -------------- White sections: Palvelut + Ennen ja jälkeen ------------- */
/* These two sections flip to a white background. Only text sitting directly on
   the white background goes dark — the section head and the on-page links.
   The service cards (.svc-card) and slider labels stay light because they sit
   on their own dark photo overlay, so they are deliberately NOT targeted here. */
#palvelut,
#tyomme {
  background: var(--color-light-bg);
}
#palvelut { padding-top: clamp(2.25rem, 4.5vw, 4.5rem); }
#palvelut .section-head h2, #palvelut .section-head h3,
#tyomme .section-head h2, #tyomme .section-head h3 { color: var(--color-on-light-heading); }
#palvelut .eyebrow,
#tyomme .eyebrow { color: var(--color-on-light-muted); }
#palvelut .section-head p:not(.eyebrow),
#tyomme .section-head p:not(.eyebrow),
#palvelut .section-head--split .section-head__aside,
#tyomme .section-head--split .section-head__aside { color: var(--color-on-light-muted); }
#palvelut .link-arrow,
#tyomme .link-arrow { color: var(--color-on-light-heading); }
#palvelut .link-arrow:hover,
#tyomme .link-arrow:hover { color: var(--color-primary); }

/* ===== Demo: light intro + contact, reference gallery ===================
   Intro (#esittely) and contact (#yhteydenotto) flip to white, like Palvelut.
   The form card stays dark on its own (self-contained). */
#esittely,
#yhteydenotto { background: var(--color-light-bg); }

/* Palvelukortit ja niitä seuraava esittely kuuluvat yhteen: kortti herättää
   kiinnostuksen, esittely vastaa siihen. Kahden täyden section-y:n väli
   katkaisi tuon yhteyden, joten kumpaakin reunaa kevennetään neljänneksellä.
   Vähennys on symmetrinen, jotta osioiden oma pystyrytmi pysyy tasapainossa. */
#palvelut.section { padding-bottom: calc(var(--section-y) * 0.75); }
#esittely.section { padding-top: calc(var(--section-y) * 0.75); }

#esittely .eyebrow,
#yhteydenotto .eyebrow { color: var(--color-on-light-muted); }
#esittely h2,
#yhteydenotto h2,
#esittely .feature h3 { color: var(--color-on-light-heading); }
#esittely .feature p { color: var(--color-on-light-muted); }

/* Huom: #meista oli aiemmin valkoinen kaista ja tarvitsi omat on-light-sävynsä.
   Nyt "Miksi Varavävy" istuu tummalla brand-kaistalla ja arvostelut valkoisella
   osiolla, joten lohko käyttää tumman pinnan oletusvärejä eikä id-kohtaisia
   ohituksia enää ole. */

/* .link-arrow on oletuksena lähes valkoinen, joten valkoisella kaistalla se
   katoaisi taustaan. Sama sävy kuin muillakin vaaleilla osioilla. */
#esittely .link-arrow,
#yhteydenotto .link-arrow { color: var(--color-on-light-heading); }
#esittely .link-arrow:hover,
#yhteydenotto .link-arrow:hover { color: var(--color-primary); }

#yhteydenotto .contact__item b,
#yhteydenotto .contact__person b { color: var(--color-on-light-heading); }
#yhteydenotto .contact__item a,
#yhteydenotto .contact__item span,
#yhteydenotto .contact__person a { color: var(--color-on-light-muted); }
#yhteydenotto .contact__item a:hover,
#yhteydenotto .contact__person a:hover { color: var(--color-primary); }
#yhteydenotto .channel-btn { color: var(--color-on-light-heading); border-color: rgba(20,22,26,0.18); }
#yhteydenotto .channel-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
/* Contact icon chips: light turquoise tint + turquoise icon (extra specificity
   so they win over the muted-span rule above). */
#yhteydenotto .contact__item .contact__item-ic { background: var(--color-primary-soft); border-color: transparent; color: var(--color-accent); }

/* Intro collage: picture-in-picture like the dark feature section, but on the
   white section the inset frame matches the page (white) instead of ink. */
#esittely .collage__main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 16px 40px rgba(8, 9, 11, 0.12); }
#esittely .collage__inset { border-color: var(--color-light-bg); }
/* Desktop: lay the smaller (top) image over the bottom-right of the tall main. */
@media (min-width: 880px) {
  #esittely .collage__inset { left: auto; right: -1.3rem; bottom: -1.3rem; width: 48%; }
}

/* Quote form: light card with a soft shadow so it lifts off the white section. */
#yhteydenotto .form {
  background: var(--color-white);
  border: 1px solid rgba(20, 22, 26, 0.07);
  box-shadow: 0 10px 28px rgba(8, 9, 11, 0.10), 0 30px 64px rgba(8, 9, 11, 0.10);
}
#yhteydenotto .field label { color: var(--color-on-light-heading); }
#yhteydenotto .field input,
#yhteydenotto .field select,
#yhteydenotto .field textarea {
  /* background-color, not the shorthand: the shorthand would wipe the select's
     custom chevron background-image and leave the dropdown with no affordance. */
  background-color: var(--color-on-light-field);
  border-color: rgba(20, 22, 26, 0.16);
  color: var(--color-on-light-heading);
}
#yhteydenotto .field input::placeholder,
#yhteydenotto .field textarea::placeholder { color: var(--color-on-light-muted); }
#yhteydenotto .field--float label { color: var(--color-on-light-muted); }
#yhteydenotto .field--float input:focus + label,
#yhteydenotto .field--float input:not(:placeholder-shown) + label,
#yhteydenotto .field--float textarea:focus + label,
#yhteydenotto .field--float textarea:not(:placeholder-shown) + label,
#yhteydenotto .field--float select:focus + label,
#yhteydenotto .field--float select:not(:has(option[value=""]:checked)) + label { color: var(--color-primary); }
#yhteydenotto .field--float input::placeholder,
#yhteydenotto .field--float textarea::placeholder { color: transparent; }
#yhteydenotto .field--float input:focus::placeholder,
#yhteydenotto .field--float textarea:focus::placeholder { color: var(--color-on-light-muted); }
#yhteydenotto .field input:focus,
#yhteydenotto .field select:focus,
#yhteydenotto .field textarea:focus {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
#yhteydenotto .form__consent-note { color: var(--color-on-light-muted); }
#yhteydenotto .field__error { color: var(--color-error); }
/* Submit feedback sits on the white form, so it needs the on-light palette. */
#yhteydenotto .form__status.ok { background: var(--color-success-bg-on-light); color: var(--color-success-text-on-light); border-color: var(--color-success-border-on-light); }
#yhteydenotto .form__status.err { background: var(--color-error-bg-on-light); color: var(--color-error-text-on-light); border-color: var(--color-error-border-on-light); }
#yhteydenotto .form__status.pending { background: var(--color-primary-soft); color: var(--color-on-light-heading); border-color: transparent; }

/* Trustbar (value promises) flips to white. The hero's lightning bottom edge is
   a clip-path that reveals whatever sits BEHIND the hero box (the dark page bg),
   so just colouring the trustbar left the zig-zag notch dark. Pull the white
   trustbar up under the hero (like #tyomme tucks under #huolto) and keep the hero
   painting on top, so the white fills the notch while the dark shape stays. */
.hero { z-index: 2; }
.trustbar {
  background: var(--color-light-bg);
  border-bottom-color: rgba(20,22,26,0.10);
  position: relative;
  z-index: 1;
}
.trust-item { color: var(--color-on-light-heading); }

/* Reference gallery (#tyomme): plain photos, no overlay/text/arrow. 3 x 2. */
.ref-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ref-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-soft); }
.ref-item:hover img { transform: scale(1.05); }
@media (min-width: 600px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .ref-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

/* ---------------------- Some-osio (#tyomme) ----------------------------
   Otsikon vieressa isommat someikonit (sama SVG kuin footerissa) ja alla
   kolme Instagram-upotusta: desktopilla 3 x 1, mobiilissa 1 x 3.
   Instagramin embed.js korvaa blockquoten iframella ja kirjoittaa sen
   leveyden ja korkeuden inline-tyyleiksi. Siksi leveys ylikirjoitetaan
   !importantilla, jotta upotus tayttaa sarakkeen laidasta laitaan.
   Korkeus jaa Instagramin mitattavaksi ja riippuu kuvasuhteesta, joten
   kortit ovat samankorkuisia vain jos julkaisut ovat samaa formaattia. */
.social-links { display: flex; align-items: center; gap: 0.35rem; margin-left: -0.6rem; }
.social-links a {
  display: grid;
  place-items: center;
  padding: 0.6rem;
  color: var(--color-on-light-heading);
  transition: color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover,
.social-links a:focus-visible { color: var(--color-primary); transform: translateY(-2px); }
.social-links svg { width: 34px; height: 34px; display: block; }

.social-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  align-items: start;
  justify-items: center;
}
/* Yhdessa sarakkeessa upotus keskitetaan ja rajataan Instagramin omaan
   540 pikselin maksimileveyteen, ettei se veny tabletilla liian leveaksi. */
.social-item { width: 100%; max-width: 540px; min-width: 0; }
.social-item .instagram-media,
.social-item iframe.instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

@media (min-width: 768px) {
  /* Ikonit oikeaan laitaan, kun otsikkolohko menee kahteen sarakkeeseen. */
  .social-links { justify-content: flex-end; margin-left: 0; margin-right: -0.6rem; }
}

@media (min-width: 920px) {
  .social-grid { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; justify-items: stretch; }
  .social-item { max-width: none; }
}

/* ----------------------------- Reviews --------------------------------- */
.reviews__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2rem; }
/* Kortti on pystysuuntainen flex-pino ja venyy rivin korkeimman mittaan (gridin
   oletus on stretch). Nimirivi saa margin-top: auto, joten se painuu kortin
   alareunaan riippumatta arvostelutekstin pituudesta. Näin vierekkäisten
   korttien nimet ja lähdemerkinnät ovat aina samalla vaakalinjalla.
   align-items: flex-start pitää tähtirivin ja logolaatan omassa leveydessään
   sen sijaan että ne venyisivät kortin reunasta reunaan. */
.review { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.8rem; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s var(--ease-soft); border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: flex-start; }
.review:hover { box-shadow: var(--shadow); border-color: var(--color-border-strong); transform: translateY(-3px); }
.review__stars { color: var(--color-accent); display: inline-flex; gap: 1px; margin-bottom: 0.9rem; }
.review__stars svg { width: 17px; height: 17px; }
.review p { font-size: 1rem; color: var(--color-text); margin-bottom: 1.3rem; }
.review__who { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; width: 100%; }
.review__avatar { width: 42px; height: 42px; background: var(--color-primary-soft); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 560; font-size: 1rem; border-radius: 0; }
.review__name { font-family: var(--font-heading); font-weight: 560; color: var(--color-heading); font-size: 0.95rem; }
.review__src { font-size: 0.82rem; color: var(--color-text-light); }

/* --------------------- Google-arvosana arvostelu-osiossa ---------------------
   Istuu arvostelu-osion otsikkorivin oikeaan laitaan, alareunastaan samassa
   linjassa otsikon kanssa (.brand-head on desktopilla 1fr 1fr, align-items: end).
   Korvaa aiemman lyhyen kuvaustekstin. Mobiilissa sarake on yksi, jolloin
   rusetti valuu otsikon alle vasempaan laitaan. G-logo on inline-SVG samalla
   kaavalla kuin arvostelukorttien .review__google, joten ei uusia latauksia. */
.g-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  justify-self: start;
}
.g-rating__logo { display: inline-flex; width: 24px; height: 24px; flex-shrink: 0; }
.g-rating__logo svg { display: block; width: 100%; height: 100%; }
.g-rating__score {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}
/* Tahdet: terava viisisakarainen, kultainen --color-star (sama savy kuin
   Muuttomaailman rusetissa). Viimeinen tahti on 60 % tayteen varjatty, koska
   keskiarvo on 4,6. */
.g-rating__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-star); }
.g-rating__stars svg { display: block; width: 17px; height: 17px; }

/* Valkoisella osiolla sama kaava kuin .section--light .review */
.section--light .g-rating {
  background: var(--color-white);
  border-color: rgba(20, 22, 26, 0.09);
  box-shadow: 0 10px 28px rgba(8, 9, 11, 0.07);
}
.section--light .g-rating__score { color: var(--color-on-light-heading); }

@media (min-width: 880px) {
  .g-rating { justify-self: end; }
}

/* ----------------------------- CTA banner ------------------------------ */
.cta-banner { background: var(--color-primary); color: var(--color-on-primary); position: relative; overflow: hidden; }
.cta-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px); }
.cta-banner__inner { position: relative; text-align: center; max-width: 760px; margin-inline: auto; }
.cta-banner h2 { color: var(--color-white); }
.cta-banner p { font-size: 1.12rem; margin: 1.1rem auto 2rem; max-width: 38em; color: rgba(255,255,255,0.92); }
.cta-banner .btn-primary { background: var(--color-ink); color: var(--color-on-primary); }
.cta-banner .btn-primary::before { background: rgba(0,0,0,0.35); }
.cta-banner .btn-primary:hover { color: var(--color-white); }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact__item { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.contact__item-ic { width: 46px; height: 46px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-accent); display: grid; place-items: center; border-radius: 0; }
.contact__item-ic svg { width: 22px; height: 22px; }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-accent); }
.contact__people { display: grid; gap: 0.55rem; margin-top: 0.2rem; }
.contact__person { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.contact__person b { color: var(--color-heading); font-family: var(--font-heading); font-weight: 560; font-size: 0.92rem; }
.contact__person a { color: var(--color-text-light); font-size: 0.92rem; }
.contact__person a:hover { color: var(--color-accent); }
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--color-border-strong); font-weight: 560; font-size: 0.9rem; font-family: var(--font-heading); color: var(--color-text); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; border-radius: var(--radius-pill); }
.channel-btn svg { width: 18px; height: 18px; }
.channel-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }

.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.7rem, 3vw, 2.5rem); border-radius: var(--radius-lg); }

/* Honeypot — a real, fillable field that no human ever sees. Moved off-screen
   rather than display:none, because spam bots routinely skip hidden fields but
   happily fill positioned ones. Kept out of the tab order in the HTML
   (tabindex="-1"), which is also what makes the aria-hidden wrapper valid. */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-heading); font-weight: 560; font-size: 0.88rem; color: var(--color-heading); }
.field label .req { color: var(--color-error); }
/* Optional-field hint: inherits the label's colour in every state (resting,
   floated, on dark or on the white contact section) and just sits back. */
.field label .opt { font-weight: 400; font-size: 0.85em; opacity: 0.72; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(224,99,94,0.18); }

/* Floating label: label rests inside the field as a placeholder, then
   shrinks and rises to the top edge once the field is focused or filled. */
.field--float { position: relative; }
.field--float input,
.field--float select,
.field--float textarea { padding-top: 1.45rem; padding-bottom: 0.45rem; }
.field--float textarea { padding-top: 1.55rem; }
.field--float label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}
.field--float input:focus + label,
.field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label,
.field--float textarea:not(:placeholder-shown) + label,
.field--float select:focus + label,
.field--float select:not(:has(option[value=""]:checked)) + label {
  transform: translateY(-0.62rem) scale(0.72);
  color: var(--color-accent);
}
/* Hide the placeholder text while the label is resting over it; reveal any
   descriptive hint only once the label has floated up on focus. */
.field--float input::placeholder,
.field--float textarea::placeholder { color: transparent; transition: color 0.18s ease; }
.field--float input:focus::placeholder,
.field--float textarea:focus::placeholder { color: var(--color-text-faint); }
.field__error { color: var(--color-error-text); font-size: 0.8rem; min-height: 1em; }
.form__consent-note { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 1.2rem; line-height: 1.55; }
.form__consent-note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.form__consent-note a:hover { color: var(--color-primary); }
.form__status { margin-top: 1rem; font-size: 0.92rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); display: none; }
.form__status.ok { display: block; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.form__status.err { display: block; background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }
.form__status.pending { display: block; background: var(--color-surface-2); color: var(--color-text-light); border: 1px solid var(--color-border-strong); }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; border-top: 1px solid var(--color-border); }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); }
.footer__brand img { height: 38px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 32ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.footer__badge { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-strong); color: rgba(255,255,255,0.72); border-radius: var(--radius); }
.footer h3 { color: var(--color-white); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a, .footer__col span { font-size: 0.95rem; color: rgba(255,255,255,0.62); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer__contact-line svg { width: 16px; height: 16px; color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
/* Bottom bar: stacked and left-aligned on mobile, one row on desktop (see the
   880px block). The margin reset matters — p keeps its global 1rem bottom
   margin otherwise, and flex alignment counts that margin, which pushes the
   copyright line above the Tietosuojaseloste link. */
.footer__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-top: 2rem; font-size: 0.85rem; }
.footer__bottom p { margin: 0; }
.footer__bottom-end { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.footer__legal { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__legal:hover { color: var(--color-accent); }
/* Kaksi oikeudellista linkkia (tietosuojaseloste ja ehdot) pysyvat samalla
   rivilla myos kapealla naytolla, hiusviiva erottimena. */
.footer__legals { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.footer__legals .footer__legal + .footer__legal { padding-left: 1.1rem; border-left: 1px solid var(--color-border-strong); }
.footer__credit a { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__credit a:hover { color: var(--color-accent); }
/* Kuvakkeet ilman kehystä: merkit ovat tunnistettavia jo sellaisenaan, ja
   laatikko vain kilpaili footerin muun rakenteen kanssa. Kuvake on kasvatettu
   18 -> 26 px, ja anchorin padding pitää kosketusalueen 40 px:ssä vaikka
   kehystä ei näy. Hover noudattaa footerin muiden linkkien logiikkaa. */
.footer__socials { display: flex; align-items: center; gap: 0.85rem; margin-left: -0.45rem; margin-top: 1.9rem; }
.footer__socials a { display: grid; place-items: center; padding: 0.45rem; color: rgba(255,255,255,0.72); transition: color 0.2s ease, transform 0.2s ease; }
.footer__socials a:hover { color: var(--color-accent); transform: translateY(-2px); }
.footer__socials svg { width: 26px; height: 26px; display: block; }

/* Touch targets on phones (WCAG 2.5.8). Standalone link lists — footer menus,
   contact details, breadcrumb, the Palvelut sub-menu — render as ~18-22 px tall
   text, which is below the 24 px minimum for targets that are not inline in a
   sentence. Growing the box with padding rather than font-size keeps the
   layout identical; the list gaps shrink by the same amount that the padding
   adds, so the visual rhythm does not change. */
@media (max-width: 767px) {
  .footer__col ul { gap: 0.1rem; }
  /* Rajattu linkkilistoihin (ul), koska sama sarakkeessa oleva .footer__socials
     hoitaa kosketusalueensa omalla paddingillaan. Ilman ul-rajausta
     display: inline-block söisi kuvakkeiden keskityksen. */
  .footer__col ul a,
  .footer__contact-line a,
  .contact__item a,
  .footer__legal,
  .footer__credit a,
  .breadcrumb a,
  .breadcrumb [aria-current="page"] {
    display: inline-block;
    padding-block: 0.4rem;
    min-height: 24px;
  }
  .footer__contact-line { align-items: center; }
  .footer__contact-line svg { margin-top: 0; }
  .nav__dd-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* ----------------------------- Error page ------------------------------ */
.error-page { min-height: calc(72vh / var(--zoom-factor)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 9rem 4rem; }
.error-page h1 { font-size: clamp(3.5rem, 13vw, 8rem); margin-bottom: 0.5rem; font-weight: 460; color: var(--color-accent); }
.error-page p { color: var(--color-text-light); max-width: 38ch; margin-bottom: 1.5rem; }
.error-page .btn { margin-bottom: 1.5rem; }

/* ----------------------------- Legal / privacy page -------------------- */
.legal-hero {
  position: relative;
  background: var(--color-ink-deep);
  padding-block: 9rem clamp(2.5rem, 6vw, 4rem);
  z-index: 1;
}
.legal-hero .breadcrumb { margin-bottom: 1.2rem; }
.legal-hero h1 { color: var(--color-white); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 460; margin-bottom: 0.75rem; }
.legal-hero__meta { color: var(--color-text-light); font-size: 0.95rem; }

.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.8rem; color: var(--color-heading); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin-top: 1.8rem; color: var(--color-heading); }
.legal p { color: var(--color-text-light); line-height: 1.75; margin-top: 1rem; }
.legal ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: 0.55rem; }
.legal li { color: var(--color-text-light); line-height: 1.7; padding-left: 0.2rem; }
.legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
.legal a:hover { color: var(--color-primary); }
.legal strong, .legal b { color: var(--color-text); font-weight: 600; }
.legal__contact {
  margin-top: 2.5rem;
  padding: 1.5rem 1.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.legal__contact p { margin-top: 0.4rem; }
.legal__contact p:first-child { margin-top: 0; }

/* ----------------------------- Utilities / reveal ---------------------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
.js .reveal.in, .js .reveal.is-visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: 0.09s; }
.delay-2 { transition-delay: 0.18s; }
.delay-3 { transition-delay: 0.27s; }
.delay-4 { transition-delay: 0.36s; }
.delay-5 { transition-delay: 0.45s; }
.no-scroll { overflow: hidden; }

/* ----------------------------- Animations ------------------------------ */
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.05); } }

.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
/* .is-leaving keeps the same animation declaration applied while the slide
   fades out, so the zoom continues instead of snapping back to scale(1).
   Runs slightly past the 5 s rotation + 1.2 s fade, then holds the last frame.
   Zoom strength = the scale() in heroKenBurns above; speed = duration here. */
.hero__slide.is-active,
.hero__slide.is-leaving { animation: heroKenBurns 7.5s linear forwards; }
.hero__inner > * { animation: fadeUp 0.9s var(--ease-soft) both; }
.hero__rating { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.24s; }
.hero__lead { animation-delay: 0.42s; }
.hero__cta { animation-delay: 0.58s; }

/* ----------------------------- Media queries --------------------------- */
@media (min-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { aspect-ratio: 4 / 5; }
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .feature-list { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; }
  .feature-list--3 { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2.6rem; }
  /* Kolmen kortin ruudukko omalle riville jo tabletilla, jottei viimeinen kortti
     jää yksin toiselle riville kahden sarakkeen asettelussa. */
  .svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}

@media (min-width: 880px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--intro { grid-template-columns: 0.9fr 1.1fr; }
  .split--reverse .split__media { order: 2; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .ba-main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
  .footer__bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem; }
  .footer__bottom-end { flex-direction: row; align-items: center; gap: 1.1rem; }
  /* Hairline divider so the copyright and the privacy link read as one row. */
  .footer__bottom-end .footer__legals { padding-left: 1.1rem; border-left: 1px solid var(--color-border-strong); }
}

@media (min-width: 1024px) {
  /* Neljä palvelua yhdellä rivillä: span 3 / 12 kutakin. Aiempi
     .svc-card--feature-poikkeus (span 4) poistui, kun palveluita on neljä
     kuuden sijaan eikä kortteja tarvitse enää jakaa kahdelle riville. */
  .svc-grid { grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
  .svc-grid > .svc-card { grid-column: span 3; }
  /* Kolmen kortin variantti jakaa saman 12 sarakkeen ruudukon: span 4 x 3. */
  .svc-grid--3 > .svc-card { grid-column: span 4; }
}

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  .header { will-change: auto; }
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 84vw);
    background: var(--color-bg-alt);
    color: var(--color-text);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-soft);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__links a { padding: 1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); opacity: 1; }
  .nav__links a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { display: inline-flex; color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.05rem; }
  /* Varauspainike on mobiilissa valikon tärkein toiminto, joten se leviää
     laatikon levyiseksi puhelinnumeron alle eikä jää työpöydän btn-sm-kokoon. */
  .nav__cta { display: inline-flex; width: 100%; margin-top: 1.25rem; padding: 1.05rem 1.6rem; min-height: 54px; font-size: 1rem; }
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  /* When the drawer is open, the top header strip takes the drawer's surface so
     the logo + close icon stay legible. */
  body.no-scroll .header {
    background: var(--color-bg-alt);
    box-shadow: none;
    color: var(--color-text);
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Valikon ollessa auki palkki on tumma, joten vaalea logo palaa käyttöön. */
  body.no-scroll .header .logo__img--vaalea { opacity: 1; }
  body.no-scroll .header .logo__img--tumma { opacity: 0; }

  /* Vieritettynä palkki on valkoinen ja sen teksti tummaa, joten myös auki
     vedetty laatikko kääntyy valkoiseksi. Muuten tumma teksti jäisi mustaa
     pintaa vasten näkymättömiin. Hiusviivat vaihtuvat vaaleiksi samalla,
     koska --color-border on tarkoitettu tummalle pinnalle. */
  .header.scrolled .nav {
    background: var(--color-light-bg);
    color: var(--color-on-light-heading);
    border-left-color: rgba(17, 17, 17, 0.09);
  }
  .header.scrolled .nav__links a,
  .header.scrolled .nav__dd-menu a { border-bottom-color: rgba(17, 17, 17, 0.12); }
  /* Palkkirivi seuraa laatikkoa: se ei ota tummaa pintaa eikä vaaleaa logoa,
     vaan pysyy valkoisena kuten vieritetty palkki muutenkin. */
  body.no-scroll .header.scrolled {
    background: var(--color-light-bg);
    color: var(--color-on-light-heading);
  }
  body.no-scroll .header.scrolled .logo__img--vaalea { opacity: 0; }
  body.no-scroll .header.scrolled .logo__img--tumma { opacity: 1; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(5,6,8,0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}

/* ----- Mobile hero: left-aligned, larger heading ----- */
@media (max-width: 767px) {
  main { --hero-edge: clamp(30px, 9vw, 58px); }
  .hero {
    min-height: 95vh;
    min-height: 95dvh;
    text-align: left;
    align-items: center;
    padding: 6rem 0 3.25rem;
    /* Diagonal bottom edge: lower-left to higher-right, so the white trustbar
       behind it reveals a top edge that rises from left to right. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-edge)), 0 100%);
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  .hero__rating { align-self: flex-start; }
  /* Text runs nearly edge to edge on mobile, so keep the left-dark fade but let
     the right side stay dark enough to read against. */
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(8,9,11,0.36) 0%, rgba(8,9,11,0.11) 100px, rgba(8,9,11,0) 170px),
      linear-gradient(to right, rgba(8,9,11,0.76) 0%, rgba(8,9,11,0.63) 45%, rgba(8,9,11,0.44) 100%),
      linear-gradient(to bottom, rgba(8,9,11,0.27) 0%, rgba(8,9,11,0.2) 42%, rgba(8,9,11,0.46) 100%);
  }
  .split__media--portrait img { aspect-ratio: 3 / 2; }
  .hero h1 {
    font-size: clamp(2.35rem, 8.4vw, 3rem);
    font-weight: 540;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 1.15rem 0 1.1rem;
    max-width: 15ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  /* Pull the white trustbar up under the hero so it fills the diagonal wedge,
     and pad the top so the value promises clear the slanted seam. */
  .trustbar { margin-top: calc(var(--hero-edge) * -1); padding-top: calc(clamp(1.5rem, 3vw, 2.1rem) + var(--hero-edge)); }
  .trustbar__inner { justify-content: flex-start; align-items: flex-start; gap: 1rem 2.6rem; }
  .trust-item { font-size: 1.1rem; }
  .trust-item svg { width: 24px; height: 24px; }

  .ba-slider { aspect-ratio: 3 / 4; }

  /* Intro section: hide the photo collage on mobile */
  #esittely .collage--intro { display: none; }
}

@media (max-width: 520px) {
  .collage__inset { position: static; width: 100%; margin-top: 1rem; border: none; }
  .stat-badge__num { font-size: 1.8rem; }
}

/* ----------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__poster { animation: none; }
  .hero__slide { animation: none; }
}

/* =========================================================================
   Service pages (/palvelut/*) + Palvelut nav dropdown
   Self-contained block, appended last so its responsive overrides win over
   the earlier nav rules by source order. Reuses existing tokens + components
   (.split, .checklist, .cta-banner, .form, .hero__media/.hero__poster).
   ========================================================================= */

/* ---------- Nav: Palvelut dropdown (desktop) ---------- */
.nav__dd { position: relative; display: flex; align-items: center; }
.nav__dd-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__dd-caret { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.28s var(--ease-soft); }
.nav__dd-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 290px;
  padding: 0.5rem;
  display: grid;
  gap: 1px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-soft), visibility 0s linear 0.22s;
  z-index: 1001;
}
.nav__dd:hover .nav__dd-menu,
.nav__dd:focus-within .nav__dd-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-soft), visibility 0s;
}
.nav__dd:hover .nav__dd-caret,
.nav__dd:focus-within .nav__dd-caret { transform: rotate(180deg); }
.nav__dd-menu a {
  display: block;
  padding: 0.72rem 0.95rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  opacity: 1;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav__dd-menu a::after { display: none; }
.nav__dd-menu a:hover,
.nav__dd-menu a:focus-visible { background: var(--color-primary-soft); color: var(--color-accent); }
.nav__dd-menu a[aria-current] { background: var(--color-primary-soft); color: var(--color-accent); }

/* ---------- Service hero (low / "matala") ---------- */
.svc-hero {
  /* Shallower (gentler) diagonal divider than the regular section edge. */
  --svc-edge: clamp(20px, 3vw, 44px);
  position: relative;
  min-height: 50vh;
  min-height: 50dvh;
  display: flex;
  align-items: flex-end;
  padding-block: 9rem clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  z-index: 1;
  clip-path: none;
}
/* The hero's diagonal clip leaves a transparent wedge at its bottom. Pull the
   following section up under it so the wedge fills with the page base colour.
   On service pages the section shading order is flipped, so the section right
   under the hero is the darker base tone and sits with a tighter top padding so
   its heading rides higher under the hero. */
.svc-hero + .section {
  --svc-edge: clamp(20px, 3vw, 44px);
  margin-top: calc(var(--svc-edge) * -1);
  padding-top: calc(var(--section-y) * 0.5 + var(--svc-edge));
}
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero__c > * { animation: fadeUp 0.85s var(--ease-soft) both; }
.svc-hero .breadcrumb { animation-delay: 0.05s; }
.svc-hero h1 { animation-delay: 0.16s; }
.svc-hero__lead { animation-delay: 0.3s; }
.svc-hero__cta { animation-delay: 0.44s; }
.svc-hero h1 { color: var(--color-white); max-width: 19ch; margin-bottom: 1.2rem; text-shadow: 0 2px 30px rgba(0,0,0,0.5); font-size: clamp(2.5rem, 5.6vw, 4.2rem); font-weight: 460; }
.svc-hero__lead { color: rgba(255,255,255,0.88); font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 56ch; margin-bottom: 2rem; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.svc-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: center; }
.svc-hero .hero__link { font-size: 1rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; color: rgba(255,255,255,0.7); margin-bottom: 1.3rem; }
.breadcrumb a { color: rgba(255,255,255,0.7); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--color-white); }
.breadcrumb svg { width: 13px; height: 13px; opacity: 0.55; }
.breadcrumb [aria-current="page"] { color: var(--color-accent); }

/* ---------- Service intro lead paragraph ---------- */
.svc-intro__lead { color: var(--color-text-light); font-size: 1.12rem; margin-top: 1.1rem; max-width: 56ch; }
.svc-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ---------- Gallery (pages without before/after pairs) ---------- */
.svc-gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.svc-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 2.5rem); }
.price-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.9rem 1.7rem; border-radius: var(--radius-lg); }
.price-card__amount { font-family: var(--font-heading); font-weight: 560; color: var(--color-accent); font-size: clamp(1.8rem, 3vw, 2.35rem); letter-spacing: -0.03em; line-height: 1; margin-bottom: 0.6rem; }
.price-card h3 { margin-bottom: 0.5rem; }
.price-card p { color: var(--color-text-light); font-size: 0.96rem; }
.price-note { color: var(--color-text-light); font-size: 0.92rem; margin-top: 1.3rem; max-width: 60ch; }

/* ---------- FAQ (native <details> accordion) ---------- */
.faq-list { display: grid; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 2.8rem); align-items: start; }
@media (min-width: 760px) { .faq-list { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.1rem; } }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color 0.2s ease; }
.faq-item[open] { border-color: var(--color-border-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 560; font-size: clamp(1.02rem, 1.6vw, 1.14rem); color: var(--color-heading); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.faq-item__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-accent); transition: transform 0.2s var(--ease-soft); }
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__body { padding: 0 1.5rem 1.4rem; color: var(--color-text-light); overflow: hidden; }
.faq-item__body p { margin-bottom: 0.7rem; }
.faq-item__body p:last-child { margin-bottom: 0; }
/* Soft reveal: the answer fades in while the JS accordion sweeps the height
   open. Both run 200 ms so the box opens as one motion. */
@keyframes faqReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-item[open] .faq-item__body { animation: faqReveal 0.2s var(--ease-soft); }
/* Service-page UKK: on mobile the preceding section's CTA crowds the heading,
   so give the section extra room above. */
@media (max-width: 759px) {
  #ukk.section { padding-top: calc(var(--section-y) + 2.5rem); }
}

/* Before / after: in-image work-quality tag (bottom-left of each slider) */
.ba-item { display: flex; flex-direction: column; }
.ba-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: rgba(8, 9, 11, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.42rem 0.85rem;
  border-radius: 0;
  pointer-events: none;
}

/* Muut palvelut -osio (palvelusivut). Kun palveluita on neljä, ristiinlinkkejä
   on aina kolme, joten ne mahtuvat yhdelle riville eikä karusellia tarvita.
   .svc-grid--3 käyttää samaa ruudukkoa kuin etusivun palvelukortit. */
.svc-grid--3 { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* ---------- Service pages: responsive ---------- */
@media (min-width: 700px) {
  .svc-gallery { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .nav__dd { display: block; width: 100%; }
  .nav__dd-toggle { width: 100%; justify-content: space-between; }
  .nav__dd-caret { display: inline-flex; }
  /* Mobiilissa avaustila on .open, ei fokus. Ilman tätä nollausta nuoli jäisi
     käännetyksi valikon sulkemisen jälkeen, koska napautettu linkki pitää
     fokuksen ja :focus-within kääntää nuolen työpöytäsäännössä. */
  .nav__dd:focus-within .nav__dd-caret { transform: none; }
  .nav__dd.open .nav__dd-caret { transform: rotate(180deg); }
  .nav__dd-menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    clip-path: none;
    padding: 0 0 0 0.95rem;
    gap: 0;
    /* Collapsed by default in the mobile drawer; expands when .nav__dd.open */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.34s var(--ease-soft);
  }
  .nav__dd.open .nav__dd-menu { max-height: 32rem; }
  .nav__dd-menu a { padding: 0.82rem 0; font-size: 1.02rem; color: var(--color-text-light); border-bottom: 1px solid var(--color-border); }
  .nav__dd-menu a:last-child { border-bottom: none; }
}

/* Palvelusivujen esittelylohko puhelimella ja tabletilla: kahden sarakkeen
   taitto katkeaa 880px:ssä, jolloin lohko valuu yhdelle palstalle. Kuva on
   lähdejärjestyksessä ennen tekstiä eikä order-sääntöjä ole tällä leveydellä,
   joten se asettuu ylös ja tekstit sen alle. Pystykuva rajataan 4:3:een, jotta
   se ei työnnä sisältöä ruudun alalaidan taakse. */
@media (max-width: 879px) {
  .svc-split .split__media img,
  .svc-split .split__media--portrait img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 767px) {
  /* Alapadding on selvästi ylipainotettu, koska seuraava osio vedetään heron
     päälle --svc-edgen verran (20-44 px). Ilman lisävaraa nappirivi ja
     puhelinlinkki jäävät kiinni heron alareunaan puhelimella. */
  .svc-hero { min-height: 54vh; min-height: 54dvh; padding-block: 7rem clamp(3.75rem, 11vw, 5rem); }
  /* Palvelusivujen hero on mobiilissa muita svc-hero-sivuja (meista,
     muuttolaskuri) korkeampi, jotta taustakuva pääsee esiin. */
  .svc-hero--tall {
    min-height: 80vh;
    min-height: 80dvh;
    /* Lisä-alapadding nostaa sisältöä 16 px irti heron alareunasta. */
    padding-bottom: calc(clamp(3.75rem, 11vw, 5rem) + 1rem);
  }
  .svc-hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.3rem); font-weight: 540; max-width: 15ch; }
}

/* ----------------------------- 404 error page -------------------------- */
.error-page {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-md);
  padding-block: var(--spacing-2xl);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  margin: 0;
}
.error-page h1 { margin: 0; }
.error-page p { color: var(--color-text-light); max-width: 46ch; margin: 0 auto; }
.error-page .btn { margin-top: var(--spacing-xs); }
.error-page__contact { font-size: 0.95rem; }
.error-page__contact a { color: var(--color-accent); }

/* =========================================================================
   Service pages: light content sections, process steps, 3-up gallery
   Appended last so these overrides win by source order.
   ========================================================================= */

/* ---------- Light (white) content section ---------- */
.section--light { background: var(--color-light-bg); }
.section--light .eyebrow { color: var(--color-on-light-muted); }
.section--light h2,
.section--light h3 { color: var(--color-on-light-heading); }
.section--light .section-head p:not(.eyebrow),
.section--light .section-head--split .section-head__aside,
.section--light .svc-intro__lead,
.section--light .feature p { color: var(--color-on-light-muted); }
.section--light .link-arrow { color: var(--color-on-light-heading); }
.section--light .link-arrow:hover { color: var(--color-primary); }
.section--light .check b { color: var(--color-on-light-heading); }
.section--light .check span:not(.check__mark) { color: var(--color-on-light-muted); }
.section--light .check { border-color: rgba(20, 22, 26, 0.12); }
.section--light .split__media img { box-shadow: 0 16px 40px rgba(8, 9, 11, 0.12); }

/* ---------- Process steps ---------- */
.steps { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s var(--ease-soft);
}
.step:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow); transform: translateY(-3px); }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.5vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-accent);
}
.step h3 { margin: 1.1rem 0 0.55rem; }
.step p { color: var(--color-text-light); font-size: 0.96rem; margin: 0; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Diagonal section edges (like the front page brand band) ----
   The section is clipped to a parallelogram and pulled over its neighbours
   with negative margins, so the cut-corner triangles reveal the ACTUAL
   adjacent sections (dark page base on the service pages). */
.section--diag {
  --diag-edge: clamp(42px, 5vw, 78px);
  position: relative;
  z-index: 1;
  clip-path: polygon(0 var(--diag-edge), 100% 0, 100% calc(100% - var(--diag-edge)), 0 100%);
  margin-block: calc(var(--diag-edge) * -1);
  padding-block: calc(var(--section-y) + var(--diag-edge));
}

/* ---------- 3-up photo gallery (service pages) ---------- */
@media (min-width: 700px) {
  .svc-gallery--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-gallery--3 img { aspect-ratio: 3 / 4; }
}

/* "Miksi Varavävy" -lohko puhelimella ja tabletilla: kuva pysyy näkyvissä myös
   yhden palstan taitossa, mutta se siirretään order-arvolla tekstien alle.
   Otsikko ja checklist ovat lohkon asia, kuva on kuvitusta, joten lukija saa
   sisällön ensin. Rajaus 4:3, jottei pystykuva täytä koko ruutua.
   Koskee myös etusivun #meista-lohkoa, jonka kuva on jo valmiiksi vaaka. */
@media (max-width: 879px) {
  .why__media { order: 2; }
  .why__media > img {
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

/* =========================================================================
   Palvelusivut: lisäkomponentit
   Liitetty viimeiseksi, joten nämä voittavat lähdejärjestyksessä. Kaikki
   käyttävät olemassa olevia tokeneita, uusia värejä ei keksitä.
   ========================================================================= */

/* ---------- Muuttolaskurin nostolaatikko (vain muuttoon liittyvät sivut) ---
   Sijoitetaan "Näin työ etenee" -osion loppuun, jossa kävijä on juuri lukenut
   miten muutto etenee ja seuraava kysymys on hinta. */
.calc-cta {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
/* Kuvake ilman taustalaatikkoa: pelkkä iso laskurin ikoni korostusvärillä.
   Viivaa ohennetaan, koska sama piirros lihoisi isossa koossa raskaaksi. */
.calc-cta__ic {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.calc-cta__ic svg { width: 68px; height: 68px; stroke-width: 1.8; }
.calc-cta__body h3 { margin-bottom: 0.45rem; font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.calc-cta__body p { color: var(--color-text-light); font-size: 0.99rem; margin: 0; max-width: 54ch; }
.calc-cta .btn { white-space: nowrap; }
@media (min-width: 860px) {
  .calc-cta { grid-template-columns: 68px 1fr auto; }
}
@media (max-width: 859px) {
  /* Kuvake näkyy myös kapealla ruudulla, mutta hieman pienempänä. */
  .calc-cta__ic { width: 52px; height: 52px; }
  .calc-cta__ic svg { width: 52px; height: 52px; }
  .calc-cta { gap: 1.1rem; }
  .calc-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- Arvostelukortti: asiakkaan logo ----------------------------- */
/* Logot ovat pääosin tummia merkkejä läpinäkyvällä tai valkoisella pohjalla,
   joten ne eivät erotu mustalla kaistalla. Jokainen istuu valkoisella laatalla,
   jolloin kaikki asiakkaat näyttäytyvät samanarvoisina riippumatta siitä, onko
   logo yksi- vai monivärinen. Korkeus on lukittu, leveys saa elää, jotta sekä
   neliömäiset (Pentik) että hyvin leveät (Halonen) logot näkyvät kokonaan. */
.review__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-plate);
  padding: 0.5rem 0.8rem;
  height: 46px;
  min-width: 92px;
  margin-bottom: 1.3rem;
  border-radius: var(--radius);
}
/* Rajataan laatikolla, ei kiinteällä korkeudella: neliömäinen logo (Pentik,
   Annala & Kurtén) saa koko 34 px:n korkeuden, kun taas hyvin leveä (Halonen)
   törmää ensin max-widthiin ja kutistuu matalammaksi. Näin optinen koko pysyy
   suunnilleen samana, vaikka kuvasuhteet vaihtelevat 1:1 ja 6:1 välillä. */
.review__brand img {
  max-height: 34px;
  max-width: 124px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Logollisessa kortissa nimikirjainpallo on turha toisto, koska tunnistettava
   merkki on jo ylhäällä. Nimi ja yritys riittävät. */
.review--brand .review__avatar { display: none; }
.review--brand .review__who { gap: 0; }

/* ---------- Asiakaslogoseinä (Meistä-sivu) ------------------------------ */
/* Sama valkoinen laatta kuin arvostelukorteissa, jotta eri väriset ja eri
   muotoiset logot näyttäytyvät yhdenmukaisina. Rivillä on 2 logoa puhelimella
   ja 4 työpöydällä, jolloin kaikki 8 logoa asettuvat kahteen täyteen riviin
   eikä viimeinen rivi jää vajaaksi. */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-plate);
  border: 1px solid rgba(20, 22, 26, 0.08);
  padding: 1.1rem 1.2rem;
  min-height: 92px;
  border-radius: var(--radius-lg);
}
.logo-wall__item img {
  max-height: 40px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Logot ovat asiakkaiden omia merkkejä, joten värit jätetään koskematta.
     Pieni läpinäkyvyys tasaa kirjavan rivin ja kirkastuu osoittimen alla. */
  opacity: 0.86;
  transition: opacity 0.25s ease;
}
.logo-wall__item:hover img { opacity: 1; }
@media (min-width: 560px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Arvostelukortti: Google-lähde ------------------------------- */
.review__src--google { display: inline-flex; align-items: center; gap: 0.4rem; }
.review__google { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; }
.review__google svg { width: 100%; height: 100%; }

/* ---------- Karuselli: estä pystyvieritys ------------------------------- */
/* ---------- Palvelugalleria valkoisella osiolla ------------------------- */
.section--light .svc-gallery img { box-shadow: 0 14px 34px rgba(8, 9, 11, 0.10); }

/* Palvelukortti on aina tumma kuvakortti oman overlayn päällä, joten sen
   teksti pysyy valkoisena myös valkoisella osiolla. Ilman tätä .section--light
   h3 -sääntö (lähdejärjestyksessä myöhempi) veisi otsikon lähes näkymättömäksi. */
.section--light .svc-card h3 { color: var(--color-white); }
.section--light .svc-card p { color: rgba(255, 255, 255, 0.82); }

/* ---------- Palvelusivun hero: toissijainen nappirivi ------------------- */
/* Kahden napin rivi kääntyy puhelimella allekkain, jotta kumpikin on
   vähintään 44 px korkea kosketuskohde eikä teksti katkea. */
@media (max-width: 519px) {
  .svc-hero__cta { flex-direction: column; align-items: stretch; }
  .svc-hero__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- UKK: leveämpi rivi, kun kysymyksiä on pariton määrä --------- */
.faq-item--wide { grid-column: 1 / -1; }

/* ---------- Tietosuojaseloste: tiiviimpi väli heron alle ---------------- */
/* Matalan legal-heron jälkeen täysi --section-y jättäisi tyhjän ruudullisen
   ennen ensimmäistä väliotsikkoa, joten leikataan yläpehmuste puoleen. */
.legal-hero + .section { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* ---------- Kosketuskohteet myös työpöydällä (WCAG 2.5.8) -------------- */
/* Ylempi 767px-sääntö hoitaa puhelimet, mutta samat itsenäiset linkkilistat
   jäävät isommilla näytöillä 22-23 px korkeiksi eli alle 24 px:n minimin.
   Kasvatetaan laatikkoa 1-2 px ja kutistetaan listan väli saman verran, jotta
   ulkoasu pysyy ennallaan. Virkkeen sisäiset linkit (esim. lomakkeen
   tietosuojaseloste-linkki) ovat säännön inline-poikkeuksen piirissä. */
@media (min-width: 768px) {
  .footer__col ul { gap: 0.55rem; }
  .footer__col a,
  .footer__contact-line a,
  .contact__item a,
  .footer__legal {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
}


/* ==========================================================================
   Yrityspalveluiden alavalikko ja kahden kortin ruudukko
   ========================================================================== */

/* Kahden kortin variantti: kortit jakavat rivin tasan eivätkä jää kapeiksi.
   Käytössä yrityspalveluiden alasivuilla, joissa nostoja on kaksi. */

/* Kaksi korttia vie rivistä puolet, joten etusivun 4:5-pystyrajaus tekisi
   niistä kohtuuttoman korkeat. Matala 4:3 kaikilla leveyksillä. */
.svc-grid--2 > .svc-card { aspect-ratio: 4 / 3; }

@media (min-width: 700px) {
  .svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  /* Leveällä .svc-grid palaa 12 sarakkeeseen, joten myös kahden kortin
     variantti käyttää samaa ruudukkoa ja kortit vievät kuusi saraketta. */
  .svc-grid--2 { grid-template-columns: repeat(12, 1fr); }
  .svc-grid--2 > .svc-card { grid-column: span 6; }
}

/* Palvelut-valikon sisällä oleva "Yrityksille" avaa oman alavalikkonsa.
   Työpöydällä se liukuu esiin emovalikon viereen, mobiilissa alakohdat
   näkyvät suoraan sisennettynä listana ilman toista avattavaa tasoa. */
.nav__sub { position: relative; }
/* Spesifisyys: .nav__dd-menu a asettaa display:block, joten alavalikon
   avaaja tarvitsee vahvemman valitsimen pysyäkseen yhdellä rivillä. */
.nav__dd-menu .nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.nav__sub-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform 0.28s var(--ease-soft), opacity 0.2s ease;
}
.nav__sub:hover .nav__sub-caret,
.nav__sub:focus-within .nav__sub-caret { opacity: 1; transform: translateX(2px); }
/* Alavalikon avaaja korostuu myös kun hiiri on alavalikon päällä. */
.nav__sub:hover > .nav__sub-toggle { background: var(--color-primary-soft); color: var(--color-accent); }
.nav__sub-menu {
  position: absolute;
  top: -0.5rem;
  left: calc(100% + 0.45rem);
  min-width: 232px;
  padding: 0.5rem;
  display: grid;
  gap: 1px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-soft), visibility 0s linear 0.2s;
  z-index: 1002;
}
.nav__sub:hover .nav__sub-menu,
.nav__sub:focus-within .nav__sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-soft), visibility 0s;
}
/* Kapeammalla työpöydällä alavalikko kääntyy vasemmalle, jottei se
   valu ikkunan reunan yli. */
@media (min-width: 981px) and (max-width: 1240px) {
  .nav__sub-menu { left: auto; right: calc(100% + 0.45rem); transform: translateX(6px); }
  .nav__sub:hover .nav__sub-menu,
  .nav__sub:focus-within .nav__sub-menu { transform: translateX(0); }
}

@media (max-width: 980px) {
  /* Mobiilissa ei toista avattavaa tasoa: alakohdat listataan suoraan
     sisennettyinä, jotta yksi napautus riittää mihin tahansa sivuun. */
  .nav__sub { display: contents; }
  .nav__sub-caret { display: none; }
  .nav__sub-menu {
    position: static;
    min-width: 0;
    padding: 0 0 0 1rem;
    gap: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__sub-menu a { font-size: 0.95rem; opacity: 0.82; }
  /* Alavalikon kohdat kasvattavat listaa, joten avattu korkeus nousee. */
  .nav__dd.open .nav__dd-menu { max-height: 44rem; }
}

/* Tiivis nostolista: pelkät otsikot ilman selitystekstiä. Ikoni ja otsikko
   tasataan pystysuunnassa keskelle, koska rivi on vain yhden rivin korkuinen. */
.feature-list--compact { gap: 1.05rem; }
.feature-list--compact .feature { align-items: center; }
.feature-list--compact .feature h3 { margin-bottom: 0; font-size: 1.06rem; }
@media (min-width: 768px) {
  .feature-list--compact { grid-template-columns: 1fr; gap: 1rem; }
}

/* ==========================================================================
   Arvostelut valkoisella osiolla (yrityspalvelut)
   Yrityssivuilla palautteet nostettiin valkoiselle osiolle ja "miksi"-lohko
   tummalle kaistalle. Kortti kääntyy vaaleaksi samalla kaavalla kuin valkoisen
   osion lomake: valkoinen pinta, ohut hiusviiva ja pehmeä varjo. Ei uusia
   värejä, samat on-light-tokenit kuin muillakin vaaleilla osioilla.
   ========================================================================== */
.section--light .review {
  background: var(--color-white);
  border-color: rgba(20, 22, 26, 0.09);
  box-shadow: 0 10px 28px rgba(8, 9, 11, 0.07);
}
.section--light .review:hover {
  border-color: rgba(20, 22, 26, 0.2);
  box-shadow: 0 14px 34px rgba(8, 9, 11, 0.12);
}
.section--light .review p { color: var(--color-on-light-heading); }
.section--light .review__name { color: var(--color-on-light-heading); }
.section--light .review__src { color: var(--color-on-light-muted); }
/* Logolaatta on valkoinen, joten valkoisella kortilla se tarvitsee reunan
   erottuakseen. Mustalla kaistalla laatta erottuu itsestään. */
.section--light .review__brand { border: 1px solid rgba(20, 22, 26, 0.09); }
.section--light .brand-head__text { color: var(--color-on-light-muted); }

/* =========================================================================
   Aluesivut: toimialuekortit, alueen faktalaatikko ja reittilista
   Käytössä /palvelut/muuttopalvelut/ -sivun toimialueosiossa sekä
   paikkakuntakohtaisilla alasivuilla. Kaikki nojaa olemassa oleviin
   tokeneihin, uusia värejä ei lisätä.
   ========================================================================= */

/* ---------- Toimialueruudukko ---------- */
.area-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
@media (min-width: 620px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .area-grid { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; } }

.area-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.35rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.3s var(--ease-soft), box-shadow 0.25s ease;
}
.area-card:hover { border-color: var(--color-border-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.area-card__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.area-card__name svg { width: 16px; height: 16px; flex: none; color: var(--color-accent); transition: transform 0.25s var(--ease-soft); }
.area-card:hover .area-card__name svg { transform: translate(3px, -3px); }
.area-card__meta { font-size: 0.88rem; color: var(--color-text-faint); }
.area-card p { margin: 0; font-size: 0.95rem; color: var(--color-text-light); }

/* Valkoisella kaistalla kortti kääntyy vaaleaksi, muuten teksti katoaisi. */
.section--light .area-card { background: var(--color-white); border-color: rgba(20, 22, 26, 0.14); }
.section--light .area-card:hover { border-color: rgba(20, 22, 26, 0.3); box-shadow: 0 14px 34px rgba(8, 9, 11, 0.1); }
.section--light .area-card__name { color: var(--color-on-light-heading); }
.section--light .area-card p,
.section--light .area-card__meta { color: var(--color-on-light-muted); }

/* ---------- Alueen faktalaatikko ----------
   Määrittelylista, jotta hakukoneet ja kielimallit lukevat parit oikein
   termi-arvo-pareina eivätkä irrallisena tekstinä. */
.area-facts { margin: 1.8rem 0 0; border-top: 1px solid var(--color-border); }
.area-facts > div {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 760px) {
  .area-facts > div { grid-template-columns: 13rem 1fr; gap: 1.5rem; align-items: baseline; }
}
.area-facts dt { font-family: var(--font-heading); font-weight: 560; font-size: 0.95rem; color: var(--color-heading); }
.area-facts dd { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--color-text-light); }
.section--light .area-facts,
.section--light .area-facts > div { border-color: rgba(20, 22, 26, 0.12); }
.section--light .area-facts dt { color: var(--color-on-light-heading); }
.section--light .area-facts dd { color: var(--color-on-light-muted); }

/* ---------- Tyypilliset muuttoreitit ---------- */
.routes {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .routes { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1.1rem; } }
.routes li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.1rem 1.35rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--color-text-light);
}
.routes li svg { width: 17px; height: 17px; flex: none; margin-top: 0.25rem; color: var(--color-accent); }
.routes b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1rem;
  color: var(--color-heading);
}
.section--light .routes li { background: var(--color-white); border-color: rgba(20, 22, 26, 0.14); color: var(--color-on-light-muted); }
.section--light .routes b { color: var(--color-on-light-heading); }

/* ---------- Aluesivun leipäteksti split-lohkossa ----------
   Palvelusivuilla .split__body sisälsi aiemmin vain .svc-intro__lead-nostot,
   joten tavallisille kappaleille ei ollut on-light-väriä. Aluesivuilla
   lohkossa on useampi leipätekstikappale, ja ilman tätä ne jäisivät
   vaalealla kaistalla lukukelvottomiksi. */
.area-body { color: var(--color-text-light); max-width: 62ch; margin-top: 1.1rem; }
.area-body p { margin-bottom: 1.05rem; }
.section--light .area-body { color: var(--color-on-light-muted); }

/* ---------- Aluesivun esittelylohko ----------
   Tekstiä on selvästi enemmän kuin muilla palvelusivuilla, joten keskitetty
   kuva jäisi kellumaan yksin tyhjän tilan keskelle. Kiinnitetään media lohkon
   yläreunaan ja annetaan sen seurata lukijaa vieritettäessä. Header on
   position: fixed, joten top-arvossa on varaa sen korkeudelle. */
@media (min-width: 920px) {
  .split--area { align-items: start; }
  .split--area .split__media { position: sticky; top: 7rem; }
}

/* ---------- Aluesivun syventava osio ----------
   Valkotaustainen lohko Miksi Varavavy -osion alla. Kolme ikonikorttia,
   faktapaneeli ja parillinen maara reittiruutuja. Leipateksti on jaettu
   kortteihin, jotta osio on silmailtava eika yhtenainen tekstimassa.
   Kaikki nojaa olemassa oleviin tokeneihin, uusia vareja ei lisata. */

/* Kolme korttia rinnakkain, mobiilissa allekkain. */
.area-tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) { .area-tiles { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

.area-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.7rem 1.6rem 1.8rem;
}
.area-tile__ic {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-accent);
  flex: none;
}
.area-tile__ic svg { width: 23px; height: 23px; }
.area-tile h3 { margin: 0; }
.area-tile p { margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--color-text-light); }
.section--light .area-tile { background: var(--color-white); border-color: rgba(20, 22, 26, 0.14); }
.section--light .area-tile p { color: var(--color-on-light-muted); }

/* Faktapaneeli: alueen tiedot nimikko-arvo-pareina, kaksi saraketta. */
.area-panel {
  margin-top: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.section--light .area-panel { background: var(--color-white); border-color: rgba(20, 22, 26, 0.14); }
.area-panel > h3 { margin: 0; }

.area-spec { display: grid; gap: 1.5rem 2.5rem; margin: 1.5rem 0 0; }
@media (min-width: 760px) { .area-spec { grid-template-columns: 1fr 1fr; } }
/* align-content: start, jotta lyhyt arvo ei veny sarakkeen korkeimman
   parin mukaan ja jata otsikon alle ylimaaraista tyhjaa. */
.area-spec > div { display: grid; gap: 0.5rem; align-content: start; }
.area-spec dt {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
.area-spec__ic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-accent);
  flex: none;
}
.area-spec__ic svg { width: 17px; height: 17px; }
.area-spec dd { margin: 0; font-size: 0.95rem; line-height: 1.62; color: var(--color-text-light); }
.section--light .area-spec dt { color: var(--color-on-light-heading); }
.section--light .area-spec dd { color: var(--color-on-light-muted); }

/* Reittiruudut: parillinen maara, joten kahden sarakkeen ruudukko tayttyy. */
.area-routes { margin-top: clamp(2.8rem, 5vw, 4rem); }
.area-routes > h3 { margin-bottom: 0; }

/* Ristiinlinkit naapurikuntiin: pitaa aluesivut osana samaa kokonaisuutta. */
.area-nearby { margin-top: 1.8rem; font-size: 0.97rem; line-height: 1.7; color: var(--color-text-light); }
.section--light .area-nearby { color: var(--color-on-light-muted); }
.area-nearby a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.area-nearby a:hover { color: var(--color-primary); }

/* ---------- Footerin aluevalikko ----------
   Natiivi <details>, joten valikko toimii ilman JS:ää ja linkit ovat
   lähdekoodissa myös suljettuna. Summary noudattaa footerin otsikkotyyliä,
   jotta se lukee samalla tasolla kuin muut sarakeotsikot. */
.footer__dd { margin-top: 1.6rem; }
.footer__dd > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.footer__dd > summary::-webkit-details-marker { display: none; }
.footer__dd > summary:hover { color: var(--color-accent); }
.footer__dd > summary svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-accent);
  transition: transform 0.25s var(--ease-soft);
}
.footer__dd[open] > summary svg { transform: rotate(180deg); }
.footer__dd ul { margin-top: 1.1rem; }

/* ---------- Aluesivujen pitkat paikannimet H1:ssa ----------
   "Uudessakaarlepyyssä" ja "Isossakyrössä" eivat mahdu kapealle naytolle
   yhdelle riville, ja ilman katkaisua sana leventaa koko herolohkon
   viewportia leveammaksi. Tavutus hoitaa katkaisun siististi, break-word
   varmistaa ettei vaakavieritysta synny silloinkaan kun selain ei tavuta. */
.svc-hero h1 { overflow-wrap: break-word; hyphens: auto; }

/* =========================================================================
   Sertifikaatit ja ulkopuoliset arviot
   Kaksi kolmannen osapuolen merkkia: Vastuu Groupin Luotettava Kumppani
   (tilaajavastuu) ja Muuttomaailma.fi:n arvostelurusetti. Ne esiintyvat
   kahdessa paikassa: "Miksi Varavavy" -lohkon kuvan oikeassa alakulmassa ja
   footerissa omalla rivillaan. Molemmat merkit ovat valmiiksi
   vihreapohjaisia, joten ne toimivat sellaisenaan seka valokuvan paalla etta
   mustassa footerissa. Uusia varitokeneita ei tarvita: vihrea tulee kuvista,
   #5fbf1b on Muuttomaailman rusetin kehysvari ja #4FAD4D Luotettava Kumppani
   -logon oma tausta.
   ========================================================================= */

/* ---------- Sertifikaatit "Miksi Varavavy" -kuvan paalla ----------
   Laatat istuvat kuvan oikeassa alakulmassa. Osion taustan varinen tausta
   toimii samalla kehyksena ja laattojen valisena rakona (padding + gap),
   joten merkit erottuvat kuvasta ja toisistaan tasmalleen samalla tavalla
   kuin #esittely-osion .collage__inset -kuva erottuu paakuvasta.
   Alkuperainen 228 px leveys on liian jarea kuvan paalla, joten laatat ja
   rusetin typografia skaalataan taalla pienemmiksi. */
.why__certs {
  position: absolute;
  /* Laatat kurottavat kuvan reunan yli oikealta ja alhaalta, samaan tapaan
     kuin #esittely-osion .collage__inset. Ylitys mahtuu containerin omaan
     sivupehmusteeseen (pad-x on vahintaan 1.25rem), joten vaakavieritysta ei
     synny kapeimmallakaan naytolla. */
  right: -1rem;
  bottom: -1.2rem;
  display: flex;
  gap: 5px;
  padding: 5px;
  background: var(--color-ink);
}
/* Laattojen leveys seuraa kuvan leveytta, ei ikkunan: kuva on tyopoydalla
   puolet palstasta ja puhelimella koko leveys, joten vw antaisi vaaran koon
   juuri kapealla naytolla. cqw lukee .why__media -kaareen leveyden. px-arvo
   jaa fallbackiksi selaimille jotka eivat tunne container-kyselyita. */
.why__certs .mm-badge,
.why__certs-plate { width: 165px; width: clamp(112px, 30cqw, 178px); }
.why__certs .mm-badge__top { padding: 0.5rem 0.3rem 0.4rem; }
/* Nimi ja arvosana pysyvat yhdella rivilla: rivinvaihto kasvattaisi rusetin
   korkeutta ja veisi pienelta kuvalta kohtuuttoman osan. Siksi myos
   typografia skaalautuu kuvan leveyden mukana, ja alaraja on se koko joka
   viela mahtuu kapeimpaan laattaan. */
.why__certs .mm-badge__name { font-size: clamp(0.7rem, 2.4cqw, 0.88rem); white-space: nowrap; }
.why__certs .mm-badge__stars { gap: 1px; margin: 0.25rem 0 0.2rem; }
.why__certs .mm-badge__stars svg { width: clamp(11px, 2.2cqw, 15px); height: clamp(11px, 2.2cqw, 15px); }
.why__certs .mm-badge__score { font-size: clamp(0.58rem, 1.95cqw, 0.74rem); white-space: nowrap; }
.why__certs .mm-badge:hover { transform: none; box-shadow: none; }

/* Logolaatta venyy rusetin korkuiseksi (flexin oletus on stretch). contain
   pitaa sanamerkin aina kokonaisena, ja laatan taustavari on logon oma
   vihrea (#4FAD4D, poimittu kuvasta), joten ylijaava tila ei nay saumana. */
.why__certs-plate { display: block; line-height: 0; background: #4fad4d; }
.why__certs-plate img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Vaalealla osiolla (asennussivut) kehyksen on oltava valkoinen, muuten
   musta laatikko leikkaisi kuvan kulmasta reian. Sama logiikka kuin
   #esittely .collage__inset -saannolla. */
.section--light .why__certs { background: var(--color-light-bg); }

/* ---------- Muuttomaailman arvostelurusetti ----------
   Rakenne noudattaa Muuttomaailman omaa merkkia: vaalea ylaosa arvosanalle
   ja vihrea alapalkki tunnuksella. Ylaosa on kirjoitettu auki HTML:aan
   virallisen iframe-upotuksen sijaan, koska upotus vetaisi mukanaan
   jQueryn ja Semantic UI:n kolmannelta palvelimelta. Leveyden asettaa
   kayttopaikka (.why__certs), tassa vain merkin oma ulkoasu. */
.mm-badge {
  flex: none;
  background: #f9f9f9;
  border: 1px solid #5fbf1b;
  text-align: center;
  transition: box-shadow 0.25s ease, transform 0.3s var(--ease-soft);
}
.mm-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(95, 191, 27, 0.25); }
.mm-badge__top { display: block; padding: 0.8rem 0.9rem 0.7rem; }
.mm-badge__name { display: block; font-family: var(--font-heading); font-weight: 560; font-size: 0.95rem; color: #2f2f2f; }
.mm-badge__stars { display: flex; justify-content: center; gap: 2px; margin: 0.35rem 0 0.3rem; color: var(--color-star); }
.mm-badge__stars svg { display: block; width: 16px; height: 16px; }
.mm-badge__score { display: block; font-size: 0.78rem; color: #8a8a8a; }
.mm-badge__strip { display: block; line-height: 0; background: #5fbf1b; }
.mm-badge__strip img { display: block; width: 100%; height: auto; }

/* ---------- Sertifikaatit footerissa ----------
   Oma matala rivinsa linkkisarakkeiden ja alapalkin valissa. Merkit ovat
   pienina (40 px ja 30 px korkeina), jotta ne lukevat todisteina eivatka
   nouse footerin paasisallon ylapuolelle. */
.footer__certs { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 2rem; }
.footer__cert-lk { display: block; height: 40px; width: auto; }
.footer__cert-mm { display: block; height: 30px; width: auto; }
.footer__cert-link { display: block; transition: opacity 0.2s ease, transform 0.2s ease; }
.footer__cert-link:hover { opacity: 0.85; transform: translateY(-2px); }