/* =========================================================================
   O & L Maalaus Oy - style.css
   Tumma, teollinen. Isot kevyet grotesk-otsikot, lahes mustat pinnat,
   keltainen brandikorostus (OL-logon siveltimesta), viistetyt kulmat.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Trust -> Intro -> Services ->
   Why -> Dark feature -> Before/after -> Reviews -> CTA -> Form -> Footer ->
   Utilities -> Animations -> Media queries
   ========================================================================= */

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Perusarvot. Varsinainen brandivari (keltainen #ffde01) asetetaan alempana
     tassa tiedostossa ja ylikirjoittaa nama. */
  --color-primary: #cc7a36;       /* copper-orange — white text sits on this */
  --color-primary-dark: #a85e22;  /* darker copper (hover sweep / pressed) */
  --color-primary-soft: rgba(204, 122, 54, 0.14); /* faint copper tint surfaces */
  --color-accent: #ec9a5b;        /* brighter copper — accents/links on dark */
  --color-accent-soft: rgba(236, 154, 91, 0.16);
  --color-on-primary: #ffffff;    /* text/icons on copper surfaces */

  /* Surfaces — three-level dark system (base -> alt -> elevated) */
  --color-bg: #0e0f12;            /* page base (deepest) */
  --color-bg-alt: #131519;        /* alt sections (slightly raised) */
  --color-surface: #181b21;       /* elevated cards */
  --color-surface-2: #1e222a;     /* floating / form inputs */
  --color-ink: #0a0b0d;           /* darkest surface (notice, dark band, sweep) */
  --color-ink-deep: #08090b;      /* deepest (hero scrim base, footer) */

  /* Text */
  --color-heading: #f4f6f8;       /* headings + strong text */
  --color-text: #dfe2e7;          /* body text */
  --color-text-light: #9aa0aa;    /* muted body */
  --color-text-faint: #6c7079;    /* faint labels */
  --color-white: #ffffff;

  /* On-light surfaces — the Palvelut + Ennen ja jälkeen sections flip to white.
     These tokens only colour text that sits directly on that white background;
     image cards keep their own dark overlay + light text. */
  --color-light-bg: #ffffff;          /* white section background */
  --color-on-light-heading: #14161a;  /* headings on white */
  --color-on-light-muted: #5a606b;    /* muted text on white */

  /* Borders / hairlines */
  --color-border: #24272e;        /* hairline on dark */
  --color-border-strong: #353a43;
  --color-border-dark: #1e2127;   /* hairline inside the darkest bands */

  /* Form-state colours */
  --color-error: #e0635e;
  --color-error-bg: rgba(224, 99, 94, 0.12);
  --color-error-border: rgba(224, 99, 94, 0.4);
  --color-error-text: #f0a6a3;
  --color-success-bg: rgba(64, 190, 122, 0.12);
  --color-success-text: #8fe0b0;
  --color-success-border: rgba(64, 190, 122, 0.4);

  --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 - deep on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.55);

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

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

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

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

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

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

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

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

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

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

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

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

/* ----------------------------- Angular utilities ----------------------- */
.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)); }
.clip-tr { clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.clip-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg))); }

.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); }
/* Tyomme: pull up under the dark section's diagonal so the wedge below the
   diagonal reads as the base page colour. */
#tyomme {
  background: var(--color-bg);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
#meista { background: #17191e; }
/* Huolto: pull up under Miksi-osion alapuoli so the dark section's top diagonal
   wedge reads as the lighter #meista colour instead of the page base. */
#huolto {
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + 2 * var(--edge));
}
#arvostelut { background: var(--color-bg-alt); }
#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; }

.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; }
/* Kaksi peräkkäistä nuolilinkkiä samassa aside-lohkossa: oma rivi ja hieman
   ilmaa väliin. Pelkkä rivinvaihto jätti linkit kiinni toisissaan. */
.section-head__aside .link-arrow + .link-arrow {
  display: flex;
  width: fit-content;
  margin-top: 0.75rem;
}

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

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

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

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

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

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

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

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

/* ----------------------------- Header / Nav ---------------------------- */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--color-white);
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  will-change: transform;
}
.header__inner {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding: 1rem var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.logo { display: inline-flex; align-items: center; transition: opacity 0.25s ease; position: relative; justify-self: start; }
.logo:hover { opacity: 0.82; }
.logo img { height: 46px; width: auto; }

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

.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-accent); }

.header.scrolled {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--color-border);
}
.header.scrolled .nav__links a { color: var(--color-text); }
.header.scrolled .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;
  min-height: calc(100vh / var(--zoom-factor));
  min-height: calc(100dvh / var(--zoom-factor));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--pad-x) 6rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    78% calc(100% - 0.5 * var(--edge)),
    68% calc(100% - 0.78 * var(--edge)),
    0 100%
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(8,9,11,0.74) 0%, rgba(8,9,11,0.64) 42%, rgba(8,9,11,0.84) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(8,9,11,0.18) 28%, rgba(8,9,11,0.66) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }

/* Hero-taustavideo. Sama ylimitoitus kuin posterilla (top -12% / height 124%),
   jotta parallaksin siirtymä ei paljasta reunaa. Video on posterin alla ja
   poster häivytetään pois vasta kun video oikeasti toistaa. */
.hero__video {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.hero__media.video-valmis .hero__poster {
  opacity: 0;
  transition: opacity 1.2s var(--ease-soft);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.hero h1 { color: var(--color-white); margin: 1.5rem 0 1.4rem; font-size: clamp(2.5rem, 5.4vw, 4.4rem); font-weight: 450; letter-spacing: -0.04em; line-height: 1.0; text-shadow: 0 2px 30px rgba(0,0,0,0.5); max-width: 20ch; }
.hero h1 .accent { color: var(--color-accent); }
.hero__lead { color: rgba(255,255,255,0.86); font-size: clamp(1.05rem, 1.5vw, 1.24rem); max-width: 46ch; margin: 0 auto 2.2rem; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: center; align-items: center; }

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

/* ----------------------------- Trust strip ----------------------------- */
.trustbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-block: clamp(1.5rem, 3vw, 2.1rem); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: 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-accent); flex-shrink: 0; }

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

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

.feature-list { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-accent); 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(8,9,11,0.94) 2%, rgba(8,9,11,0.64) 38%, rgba(8,9,11,0.18) 72%, rgba(8,9,11,0.05) 100%); }
.svc-card:hover img { transform: scale(1.06); }
.svc-card__body { padding: 1.4rem 1.45rem 1.5rem; }
.svc-card h3 { color: var(--color-white); font-size: 1.42rem; font-weight: 620; margin-bottom: 0.5rem; }
.svc-card p { color: rgba(255,255,255,0.82); font-size: 0.92rem; margin-bottom: 0; }
.svc-card .card-go { position: absolute; top: 1.2rem; right: 1.2rem; }
.svc-card:hover .card-go { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.svc-card:hover .card-go svg { transform: translate(2px, -2px); }

/* 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);
  border: 1px solid var(--color-border);
  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; }

/* ----------------------------- 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-heading); margin-bottom: 0.2rem; }
.check b:only-child { margin-bottom: 0; }  /* ei alatekstia, ei alamarginaalia */
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

/* ----------------------------- Dark feature ---------------------------- */
.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-strong); }
.dark__point:last-child { border-bottom: 1px solid var(--color-border-strong); }
.dark__point svg { width: 22px; height: 22px; color: var(--color-accent); margin-top: 2px; }
.dark__point b { color: var(--color-white); font-family: var(--font-heading); font-weight: 560; display: block; margin-bottom: 0.2rem; }
.dark__point span { font-size: 0.95rem; }

.collage { position: relative; }
.collage__main { width: 100%; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.collage__inset { position: absolute; width: 46%; border: 5px solid var(--color-ink); left: -1.2rem; bottom: -1.6rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.collage__badge { position: absolute; top: -1.1rem; right: -0.6rem; background: var(--color-primary); color: var(--color-on-primary); padding: 0.9rem 1.2rem; line-height: 1; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); box-shadow: var(--shadow); }
.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, minmax(0, 1fr)); gap: 1px; margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--color-border-strong); border: 1px solid var(--color-border-strong); overflow: hidden; }
.stat { background: var(--color-ink); padding: 1.5rem 0.9rem; text-align: center; }
.stat__num { font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.45rem, 6vw, 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; }

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

/* Kuvaruudukko: tavalliset kohdekuvat palvelusivuilla, kaksi saraketta. */
.kuvagrid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
.kuvagrid__item { position: relative; overflow: hidden; margin: 0; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); background: var(--color-ink); }
.kuvagrid__item img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* -------------- White sections: .section--light ------------------------- */
/* Sections marked .section--light flip to a white background. Only text sitting
   directly on the white background goes dark: the section head and the on-page
   links. The service cards (.svc-card) and slider labels stay light because they
   sit on their own dark photo overlay, so they are deliberately NOT targeted
   here. Component-level overrides live in "Muutoskierros 6" at the end of the
   file. */
.section--light {
  background: var(--color-light-bg);
}
.section--light .section-head h2, .section--light .section-head h3 { color: var(--color-on-light-heading); }
.section--light .eyebrow { color: var(--color-on-light-muted); }
.section--light .section-head p:not(.eyebrow),
.section--light .section-head--split .section-head__aside { color: var(--color-on-light-muted); }
.section--light .link-arrow { color: var(--color-on-light-heading); }
.section--light .link-arrow:hover { color: var(--color-primary-dark); }

/* ----------------------------- Reviews --------------------------------- */
.reviews__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2rem; }
.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); border-color: var(--color-border-strong); transform: translateY(-3px); }
.review__stars { color: var(--color-accent); display: inline-flex; gap: 1px; margin-bottom: 0.9rem; }
.review__stars svg { width: 17px; height: 17px; }
.review p { font-size: 1rem; color: var(--color-text); margin-bottom: 1.3rem; }
.review__who { display: flex; align-items: center; gap: 0.8rem; }
.review__avatar { width: 42px; height: 42px; background: var(--color-primary-soft); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 560; font-size: 1rem; 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-heading); 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.92); }
.cta-banner .btn-primary { background: var(--color-ink); color: var(--color-on-primary); }
.cta-banner .btn-primary::before { background: rgba(0,0,0,0.35); }
.cta-banner .btn-primary:hover { color: var(--color-white); }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__grid > * { min-width: 0; }
.contact__info { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact__info > * { min-width: 0; }
.contact__item { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.contact__item-ic { width: 46px; height: 46px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-accent); display: grid; place-items: center; 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-heading); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-accent); }
.contact__people { display: grid; gap: 1rem; }
.contact__people > * { min-width: 0; }
/* Jokainen yhteyshenkilo omana korttinaan, jotta oikea henkilo loytyy nopeasti.
   Kuva menee kortin oikeaan laitaan reunasta reunaan, teksti vasemmalle. */
.contact__person {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  min-height: 108px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.contact__person:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.contact__person-tiedot {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 0.18rem;
  padding: 0.8rem 0 0.85rem 1rem;
}
.contact__person-tiedot > * { min-width: 0; }
.contact__person-kuva {
  flex: none;
  align-self: stretch;
  width: 94px;
  object-fit: cover;
  object-position: center 18%;
}
/* Tyopoydalla kortit kapeampia, jotta kuva ei karkaa kauas tekstista.
   Sama max-width kaikille, joten kortit ovat keskenaan yhta levyisia. */
@media (min-width: 600px) {
  .contact__person { max-width: 410px; }
}
/* Mobiilissa kortti korkeampi ja aluerivi pienemmalla. */
@media (max-width: 599px) {
  .contact__person { min-height: 132px; }
  .contact__area { font-size: 0.72rem; }
}
@media (max-width: 420px) {
  .contact__person-kuva { width: 80px; }
}
.contact__person b { color: var(--color-heading); font-family: var(--font-heading); font-weight: 560; font-size: 0.9rem; letter-spacing: 0.01em; }
.contact__person a { justify-self: start; color: var(--color-text); font-family: var(--font-heading); font-weight: 560; font-size: 1.05rem; letter-spacing: 0.01em; }
.contact__person a:hover { color: var(--color-accent); }
.contact__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  font-size: 0.79rem;
  letter-spacing: 0.01em;
  line-height: 1.35;
}
.contact__person .contact__area { color: var(--color-text-light); }
.contact__area::before,
.alue__paikka::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--color-border-strong); font-weight: 560; font-size: 0.9rem; font-family: var(--font-heading); color: var(--color-text); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; 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-accent); color: var(--color-accent); background: var(--color-surface); }

.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.7rem, 3vw, 2.5rem); 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-heading); }
.field label .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(224,99,94,0.18); }
.field__error { color: var(--color-error-text); font-size: 0.8rem; min-height: 1em; }
.form__consent-note { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 1.2rem; line-height: 1.55; }
.form__consent-note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.form__consent-note a:hover { color: var(--color-primary); }
.form__status { margin-top: 1rem; font-size: 0.92rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); display: none; }
.form__status.ok { display: block; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.form__status.err { display: block; background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; border-top: 1px solid var(--color-border); }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); }
.footer__brand img { height: 46px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 32ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.footer__badge { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-strong); color: rgba(255,255,255,0.72); 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.62); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer__contact-line svg { width: 16px; height: 16px; color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
.footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding-top: 2rem; font-size: 0.85rem; }
.footer__bottom > :nth-child(1) { justify-self: start; text-align: left; }
.footer__bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer__bottom > :nth-child(3) { justify-self: end; text-align: right; }
.footer__credit a { font-weight: 700; transition: color 0.2s ease; }
.footer__credit a:hover { color: var(--color-accent); }
@media (max-width: 600px) { .footer__bottom { grid-template-columns: 1fr; } .footer__bottom > :nth-child(1), .footer__bottom > :nth-child(2), .footer__bottom > :nth-child(3) { justify-self: center; text-align: center; } }
.footer__legal { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__legal: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-strong); 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; }

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

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

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

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

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

.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; }
  .kuvagrid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats .stat { padding: 1.9rem 1.4rem; }
  .feature-list { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; }
  .feature-list--3 { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2.6rem; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}

@media (min-width: 880px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--intro { grid-template-columns: 0.9fr 1.1fr; }
  .split--reverse .split__media { order: 2; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .dark__grid { grid-template-columns: 1.05fr 0.95fr; }
  .ba-main { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-top: clamp(2.5rem, 5vw, 4rem); }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
}

@media (min-width: 1024px) {
  /* Top row: 3 larger featured cards (span 4 of 12). Bottom row: 4 smaller cards (span 3 of 12). */
  .svc-grid { grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
  .svc-grid > .svc-card { grid-column: span 3; }
  .svc-grid > .svc-card--feature { grid-column: span 4; }
}

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  .header { will-change: auto; }
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 84vw);
    background: var(--color-bg-alt);
    color: var(--color-text);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-soft);
    box-shadow: var(--shadow-lg);
    border-left: 1px solid var(--color-border);
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__links a { padding: 1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); opacity: 1; }
  .nav__links a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.05rem; }
  .nav__cta { display: none; }
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  /* When the drawer is open, the top header strip takes the drawer's surface so
     the logo + close icon stay legible. */
  body.no-scroll .header {
    background: var(--color-bg-alt);
    box-shadow: none;
    color: var(--color-text);
    border-bottom: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(5,6,8,0.6); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}

/* ----- Mobile hero: left-aligned, larger heading ----- */
@media (max-width: 767px) {
  .hero {
    text-align: left;
    align-items: center;
    padding: 6rem var(--pad-x) 3.25rem;
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  .hero__rating { align-self: flex-start; padding-block: 0.42rem; }
  .hero__rating-text small { display: none; }
  .split__media--portrait img { aspect-ratio: 3 / 2; }
  .hero h1 {
    font-size: clamp(2.9rem, 10.5vw, 3.8rem);
    font-weight: 540;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 1.15rem 0 1.1rem;
    max-width: 15ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  .trustbar__inner { justify-content: flex-start; align-items: flex-start; gap: 1rem 2.6rem; }
  .trust-item { font-size: 1.1rem; }
  .trust-item svg { width: 24px; height: 24px; }

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

@media (max-width: 520px) {
  .notice p { flex-basis: 100%; max-width: 100%; }
  .notice .btn { margin-left: 0; width: 100%; }
  .collage__inset { position: static; width: 100%; margin-top: 1rem; border: none; }
  .collage__badge { top: 0.6rem; right: 0.6rem; }
  .stat-badge__num { font-size: 1.8rem; }
}

/* ----------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__poster { animation: none; }
  /* Liikkuva tausta pois. JS jättää videon myös lataamatta, tämä on varmistus
     siltä varalta että asetus vaihtuu kesken istunnon. */
  .hero__video { display: none; }
  .hero__media.video-valmis .hero__poster { opacity: 1; }
}

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

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

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

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

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

/* ---------- Gallery (pages without before/after pairs) ---------- */
.svc-gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
.svc-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }

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

/* ---------- FAQ (native <details> accordion) ---------- */
.faq-list { display: grid; gap: 0.8rem; margin-top: clamp(2rem, 4vw, 2.8rem); align-items: start; }
@media (min-width: 760px) { .faq-list { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.1rem; } }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: border-color 0.2s ease; }
.faq-item[open] { border-color: var(--color-border-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 560; font-size: clamp(1.02rem, 1.6vw, 1.14rem); color: var(--color-heading); letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.faq-item__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--color-accent); transition: transform 0.3s var(--ease-soft); }
.faq-item[open] .faq-item__icon { transform: rotate(180deg); }
.faq-item__body { padding: 0 1.5rem 1.4rem; color: var(--color-text-light); }
.faq-item__body p { margin-bottom: 0.7rem; }
.faq-item__body p:last-child { margin-bottom: 0; }
/* Soft reveal: the answer slides + fades in when a question opens */
@keyframes faqReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.faq-item[open] .faq-item__body { animation: faqReveal 0.34s var(--ease-soft); }

/* Ennen / jälkeen -sliderin kehys */
.ba-item { display: flex; flex-direction: column; }

/* Other-services carousel (service pages) */
.carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.carousel-head h2 { margin: 0; }
.carousel-nav { display: flex; gap: 0.6rem; flex-shrink: 0; }
.carousel-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); color: var(--color-heading); display: grid; place-items: center; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease; }
.carousel-btn svg { width: 22px; height: 22px; }
.carousel-btn:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.carousel-btn:active { transform: translateY(1px); }
.carousel-wrap { position: relative; margin-top: clamp(2rem, 4vw, 2.8rem); }
/* Soft fade on the right edge so the partially visible card dissolves
   into the section background instead of being hard-cut. */
.carousel-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(44px, 9%, 96px); pointer-events: none; z-index: 2; background: linear-gradient(to right, transparent, var(--color-bg-alt)); }
.carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; }
.carousel::-webkit-scrollbar { display: none; }
.carousel .svc-card { flex: 0 0 auto; width: clamp(258px, 80vw, 300px); aspect-ratio: 4 / 5; scroll-snap-align: start; }

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

@media (max-width: 980px) {
  .nav__dd { display: block; width: 100%; }
  .nav__dd-toggle { width: 100%; justify-content: space-between; }
  .nav__dd-caret { display: inline-flex; }
  .nav__dd.open .nav__dd-caret { transform: rotate(180deg); }
  .nav__dd-menu {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    clip-path: none;
    padding: 0 0 0 0.95rem;
    gap: 0;
    /* Collapsed by default in the mobile drawer; expands when .nav__dd.open */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.34s var(--ease-soft);
  }
  .nav__dd.open .nav__dd-menu { max-height: 32rem; }
  .nav__dd-menu a { padding: 0.82rem 0; font-size: 1.02rem; color: var(--color-text-light); border-bottom: 1px solid var(--color-border); }
  .nav__dd-menu a:last-child { border-bottom: none; }
}

/* Service intro ja "Miksi valita meidat": on a single-column (mobile/tablet)
   layout, show the text first and the image below it. Two-column desktop
   layout is unaffected. */
@media (max-width: 879px) {
  .svc-split .split__body,
  .why__grid .split__body { order: 1; }
  .svc-split .split__media,
  .why__grid .split__media { order: 2; }
}

@media (max-width: 767px) {
  .svc-hero { min-height: 85vh; min-height: 85dvh; padding-block: 7rem clamp(2.5rem, 8vw, 3.5rem); }
  .svc-hero h1 { font-size: clamp(2.4rem, 9.5vw, 3.3rem); font-weight: 540; max-width: 15ch; }
  /* Carousel is swipe-scrolled on mobile, so hide the arrow controls. */
  .carousel-nav { display: none; }
}

/* =========================================================================
   O & L Maalaus Oy — asiakaskohtainen yliajo
   Seedin rakenne, layout ja animaatiot pysyvät ennallaan. Tässä vaihdetaan
   vain brändipaletti (kupari -> kirkkaan keltainen, sinertävät tummat pinnat
   -> neutraali musta) sekä lisätään arvostelukaruselli.
   ========================================================================= */

:root {
  /* Brändi: kirkkaan keltainen #FFDE01 (asiakkaan oma korostusväri) mustalla.
     Keltainen on niin kirkas, että sen päällä oleva teksti on mustaa. */
  --color-primary: #ffde01;
  --color-primary-dark: #d9bd00;
  --color-primary-soft: rgba(255, 222, 1, 0.14);
  --color-accent: #ffde01;
  --color-accent-soft: rgba(255, 222, 1, 0.16);
  --color-on-primary: #0d0d0d;

  /* Pinnat: neutraali musta, ei sinertävää */
  --color-bg: #0d0d0d;
  --color-bg-alt: #131313;
  --color-surface: #191919;
  --color-surface-2: #202020;
  --color-ink: #080808;
  --color-ink-deep: #050505;

  /* Teksti */
  --color-heading: #f6f6f6;
  --color-text: #e1e1e1;
  --color-text-light: #a3a3a3;
  --color-text-faint: #6f6f6f;

  /* Rajat */
  --color-border: #262626;
  --color-border-strong: #3a3a3a;
  --color-border-dark: #1b1b1b;
}

/* Meistä-osion oma sävy neutraaliksi (seedissä sinertävä #17191e) */
#meista { background: #161616; }

/* CTA-banneri on keltainen. Seedissä sen tekstit ovat valkoisia (toimi
   kuparilla), mutta kirkkaan keltaisella ne on pakko kääntää mustiksi. */
.cta-banner h2 { color: var(--color-on-primary); }
.cta-banner p { color: rgba(13, 13, 13, 0.82); }
.cta-banner::before { background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 18px); }
/* Musta nappi keltaisella bannerilla: teksti keltaiseksi, ei mustaksi. */
.cta-banner .btn-primary { background: var(--color-ink); color: var(--color-primary); }
.cta-banner .btn-primary::before { background: #1c1c1c; }
.cta-banner .btn-primary:hover { color: var(--color-primary); }

/* Logo skaalautuu leveydellä, korkeus tulee kuvasuhteesta */
.logo img { width: auto; height: 42px; }
.footer__brand img { width: auto; height: 46px; }

/* --------------------------- Asiakasarvostelut ---------------------------
   Kortit ovat seedin omia .review-kortteja. Ainoa lisäys on että ne
   asetetaan seedin .carousel-radalle grid-ruudukon sijaan, jolloin ne
   perivät valmiin swipe- ja nuolilogiikan sekä nuolinappien tyylin. */
#arvostelut { background: var(--color-bg-alt); }
#arvostelut .carousel { padding-block: 0.4rem 1rem; }
#arvostelut .carousel-wrap::after { background: linear-gradient(to right, transparent, var(--color-bg-alt)); }
.carousel .review {
  flex: 0 0 auto;
  width: clamp(276px, 82vw, 430px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.carousel .review p { flex: 1 1 auto; }

/* Google-merkintä arvostelun lähteestä */
.review__src-logo { display: inline-flex; align-items: center; gap: 0.34rem; }
.review__src-logo svg { width: 13px; height: 13px; flex-shrink: 0; }


/* ---------------------- Muutoskierros 1 (Mikko) ----------------------- */

/* Otsikot versaalilla. Uppercase tarvitsee hiukan ilmaa merkkien väliin ja
   negatiivinen letter-spacing pitää h1:n tiiviinä pitkänäkin. */
h1, h2, h3,
.footer__col h3,
.section-head h2 {
  text-transform: uppercase;
}
h2, h3 { letter-spacing: 0.005em; }
.hero h1 { letter-spacing: -0.022em; max-width: 24ch; }

/* Heron alareuna suoraksi: seedin diagonaali taitteineen pois. */
.hero { clip-path: none; }

/* Miksi valita meidät: tiimikuva on pysty, joten se rajataan neliöksi, ettei
   se kasva osion tekstiin nähden liian korkeaksi. Rajaus painottuu alaspäin,
   jotta koko tiimi pysyy kuvassa. */
#meista .why__media { align-self: center; }
#meista .why__media img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center 65%; }

/* -------- Ennen ja jälkeen: kolme pystykuvaslideria rinnakkain --------
   Kuvat ovat pystyjä (3:4), joten slider kääntyy pystyyn ja rivi vetää
   kolme kohdetta vierekkäin desktopilla. */
.ba-slider { aspect-ratio: 3 / 4; }
@media (min-width: 880px) {
  .ba-main { grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2vw, 1.8rem); align-items: start; }
}

/* ---------------------- Muutoskierros 2 (Mikko) ----------------------- */

/* Otsikot hieman pienemmiksi. Versaali kasvattaa optista kokoa, joten
   seedin alkuperäiset asteikot ovat uppercasena turhan järeitä. */
h1 { font-size: clamp(2.45rem, 6.4vw, 4.5rem); }
h2 { font-size: clamp(1.85rem, 4.5vw, 3.2rem); }
h3 { font-size: clamp(1.1rem, 1.75vw, 1.26rem); }
.hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.9rem); }

/* Hero: sama 97vh kaikilla laitteilla (seedissä 100vh / mobiilissa 94vh). */
.hero {
  min-height: calc(97vh / var(--zoom-factor));
  min-height: calc(97dvh / var(--zoom-factor));
}

/* Heron overlay tummemmaksi, jotta teksti nousee kuvasta selvemmin irti. */
.hero__media::after {
  background:
    linear-gradient(to bottom, rgba(8,9,11,0.84) 0%, rgba(8,9,11,0.76) 42%, rgba(8,9,11,0.92) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(8,9,11,0.32) 28%, rgba(8,9,11,0.76) 100%);
}

/* Esittelyosion kuva vaakaan ja osio matalammaksi: pystykuva teki osiosta
   tekstiin nähden liian korkean, ja feature-lista on nyt poistettu. */
.split--intro .split__media img { aspect-ratio: 4 / 3; }

/* ---------------------- Muutoskierros 3 (Mikko) ----------------------- */

/* Puhelinnumero pois desktop-navista. Mobiilivalikossa (<=980px) se jää,
   siellä se on suora soittolinkki. CTA-nappi hoitaa desktopin. */
@media (min-width: 981px) {
  .nav__phone { display: none; }
}

/* Miksi valita meidät: aiempi #161616 on täysin neutraali harmaa, mikä luki
   ympäröivien mustien pintojen rinnalla lämpimänä. Viilennetään sinertävään
   suuntaan ja tummennetaan aavistus. */
#meista { background: #111419; }

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

/* ---------------------- Muutoskierros 4 (Mikko) ----------------------- */

/* Navbarissa ei reunusta. Tausta on jo sama #0d0d0d kuin esittelyosiolla,
   joten pelkkä viiva erotti ne toisistaan. Varjo jää antamaan syvyyttä. */
.header.scrolled {
  border-bottom: none;
  background: var(--color-bg);
}

/* Palvelukorttien versaaliotsikot samalla fontilla kuin h2 (Raleway),
   ei leipätekstin Schibsted Groteskilla. */
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* =========================================================================
   Alasivut (Muutoskierros 5)
   Kaksitasoinen palveluvalikko, palvelualueet, prosessivaiheet ja
   tarjouspyyntölomake. Kaikki muut alasivujen tyylit
   tulevat jo yllä olevista seedin luokista.
   ========================================================================= */

/* ---------- Palveluvalikko: kategoria + alapalvelut ---------- */
.nav__dd-menu { min-width: 320px; }
.nav__dd-menu a.nav__dd-head {
  font-weight: 600;
  color: var(--color-heading);
  text-transform: uppercase;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.5rem;
}
.nav__dd-menu a.nav__dd-head + .nav__dd-sub { padding-top: 0.42rem; }
.nav__dd-menu a.nav__dd-head:not(:first-child) {
  margin-top: 0.35rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.85rem;
}
.nav__dd-menu a.nav__dd-sub {
  padding-block: 0.44rem;
  padding-left: 1.65rem;
  font-size: 0.9rem;
  color: var(--color-text-light);
  position: relative;
}
.nav__dd-menu a.nav__dd-sub::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 5px;
  height: 1px;
  background: var(--color-text-faint);
}
.nav__dd-menu a.nav__dd-sub:hover,
.nav__dd-menu a.nav__dd-sub:focus-visible { color: var(--color-accent); }

/* ---------- Hintalaskurit-valikko ----------
   Kaksi lyhyttä riviä, joten palveluvalikon 320 px on turhan leveä. */
.nav__dd-menu--laskurit { min-width: 220px; }
@media (max-width: 980px) {
  .nav__dd-menu--laskurit { min-width: 0; }
}

/* Alapalvelut alatunnisteessa: sisennys ja kevyempi sävy. */
.footer__col .footer__sub a {
  padding-left: 0.9rem;
  font-size: 0.9rem;
  opacity: 0.72;
}
.footer__col .footer__sub a::before { content: "\2013\00a0"; }

/* ---------- Palvelualueet ---------- */
.alue-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.alue {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.7rem 1.6rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.alue h3 { margin-bottom: 0.6rem; color: var(--color-accent); }
.alue p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.65; }

/* Tiimikortti: tekstit ylhaalla, kuva pohjassa reunasta reunaan. */
.alue--tiimi { display: flex; flex-direction: column; padding-bottom: 0; }
.alue--tiimi p { margin-bottom: 0.45rem; }
.alue__paikka {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-light);
  font-size: 0.85rem;
  line-height: 1.35;
}
.alue__kuva {
  margin: auto -1.6rem 0;
  width: calc(100% + 3.2rem);
  max-width: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 18%;
}

/* ---------- Prosessivaiheet ---------- */
.steps {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0;
  counter-reset: none;
}
.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.1rem;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.step__num {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.step h3 { margin-bottom: 0.35rem; }
.step p { color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; }

.form-wrap { display: grid; gap: 1rem; align-content: start; }

.contact__lead { color: var(--color-text-light); margin-top: 1rem; max-width: 46ch; line-height: 1.7; }

/* Palvelusivujen kuvakollaasi kahdessa sarakkeessa jo pienestä leveydestä. */
@media (min-width: 560px) {
  .alue-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .alue-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .pricing { grid-template-columns: repeat(3, 1fr); }
}

/* Kuusi vaihetta pysyy kahdessa sarakkeessa myös isolla näytöllä (2 x 3). */
@media (min-width: 1000px) {
  .steps--duo { grid-template-columns: repeat(2, 1fr); }
}

/* Kuusi palvelulaatikkoa kolmessa sarakkeessa isolla näytöllä (3 x 2). */
@media (min-width: 1000px) {
  .alue-grid--trio { grid-template-columns: repeat(3, 1fr); }
}

/* Tiimissa on kolme korttia: yksi sarake puhelimella, kolme 700px:sta ylospain.
   Nain viimeinen kortti ei jaa orvoksi omalle rivilleen. */
/* Yhden sarakkeen leveydella nelio olisi kohtuuttoman korkea, joten matalampi rajaus. */
@media (max-width: 699px) {
  .alue-grid--tiimi { grid-template-columns: 1fr; }
  .alue__kuva { aspect-ratio: 4 / 3; }
}
@media (min-width: 700px) {
  .alue-grid--tiimi { grid-template-columns: repeat(3, 1fr); }
}

/* Mobiilivalikko: kategoriaotsikot erottuvat myös pudotusvalikon
   mobiiliversiossa, jossa .nav__dd-menu on staattinen lista. */
@media (max-width: 980px) {
  .nav__dd-menu { min-width: 0; }
  .nav__dd-menu a.nav__dd-head:not(:first-child) { margin-top: 0.5rem; }
  .nav__dd-menu a.nav__dd-sub { padding-left: 1.4rem; }
}

/* Pitkät suomalaiset yhdyssanat versaaliotsikoissa eivät mahdu kapealle
   mobiilinäytölle. Sallitaan katkaisu, jottei sivu vieri vaakasuunnassa.
   Tavutus vain kapeilla näytöillä: leveämmällä se katkoisi otsikoita
   turhaan silloinkin kun rivinvaihto sanan kohdalta olisi siistimpi. */
h1, h2, h3, .section-head h2, .svc-card h3 { overflow-wrap: break-word; }
@media (max-width: 560px) {
  h1, h2, h3, .section-head h2, .svc-card h3 { hyphens: auto; }
}

/* Neljä palvelukorttia: 3 + 1 jättäisi viimeisen kortin yksin riville.
   Neljän kortin ruudukko menee siksi neljään sarakkeeseen. */
@media (min-width: 1100px) {
  .svc-grid--4 > .svc-card--feature { grid-column: span 3; }
}

/* Neljän kortin ruudukossa kortti on kapea. Pitkät yhdyssanat
   (Puhdistuspalvelut, Huoneistoremontit) katkeaisivat kesken sanan
   1.42rem otsikkokoossa, joten otsikko on siinä hieman pienempi. */
@media (min-width: 1100px) {
  .svc-grid--4 > .svc-card h3 { font-size: 1.2rem; }
}

/* Palvelusivujen pystykuvat: .split--intro asettaa kuvan 4:3-suhteeseen
   etusivua varten, mikä leikkaisi pystykuvista liikaa pois. Palautetaan
   pystysuhde silloin kun kuva on merkitty pystyksi. Mobiilissa suhde on
   edelleen 3:2, jottei kuva vie koko ruutua. */
@media (min-width: 768px) {
  .split--intro .split__media--portrait img { aspect-ratio: 4 / 5; }
}

/* Kolme matalaa palvelukorttia (esim. "Muut palvelumme") täyttävät rivin.
   Ilman tätä ne veisivät 12-sarakkeisesta ruudukosta vain 9 saraketta. */
@media (min-width: 1100px) {
  .svc-grid--3 > .svc-card { grid-column: span 4; }
}

/* Kaksi palvelukorttia (Kattohuollot-sivun kattopalvelut) jakavat rivin
   puoliksi. Ilman tätä ne veisivät 12 sarakkeesta vain 8 ja rivin oikea
   reuna jäisi tyhjäksi. */
@media (min-width: 1024px) {
  .svc-grid--2 > .svc-card--feature { grid-column: span 6; }
  /* Puolet rivistä on niin leveä, että 4/5-suhde tekisi kortista lähes
     900 pikseliä korkean. Matalampi suhde pitää korkeuden samassa
     luokassa kolmen kortin ruudukon kanssa. */
  .svc-grid--2 > .svc-card--feature { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   Muutoskierros 6 (Mikko)
   Vaalea/tumma-rytmi koko sivustolle, palvelusivujen uusi rakenne ja
   kaksitasoinen palveluvalikko. Kaikki tässä lohkossa on yliajoa: mitään
   aiempaa sääntöä ei poisteta, jotta muutos on peruttavissa.
   ========================================================================= */

/* ---------- Valkoisen pinnan lisäsävyt ----------
   Valkoisella pinnalla kortti ei voi olla valkoinen, muuten se katoaa. Siksi
   oma vaalean harmaa kortti- ja viivasävy. */
:root {
  --color-on-light-card: #f2f2ee;        /* kortin pinta valkoisella */
  --color-on-light-line: #dcdcd5;        /* hiusviiva valkoisella */
  --color-on-light-line-strong: #b9b9b0; /* korostettu raja valkoisella */
  --color-on-light-text: #33373d;        /* leipäteksti valkoisella */
}

/* ---------- Valkoiset osiot: komponenttien yliajot ----------
   .section--light kääntää osion valkoiseksi. Alla käydään läpi jokainen
   komponentti joka voi osuaosion sisälle. Keltainen jää täyttöväriksi
   (nappi, numerolaatta, ruksi), mutta keltainen teksti vaihtuu mustaan,
   koska #ffde01 ei erotu valkoisesta. */
.section--light h2,
.section--light h3,
.section--light h4 { color: var(--color-on-light-heading); }
.section--light p { color: var(--color-on-light-text); }
.section--light .eyebrow { color: var(--color-on-light-muted); }
.section--light .svc-intro__lead,
.section--light .split__body > p { color: var(--color-on-light-muted); }

/* Tietoa palvelusta: ikonilaatta kiinteän keltaiseksi. Läpikuultava keltainen
   (--color-primary-soft) katoaisi valkoisella taustalla kokonaan. */
.section--light .feature__icon { background: var(--color-primary); color: var(--color-on-primary); }
.section--light .feature p { color: var(--color-on-light-muted); }

/* Tarkistuslista */
.section--light .check { border-top-color: var(--color-on-light-line); }
.section--light .check:last-child { border-bottom-color: var(--color-on-light-line); }
.section--light .check b { color: var(--color-on-light-heading); }
.section--light .check span:not(.check__mark) { color: var(--color-on-light-muted); }
.section--light .check a { color: var(--color-on-light-heading); text-decoration: underline; text-underline-offset: 2px; }

/* Työvaiheet ja prosessi */
.section--light .step { background: var(--color-on-light-card); border-color: var(--color-on-light-line); }
.section--light .step p { color: var(--color-on-light-muted); }

/* Hinnat */
.section--light .price-card { background: var(--color-on-light-card); border-color: var(--color-on-light-line); }
.section--light .price-card__amount { color: var(--color-on-light-heading); }
.section--light .price-card p { color: var(--color-on-light-muted); }

/* UKK */
.section--light .faq-item { background: var(--color-on-light-card); border-color: var(--color-on-light-line); }
.section--light .faq-item[open] { border-color: var(--color-on-light-line-strong); }
.section--light .faq-item summary { color: var(--color-on-light-heading); }
.section--light .faq-item__icon { color: var(--color-on-light-heading); }
.section--light .faq-item__body { color: var(--color-on-light-muted); }

/* Palvelualueet */
.section--light .alue { background: var(--color-on-light-card); border-color: var(--color-on-light-line); }
.section--light .alue h3 { color: var(--color-on-light-heading); }
.section--light .alue p { color: var(--color-on-light-muted); }

/* Arvostelut. Keltainen tähti ei erotu valkoisesta, joten se tummenee. */
/* Arvostelukortit valkoisella: yleinen korttisavy oli liian tumma ja luki
   harmaana laikkuna. Lahes valkoinen pinta ja hieman vahvempi reuna pitavat
   kortin kevyena mutta silti rajattuna. */
.section--light .review { background: #fbfbfa; border-color: #e4e4dd; }
.section--light .review:hover { border-color: var(--color-on-light-line-strong); box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 14px 34px rgba(0,0,0,0.06); }
.section--light .review p { color: var(--color-on-light-text); }
.section--light .review__name { color: var(--color-on-light-heading); }
.section--light .review__src { color: var(--color-on-light-muted); }
.section--light .review__stars { color: #b8930a; }
.section--light .review__avatar { background: var(--color-primary); color: var(--color-on-primary); }
/* Karusellin oikean reunan häivytys on seedissä tumma. Valkoisella osiolla se
   luki tummana tahrana kortin päällä, joten sävy vaihdetaan valkoiseksi:
   kortit haipuvat reunaan samalla tavalla kuin tummalla pinnalla. Tarkkuus on
   nostettava luokkaparilla, koska seedin sääntö #arvostelut .carousel-wrap::after
   voittaisi pelkän luokan. */
.section--light .carousel-wrap::after,
#arvostelut.section--light .carousel-wrap::after {
  display: block;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--color-light-bg) 78%);
}
.section--light .carousel-nav button {
  border-color: var(--color-on-light-line-strong);
  color: var(--color-on-light-heading);
}
.section--light .carousel-nav button:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Napit valkoisella. Reunanappi tarvitsee tummemman reunan ja mustan tekstin. */
.section--light .btn-secondary { color: var(--color-on-light-heading); border-color: var(--color-on-light-line-strong); }
.section--light .btn-secondary:hover { border-color: var(--color-on-light-heading); color: var(--color-on-light-heading); }
.section--light .link-arrow--muted { color: var(--color-on-light-muted); }
.section--light .link-arrow--muted:hover { color: var(--color-on-light-heading); }

/* ---------- Poikkeukset: oma tumma pohja valkoisen osion sisällä ----------
   Kuvakortit, ennen/jälkeen-sliderit ja tumma huomiopalkki kantavat oman
   tumman pintansa. Niiden teksti pysyy valkoisena, vaikka ympäröivä osio on
   valkoinen. Ilman näitä yllä olevat laajat h2/h3/p-säännöt tummentaisivat
   tekstin kuvan päälle, jolloin se katoaa. */
.section--light .svc-card h3 { color: var(--color-white); }
.section--light .svc-card p { color: rgba(255, 255, 255, 0.82); }
.section--light .ba-slider__label { color: var(--color-white); }
.section--light .notice { color: var(--color-white); }
.section--light .notice b,
.section--light .notice h3 { color: var(--color-white); }
.section--light .notice p { color: rgba(255, 255, 255, 0.82); }
/* Tumma osio-erikoisuus (.dark) voi myös osua sisään. */
.section--light .dark h2,
.section--light .dark h3 { color: var(--color-white); }
.section--light .dark p { color: rgba(255, 255, 255, 0.7); }

/* Yhteystiedot valkoisella (jos osio osuu vaaleaan rytmiin) */
.section--light .contact__item-ic { background: var(--color-on-light-card); border-color: var(--color-on-light-line); color: var(--color-on-light-heading); }
.section--light .contact__item b,
.section--light .contact__person b { color: var(--color-on-light-heading); }
.section--light .contact__item a,
.section--light .contact__item span,
.section--light .contact__person a { color: var(--color-on-light-muted); }
.section--light .contact__person .contact__area { color: var(--color-on-light-muted); }
.section--light .contact__person { background: var(--color-on-light-card); border-color: var(--color-on-light-line); }
.section--light .contact__person:hover { background: var(--color-on-light-card); border-color: var(--color-on-light-line-strong); }
.section--light .contact__person a { color: var(--color-on-light-heading); }
.section--light .contact__person a:hover { color: var(--color-primary); }
.section--light .channel-btn { color: var(--color-on-light-heading); border-color: var(--color-on-light-line-strong); }

/* .section--alt ja .section--light eivät voi olla yhtä aikaa voimassa. Jos
   HTML:ssä on molemmat, valkoinen voittaa. */
.section--alt.section--light { background: var(--color-light-bg); }

/* Kaksi valkoista osiota vierekkain luetaan yhtena vaaleana lohkona. Ei
   rajaviivaa valiin, ja osioiden omat pystypehmusteet puolitetaan, jotta
   lohkon keskelle ei jaa turhaa tyhjaa. */
.section--light + .section--light { padding-top: clamp(1.4rem, 2.2vw, 2.1rem); }
.section--light:has(+ .section--light) { padding-bottom: clamp(1.4rem, 2.2vw, 2.1rem); }

/* Seedissä muutamalla osiolla on tausta ID-valitsimella, joka voittaisi
   .section--light-luokan tarkkuudessa. Nostetaan valkoisen tarkkuus samaan. */
#tyomme.section--light,
#palvelut.section--light,
#arvostelut.section--light,
#meista.section--light,
#tarjous.section--light,
#ukk.section--light,
#hinnat.section--light,
#prosessi.section--light,
#palvelualueet.section--light,
#laskuri.section--light,
#huolto.section--light { background: var(--color-light-bg); }

/* ---------- Tietoa palvelusta: kaksi saraketta ----------
   Vasemmalla otsikko, alaotsikko ja kolme kohtaa allekkain, oikealla kuva.
   Kolme kohtaa menevät yhteen sarakkeeseen, koska ne ovat nyt vain
   otsikkorivejä ilman selitystä. */
.svc-info { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
/* Pystykuva 4:5 kasvoi tekstipalstaa korkeammaksi ja jätti vasemmalle tyhjää.
   Matalampi suhde pitää palstat suunnilleen samankorkuisina. */
.svc-info__media img { width: 100%; object-fit: cover; border-radius: 2px; aspect-ratio: 4 / 4.3; }
/* Kun kuvapaikalla on ennen/jälkeen-slider, kuvat ovat vaakaa 4:3. Yleinen
   .ba-slider on pysty 3:4, joka rajaisi vaakakuvan sivuilta. Kumotaan se
   tässä paikassa, ja kuvat täyttävät sliderin omilla säännöillään. */
.svc-info__media .ba-slider { aspect-ratio: 4 / 3; }
.svc-info__media .ba-slider img { aspect-ratio: auto; border-radius: 0; }
.svc-info .feature-list--3 { grid-template-columns: 1fr; gap: 1.35rem; }
/* Kolme kohtaa kaipasivat ilmaa alaotsikosta. */
.svc-info .feature-list { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
/* Ilman alatekstiä otsikko keskittyy ikonilaatan kanssa samalle linjalle. */
.svc-info .feature { align-items: center; }
.svc-info .feature h3 { margin-bottom: 0; }

@media (min-width: 880px) {
  .svc-info { grid-template-columns: 1.05fr 0.95fr; }
}
/* Mobiilissa teksti ensin, kuva sen alle. */
@media (max-width: 879px) {
  .svc-info__body { order: 1; }
  .svc-info__media { order: 2; }
  .svc-info__media img { aspect-ratio: 3 / 2; }
}

/* Feature-otsikot ilman versaalia: nämä ovat lyhyitä väliotsikoita, joissa
   versaali luki huutamisena eikä rakenteena. */
.feature h3 { text-transform: none; letter-spacing: -0.01em; }

/* ---------- CTA-banneri: toissijainen linkki ----------
   Keltaisella bannerilla vaalea teksti ei erottunut. Musta erottuu. */
.cta-banner .link-arrow,
.cta-banner .link-arrow--muted { color: var(--color-on-primary); }
.cta-banner .link-arrow:hover,
.cta-banner .link-arrow--muted:hover { color: var(--color-ink); }
/* Nappi ja toissijainen linkki olivat kiinni toisissaan, koska molemmat ovat
   inline-elementtejä keskitetyssä lohkossa. Oma flex-rivi hoitaa välin ja
   kapealla näytöllä ne asettuvat allekkain. */
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
}

/* ---------- Palveluvalikko: kaksitasoinen pudotusvalikko ----------
   Palvelut-valikon sisällä on kaksi omaa pudotusvalikkoa (Kattohuollot ja
   Maalauspalvelut), jotka ovat kiinni kunnes niitä napsautetaan. Huoneisto-
   remontit on suora linkki, koska sillä ei ole alasivuja. */
/* Palvelut ei ole enää linkki vaan pelkkä valikon avaaja, joten se on <button>.
   Seedin navityylit osuvat vain <a>-elementteihin, joten sama ulkoasu
   annetaan napille erikseen. */
.nav__links button.nav__dd-toggle {
  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 button.nav__dd-toggle::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.4rem;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-soft);
}
.nav__links button.nav__dd-toggle:hover { opacity: 1; }
.nav__dd:hover .nav__dd-toggle::after,
.nav__dd:focus-within .nav__dd-toggle::after { transform: scaleX(1); }
.header.scrolled .nav__links button.nav__dd-toggle { color: var(--color-text); }

@media (max-width: 980px) {
  .nav__links button.nav__dd-toggle {
    padding: 1rem 0;
    font-size: 1.15rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    opacity: 1;
  }
  .nav__links button.nav__dd-toggle::after { display: none; }
}

/* Napsautuksella avattu valikko desktopilla. Hover-avaus jää ennalleen. */
@media (min-width: 981px) {
  .nav__dd.open .nav__dd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s var(--ease-soft), visibility 0s;
  }
  .nav__dd.open .nav__dd-caret { transform: rotate(180deg); }

  /* Linkin napsautuksen jälkeen valikko pakotetaan kiinni, vaikka hiiri olisi
     yhä sen päällä. Ilman tätä :hover pitäisi valikon auki silloin kun
     napsautettu linkki osoittaa nykyiselle sivulle eikä sivu lataudu
     uudelleen. Luokka poistuu kun hiiri viedään pois valikosta. */
  .nav__dd.suljettu .nav__dd-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s var(--ease-soft), visibility 0s linear 0.22s;
  }
  .nav__dd.suljettu .nav__dd-caret { transform: none; }
}

.nav__dd-group { display: grid; }
.nav__dd-menu a.nav__dd-group-toggle,
.nav__dd-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.72rem 0.95rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-heading);
  text-align: left;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.nav__dd-group-toggle:hover,
.nav__dd-group-toggle:focus-visible { background: var(--color-primary-soft); color: var(--color-accent); }
.nav__dd-group-caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.28s var(--ease-soft);
}
.nav__dd-group.open > .nav__dd-group-toggle > .nav__dd-group-caret { transform: rotate(180deg); }
/* Auki oleva ryhmä merkitään omalla säännöllä, ei hover-jäljellä. Hover jättää
   kosketuslaitteella värin päälle, mikä luki satunnaisena korostuksena. */
.nav__dd-group.open > .nav__dd-group-toggle {
  color: var(--color-accent);
  background: var(--color-primary-soft);
}

/* Alalista on kiinni oletuksena. Grid-rows-animaatio ei ole kaikkialla tuettu,
   siksi max-height. 22rem riittää neljälle riville. */
.nav__dd-sublist {
  display: grid;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-soft);
}
.nav__dd-group.open > .nav__dd-sublist { max-height: 22rem; }

/* Desktopilla ryhmän avaa edelleen hover, mutta avaus on pysyvä: JS lisää
   .open-luokan eikä poista sitä naapuriryhmään siirryttäessä. Pelkkä :hover
   sulki alalistan heti kun hiiri liikkui alaspäin, jolloin valikko hyppi
   auki ja kiinni kesken liikkeen eikä alimpiin linkkeihin päässyt.
   Alalistat sulkeutuvat vasta kun hiiri poistuu koko Palvelut-valikosta,
   linkkiä napsautetaan tai Esc painetaan (ks. script.js).
   :focus-within hoitaa saman avauksen näppäimistöllä. */
@media (min-width: 981px) {
  .nav__dd-group:focus-within > .nav__dd-sublist { max-height: 22rem; }
  .nav__dd-group:focus-within > .nav__dd-group-toggle > .nav__dd-group-caret { transform: rotate(180deg); }
  .nav__dd-group:focus-within > .nav__dd-group-toggle {
    color: var(--color-accent);
    background: var(--color-primary-soft);
  }
}

/* Ryhmien väliin ohut viiva, jotta kaksi ryhmää ja suora linkki erottuvat. */
.nav__dd-group + .nav__dd-group,
.nav__dd-group + .nav__dd-head,
.nav__dd-menu > a.nav__dd-head + .nav__dd-group {
  border-top: 1px solid var(--color-border);
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}

/* Kaksitasoisessa valikossa alapalvelut eivät enää tarvitse omaa viivakoristetta
   otsikon alla, koska ryhmä itse on jo sisennetty laatikko. */
.nav__dd-sublist a.nav__dd-sub { padding-left: 1.5rem; }

@media (max-width: 980px) {
  /* Mobiilissa uloin valikko kasvaa kahden tason takia, joten max-height
     nousee. Ilman tätä alalistat leikkautuisivat pois. */
  .nav__dd.open .nav__dd-menu { max-height: 54rem; }
  /* Ryhmän avaava linkki saa mobiilissa tarkalleen samat mitat kuin suora
     kategorialinkki (.nav__dd-head), jotta kaikki neljä riviä alkavat samasta
     kohdasta. Tarvitsee saman tarkkuuden kuin desktopin sääntö, muuten sen
     vaakapehmuste 0.95rem jää voimaan ja rivit ovat eri tasossa. */
  .nav__dd-menu a.nav__dd-group-toggle,
  .nav__dd-group-toggle { padding: 0.82rem 0; }
  .nav__dd-group + .nav__dd-group,
  .nav__dd-group + .nav__dd-head { margin-top: 0; padding-top: 0; border-top: none; }
  .nav__dd-menu > a.nav__dd-head,
  .nav__dd-group > .nav__dd-group-toggle { border-bottom: 1px solid var(--color-border); }
  /* Mobiilissa sisennys riittää tasoeroksi, viivakoriste jäisi tekstin alle. */
  .nav__dd-sublist a.nav__dd-sub { padding-left: 1.1rem; }
  .nav__dd-sublist a.nav__dd-sub::before { display: none; }
  /* Auki olevan ryhmän tausta koko leveydeltä olisi mobiilissa liian raskas. */
  .nav__dd-group.open > .nav__dd-group-toggle { background: none; }

  /* Kategorialinkki (Huoneistoremontit) käyttäytyy mobiilissa kuin muutkin
     rivit. Desktopin yläviiva ja väli piirsivät Maalauspalvelut-rivin
     alaviivan viereen toisen viivan, eli tuplaviivan. */
  .nav__dd-menu a.nav__dd-head,
  .nav__dd-menu a.nav__dd-head:not(:first-child) {
    margin-top: 0;
    padding: 0.82rem 0;
    border-top: none;
  }
  /* Valikon viimeinen rivi ei piirrä alaviivaa: se jäi roikkumaan
     pudotusvalikon ja seuraavan päätason linkin väliin. */
  .nav__dd-menu > a:last-child { border-bottom: none; }

  /* Kosketuslaitteella nappi jää fokukseen napautuksen jälkeen, joten
     :focus-within piti nuolen käännettynä vielä valikon sulkemisenkin
     jälkeen. Mobiilissa nuolta ohjaa vain .open. */
  .nav__dd:hover .nav__dd-caret,
  .nav__dd:focus-within .nav__dd-caret { transform: none; }
  .nav__dd.open .nav__dd-caret { transform: rotate(180deg); }
}

/* ---------- Ennen ja jälkeen: ylösveto vain etusivulle ----------
   Seedissä #tyomme vedetään ylöspäin, jotta se asettuu yläpuolisen tumman
   osion diagonaalitaitteen alle. Vain etusivulla on sellainen osio; muilla
   sivuilla veto jätti osion ylälaitaan turhan tyhjän kaistaleen. */
#tyomme {
  margin-top: 0;
  padding-top: var(--section-y);
}
.dark.edge-both + #tyomme {
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}

/* ---------- Palvelusivujen työvaiheet ----------
   Kuusi laatikkoa ilman kuvaa, sama komponentti kuin kategoriasivujen
   prosessi. Ilman alatekstiä laatikko latistuu, joten numero ja otsikko
   asettuvat samalle linjalle. */
.steps--tight .step { align-items: center; padding-block: 1.35rem; }
.steps--tight .step h3 { margin-bottom: 0; }

/* Rastilistassa merkki on pienempi kuin numeroitu vaiheruutu. */
.steps--check .step { grid-template-columns: 30px 1fr; gap: 0.95rem; }
.steps--check .step__num {
  width: 30px;
  height: 30px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.steps--check .step__num svg { width: 16px; height: 16px; }

/* =========================================================================
   Muutoskierros 7 (Mikko)
   ========================================================================= */

/* ---------- Heron alareunan sauma pois ----------
   Hero on 97dvh, joten sen alta pilkottaa aina kaistale seuraavaa osiota.
   Overlayn gradientti loppui 92 %:n peittoon sinertävällä rgba(8,9,11):llä,
   jolloin taustakuva kuulsi alareunassa läpi ja kohtasi trustbarin tasaisen
   neutraalin #0d0d0d:n. Ero on pieni mutta terävä, ja mobiilissa se osuu
   suoraan ruudun alalaitaan, missä se luki irrallisena viivana ja kaistana.

   Korjaus: overlay ajetaan viimeisellä kuudesosalla täyteen peittoon samalla
   värillä kuin alla oleva osio, jolloin heron viimeinen pikseli on täsmälleen
   var(--color-bg) eikä saumaa synny. Rajaus .hero-luokkaan, jotta alasivujen
   .svc-hero (jolla on oma diagonaalileikkaus) pysyy ennallaan. */
.hero .hero__media::after {
  background:
    linear-gradient(to bottom,
      rgba(8,9,11,0.84) 0%,
      rgba(8,9,11,0.76) 42%,
      rgba(8,9,11,0.92) 84%,
      var(--color-bg) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(8,9,11,0.32) 28%, rgba(8,9,11,0.76) 100%);
}

/* =========================================================================
   Muutoskierros 8 (Mikko)
   ========================================================================= */

/* ---------- Pesusivun ennen ja jälkeen -kuvat hintojen kanssa ----------
   Pesukohteiden parit on rajattu vaakaan (4:3), joten slider kääntyy vaakaan
   ja rivi vetää kaksi kohdetta vierekkäin. Kuvan alle tulee palvelun nimi,
   hinta ja lyhyt kuvaus, jotta hinta luetaan samassa silmäyksessä
   lopputuloksen kanssa. */
.ba-main--hinnat .ba-slider { aspect-ratio: 4 / 3; }
.ba-item__body { padding-top: 1.2rem; }
.ba-item__body h3 { margin-bottom: 0.4rem; }
.ba-item__hinta {
  font-family: var(--font-heading);
  font-weight: 560;
  color: var(--color-accent);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.6rem;
}
/* Neliömäärä kulkee hinnan perässä pienempänä, jotta euro jää hallitsevaksi. */
.ba-item__hinta span { font-size: 0.56em; font-weight: 500; letter-spacing: -0.01em; color: var(--color-text-light); }
.ba-item__body p { color: var(--color-text-light); font-size: 0.96rem; margin-bottom: 0; }
.ba-huomio { color: var(--color-text-light); font-size: 0.9rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* Vaalealla taustalla teksti kääntyy tummaksi samalla logiikalla kuin
   muissakin komponenteissa. */
.section--light .ba-item__body h3 { color: var(--color-on-light-heading); }
.section--light .ba-item__hinta { color: var(--color-on-light-heading); }
.section--light .ba-item__body p,
.section--light .ba-item__hinta span,
.section--light .ba-huomio { color: var(--color-on-light-muted); }

@media (min-width: 880px) {
  .ba-main--hinnat { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- Osioiden hengitystila ----------
   Kaksi perakkaista valkoista osiota kutistavat pystypehmusteensa saannolla
   .section--light + .section--light. Arvostelujen ymparille halutaan silti
   selvasti enemman tilaa, joten ennen/jalkeen -> arvostelut -> referenssit
   saavat oman, isomman valin. Tarkkuus on 0,2,0 eli sama kuin kutistavalla
   saannolla, joten myohempi sijainti tiedostossa ratkaisee. */
:root { --ilmava-y: clamp(3.5rem, 6.5vw, 6.5rem); }
.section--light.section--ilmava-alas,
.section--light.section--ilmava { padding-bottom: var(--ilmava-y); }
.section--light.section--ilmava-ylos,
.section--light.section--ilmava { padding-top: var(--ilmava-y); }

/* ---------- Referenssit ----------
   Kaksi korttia rivissa tyopoydalla, yksi mobiilissa. Jokaisen kortin kuvat
   ovat samassa 3:2-suhteessa ja pinossa paallekkain: nuolinappi vaihtaa
   nakyvan kuvan ristihaivytyksella. Nuoli ja pallot piilotetaan, jos kuvia
   on vain yksi. */
.ref-grid { display: grid; gap: clamp(2rem, 4vw, 2.8rem); grid-template-columns: 1fr; margin-top: clamp(2.2rem, 4vw, 3rem); }
.ref-card { display: flex; flex-direction: column; }

.ref-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-ink);
  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;
  opacity: 0;
  transition: opacity 0.45s var(--ease-soft);
}
.ref-card__img.is-active { opacity: 1; }

/* Kevyt tummennus ylalaitaan ja oikeaan reunaan, jotta tunniste ja nuoli
   erottuvat myos vaaleasta taivaasta. */
.ref-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8,9,11,0.42) 0%, rgba(8,9,11,0) 34%),
    linear-gradient(to top, rgba(8,9,11,0.34) 0%, rgba(8,9,11,0) 26%);
}

.ref-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 0.5rem 0.95rem 0.52rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  padding-right: 1.5rem;
}

/* Selausnapit kuvan oikeassa alakulmassa: taakse ja eteen vierekkain. */
.ref-card__navs {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
}
.ref-card__nav {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(10,11,13,0.42);
  color: var(--color-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.12s ease;
}
.ref-card__nav svg { width: 17px; height: 17px; }
.ref-card__nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.ref-card__nav:active { transform: scale(0.92); }
.ref-card__nav:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.ref-card__dots {
  position: absolute;
  left: 1rem;
  bottom: calc(0.85rem + 15px);
  z-index: 2;
  display: flex;
  gap: 0.45rem;
}
.ref-card__dot {
  width: 24px;
  height: 4px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 1px 3px rgba(8,9,11,0.55);
  transition: background-color 0.25s ease;
}
.ref-card__dot.is-active { background: var(--color-white); }
.ref-card__dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* Yhden kuvan kohteessa ei ole mitaan selattavaa. */
.ref-card__media:has(.ref-card__img:only-of-type) .ref-card__navs,
.ref-card__media:has(.ref-card__img:only-of-type) .ref-card__dots { display: none; }

.ref-card__body { padding-top: 1.25rem; }
.ref-card__body h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; margin-bottom: 0.55rem; }
.ref-card__body p { color: var(--color-text-light); font-size: 1rem; margin-bottom: 0; max-width: 46ch; }

.section--light .ref-card__body h3 { color: var(--color-on-light-heading); }
.section--light .ref-card__body p { color: var(--color-on-light-muted); }

@media (min-width: 820px) {
  .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ref-card__img { transition: none; }
}

/* ---------------------- Muutoskierros 3 (Mikko) ----------------------- */

/* Työlista: palveluluettelo ikonein. Käytetään huoneistoremonttien
   sisäremonttipalveluihin. Ruudukon 1px rako piirtää viivaston taustasta,
   samaan tapaan kuin .stats-lohkossa. */
.tyolista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.tyolista__item {
  display: block;
  padding: 1.5rem 1.45rem;
  background: var(--color-surface);
  transition: background-color 0.25s ease;
}
.tyolista__item:hover { background: var(--color-surface-2); }
.tyolista__ic {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-accent);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.tyolista__ic svg { width: 21px; height: 21px; }
/* Ikoni omalle riville: otsikko saa koko ruudun leveyden ja mahtuu
   kahdelle riville. Kahden rivin minimikorkeus pitaa kuvaustekstit
   samalla viivalla, vaikka otsikot ovat eripituisia. */
.tyolista__ic { margin-bottom: 1.05rem; }
.tyolista__item h3 { font-size: clamp(1rem, 1.5vw, 1.1rem); margin-bottom: 0.5rem; line-height: 1.25; min-height: 2.5em; }
.tyolista__item p { color: var(--color-text-light); font-size: 0.92rem; line-height: 1.6; margin: 0; }

@media (max-width: 639px) {
  /* Yhdessa sarakkeessa otsikot mahtuvat yhdelle riville, joten
     kiintea minimikorkeus jattaisi vain tyhjaa. */
  .tyolista__item h3 { min-height: 0; }
}

@media (min-width: 640px) {
  .tyolista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tyolista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tyolista__item { padding: 1.7rem 1.6rem; }
}

/* Saman osion sisällä oleva alaotsikko tarvitsee ilmaa edelliseen
   lohkoon, muuten luettelo liimautuu palvelukortteihin kiinni. */
.section-head--sub { margin-top: clamp(3.2rem, 6vw, 5rem); }

/* =========================================================================
   Muutoskierros 9 (Mikko)
   Lisätietolaatikko prosessiosion loppuun: peltikaton 2-komponenttimaalaus
   ja tiilikaton harjatiiviste.
   ========================================================================= */

/* Valkoinen kortti valkoisessa osiossa: erottuu harmaista työvaihelaatikoista
   valkoisella pinnalla ja hiusviivalla, ei taustavärillä. Varjoa ei käytetä,
   koska clip-path leikkaisi sen pois joka tapauksessa. Teksti vasemmalla,
   kuva oikealla, molemmat puolet 50 %. Kuva ulottuu kortin reunaan asti,
   joten sen puolella ei ole padding-arvoa. */
.lisatieto {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  background: var(--color-light-bg);
  border: 1px solid var(--color-on-light-line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.lisatieto__body {
  padding: clamp(1.7rem, 3.4vw, 2.8rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lisatieto__body h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  color: var(--color-on-light-heading);
  line-height: 1.14;
}
.lisatieto__body .lisatieto__ingressi {
  margin: 0.85rem 0 0;
  color: var(--color-on-light-text);
  line-height: 1.7;
}

/* Hyötylista: sama merkkiruutu kuin .check__mark, vain pienempänä. Keltainen
   ruutu toimii valkoisella, koska sen päällä oleva merkki on musta. */
.lisatieto__lista {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-on-light-line);
}
.lisatieto__lista li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--color-on-light-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}
.lisatieto__mark {
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.lisatieto__mark svg { width: 12px; height: 12px; }

/* Kuva täyttää oman ruutunsa korkeussuunnassa. Absoluuttinen sijoitus estää
   sitä venyttämästä riviä tekstipalstaa korkeammaksi. */
.lisatieto__media { position: relative; min-height: 230px; background: var(--color-ink); }
.lisatieto__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .lisatieto { grid-template-columns: 1fr 1fr; }
  .lisatieto__media { min-height: 100%; }
}

/* =========================================================================
   Muutoskierros 10 (aluesivut)
   Aluekohtaisten palvelusivujen kaksi uutta lohkoa:
   1. alue- ja SEO-osio UKK:n alapuolella
   2. "Muut palvelumme <kaupungissa>" -korttien täysleveä ruudukko

   Lohko koskee vain uusia aluesivuja: .aluetieto ja .svc-grid--alue
   esiintyvät vain niillä, eikä mitään aiempaa sääntöä poisteta.
   ========================================================================= */

/* ---------- Alue- ja SEO-osio ---------- */

.aluetieto {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}

/* Teksti jaetaan nimettyihin lohkoihin. Hiusviiva lohkon yläreunassa erottaa
   aiheet toisistaan, jolloin osio luetaan kolmena kysymyksenä eikä yhtenä
   pitkänä tekstimassana. */
.aluetieto__lohko {
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-border);
}
.aluetieto__lohko + .aluetieto__lohko { margin-top: 1.8rem; }
.aluetieto__lohko h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
/* Rivin pituus rajataan, koska tämä on sivun ainoa pitkä yhtenäinen teksti. */
.aluetieto__lohko p {
  color: var(--color-text-light);
  line-height: 1.75;
  max-width: 66ch;
  margin: 0 0 0.85rem;
}
.aluetieto__lohko p:last-child { margin-bottom: 0; }

/* Saman maakunnan muut kaupungit yhtenä rivinä tekstipalstan lopussa. Tämä
   korvaa aiemman toisen sivukortin: sama sisäinen linkitys, ei toistoa. */
.aluetieto__muut {
  margin-top: 1.9rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.7;
}
.aluetieto__muut b { color: var(--color-heading); font-weight: 600; }
.aluetieto__muut a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.aluetieto__muut a:hover { color: var(--color-heading); border-bottom-color: currentColor; }

/* Sivupalstan kortti seuraa vierityksen mukana, kun tekstipalsta on pitkä.
   Kiinteä header on 87 px, joten top jättää sen alle vielä ilmaa.

   Kaksi ehtoa on täytyttävä, jotta sticky toimii:
   1. Sivupalsta venyy koko rivin korkeuteen (grid-itemin stretch, ei start).
      Muuten kortilla ei ole tilaa liikkua vanhempansa sisällä.
   2. Body ei saa olla vierityskonteksti. Sivuston body on overflow-x: hidden,
      mikä tekee siitä sellaisen ja jäädyttää stickyn. Aluesivujen bodylle
      vaihdetaan clip, joka rajaa vaakasuunnan luomatta vierityskontekstia.
      Selaimessa joka ei tue clipiä hidden jää voimaan ja kortti on tavallinen. */
body.aluesivu { overflow-x: clip; }
.aluetieto__sivu .alue { margin: 0; }
.aluetieto__sivu .alue p { margin: 0 0 1.1rem; }

.alue__lista {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding: 0;
}
.alue__lista li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 0.6rem;
  align-items: baseline;
  color: var(--color-text-light);
  font-size: 0.94rem;
  line-height: 1.5;
}
/* Sama vinottu kulmapala kuin .eyebrow-merkissä, pienempänä. */
.alue__lista li::before {
  content: "";
  width: 14px;
  height: 7px;
  background: var(--color-primary);
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
}

/* Valkoisella pinnalla listan oma väri on tummalle taustalle tarkoitettu vaalea
   harmaa, jonka kontrasti kortin pintaa vasten jää noin arvoon 2,4:1. Sama
   yliajo kuin muillakin komponenteilla: teksti tummenee ja linkit saavat
   otsikon sävyn, jolloin ne myös erottuvat klikattaviksi. */
.section--light .alue__lista li { color: var(--color-on-light-muted); }
.section--light .alue__lista a {
  color: var(--color-on-light-heading);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.section--light .alue__lista a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: currentColor;
}

@media (min-width: 900px) {
  .aluetieto { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
  .aluetieto__sivu .alue { position: sticky; top: 7rem; }
}

/* ---------- Muut palvelumme <kaupungissa> ----------
   Kortit täyttävät rivin laidasta laitaan: kaksi korttia puolikkaina ja kolme
   kolmanneksina. Peruslaji .svc-grid on 12-sarakkeinen ja antaisi matalalle
   .svc-card-kortille span 3, jolloin kaksi korttia veisi rivistä vain puolet.
   Kuvasuhde madalletaan, koska puolikas rivi on leveä eikä 4/5 toimisi. */
@media (min-width: 1024px) {
  .svc-grid--alue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid--alue-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-grid--alue > .svc-card { grid-column: auto; aspect-ratio: 16 / 10; }
  .svc-grid--alue-3 > .svc-card { aspect-ratio: 4 / 3; }
}

/* Palvelualueiden hub: kaupunkikortit kolmeen sarakkeeseen. Peruslaji
   .alue-grid on yksisarakkeinen, ja 24 korttia allekkain olisi kohtuuton
   vieritys. Kortit ovat pelkkiä linkkilistoja, joten ne pysyvät matalina. */
@media (min-width: 700px) {
  .alue-grid--palvelualueet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .alue-grid--palvelualueet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.alue-grid--palvelualueet .alue__lista { margin-bottom: 0; }

/* Hubin maakuntanostot yhdelle riville, tasavälein. */
.svc-actions .link-arrow { margin-right: 1.6rem; }