/* =========================================================================
   Terva-Jussi Oy - style.css
   Rakenne pintaflow-seedistä markus-manninen-demon kautta. Ainoa ero on
   väripaletti: puhtaanvalkoinen sivu, tumma hero ja tumma inverse-osio sekä
   punainen aksentti tervajussi.fi:n omasta CSS:stä. Rakenne, animaatiot ja
   kulmageometria ovat seedistä muuttumattomina.
   Order: 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
   ========================================================================= */

/* ----------------------------- Kirjasimet ------------------------------
   Kirjasimet tarjoillaan sivuston omalta palvelimelta, ei Google Fontsista.
   Syy on latausnopeus: 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. Nyt @font-face on
   samassa style.css:ssä, joten haku lähtee heti ja tiedostot tulevat
   samalta yhteydeltä yhden vuoden välimuistilla.

   Kaikki kolme ovat muuttuvia kirjasimia (variable fonts), joten yksi
   tiedosto kattaa koko lihavuusvälin. Sivusto käyttää välipainoja kuten
   540 ja 560, jotka toimivat vain muuttuvalla kirjasimella.

   Latin riittää suomeen: ä ja ö ovat välillä U+0000-00FF. Latin-ext
   ladataan vain jos sivulla esiintyy sen merkkejä, esimerkiksi vieraskielinen
   nimi. unicode-range hoitaa valinnan selaimessa, joten tavallisella
   suomenkielisellä sivulla latautuu vain kolme latin-tiedostoa.

   Lisenssi: Hanken Grotesk, Raleway ja Schibsted Grotesk ovat SIL Open Font
   License 1.1:n alaisia, joka sallii itse tarjoilun.
   ---------------------------------------------------------------------- */

/* Hanken Grotesk - leipäteksti */
@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;
}

/* Raleway - vain h1 ja h2 */
@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;
}

/* Schibsted Grotesk - väliotsikot ja käyttöliittymäelementit */
@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 (tervajussi.fi): punainen #cb151a on sivuston linkkien, navin
     aktiivisen tilan ja logon J-merkin väri. Tumma #231f20 on alkuperäisen
     navipalkin ja footerin taustaväri. Sivupohja on puhtaanvalkoinen, ja
     vuorottelevat osiot hyvin vaaleaa harmaata.
     --color-accent on VAIN tummilla pinnoilla käytettävä kirkkaampi punainen:
     brändipunainen jää liian tummaksi #231f20-taustaa vasten. */
  --color-primary: #cb151a;      /* brändipunainen - valkoinen teksti tälle */
  --color-primary-dark: #a31015; /* tummempi (hover sweep / painallus) */
  --color-primary-soft: #f2f3f4; /* vaalea neutraali ikonipinnoille */
  --color-accent: #ef4a50;       /* kirkas punainen - aksentti VAIN tummalla */
  --color-on-primary: #ffffff;   /* teksti/ikonit primary-pinnoilla */
  /* Tummat pinnat ovat neutraalia tummanharmaata, EIVÄT tervajussi.fi:n omaa
     #231f20:tä: siinä on punaista vivahdetta (R35 G31 B32), joka näkyy isolla
     pinnalla ruskehtavana. Punainen jää aksentiksi, tausta pysyy harmaana. */
  --color-ink: #202224;          /* tumma inverse -osioiden pinta */
  --color-ink-deep: #202224;     /* hero-scrim ja footer, sama tummanharmaa */
  --color-text: #191b1c;         /* leipätekstin lähes musta */
  --color-text-light: #6a6d70;   /* harmaa aksentti- ja apuväri */
  --color-text-faint: #979a9d;
  --color-bg: #ffffff;           /* puhtaanvalkoinen sivupohja */
  --color-surface: #ffffff;      /* kortit */
  --color-bg-alt: #f4f5f6;       /* kevyt inverse: hyvin vaalea harmaa */
  --color-border: #e5e6e7;       /* hiusviiva */
  --color-border-strong: #cfd1d3;
  --color-border-dark: #34373a;  /* 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));
}
#arvostelut, #tarjous { background: var(--color-bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

/* 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.open > a .nav__chevron { transform: rotate(180deg); }
/* Hover ja focus-within kelpaavat vain työpöydällä. Mobiilissa kosketus jättää
   Palvelut-linkin fokukseen, jolloin :focus-within piti nuolen käännettynä
   vaikka haitari oli jo suljettu. Siellä nuolta ohjaa pelkkä .open-luokka. */
@media (min-width: 981px) {
  .nav__item:hover > a .nav__chevron,
  .nav__item:focus-within > 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; }
/* Alapalvelut (esim. Terassin rakentaminen) sisennetään pääpalvelunsa alle.
   Ohut pystyviiva sitoo peräkkäiset alakohdat yhteen ryhmään, jolloin
   hierarkia näkyy ilman erillisiä väliotsikoita. */
.nav__dropdown .nav__subitem {
  padding-left: 1.9rem;
  font-size: 0.88rem;
  color: var(--color-text-light);
}
.nav__dropdown .nav__subitem::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.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;
  /* V-muotoinen alareuna: reuna laskee vasemmasta laidasta alimpaan kohtaansa
     30 %:n kohdalla ja nousee sieltä oikeaan laitaan. Vasen haara on lyhyempi
     (30 % leveydestä) kuin oikea (70 %), joten sen nousu on puolet syvyydestä.
     Näin haarojen kulma on suunnilleen sama eikä vasen laita nouse jyrkästi.
     --hero-v on haaran nousu kärjestä oikeaan laitaan. Se säätää taitteen
     jyrkkyyttä: mitä pienempi, sitä loivempi V. --hero-lift nostaa koko
     taitteen irti osion alareunasta, jolloin kärki ei ulotu ihan pohjaan.
     Muiden osiorajojen --edge ei muutu. */
  --hero-v: calc(var(--edge) * 1.1);
  --hero-lift: calc(var(--edge) * 0.35);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--hero-lift) - var(--hero-v)),
    30% calc(100% - var(--hero-lift)),
    0 calc(100% - var(--hero-lift) - var(--hero-v) * 0.5)
  );
}
.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; }
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 1;
}
.hero__media.video-ready .hero__poster { opacity: 0; transition: opacity 0.8s 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; }

/* ----------------------------- Faktapalkki ----------------------------- */
/* Mitattavat arvolupaukset yleisluontoisten lupausten ("aikataulu pitää",
   "ystävällistä palvelua") tilalla. Kaksi käyttöpaikkaa:
   - Yhteystiedot: neljä lukua heron alla ja niiden alla .faktat__rivi.
   - Palvelusivut (.faktat--palvelu): neljä ruutua ilman alariviä, ja vasta
     yritysesittelyn alla tumman UKK-osion päällä. Sivun alku kuuluu
     palvelulle, joten luvut eivät ole heti heron alla.
   - Etusivu (.faktat--tumma): samat neljä ruutua tumman "Miksi Terva-Jussi"
     -osion alaosassa, osion oman containerin sisällä.
   Luvut ja niiden lähteet ovat README:n osiossa "Sivuston luvut": päivitä
   sivut ja README yhtä aikaa. Alarivi käyttää trustbarin .trust-item-tyylejä
   sellaisenaan. */
.faktat { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-block: clamp(1.7rem, 3.4vw, 2.6rem); }
/* Palvelusivuilla palkki erotetaan yläpuolisesta esittelystä eikä
   alapuolisesta tummasta osiosta: hiusviiva siirtyy ylös. */
.faktat--palvelu { border-bottom: 0; border-top: 1px solid var(--color-border); }
.faktat__ruudukko { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.7rem 0; }
.fakta { min-width: 0; padding-inline: clamp(0.9rem, 2.4vw, 2rem); border-left: 1px solid var(--color-border); }
.fakta:nth-child(odd) { border-left: 0; padding-left: 0; }
.fakta__luku { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.55rem); line-height: 1; letter-spacing: -0.035em; color: var(--color-text); white-space: nowrap; }
.fakta__luku small { font-family: var(--font-heading); font-weight: 560; font-size: 0.4em; letter-spacing: -0.01em; color: var(--color-text-light); margin-left: 0.1em; }
.fakta__tahdet { display: inline-flex; gap: 1px; margin-left: 0.4rem; color: var(--color-primary); vertical-align: 0.3em; }
.fakta__tahdet svg { width: 13px; height: 13px; }
/* Googlen G-merkki arvostelurauudussa. Koko sidotaan luvun fonttikokoon,
   jotta merkki skaalautuu luvun mukana. Merkki on brändin oma neliväri,
   joten se ei peri .fakta__luku-värejä. */
.fakta__google { display: inline-block; width: 0.72em; height: 0.72em; margin-right: 0.32rem; vertical-align: -0.035em; }
.fakta__nimi { display: block; margin-top: 0.55rem; font-family: var(--font-heading); font-weight: 560; font-size: 0.95rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); }
.fakta__lisa { display: block; margin-top: 0.2rem; font-size: 0.82rem; line-height: 1.4; color: var(--color-text-light); overflow-wrap: anywhere; }
/* Luotettava Kumppani -merkki korvaa luvun yhdessa ruudussa. Korkeus
   sidotaan luvun kokoon, jotta rivi pysyy tasapainossa. */
.fakta__merkki { display: block; width: auto; height: clamp(2.1rem, 5.6vw, 2.9rem); max-width: 100%; object-fit: contain; object-position: left center; }
/* Kapealla näytöllä allekkain: rivitys ei ole luotettava, kun kohteet ovat
   eri mittaisia ja gap on iso. Leveämmällä sama rivi. */
.faktat__rivi { display: grid; gap: 0.6rem; margin-top: clamp(1.4rem, 2.6vw, 1.9rem); padding-top: clamp(1.2rem, 2.4vw, 1.6rem); border-top: 1px solid var(--color-border); }
.faktat__rivi .trust-item { font-size: 0.92rem; font-weight: 500; }
.faktat__rivi .trust-item svg { width: 19px; height: 19px; }

@media (min-width: 760px) {
  .faktat__ruudukko { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .fakta:nth-child(odd) { border-left: 1px solid var(--color-border); padding-left: clamp(0.9rem, 2.4vw, 2rem); }
  .fakta:first-child { border-left: 0; padding-left: 0; }
  .faktat__rivi { display: flex; flex-wrap: wrap; gap: 0.7rem 2.2rem; }
  .faktat__rivi .trust-item { font-size: 0.97rem; }
}

/* ----------------------------- 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; }

/* Mobiilissa etusivun intro-osiossa tekstit ylhäällä ja kuva niiden alla.
   Ylärajana 879.98 px, koska 880 px:stä .split menee kahteen palstaan. */
@media (max-width: 879.98px) {
  .split--teksti-ensin-mobiilissa .split__body { order: 1; }
  .split--teksti-ensin-mobiilissa .split__media { order: 2; }
}

/* 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__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; }

/* ----------------------------- Kuvagalleria ---------------------------- */
/* Palvelusivujen "Töitämme" on pelkkä kuvaosio: ei otsikoita eikä kuvatekstiä
   kuvien päällä. Ruudukko on kolmen kuvan levyinen, jolloin jokainen rivi
   täyttyy kokonaan eikä loppuun jää aukkoa. Panoraamakuva (.ref-card--levea)
   vie oman rivinsä kokonaan, joten reunat pysyvät samassa linjassa. */
.ref__grid { display: grid; gap: var(--ref-gap); grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); --ref-gap: 1rem; }
.ref-card { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-bg-alt); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.ref-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-soft); }
.ref-card:hover img { transform: scale(1.04); }
/* Panoraamakuvat ovat 5:2, joten sama kuvasuhde tässä pitää ne rajaamattomina. */
.ref-card--levea { grid-column: 1 / -1; aspect-ratio: 5 / 2; }

/* ------------------------- Galleria puhelimella ------------------------ */
/* Puhelimella pystykuvien pino venyttää Töitämme-osion useiden ruutujen
   mittaiseksi ja kuvat jäävät selaamatta. Siksi ruudukko vaihtuu alle 600 px
   leveydellä vaakakaruselliksi: yksi kuva kerrallaan, seuraavasta pilkistää
   reuna oikeassa laidassa ja alla oikealla on nuolinapit. Sormella selaaminen
   on selaimen omaa vierrytystä (scroll-snap), joten se toimii myös silloin
   kun JS ei lataudu. Loputtoman silmukan kloonit ja nuolinapit lisää
   script.js, joka myös purkaa karusellin jos ikkuna kasvaa työpöytäkokoon. */
@media (max-width: 599px) {
  .ref__grid--karuselli {
    --ref-gap: 0.75rem;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;  /* html:n smooth ei saa hidastaa silmukan huomaamatonta siirtoa */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ref__grid--karuselli::-webkit-scrollbar { display: none; }
  .ref__grid--karuselli > .ref-card { scroll-snap-align: start; }
  /* Karusellissa jokainen ruutu on saman kokoinen, myös panoraamakortti:
     eri korkuiset ruudut hyppisivät selatessa. */
  .ref__grid--karuselli > .ref-card--levea { grid-column: auto; aspect-ratio: 4 / 5; }
  /* Reveal-animaatio pois karusellista. Vaakasuunnassa se laukeaisi kesken
     sormivedon, eivätkä JS:n lisäämät kloonit koskaan saisi .in-luokkaa,
     jolloin osa kuvista jäisi pysyvästi näkymättömiin. */
  .js .ref__grid--karuselli > .reveal { opacity: 1; transform: none; }

  /* Kortti, joka on esillä vain isommalla ruudulla. Käytössä
     kiinteistönhuollon kaivinkonekuvalla: leveä panoraama ei toimi
     puhelimen kapeassa karusellissa. */
  .ref-card--ei-mobiilissa { display: none; }

  /* Jos sivulla on Töitämme-galleria, "Miksi Terva-Jussi" -osion oma kuva
     jätetään puhelimella pois. Kuvia on siinä kohtaa sivua jo riittävästi,
     eikä sama pakettiautokuva toistu heti gallerian perässä. Ilman
     galleriaosiota kuva on normaalisti esillä, joten sääntö korjaantuu
     itsestään jos galleria joskus poistetaan sivulta. */
  body:has(#toitamme) #meista .split__media { display: none; }
}

/* ------------- "Miksi Terva-Jussi" -osion puoli työpöydällä ------------ */
/* Pari edellisen säännön kanssa: molemmat katsovat onko sivulla
   Töitämme-galleria. Galleriattomalla palvelusivulla "Miksi Terva-Jussi" jää
   sivun ainoaksi kuvalliseksi osioksi heti palvelun esittelyn perään, jolloin
   kaksi kuvaa peräkkäin samalla puolella näyttää yksitoikkoiselta. Siksi
   asettelu peilataan työpöydällä: kuva oikealle, teksti vasemmalle.
   Sarakeleveydet vaihtavat samalla paikkaa, jotta kuvan sarake pysyy
   kapeampana kuten toisinkin päin. Galleriasivuilla asettelu on ennallaan,
   kuva vasemmalla. Peilaus alkaa 880 px:stä, jossa .split menee kahteen
   sarakkeeseen; sitä kapeammalla osiot ovat joka tapauksessa allekkain.
   Vanha selain, joka ei tunne :has():ia, ohittaa säännön ja saa gallerian
   kanssa yhtenevän asettelun eli kuvan vasemmalle. */
@media (min-width: 880px) {
  body:not(:has(#toitamme)) #meista .split--intro { grid-template-columns: 1.1fr 0.9fr; }
  body:not(:has(#toitamme)) #meista .split__media { order: 2; }
}

/* Nuolinapit. Piilossa työpöydällä, jossa koko galleria näkyy kerralla. */
.karuselli__ohjaus { display: none; }
@media (max-width: 599px) {
  .karuselli__ohjaus { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; }
}
.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); }

/* ----------------------------- 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; }
.footer__bottom a:hover { color: var(--color-white); }
.footer__credit { color: rgba(255,255,255,0.56); }
/* Toteuttajan linkki pysyy credit-rivin hillityssä sävyssä, jottei se
   kilpaile tietosuojaselosteen kanssa. Aksenttiväri vasta hoverissa. */
.footer__credit a { color: rgba(255,255,255,0.7); }
.footer__credit a:hover { color: var(--color-accent); }
.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; }
/* Palvelusivujen otsikot ovat pidempiä kuin etusivun, joten ne saavat
   levittäytyä lähes koko hero-palstan leveydelle. 17ch katkaisi ne
   turhan kapeaksi pinoksi (esim. esteettömyyssivulla neljälle riville). */
.hero--page h1 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); max-width: 38ch; }
.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; }
}

/* Tumman UKK-osion yläpuolella on valkoinen faktapalkki ja sivupohja on
   sekin valkoinen, joten vinon yläreunan kiila lukee valkoisena ilman
   erillistä nostoa. Nosto myös söisi faktapalkin matalan alapehmusteen. */

/* Muut palvelut: vaalea osio liu'utetaan tumman osion alareunan vinon alle,
   jotta diagonaalin alapuolinen kiila lukee samalla vaalealla. */
#muut {
  background: var(--color-white);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}

/* 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; }

/* UKK tummalla taustalla (palvelusivut): haitarin pinnat, reunat ja teksti
   kaannetaan tummaan. Avattu kysymys saa aksenttivarisen plusmerkin. */
.dark .faq details { background: rgba(255,255,255,0.05); border-color: var(--color-border-dark); }
.dark .faq details[open], .dark .faq details:hover { border-color: rgba(255,255,255,0.3); }
.dark .faq summary { color: var(--color-white); }
.dark .faq summary:hover { color: var(--color-accent); }
.dark .faq__ic { background: rgba(255,255,255,0.12); color: var(--color-white); }
.dark .faq details[open] .faq__ic { background: var(--color-accent); color: var(--color-ink); }
.dark .faq details p { color: rgba(255,255,255,0.72); }
.dark .faq a { color: var(--color-white); }

/* 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; }
  /* Palvelusivujen hero saa puhelimella hieman lisaa korkeutta: otsikko, lead
     ja kaksi CTA:ta tarvitsevat enemman ilmaa kuin vinkkisivujen lyhyempi
     sisalto. Vinkit ja artikkelit jaavat 78dvh:hon. */
  .hero.hero--page.hero--palvelu { min-height: 88vh; min-height: 88dvh; }
  /* Yleisen mobiiliheron 15ch katkaisisi palvelusivujen pidemmät otsikot
     turhan kapeaksi pinoksi; puhelimella riviä rajaa jo ruudun leveys. */
  .hero.hero--page h1 { font-size: clamp(2.35rem, 9vw, 3.2rem); max-width: 100%; }
  .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); }

/* Vain varsinainen selostesivu on <main class="legal-page">. Yhteystiedoilla
   sama luokka on pelkkä otsikkolohko (<section>), joten se jää ennalleen. */
main.legal-page { padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
main.legal-page .crumbs { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }

/* Tekstipalsta alkaa vasemmasta laidasta, samasta pystylinjasta kuin murupolku
   ja sivuston muu sisältö. Keskitetty palsta jätti desktopilla leveän tyhjän
   kaistaleen vasemmalle ja näytti irralliselta muusta sivustosta. Rivin pituus
   rajataan ch-yksiköllä, ei kiinteällä pikselileveydellä. */
.legal { max-width: 74ch; margin-inline: 0; font-size: 1.05rem; line-height: 1.75; }
.legal h1 { font-size: clamp(2.4rem, 5.4vw, 3.5rem); line-height: 1.04; }
.legal__updated { font-size: 0.85rem; color: var(--color-text-light); margin: 1.2rem 0 0; }
.legal__lead { color: var(--color-text-light); font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.62; margin: 2.2rem 0 0; max-width: 62ch; }

/* Numeroitujen kohtien väliin hiusviiva ja reilusti ilmaa: pitkä seloste on
   silmäiltävä, ei yhtenäinen tekstimassa. Viiva asettuu suunnilleen puoliväliin
   edellisen kappaleen ja otsikon välissä olevaa tyhjää. */
.legal h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 1.15rem;
  padding-top: clamp(1.6rem, 2.4vw, 2rem);
  border-top: 1px solid var(--color-border);
}
.legal h2:first-of-type { margin-top: clamp(2.4rem, 4vw, 3.2rem); }
.legal p { color: var(--color-text-light); margin: 0 0 1.2rem; }
.legal ul { margin: 0.3rem 0 1.7rem; padding-left: 1.35rem; display: grid; gap: 0.75rem; list-style: disc; }
.legal li { color: var(--color-text-light); padding-left: 0.2rem; }
.legal li::marker { color: var(--color-primary); }
.legal a:not(.btn) { color: var(--color-primary); font-weight: 560; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; 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: clamp(1.5rem, 2.8vw, 2.1rem) clamp(1.6rem, 3vw, 2.3rem); margin: clamp(2.6rem, 4.5vw, 3.6rem) 0 1.4rem; }
.legal__box p { margin: 0.45rem 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(3, 1fr); --ref-gap: 1.2rem; }  /* kolme saraketta jo tästä, jotta rivi ei jää vajaaksi */
  .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) {
  .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 .nav__subitem { padding-left: 2.4rem; font-size: 0.94rem; }
  .nav__dropdown .nav__subitem::before { left: 1.5rem; }
  .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; }
  /* Mobiilivalikon alaosassa sama CTA kuin työpöydän navissa: koko leveydeltä
     ja täydessä nappikoossa (btn-sm:n kavennus perutaan). */
  .nav__cta {
    display: inline-flex;
    width: 100%;
    margin-top: 1.4rem;
    padding: 1.05rem 1.7rem;
    min-height: 54px;
    font-size: 0.98rem;
  }
  /* 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,
       ja kertaalleen lisää puhelimella. */
    font-size: clamp(2.3rem, 8.7vw, 3.1rem);
    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__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 { animation: none; }
}

/* =========================================================================
   Demokohtaiset lisäykset (Terva-Jussi Oy)
   Kaikki muu tässä tiedostossa on markus-manninen-demon CSS sellaisenaan.
   Alla vain heron arvosana ilman laatikkoa, arvostelun Google-logo, logon
   sovitus sekä yksi Mikon pyytämä uusi lohko: nostettu yksittäinen arvostelu.
   ========================================================================= */

/* Heron arvosana ilman laatikkoa: pelkkä Google-logo, arvosana ja tähdet
   vapaana kuvan päällä. Järjestys logo, 5,0, tähdet. */
.hero__rating {
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  gap: 0.5rem;
}
.hero__rating-score {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  color: var(--color-white);
}
.hero__rating-stars svg { width: 15px; height: 15px; }

/* Arvostelukortin lähdemerkintä: pieni Google-logo ja teksti samalla rivillä. */
.review__src-logo { display: inline-flex; align-items: center; gap: 0.34rem; }
.review__src-logo svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Logo on leveä sanamerkki (384x152, suhde 2,5:1). Rajataan korkeus, jotta
   header pysyy samankorkuisena kuin seedissä. Hieman markus-manninen-demoa
   korkeampi, jotta logon alarivin osoite pysyy luettavana. */
.logo img { height: 58px; width: auto; }
@media (max-width: 980px) { .logo img { height: 46px; } }
.footer__brand img { height: 68px; width: auto; }

/* -------------------------------------------------------------------------
   Palveluruudukko 3 + 2 (Mikon pyyntö)
   Palveluita on viisi, joten kolmen sarakkeen ruudukon alariville jäi tyhjä
   solu. Ruudukko on nyt kuusi saraketta: ylärivin kolme korttia vievät kaksi
   saraketta each ja alarivin kaksi korttia kolme, jolloin alarivi täyttyy
   laidasta laitaan. Koska alarivin kortit ovat puolitoista kertaa leveämpiä,
   niille annetaan matalampi kuvasuhde: 16/11 venyttäisi ne selvästi ylärivin
   korkuisia korkeammiksi. 5/2 tekee niistä myös hieman ylärivia matalammat.
   Alle 760px ruudukko on yksisarakkeinen ja kortit ovat seedin mittaisia.
   ------------------------------------------------------------------------- */
@media (min-width: 760px) {
  .svc-grid--3 { grid-template-columns: repeat(6, 1fr); }
  /* Ylärivi: kortti on 407px leveä, kuvasuhde 1,5 -> korkeus 271px. */
  .svc-grid--3 > .svc-card { grid-column: span 2; aspect-ratio: 1.5; }
  /* Alarivi: kortti on 621px leveä, joten se tarvitsee selvästi loivemman
     kuvasuhteen pysyäkseen ylärivia matalampana. 2,45 -> 253px. */
  .svc-grid--3 > .svc-card:nth-child(4),
  .svc-grid--3 > .svc-card:nth-child(5) { grid-column: span 3; aspect-ratio: 2.45; }
}

/* Kollaasin pääkuva on lähes neliö (1000 x 871). Tekstipalsta osion
   vasemmassa sarakkeessa on kahden kappaleen mittainen, joten 8:7 pitää
   sarakkeet suunnilleen saman korkuisina. Object-position on keskellä, koska
   kuva on valmiiksi rajattu. Kulmamerkki pysyy osion vinon yläreunan
   sisällä. */
.collage__main { aspect-ratio: 8 / 7; object-fit: cover; object-position: center; }

/* -------------------------------------------------------------------------
   Nostettu yksittäinen arvostelu (Mikon pyyntö)
   Terva-Jussilla on Google 5,0 mutta vain yksi arvostelu on tarpeeksi pitkä
   näytettäväksi. Kortiruudukon ja laatikon sijaan osio on keskitetty
   typografinen nosto: ei taustaa, ei reunaa, ei kulmaleikkausta. Sitaatti on
   osion suurin elementti, ja sen ylä- ja alapuolella ovat arvosana ja
   arvostelijan tiedot. Fontit, värit ja välistykset tulevat seedin muuttujista.
   ------------------------------------------------------------------------- */
.review-lift { text-align: center; max-width: 60rem; }

/* Osiossa ei ole otsikkoa eikä eyebrowta (Mikon pyyntö): arvosanarivi on
   osion ensimmäinen elementti ja sitaatti ainoa sisältö. Osion nimi tulee
   <section>-elementin aria-labelista. */

/* Arvosanarivi: Google-logo, 5,0, tähdet ja erotinviivan takana lähdeteksti. */
.review-lift__rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.review-lift__logo { display: inline-flex; }
.review-lift__logo svg { width: 24px; height: 24px; display: block; }
.review-lift__score {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1;
  color: var(--color-ink);
}
.review-lift__stars { display: inline-flex; align-items: center; gap: 2px; color: var(--color-primary); }
.review-lift__stars svg { width: 18px; height: 18px; }
.review-lift__count {
  font-size: 0.88rem;
  color: var(--color-text-light);
  padding-left: 0.6rem;
  margin-left: 0.25rem;
  border-left: 1px solid var(--color-border-strong);
}

.review-lift__figure { margin: 0; }

/* Sitaatti on osion suurin teksti. Riviväli on tiukka ja kirjainväli negatiivinen,
   samaan tapaan kuin seedin h2:ssa, jotta iso koko pysyy ryhdikkäänä. */
.review-lift__quote {
  /* Ylämarginaali on kääreellä (.review-lift__karuselli), koska karusellissa
     sitaatin pystymarginaalit ovat auto (keskitys jäljelle jäävään tilaan). */
  margin: 0 auto;
  max-width: 30ch;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(1.5rem, 3.6vw, 2.65rem);
  line-height: 1.26;
  letter-spacing: -0.028em;
  color: var(--color-ink);
  text-wrap: balance;
}

/* Avaava lainausmerkki roikkuu tekstin vasemmalla puolella eikä työnnä
   ensimmäistä riviä sisennykseen: siksi negatiivinen margin-left. */
.review-lift__mark {
  color: var(--color-primary);
  font-weight: 700;
  margin-left: -0.5em;
  margin-right: 0.04em;
}

/* Arvostelijan tiedot: ohut viiva erottaa sitaatista, sisältö keskitetty. */
.review-lift__who {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--color-border);
  max-width: 20rem;
  margin-inline: auto;
}
.review-lift__whotext { text-align: left; }
.review-lift__name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1rem;
  color: var(--color-ink);
}
.review-lift__who .review__src { display: flex; margin-top: 0.15rem; }

@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; }
}

/* -------------------------------------------------------------------------
   Arvostelukaruselli
   Osion asettelu on sama kuin silloin kun esillä oli yksi nostettu arvostelu:
   keskitetty arvosanarivi, iso sitaatti ja sen alla arvostelijan tiedot.
   Uutta on vain rata, jolla arvostelu vaihtuu, ja radan alla olevat
   nuolinapit.

   Perustila on tavallinen pysty pino, eli jos JS ei lataudu, kaikki neljä
   arvostelua ovat luettavissa. script.js lisää kääreelle luokan --paalla,
   jolloin radasta tulee vaakarivi ja ikkuna rajaa siitä yhden arvostelun
   kerrallaan. Silmukka on loputon: rata on kloonattu molempiin päihin.
   ------------------------------------------------------------------------- */
.review-lift__karuselli { margin-top: clamp(1.6rem, 3.4vw, 2.4rem); }

/* Pinossa arvostelujen väliin tarvitaan ilmaa, karusellissa ei, koska
   ruudussa on aina vain yksi arvostelu. */
.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 arvostelu vie tasan ikkunan leveyden, joten rataa siirretään sadan
   prosentin askelin. Kortit eivät kutistu (flex-shrink: 0). */
.review-lift__karuselli--paalla .review-lift__figure {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

/* Radan korkeus on pisimmän arvostelun korkeus, joten osio ei hyppää vaihdon
   aikana. Lyhyemmässä arvostelussa sitaatti keskitetään jäljelle jäävään
   tilaan (margin: auto) ja arvostelijan tiedot jäävät alareunaan, jolloin
   nimirivi on joka arvostelussa samalla korkeudella. */
.review-lift__karuselli--paalla .review-lift__quote { margin: auto; }

/* Nuolinapit keskitettynä radan alle. Napin muoto ja koko tulevat gallerian
   kanssa yhteisestä .karuselli__nappi-tyylistä. */
.review-lift__ohjaus {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: clamp(1.8rem, 3.4vw, 2.4rem);
}

/* Liikkeen vähennys: arvostelu vaihtuu ilman liukua. */
@media (prefers-reduced-motion: reduce) {
  .review-lift__karuselli--paalla .review-lift__rata { transition: none; }
}

/* Mobiilissa heron alareuna on seedin alkuperäinen suora diagonaali, joka
   nousee tasaisesti vasemmalta oikealle. Kapealla näytöllä V:n kärki osuu vain
   117px:n päähän vasemmasta laidasta, jolloin taite lukee lovena eikä
   muotoiluna. V on siis käytössä vasta 761px:stä ylöspäin. */
@media (max-width: 760px) {
  .hero {
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--edge)),
      0 100%
    );
  }
}

/* Palvelusivujen heron alareuna on suora vaakalinja: ei etusivun V-taitetta
   eikä vinoa diagonaalia. clip-path nollataan kokonaan, jolloin osio on
   tavallinen suorakaide. Luokkatarkennus .hero.hero--svc on tarpeen, jotta
   tämä voittaa myös alempana olevan @media (max-width: 760px) -säännön, joka
   asettaa .hero:lle diagonaalin. Etusivun V jää koskemattomaksi. */
.hero.hero--svc { clip-path: none; }

/* Palvelusivujen hero-sisältö on vasempaan reunaan tasattu, toisin kuin
   etusivun keskitetty hero. Palstan leveys on laskettu samasta
   --shell-widthistä ja --pad-x:stä kuin .header__inner, joten otsikko alkaa
   samasta kohdasta kuin navipalkin logo. */
.hero--svc { text-align: left; }
.hero--svc .hero__inner {
  align-items: flex-start;
  max-width: calc(var(--shell-width) - var(--pad-x) * 2);
}
.hero--svc .crumbs ol { justify-content: flex-start; }
.hero--svc .hero__lead { margin-inline: 0; }
.hero--svc .hero__cta { justify-content: flex-start; }

/* Heron tummennus. Mikko halusi tummemman overlayn, joten keskiosa on nostettu
   0.58 -> 0.74 ja vinjetti 0.16 -> 0.30. Keskellä yhteisvaikutus on noin 0.82,
   eli työauto erottuu yhä mutta otsikko istuu selvästi tummalla pohjalla.
   Sävy on neutraali tummanharmaa, ei brändin punertava tumma. */
.hero__media::after {
  background:
    linear-gradient(to bottom, rgba(16,17,19,0.86) 0%, rgba(16,17,19,0.74) 45%, rgba(16,17,19,0.93) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(16,17,19,0.30) 26%, rgba(16,17,19,0.80) 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); }

/* -------------------------------------------------------------------------
   Some-osio: otsikko + some-ikonit samalla rivillä, alla Instagram-upotukset
   Upotukset ovat Instagramin omaa merkkausta, jonka embed.js korvaa
   iframella. Instagram asettaa iframeen inline-tyylit (min-width 326px,
   max-width 540px), joten ruudukko on kolmisarakkeinen vasta 1150px:stä
   ylöspäin: sitä kapeammalla sarake jäisi alle 326px:n ja sivu vuotaisi
   vaakasuunnassa yli. Sitä kapeammilla näytöillä upotukset ovat allekkain
   ja keskitettyinä.
   ------------------------------------------------------------------------- */
.some-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.some-head h2 { margin: 0; }
.some-head__links { display: flex; align-items: center; gap: 0.6rem; }

/* Ikonit noudattavat seedin kulmaleikattua ikonipintaa (vrt. .contact__item-ic). */
.some-ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--color-bg-alt);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.3s var(--ease-soft);
}
.some-ic svg { width: 22px; height: 22px; }
.some-ic:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-2px);
}

.ig-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
/* Kapeilla näytöillä upotus keskitetään eikä venytetä yli Instagramin
   540px:n maksimileveyden. */
.ig-item { width: 100%; max-width: 540px; margin-inline: auto; }

@media (min-width: 1150px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .ig-item { max-width: none; }
}

/* Instagramin luoma iframe: annetaan sen täyttää sarakkeensa. Inline-tyylien
   takia leveyttä ei voi ohjata muuten kuin näillä säännöillä. */
.ig-item .instagram-media { margin: 0 auto; }

/* 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); }

/* ======================================================================== */
/* Palvelusivujen osat                                                      */
/* ======================================================================== */

/* ----------------------------- Hyödyt (arvolupaukset) ------------------ */
/* Valkoiset paneelit hiusviivaruudukossa. Sama arkkitehtoninen kieli kuin
   tummien osioiden ruudukoissa: paneelit erottuvat alt-taustasta ilman
   varjoja, ja iso pehmustus antaa osiolle painoa. */
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  background: var(--color-border-strong);
  border: 1px solid var(--color-border-strong);
}
@media (min-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; } }

.benefit {
  position: relative;
  background: var(--color-surface);
  padding: clamp(1.8rem, 3vw, 2.5rem) clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.9rem, 3vw, 2.5rem);
}
/* Aksenttiviiva kasvaa paneelin yläreunaan hoverilla */
.benefit::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--color-primary);
  transition: width 0.5s var(--ease-soft);
}
.benefit:hover::after { width: 100%; }

.benefit__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.benefit__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
.benefit__icon svg { width: 26px; height: 26px; }
.benefit__num { font-family: var(--font-heading); font-weight: 620; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1; color: var(--color-border-strong); }
.benefit h3 { font-size: clamp(1.16rem, 1.5vw, 1.3rem); margin-bottom: 0.55rem; }
.benefit p { color: var(--color-text-light); font-size: 1rem; line-height: 1.6; margin: 0; }

/* Arvostelunosto hyötyruudukon viimeisenä, matalana rivinä. */
.benefit-note {
  grid-column: 1 / -1;
  background: var(--color-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1.3rem;
  padding: clamp(1.5rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2.2rem);
}
.benefit-note__logo { width: 26px; height: 26px; flex-shrink: 0; margin-top: 0.1rem; }
.benefit-note p { margin: 0; flex: 1 1 260px; font-size: 0.98rem; line-height: 1.55; color: var(--color-text-light); }
.benefit-note b { display: block; margin-bottom: 0.3rem; font-family: var(--font-heading); font-weight: 560; font-size: 1.05rem; color: var(--color-ink); }
@media (min-width: 640px) {
  .benefit-note { align-items: center; }
  .benefit-note__logo { align-self: flex-start; margin-top: 0.2rem; }
  .benefit-note .link-arrow { margin-left: auto; }
}

/* ----------------------------- Apuluokat ------------------------------- */
/* Nappipari: ensisijainen nappi ja sen rinnalla kevyt tekstilinkki. */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: 2.2rem; }
.cta-banner .cta-pair { justify-content: center; }

/* 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); }
}

/* ----------------------------- Kuvakenttä lomakkeessa ------------------ */
/* Raahaa tai valitse kuvat. Itse input on piilotettu mutta tarkennettavissa
   näppäimistöllä, ja label toimii pudotusalueena. */
.field label .field__opt { font-weight: 400; color: var(--color-text-faint); }
.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-ink); 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; }
.kuvakentta__vihje { font-size: 0.78rem; color: var(--color-text-faint); }
.kuvakentta__input:focus-visible + .kuvakentta__pudotus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(20,22,29,0.07); }
.kuvakentta.is-yli .kuvakentta__pudotus { border-color: var(--color-ink); 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); }

/* Esikatselut: neliöruudukko, poistonappi kulmassa. */
.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; }
/* 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__koko { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.35rem; font-size: 0.68rem; color: var(--color-white); background: rgba(18,21,25,0.62); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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); }
.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(18,21,25,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; }

/* ----------------------------- Alapalvelulinkit ------------------------ */
/* Palvelusivun sisäiset linkit tarkempiin alapalveluihin. Kevyempi kuin
   .svc-card: teksti ja nuoli, ei kuvaa, jotta sivun rytmi ei katkea. */
.alapalvelut { 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: 720px) { .alapalvelut { grid-template-columns: repeat(3, 1fr); } }
.alapalvelu { display: flex; flex-direction: column; gap: 0.5rem; background: var(--color-surface); padding: clamp(1.5rem, 2.6vw, 2rem); transition: background-color 0.25s ease; }
.alapalvelu:hover { background: var(--color-bg-alt); }
.alapalvelu__nimi { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--color-ink); }
.alapalvelu__nimi svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); transition: transform 0.25s var(--ease-soft); }
.alapalvelu:hover .alapalvelu__nimi svg { transform: translate(2px, -2px); }
.alapalvelu p { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }

/* ----------------------------- Kuvanosto tummalla --------------------- */
/* Palvelusivujen "miksi valita meidät" -osion oikea palsta: työauto 3:4
   -rajauksella ja sen kulmalla Google-arvosana. Yksittäinen asiakasarvostelu
   jätettiin pois, jotta osio pysyy kevyenä ja arvosana lukee yhdellä silmäyk-
   sellä. */
.dark-kuva { position: relative; }
.dark-kuva img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Pakettiauto on kuvan vasemmassa laidassa, joten pystyrajaus otetaan
     vasemmalta. Keskitetty rajaus leikkaisi auton keulan pois. */
  object-position: 12% center;
  clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%);
}
.dark-kuva__arvio {
  position: absolute;
  left: 1.4rem;
  bottom: -1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.25rem;
  background: var(--color-ink);
  border: 1px solid var(--color-border-dark);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.dark-kuva__logo { width: 26px; height: 26px; flex-shrink: 0; }
.dark-kuva__logo svg { width: 100%; height: 100%; display: block; }
.dark-kuva__score { font-family: var(--font-heading); font-weight: 620; font-size: 1.75rem; line-height: 1; letter-spacing: -0.03em; color: var(--color-white); }
.dark-kuva__stars { display: inline-flex; gap: 2px; color: var(--color-accent); }
.dark-kuva__stars svg { width: 16px; height: 16px; }

@media (max-width: 599px) {
  /* Puhelimella pystykuva veisi koko ruudun, joten rajaus on matalampi. */
  .dark-kuva img { aspect-ratio: 4 / 3; }
  .dark-kuva__arvio { left: 1rem; padding: 0.7rem 1.05rem; }
  .dark-kuva__score { font-size: 1.55rem; }
}

/* Murupolku vaalealla taustalla. Perus-.crumbs on tehty tumman hero-kuvan
   päälle, joten sen valkoinen teksti katoaisi vaalealla sivulla. */
.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); }

/* Palvelusivujen esittelykuva on aidosti pystykuva. Etusivun
   .split__media--portrait on tässä projektissa 5:4 vaakakuva (pakettiauto),
   joten pystykuville tarvitaan oma muunnelmansa. */
.split__media--pysty img { aspect-ratio: 4 / 5; height: auto; }
@media (max-width: 767px) {
  /* Puhelimella lyhyempi rajaus, jottei kuva vie koko ruutua pinotussa
     asettelussa. */
  .split__media--pysty img { aspect-ratio: 3 / 2; }
}


/* ======================================================================== */
/* Vinkit: artikkelisivut ja niiden listaus                                  */
/* ======================================================================== */

/* Artikkelin hero eroaa palvelusivun herosta vain siinä, että otsikko saa
   kapeamman rivin ja alle tulee metatietorivi. Muuten sama .hero--svc. */
.hero--artikkeli h1 { max-width: 24ch; }
/* ----------------------------- Asettelu -------------------------------- */
/* Sivupalkki on DOM:issa ennen leipätekstiä, jotta puhelimella sisällys-
   luettelo tulee heti otsikon alle. Työpöydällä ruudukko siirtää sen
   oikeaan reunaan eksplisiittisellä sarake- ja rivimäärityksellä. */
.artikkeli-layout { display: grid; gap: clamp(2.2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1100px) {
  .artikkeli-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: clamp(2.6rem, 4.5vw, 4.5rem);
  }
  .artikkeli-aside { grid-column: 2; grid-row: 1; position: sticky; top: calc(96px * var(--zoom-factor)); }
  .artikkeli { grid-column: 1; grid-row: 1; }
}
.artikkeli-aside { display: grid; gap: 1rem; align-content: start; min-width: 0; }
/* Puhelimella sivupalkin CTA jäisi heti hero-napin alle, joten se piilotetaan.
   Sisällysluettelo sen sijaan on kapealla näytöllä hyödyllisimmillään. */
@media (max-width: 1099px) { .aside-cta { display: none; } }

/* ----------------------------- Sisällysluettelo ------------------------ */
.sisallys {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.1rem 1.2rem 1.2rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.sisallys__otsikko {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.7rem;
}
.sisallys ol { list-style: none; margin: 0; padding: 0; counter-reset: sisallys; display: grid; gap: 0; }
.sisallys li { counter-increment: sisallys; }
.sisallys a {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: 0.15rem;
  padding: 0.26rem 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.83rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-text-light);
  transition: color 0.2s ease;
}
.sisallys a::before {
  content: counter(sisallys, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--color-border-strong);
  transition: color 0.2s ease;
}
.sisallys a:hover { color: var(--color-ink); }
.sisallys a:hover::before { color: var(--color-primary); }

/* ----------------------------- Sivupalkin CTA -------------------------- */
.aside-cta {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 1.3rem 1.3rem 1.4rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.aside-cta b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: 0.5rem;
}
.aside-cta p { font-size: 0.88rem; line-height: 1.5; margin: 0 0 1rem; }
.aside-cta .btn { width: 100%; }
.aside-cta__puhelin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.95rem;
  color: var(--color-white);
}
.aside-cta__puhelin svg { width: 16px; height: 16px; color: var(--color-accent); }
.aside-cta__puhelin:hover { color: var(--color-accent); }

/* ----------------------------- Leipäteksti ----------------------------- */
/* Artikkelin teksti on tarkoituksella tummempaa ja hieman isompaa kuin
   sivuston muut kappaleet: tätä luetaan pitkään, ei silmäillä. */
/* Leipäteksti pysyy luettavan levyisenä, mutta taulukot, vinkkilaatikot ja
   kuvat saavat käyttää koko palstan. Ero on tarkoituksellinen: nostot
   erottuvat tekstistä ilman erillistä kehystä. */
.artikkeli { min-width: 0; font-size: 1.06rem; line-height: 1.72; color: var(--color-text); }
.artikkeli > p, .artikkeli > ul, .artikkeli > ol { max-width: 70ch; }
.artikkeli > p { margin: 0 0 1.15rem; }
.artikkeli__ingressi {
  font-size: clamp(1.1rem, 1.6vw, 1.26rem);
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0 0 1.6rem;
}
.artikkeli h2 {
  font-size: clamp(1.55rem, 3.1vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: clamp(2.6rem, 4.5vw, 3.4rem) 0 1rem;
  scroll-margin-top: calc(100px * var(--zoom-factor));
}
.artikkeli h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.22rem);
  margin: 2.1rem 0 0.7rem;
}
.artikkeli ul, .artikkeli ol { margin: 0 0 1.3rem; padding-left: 1.35rem; display: grid; gap: 0.55rem; }
.artikkeli ul { list-style: disc; }
.artikkeli ol { list-style: decimal; }
.artikkeli li { padding-left: 0.2rem; }
.artikkeli li::marker { color: var(--color-primary); }
.artikkeli a:not(.btn):not(.link-arrow) {
  color: var(--color-primary);
  font-weight: 560;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}
.artikkeli a:not(.btn):not(.link-arrow):hover { color: var(--color-primary-dark); }
.artikkeli figure { margin: clamp(2rem, 3.5vw, 2.8rem) 0; }
.artikkeli figure img { width: 100%; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.artikkeli figcaption { margin-top: 0.75rem; font-size: 0.88rem; color: var(--color-text-light); }

/* ----------------------------- Tiivistelmä ----------------------------- */
/* Nostetaan artikkelin alkuun: lukija saa vastauksen ilman koko tekstiä. */
.tiivistelma {
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-primary);
  padding: 1.5rem 1.6rem 1.6rem;
  margin: 0 0 clamp(2rem, 3.5vw, 2.6rem);
}
.tiivistelma > b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 0.9rem;
}
.tiivistelma ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.tiivistelma li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 1rem;
  line-height: 1.55;
  padding-left: 0;
}
.tiivistelma li svg { width: 22px; height: 22px; color: var(--color-primary); margin-top: 2px; }

/* ----------------------------- Vinkki- ja huomiolaatikko --------------- */
.vinkki {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.1rem;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.35rem 1.5rem;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.vinkki__ic {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.vinkki__ic svg { width: 21px; height: 21px; }
.vinkki b {
  display: block;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
}
.vinkki p { margin: 0; font-size: 0.99rem; line-height: 1.6; color: var(--color-text-light); }
.vinkki p + p { margin-top: 0.6rem; }

/* Sama laatikko keltaisen sijaan tummana: käytetään kohdissa, joissa tieto
   voi vanhentua tai joissa lukijan on syytä varmistaa asia itse. */
.vinkki--huomio { background: var(--color-ink); border-color: var(--color-ink); }
.vinkki--huomio .vinkki__ic { background: var(--color-accent); color: var(--color-ink); }
.vinkki--huomio b { color: var(--color-white); }
.vinkki--huomio p { color: rgba(255, 255, 255, 0.78); }
.vinkki--huomio a:not(.btn) { color: var(--color-accent) !important; }

/* ----------------------------- Taulukko -------------------------------- */
/* Kaari vierittää taulukon omassa laatikossaan, jottei sivu itse liiku
   vaakasuunnassa kapealla näytöllä. */
.taulukko-kaari {
  overflow-x: auto;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0;
  border: 1px solid var(--color-border);
  -webkit-overflow-scrolling: touch;
}
.taulukko { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.96rem; }
.taulukko caption {
  caption-side: top;
  text-align: left;
  padding: 1rem 1.2rem 0;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.95rem;
  color: var(--color-ink);
}
.taulukko th, .taulukko td { padding: 0.85rem 1.2rem; text-align: left; vertical-align: top; border-top: 1px solid var(--color-border); }
.taulukko thead th {
  border-top: 0;
  background: var(--color-bg-alt);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.taulukko tbody th { font-family: var(--font-heading); font-weight: 560; color: var(--color-ink); white-space: nowrap; }
.taulukko td { color: var(--color-text-light); }

/* ----------------------------- Kirjoittaja ----------------------------- */
.kirjoittaja {
  display: grid;
  gap: 1.2rem;
  margin-top: clamp(2.6rem, 4.5vw, 3.4rem);
  padding-top: clamp(1.8rem, 3vw, 2.2rem);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 560px) { .kirjoittaja { grid-template-columns: 64px 1fr; gap: 1.4rem; } }
.kirjoittaja__ic {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: var(--color-ink);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
}
.kirjoittaja b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--color-ink); }
.kirjoittaja__rooli { display: block; font-size: 0.9rem; color: var(--color-text-light); margin-bottom: 0.7rem; }
.kirjoittaja p { margin: 0 0 0.9rem; font-size: 0.97rem; line-height: 1.6; color: var(--color-text-light); }
.kirjoittaja__merkit { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.kirjoittaja__merkit .trust-item { font-size: 0.88rem; font-weight: 500; }
.kirjoittaja__merkit .trust-item svg { width: 17px; height: 17px; }

/* ----------------------------- Artikkelin loppu-CTA -------------------- */
.artikkeli-cta { display: grid; gap: 0.7rem; margin-top: 1.8rem; }
.artikkeli-cta .btn { width: 100%; }
@media (min-width: 520px) { .artikkeli-cta { grid-template-columns: 1fr 1fr; } }
/* Työpöydällä sama toiminto on jo tarttuvassa sivupalstassa. */
@media (min-width: 1100px) { .artikkeli-cta { display: none; } }

/* ----------------------------- Artikkelikortit ------------------------- */
.artikkelit { display: grid; gap: 1px; margin-top: clamp(2.5rem, 4vw, 3.5rem); background: var(--color-border-strong); border: 1px solid var(--color-border-strong); }
@media (min-width: 760px) {
  .artikkelit { grid-template-columns: repeat(3, 1fr); }
  .artikkelit--2 { grid-template-columns: repeat(2, 1fr); }
}
.artikkeli-kortti {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  transition: background-color 0.25s ease;
}
.artikkeli-kortti:hover { background: var(--color-bg-alt); }
.artikkeli-kortti__kuva { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.artikkeli-kortti__kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-soft); }
.artikkeli-kortti:hover .artikkeli-kortti__kuva img { transform: scale(1.05); }
.artikkeli-kortti__body { display: flex; flex-direction: column; flex: 1; padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.artikkeli-kortti__aihe {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.7rem;
}
.artikkeli-kortti h3 { font-size: clamp(1.16rem, 1.7vw, 1.3rem); line-height: 1.22; margin-bottom: 0.6rem; }
.artikkeli-kortti p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.2rem; }
.artikkeli-kortti__ala { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; }
.artikkeli-kortti__kesto { font-size: 0.85rem; color: var(--color-text-faint); }
.artikkeli-kortti .link-arrow { font-size: 0.95rem; }
.artikkeli-kortti:hover .link-arrow svg { transform: translate(4px, -4px); }

/* Kortti ilman kuvaa: käytössä artikkelin lopun "lue myös" -nostoissa. */
.artikkelit--tekstit .artikkeli-kortti__body { padding-block: clamp(1.5rem, 2.6vw, 2rem); }

/* Punainen CTA-banneri vinkkisivujen lopussa. Vinoreunainen leikkaus vie
   pystysuunnassa tilaa, joten sisältö tarvitsee saman lisäpehmusteen kuin
   tummat osiot, muuten otsikko jää leikkauksen alle. */
.cta-banner.edge-both { padding-block: calc(var(--section-y) + var(--edge)); }
.cta-banner .btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--color-white); }
.cta-banner .btn-ghost:hover { border-color: var(--color-white); background: rgba(255, 255, 255, 0.1); }


/* -------------------------------------------------------------------------
   Faktapalkki tummalla pohjalla (etusivun "Miksi Terva-Jussi")
   Palkki ei ole oma osionsa vaan tumman osion sisällä, joten se ei tuo omaa
   taustaa eikä pystypehmustetta: erotus tehdään hiusviivalla ja marginaalilla.
   Säännöt ovat tarkoituksella tiedoston lopussa, koska faktapalkin oman
   760px-mediakyselyn reunaviivat pitää ohittaa samalla spesifisyydellä.
   ------------------------------------------------------------------------- */
.faktat--tumma {
  background: transparent;
  border-bottom: 0;
  border-top: 1px solid var(--color-border-dark);
  padding-block: 0;
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding-top: clamp(1.9rem, 3.6vw, 2.6rem);
}
.faktat--tumma .fakta { border-left-color: var(--color-border-dark); }
.faktat--tumma .fakta__luku { color: var(--color-white); }
.faktat--tumma .fakta__luku small { color: rgba(255, 255, 255, 0.62); }
.faktat--tumma .fakta__nimi { color: var(--color-white); }
.faktat--tumma .fakta__lisa { color: rgba(255, 255, 255, 0.62); }
/* Tähdet ovat tummalla pohjalla korostusvärillä, kuten muutkin tumman osion
   pikkumerkit. */
.faktat--tumma .fakta__tahdet { color: var(--color-accent); }