/* =========================================================================
   Oulun Lattiapinta Oy - style.css
   Restrained and elegant. Full-bleed photo hero with a dark overlay, light
   concrete surfaces, charcoal accents, sharp corners, hairline structure.
   Large light Raleway headings carry the identity; orange appears only in
   the logo mark, eyebrow markers, small indexes and primary buttons.
   Two quiet diagonals: the hero's bottom edge and the dark process section.
   Order: Fonts -> Custom Properties -> Reset -> Base -> Typography ->
   Angular utils -> Layout -> Buttons -> Header/Nav -> Hero -> Services ->
   About -> FAQ -> Process (dark) -> Contact/Form -> Footer -> Utilities ->
   Animations -> Media queries -> Alasivut (palvelusivut, yritys,
   yhteystiedot, seloste, 404) omana lohkonaan tiedoston lopussa.
   ========================================================================= */

/* ----------------------------- Kirjasimet ------------------------------ */
/* Kirjasimet tarjoillaan omalta palvelimelta (/fontit), ei Google Fontsista:
   ei kolmannen osapuolen yhteyttä, ei DNS-hakua, ei tietosuojamainintaa.
   Molemmat ovat muuttuvia kirjasimia (variable font), joten yksi tiedosto
   kattaa kaikki käytetyt paksuudet. latin-ext sisältää ä:n ja ö:n. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fontit/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fontit/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------- Custom Properties ----------------------- */
:root {
  --color-primary: #bd6520;      /* muted work-site orange */
  --color-primary-dark: #964d13; /* hover sweep / pressed */
  --color-accent: #d98d4b;       /* orange for dark surfaces */
  --color-on-primary: #ffffff;
  --color-ink: #1e1f21;          /* headings, strong text */
  --color-ink-deep: #191a1c;     /* hero, footer */
  --color-ink-soft: #2e2f33;     /* dark grey section (process) */
  --color-text: #2b2c2e;
  --color-text-light: #6b6d70;
  --color-text-faint: #9fa1a4;
  --color-bg: #f2f1ee;           /* light concrete page base */
  --color-surface: #ffffff;      /* white sections and panels */
  --color-bg-alt: #e9e7e3;       /* deeper concrete */
  --color-border: #e0deda;       /* hairline on light */
  --color-border-strong: #c6c3bc;
  --color-border-dark: #313236;  /* hairline on dark */
  --color-white: #ffffff;

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

  --font-heading: "Raleway", system-ui, -apple-system, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;

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

  /* 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, 8.5vw, 8rem);

  /* Diagonal section divider depth (kept shallow and quiet) */
  --edge: clamp(24px, 3.6vw, 52px);

  /* Shadows: reserved for the mobile drawer only */
  --shadow-drawer: 0 10px 40px rgba(20, 21, 23, 0.25);

  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Marker shape: the flattened diamond of the logo mark (same 21.6:12.2
     proportion), used for eyebrow and checklist markers instead of a square */
  --shape-mark: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  --mark-w: 15px;
  --mark-h: 8.5px;

  /* Whole-page zoom on large screens; body { zoom } below mirrors this so
     vh-based heights can divide by it. Keep the two in lockstep. */
  --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(88px * 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: 1rem;
  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: 2px solid var(--color-ink); outline-offset: 3px; }
::selection { background: var(--color-ink); color: var(--color-white); }

/* ----------------------------- Typography ------------------------------ */
/* Large + light Raleway is the identity: elegant, calm, unmistakable. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-ink);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 520;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.3vw, 4.2rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; font-weight: 540; }
h3 { font-size: 1.22rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: 1.02rem; font-weight: 620; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

/* Eyebrow: flattened orange diamond (logo mark shape) + tracked label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: "";
  width: var(--mark-w);
  height: var(--mark-h);
  background: var(--color-primary);
  clip-path: var(--shape-mark);
  flex-shrink: 0;
}

.lead { font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--color-text-light); line-height: 1.62; }

/* ----------------------------- Angular utilities ----------------------- */
/* Quiet diagonal section edges. Pair with extra padding so content clears
   the slope; pull the section up with a negative margin so the wedge above
   the top diagonal shows the previous section's surface. */
.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 ---------------------------------- */
.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--white { background: var(--color-surface); }
.section--grey { background: var(--color-bg-alt); }
/* Slide a section up under the previous section's bottom diagonal so the
   wedge shows this section's own background, not the page base. The previous
   section must sit higher in the stack (hero and .dark have z-index: 2). */
.section--overlap { margin-top: calc(var(--edge) * -1); }
/* Extra bottom room for a section the diagonal dark section overlaps */
.section--deep { padding-bottom: calc(var(--section-y) + var(--edge)); }

.section-head { max-width: 660px; }
.section-head h2 { margin-top: 0.25rem; }
.section-head p:not(.eyebrow) { color: var(--color-text-light); margin-top: 1.1rem; max-width: 52ch; }

/* Heading left, supporting text and link right */
.section-head--split {
  display: grid;
  gap: 1.25rem 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: 1rem; margin-bottom: 1rem; max-width: 40ch; }

/* ----------------------------- Buttons --------------------------------- */
/* Sharp rectangles, Raleway. The primary's darker sweep slides in from
   the left on hover. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: 0;
  line-height: 1;
  min-height: 52px;
  overflow: hidden;
  transition: color 0.32s var(--ease-soft), border-color 0.25s ease, background-color 0.25s ease, transform 0.12s ease;
  isolation: isolate;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-soft); }
.btn:active { transform: translateY(1px); }

.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.34s 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: translateX(3px); }

.btn-secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-border-strong); }
.btn-secondary:hover { border-color: var(--color-ink); }
.btn-secondary:hover svg { transform: translateX(3px); }

.btn-ghost { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.42); }
.btn-ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,0.06); }
.btn-ghost:hover svg { transform: translateX(3px); }

.btn-block { width: 100%; }
.btn-sm { padding: 0.68rem 1.2rem; min-height: 44px; font-size: 0.9rem; }

/* Quiet text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.93rem;
  color: var(--color-ink);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease-soft); }
.link-arrow:hover svg { transform: translateX(3px); }

/* 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, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
  will-change: transform;
}
.header__inner {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding: 0.375rem var(--pad-x);
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}

/* Logo lockup: perspective tile mark (hollow O + orange L) + name */
.logo { display: inline-flex; align-items: center; gap: 0.7rem; transition: opacity 0.25s ease; justify-self: start; }
.logo:hover { opacity: 0.8; }
.logo__mark { width: 46px; height: 27px; flex-shrink: 0; }
.logo__mark .mark-ink { fill: currentColor; transition: fill 0.35s ease; }
.logo__name { font-family: var(--font-heading); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.01em; white-space: nowrap; }
.logo__name em { font-style: normal; font-weight: 450; }
/* Y-tunnus navbarissa logon nimen alla */
.logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.logo__id { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; opacity: 0.72; white-space: nowrap; margin-top: 0.1rem; }

.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.55rem; justify-self: end; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.93rem;
  color: currentColor;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem;
  bottom: 0.36rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-soft);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.93rem;
  padding-inline: 0.8rem 0.55rem;
  white-space: nowrap;
}
.nav__phone svg { width: 16px; height: 16px; opacity: 0.85; }
/* Puhelinnumerot (Tero ja Mikko) näkyvät vain mobiilivalikossa, työpöydän
   navissa ei. Nimet samaan sarakkeeseen. */
.nav__phones { display: none; }
.nav__phone-nimi { display: inline-block; min-width: 3.1em; font-weight: 500; opacity: 0.78; }
.nav__cta { white-space: nowrap; }

.header.scrolled {
  background: rgba(242, 241, 238, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  color: var(--color-text);
  border-bottom-color: 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: 44px; height: 44px;
}
.menu-toggle span { display: block; width: 23px; height: 2px; background: currentColor; 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 ------------------------------------ */
/* Full-bleed photo + dark overlay, text left. A quiet diagonal closes the
   section at the bottom: a shallow dip from the left corner down to a low
   point at 22%, then the long rise to the right. */
.hero {
  position: relative;
  min-height: calc(92vh / var(--zoom-factor));
  min-height: calc(92dvh / var(--zoom-factor));
  display: flex;
  /* content sits below centre: the photo breathes above it, the diagonal below */
  align-items: flex-end;
  padding: 8rem var(--pad-x) 4.75rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  z-index: 2;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    22% 100%,
    0 calc(100% - var(--edge) * 0.3)
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  /* left-weighted scrim: a readable text column, the photo breathes right */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(95deg, rgba(17,18,20,0.84) 0%, rgba(17,18,20,0.6) 46%, rgba(17,18,20,0.24) 82%),
    linear-gradient(to bottom, rgba(17,18,20,0.42) 0%, rgba(17,18,20,0.08) 40%, rgba(17,18,20,0.44) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero .eyebrow { color: rgba(255,255,255,0.78); }
.hero h1 { color: var(--color-white); margin: 0.4rem 0 1.4rem; max-width: 17ch; }
.hero__lead { color: rgba(255,255,255,0.82); font-size: clamp(1.02rem, 1.4vw, 1.17rem); max-width: 48ch; margin: 0 0 2.4rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; }

/* ----------------------------- Services -------------------------------- */
/* Photo cards: full-bleed image, dark scrim, light text on top. */
.svc-grid { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: 1fr; margin-top: clamp(2.4rem, 4.5vw, 3.4rem); }
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(380px, 44vw, 460px);
  overflow: hidden;
  isolation: isolate;
}
a.svc-card { color: inherit; }
a.svc-card:focus-visible { outline-offset: -3px; outline-color: var(--color-white); }
.svc-card__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.65s var(--ease-soft); }
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(25,26,28,0.16) 0%, rgba(25,26,28,0.38) 52%, rgba(25,26,28,0.88) 100%);
  transition: opacity 0.4s ease;
}
.svc-card__body { padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.svc-card__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.svc-card h3 { color: var(--color-white); margin-top: 0.45rem; }
.svc-card p { color: rgba(255,255,255,0.8); font-size: 0.95rem; margin: 0.5rem 0 0; }

/* Cursor-follow badge: an orange dot with a white arrow that trails the
   pointer over a service card. The outer element is moved by JS (translate
   only); the inner dot owns the show/hide scale+fade so the two transforms
   never fight. Created by script.js for hover-capable pointers only. */
.svc-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.svc-cursor.show { will-change: transform; }
.svc-cursor__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px; /* centre the dot on the pointer */
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.15s ease, opacity 0.12s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .svc-cursor.show .svc-cursor__dot {
    opacity: 1;
    transform: scale(1);
    transition: transform 0.3s var(--ease-soft), opacity 0.15s ease;
  }
}
.svc-cursor__dot svg { width: 24px; height: 24px; }

/* ----------------------------- About / split --------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split__media { position: relative; }
.split__media-main { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Smaller detail shot layered over the bottom-right corner of the main image.
   The border matches the white section behind it, so the two photos read as
   separate planes instead of one merged image. */
.split__media-inset {
  position: absolute;
  right: -1.25rem;
  bottom: -1.75rem;
  width: 42%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border: 8px solid var(--color-surface);
  box-shadow: 0 10px 24px rgba(30, 31, 33, 0.16), 0 2px 6px rgba(30, 31, 33, 0.08);
}
.img-chip {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(25, 26, 28, 0.85);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  padding: 0.55rem 1rem;
}
.split__body .lead { margin-top: 1rem; }

/* Diamond-marker rows */
.checklist { display: grid; gap: 0; margin-top: 1.7rem; }
.check { display: grid; grid-template-columns: var(--mark-w) 1fr; gap: 0.9rem; align-items: start; padding: 1.05rem 0; border-top: 1px solid var(--color-border); }
.check:last-child { border-bottom: 1px solid var(--color-border); }
.check i { width: var(--mark-w); height: var(--mark-h); background: var(--color-primary); clip-path: var(--shape-mark); margin-top: 0.55rem; font-style: normal; }
.check b { font-family: var(--font-heading); font-weight: 640; display: block; color: var(--color-ink); }
.check span { color: var(--color-text-light); font-size: 0.95rem; }
.split__actions { margin-top: 2rem; }

/* ----------------------------- Yhteistyökumppanit ---------------------- */
/* Logorivi liukuu vasemmalle loputtomasti. Radassa on kaksi identtistä
   listaa, jotka siirtyvät kumpikin oman leveytensä verran: kun animaatio
   alkaa alusta, toinen lista on täsmälleen ensimmäisen paikalla, joten
   saumaa ei näy. Lista on leveämpi kuin näkyvä alue, joten kaksi riittää.
   Logojen koko on img-tagin width/height-määritteissä, tasattu niin, että
   eri muotoiset logot näyttävät yhtä painavilta. Jatkuu Meistä-osion
   valkoisena, joten yläreunassa ei ole omaa väliä. */
.kumppanit { --kumppani-vali: clamp(2.75rem, 5.5vw, 4.75rem); padding-top: 0; padding-bottom: clamp(3.5rem, 6.5vw, 5.5rem); }
.kumppanit__otsikko { text-align: center; color: var(--color-text-light); font-size: 0.95rem; margin-bottom: 1.75rem; }
.kumppanit__karuselli {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.kumppanit__rata {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--kumppani-vali);
  padding-right: var(--kumppani-vali);
  min-height: 56px;
  animation: kumppanitLiuku 40s linear infinite;
}
.kumppanit__rata img { max-width: none; }
.kumppanit__karuselli:hover .kumppanit__rata { animation-play-state: paused; }
@keyframes kumppanitLiuku { to { transform: translateX(-100%); } }

@media (max-width: 767px) {
  .kumppanit__karuselli { zoom: 0.8; }
  .kumppanit__rata { animation-duration: 32s; }
}
/* Ilman liikettä logot ovat paikallaan rivitettynä, kopio piilotetaan */
@media (prefers-reduced-motion: reduce) {
  .kumppanit__karuselli { -webkit-mask-image: none; mask-image: none; }
  .kumppanit__rata { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; gap: 1.5rem clamp(2rem, 4vw, 3rem); padding-right: 0; animation: none; }
  .kumppanit__rata[aria-hidden="true"] { display: none; }
}

/* ----------------------------- FAQ ------------------------------------- */
/* Hairline-divided question rows in two columns; the same border-top motif
   as the checklist, steps and contact items, so the section sits flush on
   the grey surface with no card boxes. Collapsed only when JS is present
   (same progressive-enhancement gate as .reveal); the 0fr -> 1fr grid row
   gives a smooth 200ms open/close without animating layout properties. */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
  border-bottom: 1px solid var(--color-border-strong);
}
.faq-item { border-top: 1px solid var(--color-border-strong); }
.faq-item__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  padding: 1.3rem 0;
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.faq-item__toggle:hover { color: var(--color-primary-dark); }
.faq-item__icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-primary); transition: transform 0.2s var(--ease-soft); }
.faq-item.open .faq-item__icon { transform: rotate(45deg); }
.faq-item__panel { overflow: hidden; }
.js .faq-item__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s var(--ease-soft); }
.js .faq-item.open .faq-item__panel { grid-template-rows: 1fr; }
.faq-item__body { min-height: 0; overflow: hidden; }
.faq-item__body p { margin: 0; padding: 0 2.4rem 1.4rem 0; color: var(--color-text-light); font-size: 0.95rem; line-height: 1.62; max-width: 56ch; }
/* Inline CTA inside an answer: reads as part of the sentence, still clearly a link. */
.faq-link, .text-link {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.faq-link:hover, .text-link:hover { color: var(--color-primary); }

/* ----------------------------- Process (dark, diagonal) ---------------- */
.dark {
  background: var(--color-ink-soft);
  color: rgba(255,255,255,0.78);
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* hairlines need to stay visible on the lighter dark-grey surface */
  --color-border-dark: rgba(255,255,255,0.14);
}
.dark.edge-both {
  margin-top: calc(var(--edge) * -1);
  padding-block: calc(var(--section-y) + var(--edge));
}
.dark .eyebrow { color: rgba(255,255,255,0.68); }
.dark .eyebrow::before { background: var(--color-accent); }
.dark h2 { color: var(--color-white); }
.dark .section-head__aside p { color: rgba(255,255,255,0.62); }
.dark .section-head p:not(.eyebrow) { color: rgba(255,255,255,0.62); }
.dark .faq-grid { border-bottom-color: var(--color-border-dark); }
.dark .faq-item { border-top-color: var(--color-border-dark); }
.dark .faq-item__toggle { color: var(--color-white); }
.dark .faq-item__toggle:hover { color: var(--color-accent); }
.dark .faq-item__icon { color: var(--color-accent); }
.dark .faq-item__body p { color: rgba(255,255,255,0.66); }
.dark .faq-link { color: var(--color-accent); }
.dark .faq-link:hover { color: var(--color-white); }
.dark .section-head a:not(.btn):not(.faq-link) { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem 2.6rem;
  margin-top: clamp(2.4rem, 4.5vw, 3.4rem);
}
.step { border-top: 1px solid var(--color-border-dark); padding-top: 1.4rem; }
.step__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}
.step h3 { color: var(--color-white); margin: 0.5rem 0 0.4rem; font-size: 1.12rem; }
.step p { color: rgba(255,255,255,0.6); font-size: 0.94rem; margin: 0; max-width: 30ch; }

/* CTA row inside the dark section */
.dark__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.2rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-border-dark);
}
.dark__cta h3 { color: var(--color-white); font-size: clamp(1.35rem, 2.3vw, 1.7rem); font-weight: 560; }
.dark__cta p { color: rgba(255,255,255,0.6); margin: 0.35rem 0 0; font-size: 0.96rem; }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 0; margin-top: 1.6rem; }
.contact__item { display: grid; grid-template-columns: 24px 1fr; gap: 0.9rem; align-items: start; padding: 1.05rem 0; border-top: 1px solid var(--color-border); }
.contact__item:last-child { border-bottom: 1px solid var(--color-border); }
.contact__item svg { width: 19px; height: 19px; color: var(--color-ink); margin-top: 3px; }
.contact__item b { font-family: var(--font-heading); font-weight: 640; display: block; color: var(--color-ink); font-size: 0.94rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-ink); }
.contact__item .contact__puhelin { display: block; }

.form { background: var(--color-bg); border: 1px solid var(--color-border); padding: clamp(1.6rem, 3vw, 2.4rem); }
.form__row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--font-heading); font-weight: 640; font-size: 0.87rem; color: var(--color-ink); }
.field label .req { color: var(--color-error); }
.field label .opt { color: var(--color-text-light); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 116px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(30,31,33,0.07); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.1); }
.field__error { color: var(--color-error); font-size: 0.8rem; min-height: 1em; }
/* Suostumusrivi napin yläpuolella: pieni, hiljainen, linkki selosteeseen */
.form__consent { font-size: 0.82rem; color: var(--color-text-light); margin: 0 0 1rem; line-height: 1.5; }
.form__consent a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form__consent a:hover { color: var(--color-primary-dark); }
/* Hunajapurkki roboteille: kenttä on poissa näkyvistä ja saavutettavuuspuusta,
   eikä selain täytä sitä automaattisesti. Jos siihen tulee sisältöä, lähetys
   hylätään script.js:ssä. */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form__status { margin-top: 1rem; font-size: 0.92rem; padding: 0.85rem 1rem; 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); }

/* Kuvakenttä: vapaaehtoiset kuvat kohteesta. Varsinainen tiedostokenttä on
   piilotettu mutta tarkennettavissa (näppäimistö), ja sen label toimii
   napautus- ja pudotusalueena. Valitsimet ovat .field-tasoa tarkempia, koska
   .field input ja .field label muotoilisivat ne muuten tekstikentiksi. */
.kuvakentta { position: relative; }
.field .kuvakentta__input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.field .kuvakentta__pudotus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.35rem 1.1rem;
  border: 1.5px dashed var(--color-border-strong);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text-light);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.field .kuvakentta__pudotus:hover { border-color: var(--color-ink); }
.kuvakentta__pudotus svg { width: 24px; height: 24px; color: var(--color-primary); }
.kuvakentta__teksti strong { color: var(--color-ink); font-family: var(--font-heading); font-weight: 640; }
.kuvakentta__vihje { font-size: 0.78rem; color: var(--color-text-faint); }
.field .kuvakentta__input:focus-visible + .kuvakentta__pudotus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(30,31,33,0.07); }
.kuvakentta.is-yli .kuvakentta__pudotus { border-color: var(--color-ink); border-style: solid; background: var(--color-bg-alt); }
.kuvakentta.is-invalid .kuvakentta__pudotus { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.1); }

/* Esikatselut: neliöruudukko, poistonappi kulmassa. */
.kuvakentta__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.55rem; }
.kuvakentta__lista:not(:empty) { margin-top: 0.6rem; }
.kuvakentta__kuva { position: relative; aspect-ratio: 1; border: 1px solid var(--color-border); overflow: hidden; background: var(--color-bg-alt); }
.kuvakentta__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Käsittelytila: kuva himmenee ja sykkii, kunnes pakkaus (ja lataus, jos se
   on käytössä) on valmis. Virhetila: kuva jää näkyviin harmaana ja alarivi
   kertoo lyhyesti syyn. Virheellinen kuva ei estä lomakkeen lähetystä. */
.kuvakentta__kuva.is-kasitellaan img { opacity: 0.45; animation: kuvakenttaKasittely 1.2s ease-in-out infinite alternate; }
@keyframes kuvakenttaKasittely { from { opacity: 0.3; } to { opacity: 0.6; } }
.kuvakentta__koko { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.35rem; font-size: 0.68rem; line-height: 1.4; color: var(--color-white); background: rgba(25,26,28,0.66); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kuvakentta__kuva.is-virhe { border-color: var(--color-error); }
.kuvakentta__kuva.is-virhe img { opacity: 0.3; filter: grayscale(1); }
.kuvakentta__kuva.is-virhe .kuvakentta__koko { background: var(--color-error); }
.kuvakentta__poista {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(25,26,28,0.74);
  color: var(--color-white);
  transition: background-color 0.2s ease;
}
.kuvakentta__poista:hover { background: var(--color-error); }
.kuvakentta__poista svg { width: 13px; height: 13px; }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.6); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border-dark); }
.footer__brand .logo { color: var(--color-white); margin-bottom: 1.2rem; }
.footer__brand p { font-size: 0.94rem; max-width: 30ch; }
.footer h3 { color: var(--color-white); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1.1rem; font-weight: 600; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 0.65rem; }
.footer__col a, .footer__col span { font-size: 0.94rem; color: rgba(255,255,255,0.6); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-white); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; font-size: 0.84rem; }
.footer__bottom a { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease; }
.footer__bottom a:hover { color: var(--color-white); }
.footer__bottom strong { color: rgba(255,255,255,0.85); font-weight: 600; }

/* ----------------------------- Utilities / reveal ---------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); 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; }
.no-scroll { overflow: hidden; }

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

/* Entrance zoom uses `backwards` (not `both`): a forwards fill would keep
   overriding the JS parallax transform, freezing the poster. */
.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
.hero__inner > * { animation: fadeUp 0.85s var(--ease-soft) both; }
.hero__inner > .eyebrow { animation-delay: 0.08s; }
.hero__inner > h1 { animation-delay: 0.2s; }
.hero__inner > .hero__lead { animation-delay: 0.36s; }
.hero__inner > .hero__cta { animation-delay: 0.5s; }

/* ----------------------------- Media queries --------------------------- */
@media (min-width: 600px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .faq-grid { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 5vw, 4.5rem); }
  .section-head--split { grid-template-columns: 1.25fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.3rem; justify-self: end; text-align: right; }
  .section-head--split .section-head__aside p { margin-left: auto; }
  .section-head--split .section-head__aside .link-arrow { justify-content: flex-end; }
}

@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
}

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

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  /* A transform OR will-change:transform would make the header a containing
     block for the position:fixed drawer, trapping it in the header box. */
  .header { will-change: auto; }
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 84vw);
    background: var(--color-bg);
    color: var(--color-text);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-soft);
    box-shadow: var(--shadow-drawer);
    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.1rem; 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.02rem; }
  .nav__phones { display: flex; flex-direction: column; }
  .nav__phones .nav__phone { font-size: 1.02rem; padding-top: 0.9rem; }
  .nav__phones .nav__phone:first-child { padding-top: 1.2rem; }
  .nav__cta { display: none; }
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  body.no-scroll .header {
    background: var(--color-bg);
    box-shadow: none;
    color: var(--color-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(20,21,23,0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}

@media (max-width: 767px) {
  .hero {
    min-height: 88vh;
    min-height: 88dvh;
    /* narrow screens: content sits at the vertical middle, nudged a little
       below it by the margin-top on .hero__inner */
    align-items: center;
    padding: 7rem var(--pad-x) 3.25rem;
  }
  .hero__inner { margin-top: 2rem; }
  .hero__media::after {
    /* narrow screen: the text column spans the full width, so the scrim is
       nearly even instead of left-weighted */
    background:
      linear-gradient(95deg, rgba(17,18,20,0.68) 0%, rgba(17,18,20,0.58) 46%, rgba(17,18,20,0.46) 82%),
      linear-gradient(to bottom, rgba(17,18,20,0.42) 0%, rgba(17,18,20,0.08) 40%, rgba(17,18,20,0.44) 100%);
  }
  .hero h1 { font-size: clamp(2.75rem, 11vw, 3.7rem); max-width: 14ch; }
  .hero__lead { margin-bottom: 1.9rem; }
  .svc-card { min-height: 300px; }
  .split__media { order: 2; }
  .split__media-main { aspect-ratio: 3 / 2; }
  .split__media-inset { width: 46%; right: 0; bottom: -1.25rem; border-width: 6px; }
}

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

/* =========================================================================
   ALASIVUT: palvelusivut, yritys, yhteystiedot, tietosuojaseloste, 404
   Sama kieli kuin etusivulla: terävät kulmat, hiusviivat, timanttimerkit,
   vinot reunat. Ei uusia värejä eikä uusia kirjasimia.
   ========================================================================= */

/* ----------------------------- Ylätunniste alasivuilla ---------------- */
/* Sivuilla, joilla ei ole kuvaheroa (yhteystiedot, seloste, 404), ylätunniste
   on vaalea heti ladattaessa. script.js ei vaihda sen tilaa vierityksessä. */
.header--solid {
  background: rgba(242, 241, 238, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  color: var(--color-text);
  border-bottom-color: var(--color-border);
}
.header--solid .nav__links a,
.header--solid .nav__phone { color: var(--color-text); }

/* --- Palvelut-pudotusvalikko (työpöytä: hover ja näppäimistökohdistus) --- */
.nav__item { position: relative; }
.nav__droptoggle { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__chevron { width: 14px; height: 14px; opacity: 0.8; transition: transform 0.2s var(--ease-soft); }
.nav__item:hover .nav__chevron,
.nav__item.open .nav__chevron,
.nav__item:focus-within .nav__chevron { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0.4rem;
  min-width: 230px;
  padding: 0.5rem 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 14px 34px rgba(20, 21, 23, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.22s var(--ease-soft), visibility 0s linear 0.2s;
  z-index: 5;
}
/* Näkymätön silta valikon ja linkin väliin, ettei valikko sulkeudu kun
   osoitin ylittää raon. */
.nav__dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -0.45rem; height: 0.45rem; }
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown,
.nav__item.open .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.22s var(--ease-soft), visibility 0s;
}
.nav__links .nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 1.15rem;
  font-size: 0.9rem;
  color: var(--color-text);
  opacity: 1;
  white-space: nowrap;
}
.nav__links .nav__dropdown a::before {
  content: "";
  width: 9px;
  height: 5px;
  background: var(--color-border-strong);
  clip-path: var(--shape-mark);
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}
.nav__links .nav__dropdown a::after { display: none; }
.nav__links .nav__dropdown a:hover,
.nav__links .nav__dropdown a[aria-current="page"] { color: var(--color-ink); background: var(--color-bg); }
.nav__links .nav__dropdown a:hover::before,
.nav__links .nav__dropdown a[aria-current="page"]::before { background: var(--color-primary); }

/* ----------------------------- Alasivun hero --------------------------- */
/* Sama valokuva, tumma huntu ja vino alareuna kuin etusivulla, mutta
   matalampi. Otsikot ovat etusivua pidempiä, joten palsta on leveämpi. */
.hero--page { min-height: calc(74vh / var(--zoom-factor)); min-height: calc(74dvh / var(--zoom-factor)); padding-top: 9rem; }
/* Vino V-alareuna on vain etusivulla. Alasivuilla hero päättyy suoraan
   linjaan, joten seuraavaa osiota ei liu'uteta sen alle. */
.hero--page { clip-path: none; }
.hero--page + .section--overlap { margin-top: 0; }
.hero--page h1 { font-size: clamp(2.35rem, 4.6vw, 3.8rem); max-width: 24ch; }
.hero--page .hero__lead { max-width: 54ch; }
/* Otsikon jälkiosa (paikkakunta) omalle rivilleen kevyemmällä leikkauksella.
   Oranssia ei käytetä otsikoissa: se on varattu merkille ja napeille. */
.hero--page h1 .accent { display: block; font-weight: 400; color: rgba(255,255,255,0.8); }

/* Murupolku heron sisällä. Yleinen nollaus koskee vain <ul>-listoja, joten
   <ol> nollataan tässä. */
.crumbs { margin: 0 0 1.1rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 560; font-size: 0.86rem; color: rgba(255,255,255,0.66); }
.crumbs li + li::before { content: "/"; margin-inline: 0.5rem 0.6rem; color: rgba(255,255,255,0.35); }
.crumbs a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.3); transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.crumbs a:hover { color: var(--color-white); text-decoration-color: var(--color-accent); }
.crumbs [aria-current="page"] { color: var(--color-accent); }
/* Vaalealla pohjalla (yhteystiedot, seloste) */
.crumbs--dark li { color: var(--color-text-light); }
.crumbs--dark li + li::before { color: var(--color-border-strong); }
.crumbs--dark a { color: var(--color-text); text-decoration-color: var(--color-border-strong); }
.crumbs--dark a:hover { color: var(--color-ink); text-decoration-color: var(--color-primary); }
.crumbs--dark [aria-current="page"] { color: var(--color-primary-dark); }

/* Heron toissijainen toiminto (palvelusivut): Ota yhteyttä -tekstilinkki
   nuolella yhteystietosivulle */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 0.4rem;
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.95rem;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,0.4);
  transition: text-decoration-color 0.2s ease;
}
.hero__link svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease-soft); }
.hero__link:hover { text-decoration-color: var(--color-accent); }
.hero__link:hover svg { transform: translateX(3px); }

/* ----------------------------- Palvelun esittely ----------------------- */
/* Kuvan oikeaan yläkulmaan sama vino leikkaus kuin osioiden reunoissa */
.clip-tr { clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 44px, 100% 100%, 0 100%); }
.split--intro .split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.split--intro .split__body > p:not(.eyebrow) { color: var(--color-text-light); margin-top: 1rem; }
.split--intro .lead { margin-top: 1rem; }

/* Kaksipalstainen tarkistuslista (palvelun sisältö) */
.checklist--2col { margin-top: 1.9rem; border-bottom: 1px solid var(--color-border); }
.checklist--2col .check { border-bottom: 0; padding: 0.85rem 0; }
.checklist--2col .check b { font-size: 0.97rem; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; align-items: center; margin-top: 2rem; }

/* Kiinnittyvä kuva (palvelusivujen esittely, yrityssivun tarina). Kuvan
   yläreuna asettuu suunnilleen H2-otsikon tasolle (yläläidan marginaali on
   eyebrow-rivin korkeus), ja kuva pysyy paikallaan niin kauan kuin
   tekstipalstaa riittää. Vain kaksipalstaisessa asettelussa; kapealla
   näytöllä kuva on tekstin alla tavallisesti. */
@media (min-width: 880px) {
  .split--sticky { align-items: start; }
  .split--sticky .split__media { position: sticky; top: calc(86px + 2rem); margin-top: 2.45rem; }
}

/* ----------------------------- Työvaiheet ------------------------------ */
/* Palvelusivun neljä työvaihetta yhtenä valkoisena paneelina harmaalla
   pohjalla. Solut erotetaan hiusviivoin, ja jokaisen yläreunan mittari
   täyttyy vaihe vaiheelta (1/4, 2/4...). Kapealla näytöllä solut allekkain. */
.vaihepaneeli { list-style: none; margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; background: var(--color-surface); border: 1px solid var(--color-border); }
.vaihepaneeli__solu { padding: clamp(1.5rem, 2.4vw, 2rem); border-top: 1px solid var(--color-border); }
.vaihepaneeli__solu:first-child { border-top: 0; }
.vaihepaneeli__mittari { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 1.4rem; }
.vaihepaneeli__mittari i { height: 4px; background: var(--color-bg-alt); }
.vaihepaneeli__mittari i.on { background: var(--color-primary); }
.vaihepaneeli__solu h3 { margin: 0 0 0.5rem; font-size: 1.18rem; }
.vaihepaneeli__solu p { margin: 0; font-size: 0.94rem; line-height: 1.58; color: var(--color-text-light); }

/* ----------------------------- Miksi-perustelut ------------------------ */
/* Kolme perustelua kuvan ja otsikon alla, entisen faktapalkin asussa:
   hiusviiva yläpuolella, sarakkeet pystyviivoin erotettuina. Samalla
   taustalla kuin yläpuolinen osio, joten ne lukeutuvat osaksi sitä. */
.perustelut {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--color-border);
}
.perustelu { min-width: 0; padding: 1.6rem 0; border-bottom: 1px solid var(--color-border); }
.perustelu:last-child { border-bottom: 0; padding-bottom: 0; }
.perustelu__nimi {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: clamp(1.15rem, 1.7vw, 1.32rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}
/* Merkki ensimmäisen rivin keskelle myös kaksirivisellä otsikolla */
.perustelu__nimi::before { content: ""; width: 11px; height: 6px; margin-top: calc(0.61em - 3px); background: var(--color-primary); clip-path: var(--shape-mark); flex-shrink: 0; }
.perustelu p { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--color-text-light); max-width: 40ch; }

/* ----------------------------- Muut palvelut --------------------------- */
/* Vaalea osio liu'utetaan tumman UKK-osion vinon alareunan alle
   (.section--overlap). Palvelusivulla neljä muuta palvelua: leveällä
   näytöllä yhdessä rivissä, tabletilla 2 x 2, puhelimella allekkain. */
.svc-grid--4 { gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.svc-grid--4 .svc-card { min-height: clamp(320px, 30vw, 380px); }
@media (min-width: 600px) {
  .svc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .svc-grid--4 .svc-card__body { padding: 1.3rem 1.25rem; }
  .svc-grid--4 .svc-card p { font-size: 0.9rem; }
}

/* Viisi palvelua (etusivu, yrityssivu): kolme korttia ylärivillä, kaksi
   leveämpää ja matalampaa alarivillä, ettei ruudukkoon jää tyhjää paikkaa.
   Korttien väli on tiiviimpi kuin muissa ruudukoissa. */
.svc-grid--5 { gap: clamp(0.9rem, 1.6vw, 1.25rem); }
@media (min-width: 760px) {
  .svc-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .svc-grid--5 > .svc-card { grid-column: span 2; }
  .svc-grid--5 > .svc-card:nth-child(n+4) { grid-column: span 3; min-height: clamp(260px, 25vw, 320px); }
}

/* Esittely ilman kuvaa (palvelut, joista on vain herokuva): otsikko ja
   ingressi vasemmalla, sisältölista oikealla. */
.split--teksti { align-items: start; }
@media (min-width: 880px) {
  .split--teksti .checklist { margin-top: 2.45rem; }
}

/* ----------------------------- Yhteydenotto: kanavat ------------------- */
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-weight: 640;
  font-size: 0.92rem;
  color: var(--color-ink);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.channel-btn svg { width: 17px; height: 17px; color: var(--color-primary); }
.channel-btn:hover { border-color: var(--color-ink); background: var(--color-bg); }
.contact__intro > p:not(.eyebrow) { color: var(--color-text-light); margin-top: 1rem; max-width: 46ch; }

/* ----------------------------- Arvot / ominaisuudet -------------------- */
/* Hiusviivoin jaetut rivit, timanttimerkin sijaan pieni viivakuvake
   hiekanharmaalla laatalla. */
.feature-list { display: grid; gap: 0; margin-top: clamp(2.4rem, 4.5vw, 3.4rem); border-top: 1px solid var(--color-border); }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 1.2rem; align-items: start; align-content: start; padding: 1.5rem 0; border-bottom: 1px solid var(--color-border); }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-bg-alt); color: var(--color-primary); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { font-size: 1.08rem; }
.feature p { color: var(--color-text-light); font-size: 0.95rem; margin: 0.4rem 0 0; }

/* ----------------------------- Palvelulinkit listana ------------------- */
/* Yhteystietosivun ja yrityssivun kompakti lista: nimi vasemmalla, nuoli
   oikealla, hiusviivat välissä. */
.palvelulista { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--color-border-strong); }
.palvelulinkki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 1.12rem;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.palvelulinkki small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.92rem; color: var(--color-text-light); margin-top: 0.25rem; }
.palvelulinkki svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-primary); transition: transform 0.25s var(--ease-soft); }
.palvelulinkki:hover { color: var(--color-primary-dark); }
.palvelulinkki:hover svg { transform: translateX(4px); }

/* ----------------------------- Sivun otsikkolohko ---------------------- */
/* Hero-kuvattomat sivut (yhteystiedot, seloste): ylätunniste on kiinteä,
   joten lohkon yläpehmuste raivaa sille tilan. */
.page-head { padding-block: clamp(8rem, 12vw, 10.5rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--color-bg); }
.page-head h1 { font-size: clamp(2.5rem, 5.4vw, 3.7rem); margin-top: 0.6rem; }
.page-head .lead { margin-top: 1.4rem; max-width: 60ch; }

/* ----------------------------- Seloste --------------------------------- */
.legal-page { background: var(--color-bg); padding-bottom: clamp(4.5rem, 8vw, 7.5rem); }
.legal { max-width: 74ch; font-size: 1.04rem; line-height: 1.75; }
.legal__updated { font-size: 0.85rem; color: var(--color-text-light); margin: 1.2rem 0 0; }
.legal__lead { color: var(--color-text-light); font-size: clamp(1.06rem, 1.5vw, 1.18rem); line-height: 1.62; margin: 2rem 0 0; max-width: 62ch; }
.legal h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.18;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 1.1rem;
  padding-top: clamp(1.6rem, 2.4vw, 2rem);
  border-top: 1px solid var(--color-border-strong);
}
.legal h2:first-of-type { margin-top: clamp(2.4rem, 4vw, 3.2rem); }
.legal p { color: var(--color-text-light); margin: 0 0 1.15rem; }
.legal ul { margin: 0.3rem 0 1.6rem; padding-left: 0; display: grid; gap: 0.6rem; }
.legal li { position: relative; padding-left: 1.5rem; color: var(--color-text-light); }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 11px; height: 6px; background: var(--color-primary); clip-path: var(--shape-mark); }
.legal a:not(.btn) { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s ease; }
.legal a:not(.btn):hover { color: var(--color-primary); }
.legal__box { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.4rem, 2.8vw, 2rem) clamp(1.5rem, 3vw, 2.2rem); margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 0; }
.legal__box p { margin: 0.4rem 0; }
.legal__box p strong { color: var(--color-ink); }

/* Yhteystietosivun tietolaatikko yhteystietolistan alla */
.info-box { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.3rem, 2.6vw, 1.8rem) clamp(1.4rem, 2.8vw, 2rem); margin-top: 1.8rem; }
.info-box p { margin: 0.35rem 0; color: var(--color-text-light); font-size: 0.95rem; }
.info-box p strong { color: var(--color-ink); font-family: var(--font-heading); font-weight: 640; }

/* ----------------------------- Virhesivu ------------------------------- */
.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 .eyebrow { justify-content: center; }
.error-page h1 { font-size: clamp(4rem, 14vw, 8.5rem); margin-bottom: 0.6rem; font-weight: 460; }
.error-page p { color: var(--color-text-light); max-width: 40ch; margin-bottom: 1.5rem; }
.error-page .btn { margin-bottom: 1.6rem; }
.error-page p a:not(.btn) { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ----------------------------- Alasivujen mediakyselyt ----------------- */
@media (min-width: 600px) {
  .checklist--2col { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .palvelulista--2 { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
}

@media (min-width: 760px) {
  .feature-list--3 { grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 0; }
  .feature-list--3 .feature { grid-template-columns: 1fr; gap: 1rem; padding: 0 clamp(1.2rem, 2.6vw, 2.2rem) 0.2rem; border-bottom: 0; border-left: 1px solid var(--color-border); }
  .feature-list--3 .feature:first-child { padding-left: 0; border-left: 0; }
  .perustelut { grid-template-columns: repeat(3, 1fr); }
  .perustelu { padding: 2rem clamp(1.2rem, 2.6vw, 2.2rem) 0; border-bottom: 0; border-left: 1px solid var(--color-border); }
  .perustelu:first-child { padding-left: 0; border-left: 0; }
}

@media (min-width: 960px) {
  /* Työvaiheet neljään sarakkeeseen */
  .vaihepaneeli { grid-template-columns: repeat(4, 1fr); }
  .vaihepaneeli__solu { border-top: 0; border-left: 1px solid var(--color-border); }
  .vaihepaneeli__solu:first-child { border-left: 0; }
}

@media (max-width: 980px) {
  /* Pudotusvalikko avautuu laatikossa aina auki: sisennetty alalista */
  .nav__item { display: block; width: 100%; }
  .nav__links .nav__droptoggle { width: 100%; justify-content: space-between; }
  .nav__chevron { display: none; }
  .nav__dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 0.5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__links .nav__dropdown a { padding: 0.7rem 0 0.7rem 0.2rem; border-bottom: 0; font-size: 0.98rem; color: var(--color-text-light); background: transparent; }
  .nav__links .nav__dropdown a:hover,
  .nav__links .nav__dropdown a[aria-current="page"] { color: var(--color-ink); background: transparent; }
  /* Vaalea ylätunniste laatikon auki ollessa on jo hoidettu (.no-scroll .header) */
}

@media (max-width: 767px) {
  .hero.hero--page { min-height: 80vh; min-height: 80dvh; padding-top: 7.5rem; }
  .hero.hero--page h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); max-width: 100%; }
  /* Palvelusivujen hero on mobiilissa hieman tummempi kuin etusivun, jotta
     pidempi otsikko ja ingressi erottuvat kuvan päältä selvästi. */
  .hero--palvelu .hero__media::after {
    background:
      linear-gradient(95deg, rgba(17,18,20,0.78) 0%, rgba(17,18,20,0.7) 46%, rgba(17,18,20,0.6) 82%),
      linear-gradient(to bottom, rgba(17,18,20,0.46) 0%, rgba(17,18,20,0.14) 40%, rgba(17,18,20,0.5) 100%);
  }
  .split--intro .split__media { order: 2; }
  .clip-tr { clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
}