/* =========================================================================
   Saumaksi Kylpyhuonehuolto - style.css
   Rakenne pintaflow-seedistä markus-manninen-demon kautta, samoin kuin
   tervajussi.fi ja saneerauspenttila.com. Väripaletti on Saumaksin oma
   navy (#002139) valkoisella sivulla. Saumaksin omat osat (arvostelut,
   palvelusivut, lomakkeen palvelunvalinta) ovat tiedoston lopussa.
   Order: Fonts -> Custom Properties -> Reset -> Base -> Typography ->
   Angular utils -> Layout -> Buttons -> Header/Nav -> Hero -> Marquee ->
   Intro -> Services -> Why -> Dark -> References -> Before/After -> CTA ->
   Form -> Footer -> Utilities -> Animations -> Media queries -> Saumaksi
   ========================================================================= */

/* ----------------------------- Kirjasimet ------------------------------
   Kirjasimet tarjoillaan sivuston omalta palvelimelta, ei Google Fontsista:
   kolmannen osapuolen tyylitiedosto oli renderöinnin estävä pyyntö, joka
   vaati oman DNS-haun ja TLS-kättelyn ennen kuin selain edes tiesi, mitä
   kirjasintiedostoja hakea. Kävijän selain ei myöskään ota yhteyttä
   Googleen. Kaikki kolme ovat muuttuvia kirjasimia (variable fonts), joten
   yksi tiedosto kattaa koko lihavuusvälin; välipainot kuten 540 ja 560
   toimivat vain niillä. Latin riittää suomeen (ä ja ö ovat välillä
   U+0000-00FF); latin-ext ladataan vain, jos sivulla on sen merkkejä.
   Lisenssit: fontit/LISENSSI.txt. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Brändi (saumaksi.fi): syvä navy #002139 on sivuston oma pääväri, jonka
     päällä valkoinen logo ja teksti. Demossa sivu on valkoinen ja navy toimii
     aksenttina: napit, merkit, tumma osio ja footer. --color-accent on VAIN
     tummilla pinnoilla käytettävä vaalea sininen; vaalealla taustalla
     apuväri on sinertävä harmaa --color-text-light. */
  --color-primary: #002139;      /* Saumaksi-navy - valkoinen teksti tälle */
  --color-primary-dark: #001629; /* tummempi (hover sweep / painallus) */
  --color-primary-soft: #e8eef4; /* vaalea sinertävä ikonipinnoille */
  --color-accent: #8ec5f2;       /* vaalea sininen - aksentti VAIN tummalla */
  --color-on-primary: #ffffff;   /* teksti/ikonit primary-pinnoilla */
  --color-ink: #002139;          /* tummat pinnat (Miksi-osio) */
  --color-ink-deep: #001629;     /* syvin tumma (hero-scrim, footer) */
  --color-text: #0f1e2c;         /* leipätekstin lähes musta, sinertävä */
  --color-text-light: #5a6a78;   /* sinertävä harmaa apuväri */
  --color-text-faint: #8d99a5;
  --color-bg: #ffffff;           /* puhtaanvalkoinen sivupohja */
  --color-surface: #ffffff;      /* kortit */
  --color-bg-alt: #f3f6f9;       /* viileä vaaleansininen harmaa vuorotteleville osioille */
  --color-border: #e2e8ee;       /* hiusviiva */
  --color-border-strong: #c8d2dc;
  --color-border-dark: #163a55;  /* hiusviiva tummien osioiden sisällä */
  --color-white: #ffffff;
  --color-ink-soft: #2b2c2d;     /* legacy (unused) */

  /* Form-state colours */
  --color-error: #c0433f;
  --color-error-bg: #fbeceb;
  --color-error-border: #efc6c4;
  --color-error-text: #a8332f;
  --color-success-bg: #e9f6ee;
  --color-success-text: #1c7340;
  --color-success-border: #b4e3c6;

  --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 - small on purpose; the language is angular, not pill-soft */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* Angular motif */
  --chamfer: 22px;               /* corner cut for images/cards */
  --chamfer-lg: 40px;
  --edge: clamp(38px, 6vw, 86px);/* diagonal section divider depth */

  /* Shadows - restrained, ink-tinted */
  --shadow-sm: 0 1px 2px rgba(20, 21, 23, 0.05);
  --shadow: 0 2px 6px rgba(20, 21, 23, 0.05), 0 14px 34px rgba(20, 21, 23, 0.07);
  --shadow-lg: 0 6px 18px rgba(20, 21, 23, 0.08), 0 30px 60px rgba(20, 21, 23, 0.12);

  --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. Stays 1 below 1400px (no change on phones/tablets),
     then steps up on large screens so the entire layout grows uniformly — like
     the browser's own zoom. The matching body { zoom } is set in the media
     queries below; --zoom-factor mirrors it so vh-based heights (hero) can be
     divided by it and stay exactly one viewport tall. ALWAYS keep the two in
     lockstep when adding a breakpoint. */
  --zoom-factor: 1;
}

/* ----------------------------- Large-screen zoom ----------------------- */
/* On big displays the whole site scales up evenly via CSS `zoom` on <body>
   (standardised; Chrome/Edge/Safari/Firefox 126+). This grows typography,
   padding, gaps, vw-based clamps AND fixed px values (icons, borders) together,
   so 24"+ screens never feel sparse. Above 2000px we cap the zoom and let the
   max-width shell leave margins instead of stretching further. */
@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; }

/* scroll-padding-top tracks the fixed header. The header lives inside the zoomed
   <body>, so its on-screen height grows with --zoom-factor; html itself is not
   zoomed, so we scale the offset here to keep anchored sections clearing it. */
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-primary); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--color-primary); color: var(--color-on-primary); }

/* ----------------------------- Typography ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-ink);
  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-primary); }

/* 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);
  /* forward-leaning parallelogram = electric slash */
  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; }

/* ----------------------------- Angular utilities ----------------------- */
/* Chamfer two opposite corners (top-left + bottom-right): industrial label */
.clip-chamfer { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
/* Single cut, top-right corner */
.clip-tr { clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
/* Single cut, bottom-left corner */
.clip-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg))); }

/* Diagonal divider: slanted top edge that reveals the cream page behind it.
   Pair with extra top padding so content clears the slope. */
.edge-top { clip-path: polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%); }
.edge-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), 0 100%); }
.edge-both { clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--edge)), 0 100%); }

/* ----------------------------- 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); }
/* Referenssit: pure white. Slide it up under the dark section's diagonal so the
   wedge below the diagonal reads white instead of the cream page base behind it. */
#referenssit {
  background: var(--color-white);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
.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; }

/* Asymmetric header: big heading left, supporting text/links right */
.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: blue fill, white text, ink sweeps in from the left on hover */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ink);
  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); }

/* Light primary on dark backgrounds (hero scrim) — pale fill, dark text */
.hero .btn-primary { background: var(--color-white); color: var(--color-ink); }
.hero .btn-primary::before { background: var(--color-accent); }
.hero .btn-primary:hover { color: var(--color-ink); }

.btn-secondary { background: transparent; color: var(--color-ink); border: 1.5px solid var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-ink); 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; }

/* 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-ink);
  letter-spacing: -0.01em;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-soft); }
.link-arrow:hover svg { transform: translate(4px, -4px); }
.link-arrow--muted { color: var(--color-text-light); }
.link-arrow--muted:hover { color: var(--color-ink); }

/* Circular "go" arrow used on image cards (↗) */
.card-go {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -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);
  /* No transform transition: the header tracks scroll 1:1 via an inline transform
     set per-frame in script.js, so it slides away exactly at scroll speed. */
  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: 0.375rem var(--pad-x);
  min-height: 94px;
  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; }
/* viewBox on rajattu logon todelliseen sisältöön, joten 84px:n sijaan
   riittää 50px: näkyvä merkki pysyy saman kokoisena kuin ennen mutta
   asettuu tiiviisti reunaan, koska SVG:ssä ei ole enää tyhjää marginaalia. */
.logo img { height: 50px; width: auto; transition: opacity 0.35s ease; }
.logo__light { position: absolute; inset: 0; opacity: 1; }
.logo__dark { opacity: 0; }
.header.scrolled .logo__light, .header--solid .logo__light { opacity: 0; }
.header.scrolled .logo__dark, .header--solid .logo__dark { opacity: 1; }

/* On desktop the nav dissolves so its children become header grid items:
   links sit in the centred auto column, actions (phone + CTA) on the right. */
.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;
  /* currentColor: white while the header is transparent over the hero,
     dark once .scrolled flips the link colour */
  background: currentColor;
  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); }

.nav__phone {
  display: inline-flex;
  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-primary); }
/* Isoilla näytöillä numero on turha: "Ota yhteyttä" riittää CTA:ksi ja numero
   löytyy yhteystiedoista ja footerista. Mobiilivalikossa se säilyy. */
@media (min-width: 981px) { .nav__phone { display: none; } }

/* --- Palvelut dropdown (desktop: opens on hover / keyboard focus) --- */
.nav__item { position: relative; }
.nav__item > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav__chevron { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.24s var(--ease-soft); }
.nav__item:hover > a .nav__chevron,
.nav__item:focus-within > a .nav__chevron,
.nav__item.open > a .nav__chevron { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0.6rem;
  min-width: 260px;
  padding: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.26s var(--ease-soft), visibility 0s linear 0.22s;
  z-index: 20;
}
/* Invisible bridge over the 10px gap so the pointer can travel from the
   link into the menu without the hover breaking */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.26s var(--ease-soft);
}
.nav__dropdown a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--color-text);
  opacity: 1;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav__dropdown a::after { display: none; }
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible { background: var(--color-bg-alt); color: var(--color-primary); }
.nav__dropdown a[aria-current="page"] { color: var(--color-primary); font-weight: 600; }

.header.scrolled, .header--solid {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(32, 34, 37, 0.10);
}
.header.scrolled .nav__links a, .header--solid .nav__links a { color: var(--color-text); }
.header.scrolled .nav__phone, .header--solid .nav__phone { color: var(--color-text); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  border-radius: 8px;
}
.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;
  /* Divide by --zoom-factor so the zoomed body multiplies it back to exactly
     one viewport height — the hero never spills past the fold at any zoom. Below
     1400px --zoom-factor is 1, so this is plain 100vh/100dvh. */
  min-height: calc(100vh / var(--zoom-factor));
  min-height: calc(100dvh / var(--zoom-factor));
  display: flex;
  align-items: center;            /* vertically centered content */
  justify-content: center;
  text-align: center;
  padding: 8rem var(--pad-x) 6rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  /* suora diagonaali alareunassa: nousee vasemmasta alakulmasta tasaisesti
     oikealle. Ei taitteita, sama --edge-syvyys kuin muissa osiorajoissa. */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    0 100%
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  /* even, slightly centred dark scrim + soft vignette for centred text */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(14,15,17,0.74) 0%, rgba(14,15,17,0.62) 42%, rgba(14,15,17,0.82) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(14,15,17,0.18) 28%, rgba(14,15,17,0.66) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }
/* Etusivun taustavideo (tools/video.mjs, script.js). Juliste on videon
   ensimmäinen ruutu ja makaa videon päällä samassa kohdassa, samalla
   sisääntulozoomilla ja samalla parallaksilla, joten kun video alkaa
   pyöriä, juliste häivytetään pois eikä vaihtoa erota.
   Ei ylimitoitusta kuten palvelusivujen kuvissa: video on vain 1024 x 576,
   ja jokainen rajattu pikseli suurentaa sitä. Parallaksi siirtää kuvaa vain
   alaspäin (script.js), ja paljastuva yläreuna on silloin jo näkymän
   yläpuolella, joten reunaa ei näy. */
.hero__media--video .hero__poster,
.hero__video {
  top: 0;
  height: 100%;
}
.hero__video {
  position: absolute;
  left: 0;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 1;
  animation: heroZoom 1.7s var(--ease-soft) backwards;
}
.hero__media.video-ready .hero__poster { opacity: 0; transition: opacity 0.6s ease; }

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* max-width 28ch (seedissä 20ch): otsikko saa levittäytyä leveämmälle eikä
   wrappaa niin tiiviisti. Mobiilin oma 15ch pysyy ennallaan. */
.hero h1 { color: var(--color-white); margin: 1.5rem 0 1.4rem; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.0; text-shadow: 0 2px 30px rgba(0,0,0,0.38); max-width: 28ch; }
.hero h1 .accent { color: var(--color-accent); }
.hero__lead { color: rgba(255,255,255,0.84); font-size: clamp(1.05rem, 1.5vw, 1.24rem); max-width: 44ch; margin: 0 auto 2.2rem; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: center; align-items: center; }

/* Honest hero pill (no reviews exist) — brand statement with a brush mark */
/* Seedissä tämä oli pilleri: reunaviiva, läpikuultava tausta ja backdrop-blur.
   Tässä demossa pelkkä vapaana kelluva teksti: ei laatikkoa eikä varjoa, kevyt
   paino ja tiivis kirjainväli. Hero-scrim on riittävän tumma ilman varjoakin. */
/* Ei text-transform: uppercase, vaikka sivun muut eyebrowt ovat versaaleja:
   versaali kirjoittaisi brändinimen muotoon MYRATEK, kun logossa se on MyRATEK. */
.hero__badge { display: inline-block; color: rgba(255,255,255,0.78); font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; letter-spacing: 0.05em; }
/* Pienillä näytöillä hieman pienempi, jotta nimi mahtuu yhdelle riville. */
@media (max-width: 980px) { .hero__badge { font-size: 0.82rem; } }

/* Rating box: Google logo + review count (top) + stars and score (bottom) */
.hero__rating { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.5rem 1.15rem 0.5rem 0.8rem; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); background: rgba(255,255,255,0.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__rating-logo { width: 24px; height: 24px; flex-shrink: 0; }
.hero__rating-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.15; color: var(--color-white); }
.hero__rating-text small { font-size: 0.78rem; color: rgba(255,255,255,0.75); letter-spacing: 0.01em; }
.hero__rating-text small b { color: var(--color-white); font-weight: 600; }
.hero__rating-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-accent); }
.hero__rating-stars svg { width: 13px; height: 13px; }
.hero__rating-stars em { font-style: normal; font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; color: var(--color-white); margin-left: 4px; }

/* Hero secondary action: underlined text link with a big angular up-right arrow */
.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); }
.hero__link:hover svg { transform: translate(3px, -3px); color: var(--color-accent); }

/* ----------------------------- Logo marquee ---------------------------- */
.marquee { padding-block: clamp(2.2rem, 4vw, 3.2rem); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.marquee__label { text-align: center; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 1.6rem; }
.marquee__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2.6rem, 6vw, 5.2rem); width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: 0.42; transition: filter 0.3s ease, opacity 0.3s ease; }
.marquee__track img:hover { filter: grayscale(0); opacity: 1; }

/* ----------------------------- Trust strip ----------------------------- */
/* Slim band of honest trust points (replaces the partner-logo marquee). */
.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: center; 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-primary); flex-shrink: 0; }
/* Takuukohta linkittää takuuehtoihin. Hento alleviivaus kertoo, että sitä voi painaa. */
a.trust-item { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.2s ease; }
a.trust-item:hover { text-decoration-color: var(--color-primary); }

/* ----------------------------- Intro / split --------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split--portfolio { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.split__media { position: relative; }
.split__media img { width: 100%; object-fit: cover; border-radius: 2px; }
/* Seedissä 4/5 (pysty). Tässä demossa 5/4 (vaaka), jolloin intro-osiosta tulee
   selvästi matalampi. Luokan nimi on seedin, vain kuvasuhde on vaihdettu. */
.split__media--portrait img { aspect-ratio: 5 / 4; height: auto; }

/* Blue 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;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.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; }
.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-ink); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.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;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  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(14,15,17,0.92) 2%, rgba(14,15,17,0.62) 38%, rgba(14,15,17,0.18) 72%, rgba(14,15,17,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.8); 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); }

/* Notice strip (angular) */
.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 2.4rem 1.7rem;
  background: var(--color-ink);
  color: var(--color-white);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.notice__icon { flex-shrink: 0; width: 44px; height: 44px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.notice__icon svg { width: 23px; height: 23px; }
.notice p { margin: 0; flex: 0 1 70%; max-width: 70%; font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,0.82); }
.notice b { display: block; margin-bottom: 0.5rem; font-size: 1.28rem; color: var(--color-white); font-family: var(--font-heading); font-weight: 560; }
.notice .btn { margin-left: auto; }
.notice .btn-primary { background: var(--color-white); color: var(--color-ink); }
.notice .btn-primary::before { background: var(--color-accent); }
.notice .btn-primary:hover { color: var(--color-ink); }

/* ----------------------------- Why / checklist ------------------------- */
.why__media { position: relative; }
.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; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.check__mark svg { width: 16px; height: 16px; }
.check b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-ink); margin-bottom: 0.2rem; }
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

/* ----------------------------- Dark / lataus --------------------------- */
.dark { background: var(--color-ink); color: rgba(255,255,255,0.82); position: relative; z-index: 2; overflow: hidden; }
.dark.edge-both { padding-block: calc(var(--section-y) + var(--edge)); }
.dark .eyebrow { color: rgba(255,255,255,0.72); }
.dark .eyebrow::before { background: var(--color-accent); }
.dark h2 { color: var(--color-white); }
.dark .section-head p { color: rgba(255,255,255,0.7); }
.dark__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.dark__points { display: grid; gap: 0; margin-top: 2rem; }
.dark__point { display: grid; grid-template-columns: 24px 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--color-border-dark); }
.dark__point:last-child { border-bottom: 1px solid var(--color-border-dark); }
.dark__point svg { width: 22px; height: 22px; color: var(--color-accent); margin-top: 2px; }
.dark__point b { color: var(--color-white); font-family: var(--font-heading); font-weight: 560; display: block; margin-bottom: 0.2rem; }
.dark__point span { font-size: 0.95rem; }

.collage { position: relative; }
.collage__main { width: 100%; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.collage__inset { position: absolute; width: 46%; border: 5px solid var(--color-ink); left: -1.2rem; bottom: -1.6rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.collage__badge { position: absolute; top: -1.1rem; right: -0.6rem; background: var(--color-primary); color: var(--color-on-primary); padding: 0.9rem 1.2rem; line-height: 1; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.collage__badge b { font-family: var(--font-heading); font-size: 1.7rem; letter-spacing: -0.03em; font-weight: 560; }
.collage__badge span { display: block; font-size: 0.78rem; font-weight: 500; margin-top: 0.25rem; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--color-border-dark); border: 1px solid var(--color-border-dark); overflow: hidden; }
.stat { background: var(--color-ink); padding: 1.9rem 1.4rem; text-align: center; }
.stat__num { font-family: var(--font-heading); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3rem); color: var(--color-accent); letter-spacing: -0.04em; line-height: 1; }
.stat__label { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-top: 0.5rem; }

/* ----------------------------- References ------------------------------ */
.ref__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ref-card { position: relative; overflow: hidden; color: var(--color-white); aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); transition: transform 0.4s var(--ease-soft); }
.ref-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s var(--ease-soft); }
.ref-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,15,17,0.9) 4%, rgba(14,15,17,0.5) 42%, rgba(14,15,17,0.1) 78%); }
.ref-card:hover img { transform: scale(1.05); }
.ref-card__chip { display: inline-block; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); font-weight: 560; font-size: 0.78rem; padding: 0.3rem 0.7rem; margin-bottom: 0.7rem; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.ref-card__body { display: flex; align-items: flex-end; gap: 1rem; padding: 0.9rem 1.3rem 1.5rem; }
.ref-card__text { flex: 1; min-width: 0; }
.ref-card__body h3 { color: var(--color-white); font-size: 1.22rem; font-weight: 540; margin-bottom: 0.35rem; }
.ref-card__body p { color: rgba(255,255,255,0.78); font-size: 0.92rem; margin-bottom: 0; }
.ref-card .card-go { flex-shrink: 0; }
.ref-card:hover .card-go { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.ref-card:hover .card-go svg { transform: translate(2px, -2px); }

/* ----------------------------- Before / after slider ------------------- */
/* The "before" image is clipped with clip-path: inset() so it keeps its full
   size (no squish) while only the left part shows. JS updates --pos (0–100%)
   on pointer drag / arrow keys; the visible handle + knob track the same var. */
.ba {
  --pos: 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-ink);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  touch-action: pan-y;                 /* let the page scroll vertically on touch */
  -webkit-user-select: none; user-select: none;
  cursor: ew-resize;
}
.ba--wide { aspect-ratio: 4 / 3; }
.ba--tall { aspect-ratio: 3 / 4; }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 1; }
.ba__after  { z-index: 0; }

/* Corner labels */
.ba__tag {
  position: absolute; top: 0.9rem; z-index: 3;
  font-family: var(--font-heading); font-weight: 560; font-size: 0.74rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-white);
  padding: 0.34rem 0.72rem; pointer-events: none;
}
.ba__tag--before { left: 0.9rem; background: rgba(14,22,34,0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); }
.ba__tag--after  { right: 0.9rem; background: var(--color-primary); clip-path: polygon(6px 0,100% 0,100% 100%,0 100%,0 6px); }

/* Divider line + draggable knob */
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 2; transform: translateX(-50%); }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--color-white); box-shadow: 0 0 0 1px rgba(14,22,34,0.18), 0 0 14px rgba(14,22,34,0.28); }
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-white); color: var(--color-primary);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(14,22,34,0.35); cursor: ew-resize;
  transition: transform 0.18s var(--ease-spring), background-color 0.2s ease, color 0.2s ease;
}
.ba:hover .ba__knob { transform: translate(-50%, -50%) scale(1.06); }
.ba__knob svg { width: 24px; height: 24px; }
.ba:focus-visible { outline: none; }
.ba:focus-visible .ba__knob { background: var(--color-primary); color: var(--color-white); box-shadow: 0 0 0 4px rgba(32,34,37,0.25), 0 4px 14px rgba(14,22,34,0.35); }
.ba__cap { margin-top: 1rem; }
.ba__cap h3 { color: var(--color-ink); }
.ba__cap p { color: var(--color-text-light); font-size: 0.96rem; margin-top: 0.25rem; }

/* Row of three before/after sliders */
.ba-row { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ----------------------------- Reviews --------------------------------- */
.reviews__ratings { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.rating-chip { display: inline-flex; align-items: center; gap: 0.95rem; padding: 0.95rem 1.6rem 0.95rem 1.15rem; border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); }
.rating-chip__logo { width: 38px; height: 38px; flex-shrink: 0; }
.rating-chip__score { font-family: var(--font-heading); font-weight: 560; font-size: 1.95rem; color: var(--color-ink); line-height: 1; letter-spacing: -0.03em; }
.rating-chip__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rating-chip__stars { color: var(--color-primary); display: inline-flex; gap: 1px; }
.rating-chip__stars svg { width: 15px; height: 15px; }
.rating-chip__count { font-size: 0.85rem; color: var(--color-text-light); }
.rating-chip__count b { color: var(--color-ink); font-weight: 700; }

.reviews__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.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); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.review:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.review__stars { color: var(--color-primary); 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; }
.review__avatar { width: 42px; height: 42px; background: var(--color-ink); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 560; font-size: 1rem; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.review__name { font-family: var(--font-heading); font-weight: 560; color: var(--color-ink); font-size: 0.95rem; }
.review__src { font-size: 0.82rem; color: var(--color-text-light); }

/* ----------------------------- 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.9); }
.cta-banner .btn-primary { background: var(--color-white); color: var(--color-ink); }
.cta-banner .btn-primary::before { background: var(--color-accent); }
.cta-banner .btn-primary:hover { color: var(--color-ink); }

/* ----------------------------- 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-bg-alt); color: var(--color-ink); display: grid; place-items: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.contact__item-ic svg { width: 22px; height: 22px; }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-ink); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-ink); }
.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); transition: border-color 0.2s ease, background-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.channel-btn svg { width: 18px; height: 18px; }
.channel-btn:hover { border-color: var(--color-ink); background: var(--color-surface); }

.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.7rem, 3vw, 2.5rem); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))); }
.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-ink); }
.field label .req { color: var(--color-error); }
.field label .opt { color: var(--color-text-light); font-weight: 400; }
.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);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(20,21,23,0.07); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.12); }
.field__error { color: var(--color-error); font-size: 0.8rem; min-height: 1em; }
.form__consent { font-size: 0.85rem; color: var(--color-text-light); margin: 0 0 1.2rem; }
.form__consent a { color: var(--color-primary); font-weight: 560; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.form__consent a:hover { color: var(--color-primary-dark); }
.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 a { color: inherit; font-weight: 640; text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.64); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border-dark); }
.footer__brand img { height: 50px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 30ch; }
.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-dark); color: rgba(255,255,255,0.72); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.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.64); 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; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 2rem; font-size: 0.85rem; }
.footer__bottom a { color: var(--color-accent); text-underline-offset: 2px; transition: color 0.2s ease; }
/* Tekstin keskellä olevat linkit alleviivataan: väri yksin ei erota niitä
   ympäröivästä tekstistä riittävästi (WCAG 1.4.1). Tekijärivin linkki
   erottuu lihavoinnilla. */
.footer__bottom p:not(.footer__credit) a { text-decoration: underline; }
.footer__bottom a:hover { color: var(--color-white); }
.footer__credit { color: rgba(255,255,255,0.56); }
/* Kappaleiden oletusmarginaali siirsi rivit eri korkeudelle, nollataan. */
.footer__bottom p { margin: 0; }
.footer__socials { display: flex; gap: 0.6rem; }
.footer__socials a { width: 38px; height: 38px; border: 1px solid var(--color-border-dark); display: grid; place-items: center; color: rgba(255,255,255,0.72); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.footer__socials a:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.footer__socials svg { width: 18px; height: 18px; }

/* ----------------------------- Service pages --------------------------- */
/* Sub-page hero: same visual language as the front hero (photo + scrim +
   lightning bottom edge) but ~3/4 height and slightly tighter type. */
.hero--page { min-height: calc(78vh / var(--zoom-factor)); min-height: calc(78dvh / var(--zoom-factor)); padding-top: 9rem; }
.hero--page h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); max-width: 17ch; }
.hero--page .hero__lead { max-width: 52ch; }

/* Breadcrumbs inside the page hero. The global reset only zeroes <ul>, so the
   <ol> needs its own margin/padding/list-style reset here. */
.crumbs { margin: 0 0 0.4rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; gap: 0.15rem; font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; color: rgba(255,255,255,0.68); }
.crumbs li + li::before { content: "/"; margin-inline: 0.45rem 0.6rem; color: rgba(255,255,255,0.4); }
.crumbs a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.35); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.crumbs a:hover { color: var(--color-white); text-decoration-color: var(--color-accent); }
.crumbs [aria-current="page"] { color: var(--color-accent); }

/* Service intro sits right under the trust strip: tighter top padding */
#palvelu { padding-top: clamp(2.5rem, 5vw, 4.5rem); }

/* Process section: the intro column stays pinned while the step list scrolls */
@media (min-width: 880px) {
  #vaiheet .split { align-items: start; }
  #vaiheet .split__body { position: sticky; top: 110px; }
}

/* Saumaksin sivuilla tumman osion (edge-both) ylä- ja alapuolella on aina
   valkoinen osio, joten vinojen reunojen kiilat näyttävät sivupohjan
   valkoista oikein ilman seedin "liu'uta osio tumman alle" -temppua.
   Seedin #miksi-me- ja #ukk-säännöt on siksi poistettu.
   Poikkeus: jos tumman osion yläpuolella on beige .section--alt (Yrityksille-
   sivun #prosessi), alt-osio jatketaan tumman alle, jotta yläkiila on beige.
   Sama alapuolella: laatan paikkaus -sivulla tummaa osiota seuraa suoraan
   beige #ukk, joten se nostetaan tumman alle, jotta alakiila on beige.
   Tumma osio piirtyy päälle, koska clip-path tekee siitä oman kerroksen. */
.section--alt:has(+ .dark.edge-both) { padding-bottom: calc(var(--section-y) + var(--edge)); }
.section--alt + .dark.edge-both { margin-top: calc(var(--edge) * -1); }
.dark.edge-both + .section--alt { margin-top: calc(var(--edge) * -1); padding-top: calc(var(--section-y) + var(--edge)); }

/* Numbered process list ("Näin työ etenee") — same row language as .check */
.steps { display: grid; gap: 0; margin-top: 1.8rem; }
.step { display: grid; grid-template-columns: 46px 1fr; gap: 1.15rem; align-items: start; padding: 1.3rem 0; border-top: 1px solid var(--color-border); }
.step:last-child { border-bottom: 1px solid var(--color-border); }
.step__num { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-ink); font-family: var(--font-heading); font-weight: 620; font-size: 1.25rem; letter-spacing: -0.02em; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.step h3 { margin-bottom: 0.3rem; font-size: 1.12rem; }
.step p { color: var(--color-text-light); font-size: 0.96rem; margin: 0; }

/* FAQ accordion: native <details>, fully readable without JS.
   Full container width; two columns (2 x 3) from tablet up. */
.faq { margin: clamp(2.2rem, 4vw, 3rem) auto 0; display: grid; gap: 0.75rem; }
@media (min-width: 768px) {
  .faq { grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; }
}
.faq details { background: var(--color-surface); border: 1px solid var(--color-border); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: border-color 0.25s ease; }
.faq details[open], .faq details:hover { border-color: var(--color-border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; cursor: pointer; padding: 1.25rem 1.45rem; font-family: var(--font-heading); font-weight: 560; font-size: 1.06rem; letter-spacing: -0.015em; color: var(--color-ink); list-style: none; transition: color 0.2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-primary); }
.faq__ic { flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-ink); clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.faq__ic svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-soft); }
.faq details[open] .faq__ic { background: var(--color-primary); color: var(--color-on-primary); }
.faq details[open] .faq__ic svg { transform: rotate(45deg); }
.faq details p { padding: 0 1.45rem 1.35rem; margin: 0; color: var(--color-text-light); font-size: 0.99rem; max-width: 68ch; }

/* Sub-page hero on phones: content is short, keep it clearly under full height.
   .hero.hero--page so this wins over the later mobile `.hero { min-height: 94vh }`. */
@media (max-width: 767px) {
  .hero.hero--page { min-height: 78vh; min-height: 78dvh; padding-top: 7.5rem; }
  .hero.hero--page h1 { font-size: clamp(2.35rem, 9vw, 3.2rem); }
  .crumbs ol { justify-content: flex-start; }
  /* Slightly darker scrim on phones so the heading stays legible over the
     brighter "after" photo. */
  .hero.hero--page .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(14,15,17,0.84) 0%, rgba(14,15,17,0.74) 42%, rgba(14,15,17,0.9) 100%),
      radial-gradient(120% 90% at 50% 42%, rgba(14,15,17,0.32) 28%, rgba(14,15,17,0.78) 100%);
  }
}

/* ----------------------------- Legal / content page -------------------- */
/* Hero-less page (uses .header--solid). Top padding clears the fixed header. */
.legal-page { padding-block: clamp(8rem, 12vw, 10.5rem) clamp(3rem, 6vw, 5rem); }
/* Palsta alkaa vasemmasta laidasta samasta kohdasta kuin murupolku. */
.legal { max-width: 760px; margin-inline: 0; }
.legal__lead { color: var(--color-text-light); font-size: 1.06rem; margin: 2.2rem 0 0; max-width: 62ch; }
.legal__updated { font-size: 0.85rem; color: var(--color-text-light); margin-top: 0.9rem; }
.legal h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); letter-spacing: -0.02em; margin: 2.6rem 0 0.75rem; }
.legal h2:first-of-type { margin-top: 2.4rem; }
.legal p { color: var(--color-text-light); margin: 0 0 1rem; max-width: 66ch; }
.legal ul { margin: 0 0 1rem; padding-left: 1.15rem; display: grid; gap: 0.5rem; list-style: disc; }
.legal li { color: var(--color-text-light); max-width: 64ch; }
.legal li::marker { color: var(--color-primary); }
.legal a:not(.btn) { color: var(--color-primary); font-weight: 560; text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.legal a:not(.btn):hover { color: var(--color-primary-dark); }
.legal__box { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin: 1.4rem 0; }
.legal__box p { margin: 0.3rem 0; max-width: none; }
.legal__box p strong { color: var(--color-ink); }

/* ----------------------------- 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; }
.error-page p { color: var(--color-text-light); max-width: 38ch; margin-bottom: 1.5rem; }
.error-page .btn { margin-bottom: 1.5rem; }

/* ----------------------------- 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 marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Entrance zoom only. Uses `backwards` (not `both`): a forwards/`both` fill
   would keep overriding the JS parallax transform in the cascade, freezing the
   poster. Without forwards-fill the inline transform set in script.js takes
   over once the entrance finishes. */
.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
.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; }
  .ref__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) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .feature-list { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}

@media (min-width: 880px) {
  .ref__grid { grid-template-columns: repeat(3, 1fr); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .ba-row { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--intro { grid-template-columns: 0.9fr 1.1fr; }
  .split--portfolio { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
  .split--reverse .split__media { order: 2; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .dark__grid { grid-template-columns: 1.05fr 0.95fr; }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
}

@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
}

/* Exactly-3 service grid: clean single row on desktop, stacked on mobile (no
   orphan card). Declared after the base .svc-grid breakpoints so it wins. */
.svc-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .svc-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Tasan 5 palvelua: 3 + 2. Alarivin kaksi korttia ovat leveämpiä, joten niiden
   kuvasuhde on loivempi ja rivien korkeus pysyy samana. Ei orpoa korttia
   millään leveydellä. Sama korttityyli ja samat animaatiot kuin muissa. */
.svc-grid--5 { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .svc-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--5 > :nth-child(5) { grid-column: 1 / -1; aspect-ratio: 24 / 9; }
}
@media (min-width: 1060px) {
  .svc-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .svc-grid--5 > * { grid-column: auto / span 2; }
  .svc-grid--5 > :nth-child(4),
  .svc-grid--5 > :nth-child(5) { grid-column: auto / span 3; aspect-ratio: 20 / 9; }
}

/* Exactly-2 service grid ("Tutustu muihin palveluihimme" on service pages).
   Also declared after the base .svc-grid breakpoints so it wins. */
.svc-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--2 .svc-card { aspect-ratio: 16 / 9; }
}

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  /* Drop will-change:transform here. The header still slides on scroll (mobile
     too) via a JS inline transform, but a transform OR will-change:transform
     makes the header a containing block for the position:fixed drawer, trapping
     it in the ~78px header box. We remove will-change, and setMenu() clears the
     inline transform when the menu opens — so while the drawer is shown the
     header has no transform and the drawer's inset:0 resolves against the
     viewport = full height. */
  .header { will-change: auto; }
  /* Back to a simple two-end bar; the centred-grid layout is desktop-only */
  .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);
    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);
    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; }
  /* Palvelut: hover-dropdown becomes a tap-to-open accordion in the drawer */
  .nav__item { position: static; width: 100%; }
  .nav__item > a { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav__chevron { width: 19px; height: 19px; }
  .nav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__item.open > .nav__dropdown { display: block; }
  .nav__dropdown a { padding: 0.9rem 0 0.9rem 1.1rem; font-size: 1.02rem; color: var(--color-text-light); border-radius: 0; }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible { background: transparent; color: var(--color-primary); }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.05rem; }
  /* Kartoitusnappi valikon alaosaan koko levyisenä. */
  .nav__cta { display: inline-flex; justify-content: center; margin-top: 1.5rem; padding: 0.95rem 1.4rem; font-size: 1rem; }
  /* Laatikossa nuoli seuraa vain .open-tilaa. Muuten :focus-within (fokus
     jää Palvelut-riville) ja kosketusnäytön jumiutuva :hover pitivät nuolen
     käännettynä, vaikka alavalikko oli jo suljettu. */
  .nav__item:hover > a .nav__chevron,
  .nav__item:focus-within > a .nav__chevron { transform: none; }
  .nav__item.open > a .nav__chevron { transform: rotate(180deg); }
  /* Logo + toggle sit above the full-height drawer; toggle bars + logo go dark
     against the light open panel so both stay visible. */
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  .nav.open ~ .menu-toggle span { background: var(--color-ink); }
  /* When the drawer is open, the top header strip takes the drawer's light
     surface so the dark logo + close icon stay legible at every mobile width
     (on the phone the drawer overlaps the logo; on a tablet it sits beside it).
     backdrop-filter MUST be cleared here: once scrolled the header carries it,
     and (like transform/will-change) it makes the header a containing block for
     the position:fixed drawer, trapping it in the ~78px header box. */
  body.no-scroll .header {
    background: var(--color-bg);
    box-shadow: none;
    color: var(--color-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.no-scroll .logo__light { opacity: 0; }
  body.no-scroll .logo__dark { opacity: 1; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(13,14,17,0.5); 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, 94vh, larger heading ----- */
@media (max-width: 767px) {
  .hero {
    /* 94vh on a normal phone; min-height lets it grow taller on very short
       screens where the content would not fit comfortably inside 94vh.
       (At mobile widths --zoom-factor is always 1, so plain vh is correct.) */
    min-height: 94vh;
    min-height: 94dvh;
    text-align: left;
    align-items: center;
    padding: 6rem var(--pad-x) 3.25rem;
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  /* Rating pill on one short line: [G logo] [4,8] [★★★★★], no review-count text,
     so the box is shorter than the desktop two-line version. */
  .hero__rating { align-self: flex-start; padding-block: 0.42rem; }
  .hero__rating-text { flex-direction: row; align-items: center; gap: 0; }
  .hero__rating-text small { display: none; }
  .hero__rating-stars { gap: 3px; }
  .hero__rating-stars svg { width: 15px; height: 15px; }
  .hero__rating-stars em { order: -1; margin: 0 5px 0 0; font-size: 0.98rem; }
  .hero h1 {
    /* Seedissä clamp(2.9rem, 10.5vw, 3.8rem). Pienennetty maltillisesti. */
    font-size: clamp(2.6rem, 9.8vw, 3.45rem);
    font-weight: 540;            /* slightly heavier than the desktop 450 */
    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; }

  /* Trust strip: left-aligned and slightly larger on mobile. */
  .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; }

  /* Intro/about portrait images (front page + service pages): shorter 3:2
     crop on phones so the photo doesn't dominate the stacked layout. */
  .split__media--portrait img { aspect-ratio: 3 / 2; }
}

@media (max-width: 520px) {
  .notice p { flex-basis: 100%; max-width: 100%; }
  .notice .btn { margin-left: 0; width: 100%; }
  .collage__inset { position: static; width: 100%; margin-top: 1rem; border: none; }
  .collage__badge { top: 0.6rem; right: 0.6rem; }
  .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; }
  .marquee__track { animation: none; }
  .hero__poster, .hero__video { animation: none; }
}

/* =========================================================================
   Saumaksi-kohtaiset lisäykset
   Yllä oleva on markus-manninen-demon CSS (pintaflow-sukuinen) Saumaksin
   värein. Alla logon, heron ja tumman osion sovitukset navy-brändiin sekä
   sivuston omat osat: Remppatori-arvostelut, palvelusivut, ennen/jälkeen-
   liukurit, lomakkeen palvelunvalinta ja yhteystietosivu.
   ========================================================================= */

/* Logo on leveä vaakamerkki (kilpi + "Saumaksi KYLPYHUONEHUOLTO", 800x181).
   Rajataan korkeus, jotta header pysyy samankorkuisena kuin seedissä. */
.logo img { height: 40px; width: auto; }
@media (max-width: 980px) { .logo img { height: 34px; } }
.footer__brand img { height: 48px; width: auto; }

/* Työmme-osion ennen/jälkeen-liukurit ovat pintaflow-seedin .ba-komponentti.
   Liukurin alla on vain otsikko ja ingressi. */
.ba-item { display: flex; flex-direction: column; }

/* Kollaasin pääkuva on pystykuva (959x1279, 3:4). Rajataan 4:5-suhteeseen,
   jotta kulmamerkki pysyy osion vinon yläreunan sisällä ja korkeus
   tasapainottaa viereisen tekstisarakkeen. */
.collage__main { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 55%; }

/* Heron tummennus navy-sävyisenä (saumaksi.fi:n oma hero on navy-peitteinen
   kylpyhuonekuva). Peittävyys kuten markus-manninen-demossa, jotta valkoinen
   otsikko erottuu vaaleasta laattapinnasta. */
.hero { background: var(--color-ink-deep); }
.hero__media::after {
  background:
    linear-gradient(to bottom, rgba(0,22,41,0.86) 0%, rgba(0,22,41,0.76) 42%, rgba(0,22,41,0.92) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(0,22,41,0.36) 28%, rgba(0,22,41,0.84) 100%);
}
/* Etusivun taustavideolla kevyempi tummennus, jotta lattiat, saumat ja
   liike erottuvat. Mitattu koko loopin ajalta videon vaaleimmissa kohdissa
   (valkoiset seinät): otsikon kontrasti vähintään 7,7:1 ja ingressin 7,1:1
   (WCAG AAA 7:1). Yllä oleva palvelusivujen tummennus antaisi 14:1. */
.hero__media--video::after {
  background:
    linear-gradient(to bottom, rgba(0,22,41,0.74) 0%, rgba(0,22,41,0.6) 42%, rgba(0,22,41,0.86) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(0,22,41,0.18) 28%, rgba(0,22,41,0.7) 100%);
}

/* Miksi-osio siirtyi tummalle taustalle. Checklistin oletusvärit on tehty
   vaalealle pinnalle (musta merkkiruutu, vaalea hiusviiva), joten ne
   käännetään: merkkiruutu vaaleaksi ja viivat tummiksi. Muoto, koko ja
   kulmaleikkaus pysyvät seedin mukaisina. */
.dark .check { border-top-color: var(--color-border-dark); }
.dark .check:last-child { border-bottom-color: var(--color-border-dark); }
.dark .check__mark { background: var(--color-accent); color: var(--color-ink); }
.dark .check b { color: var(--color-white); }
.dark .check span:not(.check__mark) { color: rgba(255,255,255,0.78); }

/* CTA tummalla pinnalla: sama vaalea nappi kuin herossa ja CTA-bannerissa. */
.dark .btn-primary { background: var(--color-white); color: var(--color-ink); }
.dark .btn-primary::before { background: var(--color-accent); }
.dark .btn-primary:hover { color: var(--color-ink); }

/* Kuvakenttä lomakkeessa (poimittu Saneeraus Penttilä -sivustolta, värit tämän
   pohjan muuttujista). Piilotettu file-input, katkoviivainen pudotusalue ja
   neliöruudukko esikatseluille, joissa poistonappi kulmassa. */
.kuvakentta { position: relative; }
.kuvakentta__input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.kuvakentta__pudotus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.5rem 1.1rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-light);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.kuvakentta__pudotus:hover { border-color: var(--color-primary); background: var(--color-surface); }
.kuvakentta__pudotus svg { width: 26px; height: 26px; color: var(--color-text-faint); }
.kuvakentta__teksti strong { color: var(--color-ink); font-family: var(--font-heading); font-weight: 560; }
/* Vihje on luettavaa tekstiä, joten se on apuvärillä eikä haaleammalla
   faint-sävyllä (faint valkoisella 2,9:1, WCAG vaatii 4,5:1). */
.kuvakentta__vihje { font-size: 0.78rem; color: var(--color-text-light); }
.kuvakentta__input:focus-visible + .kuvakentta__pudotus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0,33,57,0.1); }
.kuvakentta.is-yli .kuvakentta__pudotus { border-color: var(--color-primary); border-style: solid; background: var(--color-surface); }
.kuvakentta.is-invalid .kuvakentta__pudotus { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.12); }

.kuvakentta__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.55rem; }
.kuvakentta__lista:not(:empty) { margin-top: 0.6rem; }
.kuvakentta__kuva { position: relative; aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-bg-alt); }
.kuvakentta__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kuvakentta__koko { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.35rem; font-size: 0.68rem; color: var(--color-white); background: rgba(0,22,41,0.62); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kuvakentta__poista {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; padding: 0;
  border-radius: 50%;
  background: rgba(0,22,41,0.72);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kuvakentta__poista:hover { background: var(--color-error); }
.kuvakentta__poista svg { width: 13px; height: 13px; }
/* Lataustila: kuva himmenee ja sykkii kunnes tunniste on saatu. Virhetilassa
   kuva jää näkyviin harmaana ja rivi kertoo lyhyesti mikä meni pieleen.
   Epäonnistunut kuva ei estä lähetystä, joten se on kerrottava käyttäjälle. */
.kuvakentta__kuva.is-ladataan img { opacity: 0.45; animation: kuvakenttaLataus 1.2s ease-in-out infinite alternate; }
@keyframes kuvakenttaLataus { from { opacity: 0.3; } to { opacity: 0.6; } }
.kuvakentta__kuva.is-virhe { border-color: var(--color-error); }
.kuvakentta__kuva.is-virhe img { opacity: 0.3; filter: grayscale(1); }
.kuvakentta__kuva.is-virhe .kuvakentta__koko { background: var(--color-error); }

/* =========================================================================
   Sivuston omat osat (Saumaksi)
   ========================================================================= */

/* ----------------------------- Remppatori-merkki -----------------------
   Asiakasarviot ovat Remppatorista, joten niiden lähde näytetään
   Remppatorin logon kädenpuristusmerkillä, samaan tapaan kuin Googlen G
   muilla sivustoilla. Vaalealla pohjalla merkin omat värit, tummalla
   valkoinen ja vaaleansininen. */
.rt-merkki { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; }
.rt-merkki__a { fill: #101f41; }
.rt-merkki__b { fill: #3960bf; }
.rt-merkki--vaalea .rt-merkki__a { fill: var(--color-white); }
.rt-merkki--vaalea .rt-merkki__b { fill: var(--color-accent); }

.tahdet { display: inline-flex; align-items: center; gap: 2px; color: var(--color-primary); }
.tahdet svg { width: 16px; height: 16px; }

/* ----------------------------- Heron arvosana --------------------------
   Etusivun heron yläpuolella, ilman laatikkoa: merkki, 5,0, tähdet ja
   lähde. Pelkkä tieto, ei linkki. Puhelimella lähdeteksti piilotetaan,
   jolloin rivillä on vain merkki, 5,0 ja tähdet. */
.hero__arvio {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.6rem;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  margin: 0;
  animation-delay: 0.1s;
}
.hero__arvio .rt-merkki { width: 24px; height: 24px; }
.hero__arvio-luku { font-weight: 620; font-size: 1.06rem; line-height: 1; }
.hero__arvio .tahdet { color: var(--color-accent); }
.hero__arvio .tahdet svg { width: 15px; height: 15px; }
.hero__arvio-lahde { color: rgba(255, 255, 255, 0.8); font-weight: 450; }
@media (max-width: 767px) {
  .hero__arvio { justify-content: flex-start; font-size: 0.9rem; }
  .hero__arvio-lahde { display: none; }
}

/* Palvelusivujen otsikot ovat pidempiä kuin etusivun: "Silikonisaumojen
   vaihto" mahtuu yhdelle riville ja paikkakunta toiselle. */
.hero--page h1 { max-width: 24ch; }
/* Alasivujen herossa suora alareuna. Etusivun hero pitää vinon reunan. */
.hero--page { clip-path: none; }

/* ----------------------------- Arvostelut ------------------------------
   Etusivun Remppatori-arviot. Rakenne on sama kuin tervajussi.fi:n
   arvostelukarusellissa: keskitetty arvosanarivi, sitaatti ja sen alla
   arvioija. Osiossa ei ole otsikkoa; nimi tulee aria-labelista. Ilman
   JS:ää rata on tavallinen pysty pino, eli kaikki arviot ovat luettavissa.
   script.js (osio "Arvostelukaruselli") tekee siitä silmukan. */
#arvostelut { background: var(--color-white); }
.review-lift { text-align: center; max-width: 68rem; }

.review-lift__rating { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.review-lift__rating .rt-merkki { width: 28px; height: 28px; }
.review-lift__score { font-family: var(--font-heading); font-weight: 620; font-size: 1.3rem; line-height: 1; color: var(--color-ink); }
.review-lift__rating .tahdet svg { width: 18px; height: 18px; }
.review-lift__count { font-size: 0.92rem; color: var(--color-text-light); padding-left: 0.65rem; margin-left: 0.2rem; border-left: 1px solid var(--color-border-strong); }
.review-lift__count a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.2s ease; }
.review-lift__count a:hover { text-decoration-color: var(--color-primary); }

.review-lift__figure { margin: 0; }
/* Työn otsikko Remppatorista sitaatin yläpuolella: lukija näkee heti,
   mitä palvelua arvio koskee. */
.review-lift__tyo { margin: 0 0 1rem; font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-light); }
/* Sitaatti on osion suurin teksti, ja se saa levitä lähes koko osion
   leveydelle, jottei lyhyt arvio rivity kapeaksi palstaksi. Näytettävät
   arviot ovat noin 100-330 merkkiä. */
.review-lift__quote {
  margin: 0 auto;
  max-width: 62rem;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(1.45rem, 2.7vw, 2.1rem);
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  text-wrap: pretty;
}
.review-lift__mark { color: var(--color-primary); font-weight: 700; margin-left: -0.5em; margin-right: 0.04em; }
/* Pitkä arvio (yli ~160 merkkiä) hieman pienemmällä koolla ja koko
   leveydellä, jottei se venytä rataa ja jätä lyhyiden arvioiden ympärille
   tyhjää. Rata on pisimmän arvion korkuinen. */
.review-lift__quote--pitka { max-width: 66rem; font-size: clamp(1.18rem, 1.8vw, 1.48rem); line-height: 1.5; letter-spacing: -0.012em; }

.review-lift__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  /* Kiinteä leveys: erotinviiva on joka arviossa yhtä pitkä nimen
     pituudesta riippumatta. */
  width: min(100%, 18rem);
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  padding-top: clamp(1.3rem, 2.6vw, 1.8rem);
  border-top: 1px solid var(--color-border);
}
.review-lift__name { display: block; font-family: var(--font-heading); font-weight: 560; font-size: 1.05rem; color: var(--color-ink); }
.review-lift .review__avatar { font-size: 1.05rem; }

@media (max-width: 560px) {
  .review-lift__count { border-left: none; padding-left: 0; margin-left: 0; flex-basis: 100%; }
  .review-lift__mark { margin-left: 0; }
}

.review-lift__karuselli { margin-top: clamp(1.8rem, 3.6vw, 2.6rem); }
.review-lift__figure + .review-lift__figure { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.review-lift__karuselli--paalla .review-lift__figure + .review-lift__figure { margin-top: 0; }
.review-lift__karuselli--paalla .review-lift__ikkuna { overflow: hidden; }
.review-lift__karuselli--paalla .review-lift__rata { display: flex; align-items: stretch; transition: transform 0.55s var(--ease-soft); }
/* Yksi arvio vie ikkunan koko leveyden, rataa siirretään 100 %:n askelin. */
.review-lift__karuselli--paalla .review-lift__figure { flex: 0 0 100%; max-width: 100%; display: flex; flex-direction: column; padding-inline: 0.25rem; }
/* Radan korkeus on pisimmän arvion korkeus, joten osio ei hypi vaihdon
   aikana. Lyhyempi teksti keskitetään jäljelle jäävään tilaan, ja
   arvioijan tiedot pysyvät joka arviossa samalla korkeudella. */
.review-lift__karuselli--paalla .review-lift__teksti { margin-block: auto; }

.review-lift__ohjaus { display: flex; justify-content: center; align-items: center; gap: 0.9rem; margin-top: clamp(1.8rem, 3.4vw, 2.4rem); }

.karuselli__nappi {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft), transform 0.12s ease;
}
.karuselli__nappi svg { width: 22px; height: 22px; }
.karuselli__nappi:hover { border-color: var(--color-ink); }
.karuselli__nappi:active { background: var(--color-bg-alt); transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .review-lift__karuselli--paalla .review-lift__rata { transition: none; }
}

/* ----------------------------- Ennen/jälkeen-liukurit ------------------
   Vierekkäisistä pareista tulee pystykuvia (3:4, .ba--tall), päällekkäisistä
   vaakakuvia (3:2, .ba--vaaka). Vaakakuvat ovat kahden sarakkeen rivissä,
   samoin kaksi pystykuvaa (laattasaumasivu), jottei kolmas sarake jää tyhjäksi. */
.ba--vaaka { aspect-ratio: 3 / 2; }
.ba-row.ba-row--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .ba-row.ba-row--2 { grid-template-columns: repeat(2, 1fr); }
}
.ba-row + .ba-row { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Puhelimella kuusi liukuria allekkain olisi usean ruudun mittainen pino,
   joten etusivulla näytetään kolme ja loput napin takana. Ilman JS:ää
   luokkaa .is-rajattu ei tule, jolloin kaikki kuusi näkyvät. */
.ba-lisaa { display: none; }
@media (max-width: 599px) {
  .ba-row.is-rajattu > .ba-item:nth-child(n + 4) { display: none; }
  .ba-lisaa { display: flex; justify-content: center; margin-top: 1.6rem; }
}
.ba-lisaa .btn { width: 100%; }

/* ----------------------------- Palvelusivut ---------------------------- */
/* Esittelykuva on aito pystykuva (4:5). Etusivun .split__media--portrait
   on tässä pohjassa vaakakuva, joten pystykuville oma muunnelma. */
.split__media--pysty img { aspect-ratio: 4 / 5; height: auto; }
@media (max-width: 767px) { .split__media--pysty img { aspect-ratio: 3 / 2; } }
/* Palvelusivun esittely: kuva osion yläreunassa, ja se pysyy paikallaan
   vasemmassa laidassa, kun tekstipalstaa vieritetään. Vain rinnakkain-
   asettelussa; puhelimella kuva on tekstin yläpuolella tavallisesti.
   top jättää tilaa ylätunnisteelle, joka palaa näkyviin ylös vieritettäessä. */
@media (min-width: 880px) {
  #palvelu .split { align-items: start; }
  #palvelu .split__media { position: sticky; top: 7rem; }
}

/* Kaksipalstainen tarkistuslista. Viimeisillä riveillä on oma alaviiva,
   koska ruudukossa ne eivät saa seuraavan rivin yläviivaa. */
@media (min-width: 720px) {
  .checklist--2col { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
  .checklist--2col .check:last-child,
  .checklist--2col .check:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
}

/* Nappipari: ensisijainen nappi ja sen rinnalla puhelinlinkki. */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: 2.2rem; }
.link-puhelin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.98rem;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--color-border-strong);
  transition: text-decoration-color 0.2s ease;
}
.link-puhelin svg { width: 18px; height: 18px; color: var(--color-primary); }
.link-puhelin:hover { text-decoration-color: var(--color-primary); }
.dark .link-puhelin { color: var(--color-white); text-decoration-color: rgba(255, 255, 255, 0.4); }
.dark .link-puhelin svg { color: var(--color-accent); }
.dark .link-puhelin:hover { text-decoration-color: var(--color-accent); }

/* Tekstin sisäiset linkit osioiden johdannoissa, UKK:ssa ja tummalla. */
.section-head p a,
.faq details p a,
.split__body p a,
.legal__lead a,
.legal__box p a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.2s ease; }
.section-head p a:hover,
.faq details p a:hover,
.split__body p a:hover,
.legal__lead a:hover,
.legal__box p a:hover { text-decoration-color: var(--color-primary); }
.dark .check a,
.dark .dark__point a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.dark .check a:hover,
.dark .dark__point a:hover { text-decoration-color: var(--color-accent); }

/* "Miksi Saumaksi" -osion kollaasi (palvelusivut ja yrityksille): isona
   sivun palveluun liittyvä valmis kohde, päällä pienenä Mikael nimikyltin
   kanssa ja oikeassa yläkulmassa Remppatorin arvosana. Sama rakenne kuin
   etusivun kollaasissa (.collage), mutta pikkukuva näkyy myös puhelimella. */
.collage--miksi { width: 100%; max-width: 520px; margin-inline: auto; }
.collage__tekija {
  position: absolute;
  left: -1.2rem;
  bottom: -1.6rem;
  width: 42%;
  margin: 0;
  border: 5px solid var(--color-ink);
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.collage__tekija img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.collage__tekija figcaption {
  padding: 0.5rem 0.7rem 0.55rem;
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  line-height: 1.3;
}
.collage__tekija figcaption b { display: block; color: var(--color-white); font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; }
.collage__badge--arvio {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.collage__badge--arvio:hover { background: var(--color-primary-dark); }
.collage__badge--arvio .rt-merkki { width: 28px; height: 28px; }
/* Seedin .collage__badge span tekee kaikista spaneista lohkoja, palautetaan. */
.collage__badge--arvio > span { display: block; margin: 0; font-size: inherit; }
.collage__badge--arvio b { font-size: 1.55rem; }
.collage__badge--arvio .tahdet { display: inline-flex; margin: 0 0 0 0.3rem; font-size: inherit; color: var(--color-accent); vertical-align: 0.15em; }
.collage__badge--arvio .tahdet svg { width: 14px; height: 14px; }
.collage__badge--arvio .collage__lahde { display: block; margin-top: 0.3rem; font-size: 0.76rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); }
@media (max-width: 599px) {
  .collage--miksi { margin-bottom: 1.4rem; }
  .collage--miksi .collage__tekija { left: 0.7rem; bottom: -1.4rem; width: 40%; border-width: 4px; }
  .collage__tekija figcaption { padding: 0.4rem 0.55rem 0.45rem; font-size: 0.68rem; }
  .collage__tekija figcaption b { font-size: 0.8rem; }
}

/* ----------------------------- Lomake ---------------------------------- */
/* Palveluiden tarve: monivalinta pillereinä. Palvelusivulla sivun oma
   palvelu on valmiiksi valittuna. */
.valinnat { border: 0; margin: 0; padding: 0; min-width: 0; }
.valinnat legend { padding: 0; margin-bottom: 0.55rem; font-family: var(--font-heading); font-weight: 560; font-size: 0.88rem; color: var(--color-ink); }
.valinnat legend .opt { color: var(--color-text-light); font-weight: 400; }
.valinnat__lista { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.valinta { position: relative; display: inline-flex; }
.valinta input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.valinta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.2;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.valinta span::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-surface) center / 11px no-repeat;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.valinta span:hover { border-color: var(--color-ink); }
.valinta input:checked + span { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-ink); }
.valinta input:checked + span::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.valinta input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.field__opt { color: var(--color-text-light); font-weight: 400; }

/* Yhteyshenkilö kuvan kanssa yhteydenotto-osioissa. */
.henkilo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.8rem;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.henkilo img { width: 76px; height: 76px; flex-shrink: 0; object-fit: cover; object-position: center 18%; background: var(--color-ink); }
.henkilo b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; color: var(--color-ink); }
.henkilo span { display: block; color: var(--color-text-light); font-size: 0.92rem; }
.section--alt .henkilo { background: var(--color-surface); }

/* ----------------------------- Yhteystiedot ja tietosuoja --------------- */
/* Murupolku vaalealla taustalla (sivut ilman herokuvaa). */
.crumbs--dark ol { justify-content: flex-start; }
.crumbs--dark li { color: var(--color-text-light); }
.crumbs--dark li + li::before { color: var(--color-border-strong); }
.crumbs--dark a { color: var(--color-text-light); text-decoration-color: var(--color-border-strong); }
.crumbs--dark a:hover { color: var(--color-ink); text-decoration-color: var(--color-primary); }
.crumbs--dark [aria-current="page"] { color: var(--color-ink); }
.legal-page h1 { margin-top: 1.4rem; }
.legal-page--ylaosa { padding-bottom: 0; }

/* Arvot (yhteystiedot): kolme paneelia hiusviivaruudukossa. */
.arvot { display: grid; gap: 1px; margin-top: clamp(2.2rem, 4vw, 3rem); background: var(--color-border-strong); border: 1px solid var(--color-border-strong); }
@media (min-width: 760px) { .arvot { grid-template-columns: repeat(3, 1fr); } }
.arvo { background: var(--color-surface); padding: clamp(1.6rem, 3vw, 2.2rem); }
.arvo__ikoni { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--color-primary); color: var(--color-on-primary); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.arvo__ikoni svg { width: 24px; height: 24px; }
.arvo h3 { margin-bottom: 0.45rem; }
.arvo p { margin: 0; color: var(--color-text-light); font-size: 0.98rem; }

/* Toimialueen kunnat luettelona (yhteystiedot, yrityksille). */
.kunnat { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.kunnat li { padding: 0.32rem 0.7rem; border: 1px solid var(--color-border-strong); font-size: 0.86rem; color: var(--color-text); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }

/* Leipätekstikappale otsikon alla. Referenssisivustoilla sama tehtiin
   inline-tyylillä (color + margin-top); luokkana se on yhdessä paikassa. */
.teksti { color: var(--color-text-light); margin-top: 1rem; }
.dark .teksti { color: rgba(255, 255, 255, 0.82); }

/* Näkymätön teksti ruudunlukijoille (esim. arvosanan "/ 5"). */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 404-sivun linkit. */
.error-page__linkit a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border-strong); }
.error-page__linkit a:hover { text-decoration-color: var(--color-primary); }

/* Puhelinnumero ja Y-tunnus eivät saa katketa rivinvaihdossa keskeltä. */
a[href^="tel:"], .nobr { white-space: nowrap; }

/* Puhelimella kollaasin pikkukuva (Mikael) venyisi koko ruudun levyiseksi
   pääkuvan alle. Hän on jo yhteydenotto-osion kortissa, joten pikkukuva
   jätetään kapeilla näytöillä pois ja osio pysyy lyhyempänä. */
@media (max-width: 520px) {
  .collage__inset { display: none; }
}