/* =========================================================================
   KM-Detailing Oy - style.css
   Dark, premium automotive. Big light grotesk headings, near-black surfaces,
   blue brand accent (from the KM-Detailing logo), angular (chamfered /
   diagonal) edges.
   Order: Fonts -> Custom Properties -> Reset -> Base -> Typography ->
   Angular utils -> Layout -> Buttons -> Header/Nav -> Hero -> Trust ->
   Intro -> Services -> Why -> Dark feature -> Works -> Reviews -> Form ->
   Map -> Footer -> Error + page header -> Legal -> Utilities -> Animations ->
   Media queries -> Nav dropdown -> Alasivut (palvelusivut, hinnasto,
   ajanvaraus) omana lohkonaan tiedoston lopussa.
   ========================================================================= */

/* ----------------------------- Kirjasimet ------------------------------
   Kirjasimet tulevat omalta palvelimelta (fontit/), jotta kävijän selain ei
   ota yhteyttä Googleen. Tiedostot ja unicode-alueet ovat samat kuin Google
   Fontsin latin- ja latin-ext-osajoukoissa. Nunito Sans on muuttuva fontti,
   mutta sille on (kuten Google Fontsissa) oma @font-face jokaiselle
   painolle 400-800: näin välipainot, kuten 560, pyöristyvät lähimpään
   painoon täsmälleen kuten ennen. Lisenssi: fontit/LISENSSI.txt. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin-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: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontit/nunito-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: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontit/nunito-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fontit/nunito-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: "Nunito Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fontit/nunito-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontit/nunito-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: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontit/nunito-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontit/nunito-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: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontit/nunito-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fontit/nunito-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: "Nunito Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fontit/nunito-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 {
  /* Exclusive / minimalist monochrome. The bright brand blue is retired from
     the visual language and lives on only as the interaction-focus ring (a quiet
     brand nod + strong a11y contrast). The "brand fill" role is now a light
     silver (--color-primary) that carries dark text; --color-accent is a
     near-white highlight for links/icons on the near-black surfaces. */
  --color-primary: #e8eaee;       /* light silver fill: dark text sits on this */
  --color-primary-dark: #ced3da;  /* deeper silver (pressed / secondary fill) */
  --color-primary-soft: rgba(232, 234, 238, 0.09); /* faint light tint surfaces */
  --color-accent: #f4f6f8;        /* near-white: highlights/links on dark */
  --color-accent-soft: rgba(232, 234, 238, 0.16);
  --color-on-primary: #0b0c0e;    /* dark text/icons on the light fill */
  --color-focus: #3d6fd6;         /* brand-blue whisper: focus ring only */

  /* Light-blue brand accent: reintroduced for small details only: eyebrow
     ticks, line-art icons and checkmark badges. A light tint of the
     KM-Detailing logo blue. */
  --color-brand: #3d8bff;
  --color-brand-soft: rgba(61, 139, 255, 0.14);

  /* Surfaces: three-level dark system (base -> alt -> elevated), deepened and
     cooled for a calmer, more monochrome canvas. */
  --color-bg: #0c0d10;            /* page base (deepest) */
  --color-bg-alt: #101216;        /* alt sections (slightly raised) */
  --color-bg-lift: #0b0c0f;       /* lifted section (Miksi): darker still, a subtle step above the black bands */
  --color-surface: #16181d;       /* elevated cards */
  --color-surface-2: #1c1f25;     /* floating / form inputs */
  --color-ink: #050608;           /* darkest surface (notice, dark band, sweep) */
  --color-ink-deep: #020304;      /* deepest (hero scrim base, footer) */
  --color-black: #000000;         /* pure black: navbar, arvolupaus, meistä, pinnoitus, yhteys, footer */

  /* Text */
  --color-heading: #f4f6f8;       /* headings + strong text */
  --color-text: #d6dae1;          /* body text */
  --color-text-light: #9298a3;    /* muted body */
  --color-text-faint: #676c76;    /* 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 */
  --color-on-light-text: #3a3f48;     /* body text on white */
  --color-light-border: #e1e4e9;      /* hairline 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);

  /* Type system: Jost (geometric, Futura-ish) for all headings + display, set
     UPPERCASE with open tracking: the exclusive signature. Archivo carries the
     interactive/label layer (buttons, links, nav, eyebrows, chips) uppercase in
     a different voice. Hanken Grotesk stays as the readable body face. */
  --font-heading: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Nunito Sans", system-ui, -apple-system, sans-serif;  /* h1 + h2 */
  --font-ui: "Nunito Sans", system-ui, -apple-system, sans-serif;       /* buttons/links/labels */
  --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-black);
  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-focus); 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.15;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;      /* the exclusive signature: light uppercase Jost */
  text-wrap: balance;
}
h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.06; }
h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
h3 { font-size: clamp(0.98rem, 1.4vw, 1.12rem); font-weight: 500; letter-spacing: 0.07em; line-height: 1.28; }
h4 { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.1em; }

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

/* Eyebrow: tracked label with a small angular (electric) tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 1.2rem;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 11px;
  background: var(--color-brand);
  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); }
.section--dark { background: var(--color-ink-deep); }
/* Tyomme: pull up under the dark section's diagonal so the wedge below the
   diagonal reads as the base page colour. */
#toitamme {
  background: var(--color-light-bg);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
/* Pinnoitus (dark, edge-both): pull it up under Miksi so its TOP diagonal wedge
   fills with Miksi's (lighter) background instead of the page base: this makes
   the top edge a clean diagonal that mirrors the section's bottom diagonal. The
   larger top padding keeps the content clear of the pulled-up diagonal. */
#pinnoitus {
  background: var(--color-black);
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) * 0.3 + 2 * var(--edge));
}
#arvostelut { background: var(--color-bg-lift); }
#miksi { background: var(--color-bg-lift); padding-bottom: calc(var(--section-y) + var(--edge)); }
/* Heron alla + yhteys: pure black bands. */
#meista { background: var(--color-black); }
#yhteys { background: var(--color-black); }
.section--lift { background: var(--color-bg-lift); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

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

/* ----------------------------- Buttons --------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1.1rem 1.9rem;
  border-radius: 0;                /* sharp corners: no rounding */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 54px;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
  isolation: isolate;
}
.btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease-soft); }
.btn:active { transform: translateY(1px); }

/* Primary: light fill + dark text on the dark surfaces. On hover it inverts to an
   outline button: transparent fill, white 1px border, white text (200ms). */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border: 1px solid var(--color-primary); }
.btn-primary:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.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.82rem 1.25rem; min-height: 46px; font-size: 0.72rem; letter-spacing: 0.13em; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.link-arrow svg { width: 15px; height: 15px; 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); }

/* 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.9rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.4rem;
  height: 1px;
  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-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  padding-inline: 0.9rem 0.5rem;
  white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--color-brand); }
/* Osoite karttalinkkinä puhelinnumeron alla. Saa rivittyä kapealla näytöllä. */
.nav__osoite {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
}
.nav__osoite svg { flex-shrink: 0; width: 17px; height: 17px; color: var(--color-brand); }
/* Desktop navbar: no phone number or address (they stay inside the mobile drawer). */
@media (min-width: 981px) { .nav__phone, .nav__osoite { display: none; } }

.header.scrolled {
  background: var(--color-black);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.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-black);
  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;
  /* Stronger, darker overlay: dark at the top fading toward the centre, plus the
     left/right edges darkened and fading toward the centre. */
  background:
    linear-gradient(to bottom, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.55) 28%, rgba(5,6,8,0.4) 50%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.99) 100%),
    linear-gradient(to right, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.14) 24%, rgba(5,6,8,0) 50%, rgba(5,6,8,0.14) 76%, rgba(5,6,8,0.68) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; transition: opacity 0.9s ease; }
/* Hero background video sits below the poster; the poster fades out once the
   player is painting frames (JS toggles .video-ready on .hero__media). The
   source clip is a low-res vertical phone video, so the dark scrim on
   .hero__media::after (z-index 3) keeps it reading as ambient motion. */
.hero__video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: 1; filter: saturate(1.06) contrast(1.03); }
.hero__media.video-ready .hero__poster { opacity: 0; }

.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.6rem 0 1.5rem; font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.12; text-shadow: 0 2px 30px rgba(0,0,0,0.5); max-width: 30ch; }
.hero h1 .accent { color: rgba(255,255,255,0.5); font-weight: 400; }
.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-score { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; line-height: 1; color: var(--color-white); letter-spacing: 0.01em; }
.hero__rating-stars { display: inline-flex; align-items: center; gap: 3px; color: var(--color-accent); }
.hero__rating-stars svg { width: 14px; height: 14px; }

/* Hero secondary action */
.hero__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-white); font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; 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: 18px; height: 18px; 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-black); 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-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); }
.trust-item svg { width: 18px; height: 18px; color: var(--color-brand); 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: 3 / 2; height: auto; }
/* Meistä photo (portrait van in the hall): bias the 3:2 crop toward the vehicle */
#meista .split__media--portrait img { object-fit: cover; object-position: center 58%; }

.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: clamp(1rem, 1.3vw, 1.14rem); font-weight: 500; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.svc-card p { color: rgba(255,255,255,0.82); font-size: 0.92rem; margin-bottom: 0; }
/* Cursor-follow arrow chip (injected by script.js on pointer-fine devices).
   A white square with a dark arrow that tracks the cursor: it scales up from
   the point the pointer enters and shrinks away at the point it leaves. */
.svc-card__cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;            /* centre the chip on the tracked point */
  z-index: 3;
  pointer-events: none;
  transform: translate(var(--cx, 0px), var(--cy, 0px));
  transition: transform 0.16s var(--ease-soft);   /* gentle trailing follow */
  will-change: transform;
}
.svc-card__cursor-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--color-white);
  color: var(--color-on-primary);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.34s var(--ease-spring), opacity 0.22s ease;
}
.svc-card__cursor-inner svg { width: 22px; height: 22px; }
.svc-card.is-hovering .svc-card__cursor-inner { transform: scale(1); opacity: 1; }

/* ----------------------------- Why / checklist ------------------------- */
.why__media { position: relative; }
.why__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; 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-brand); color: var(--color-white); 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 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-brand); }
.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-brand); 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 { display: block; width: 100%; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.collage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.68) 100%); }
.collage__badge { position: absolute; z-index: 2; 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.55rem; letter-spacing: 0.01em; font-weight: 500; text-transform: uppercase; }
.collage__badge span { display: block; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; }

.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.05rem, 2.9vw, 1.8rem); color: var(--color-accent); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.stat__label { color: rgba(255,255,255,0.7); font-size: 0.88rem; margin-top: 0.5rem; }

/* ----------------------------- White sections -------------------------- */
/* .section--light flips a section to a white background (etusivun Palvelut ja
   Töitämme, alasivujen kuvagalleriat, muut palvelut, hinnat ja kalenteri).
   Section-head copy switches to the on-light text tokens; image cards and
   tiles inside keep their own dark overlay + white text. */
.section--light { background: var(--color-light-bg); color: var(--color-on-light-text); }
.section--light .eyebrow { color: var(--color-on-light-muted); }
.section--light h2,
.section--light h3 { color: var(--color-on-light-heading); }
.section--light .section-head p:not(.eyebrow),
.section--light .section-head__aside,
.section--light .section-head__aside p { color: var(--color-on-light-muted); }
.section--light .link-arrow { color: var(--color-on-light-heading); }
.section--light .link-arrow:hover { color: var(--color-brand); }
.section--light .svc-card h3 { color: var(--color-white); }

/* ----------------------------- Reviews --------------------------------- */
.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 { display: none; }   /* name-initial avatars removed per request */
.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); }

/* Reviews carousel (reuses .review cards inside the infinite-loop .carousel) */
.reviews__head { align-items: end; }
.reviews__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }
.car-arrows { display: flex; gap: 0.5rem; }
.car-arrow { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-heading); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.car-arrow:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }
.car-arrow:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.car-arrow svg { width: 22px; height: 22px; }
.carousel-wrap { margin-top: clamp(2rem, 4vw, 2.75rem); }
.carousel { display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.4rem; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > .review { flex: 0 0 min(86%, 380px); scroll-snap-align: start; margin: 0; display: flex; flex-direction: column; }
.carousel > .review .review__who { margin-top: auto; }

/* Completed works gallery (captioned tiles, no slider) */
.work-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.work { position: relative; margin: 0; overflow: hidden; background: var(--color-ink); isolation: isolate; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.work img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 0.7s var(--ease-soft); }
.work:hover img { transform: scale(1.05); }
.work::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8,9,11,0.9) 0%, rgba(8,9,11,0.35) 42%, rgba(8,9,11,0) 70%); pointer-events: none; }
.work figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.3rem 1.25rem 1.15rem; color: var(--color-white); font-family: var(--font-heading); font-weight: 560; font-size: 1.04rem; }
.work__chip { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-ui); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.75rem; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact__item { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.contact__item-ic { width: 46px; height: 46px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-brand); 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; color: var(--color-brand); }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-accent); }
.contact__people { display: grid; gap: 0.55rem; margin-top: 0.2rem; }
.contact__person { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.contact__person b { color: var(--color-heading); font-family: var(--font-heading); font-weight: 560; font-size: 0.92rem; }
.contact__person a { color: var(--color-text-light); font-size: 0.92rem; }
.contact__person a:hover { color: var(--color-accent); }
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.15rem; border: 1px solid var(--color-border-strong); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-ui); 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-bg-lift); 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-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; 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); }

/* Työmme: left-aligned "Katso lisää" underlined link below the gallery
   (same treatment as the hero's Palvelumme link, but dark for the white section) */
.tyomme-actions { margin-top: clamp(2rem, 4vw, 3rem); display: flex; justify-content: flex-start; }
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-on-light-heading);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(0, 0, 0, 0.35);
  transition: text-decoration-color 0.25s ease, color 0.25s ease;
}
.link-more svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-soft); }
.link-more:hover { color: var(--color-brand); text-decoration-color: var(--color-brand); }
.link-more:hover svg { transform: translate(3px, -3px); }

/* ----------------------------- Location map ---------------------------- */
/* Full-bleed Google Maps embed between the contact section and the footer.
   Rendered in black-and-white tones (grayscale + a dark inversion) so it sits
   quietly on the dark, monochrome page instead of a bright map block. */
.map-embed {
  width: 100%;
  height: clamp(320px, 42vh, 460px);
  line-height: 0;
  background: var(--color-ink);
  border-block: 1px solid var(--color-border);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(1) invert(0.9) contrast(0.9) brightness(0.95);
}

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-black); 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-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.75rem; 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.74rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; font-family: var(--font-ui); }
.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-brand); 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; }
@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: 42ch; margin: 0 auto 1.5rem; }
.error-page .btn { margin-bottom: 1.5rem; }

/* ----------------------------- Page header (no image) ------------------ */
/* Kuvaton sivun otsikko-osio: ajanvaraus, tietosuojaseloste ja 404. */
.sivu-hero {
  position: relative;
  background: var(--color-black);
  padding-block: calc(7rem + 2vw) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--color-border);
}
.sivu-hero h1 { color: var(--color-white); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 400; margin: 1rem 0 0.9rem; }
.sivu-hero__lead { color: var(--color-text-light); font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 60ch; margin: 0; }
.sivu-hero__meta { color: var(--color-text-light); font-size: 0.95rem; margin: 0; }
.sivu-hero .cta-pair { margin-top: 1.6rem; }

/* ----------------------------- Legal / privacy page -------------------- */

.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; }
  .work-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; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}

@media (min-width: 880px) {
  .work-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; }
  .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) {
  /* Six services in a clean, even 3 × 2 grid. */
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}

@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-ink);
    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: 0.98rem; letter-spacing: 0.12em; 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__osoite { color: var(--color-text); padding: 0.9rem 0 0; font-size: 1.05rem; }
  .nav__cta { margin-top: 1.5rem; width: 100%; min-height: 54px; font-size: 0.78rem; }
  .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-ink);
    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 {
    min-height: 94vh;
    min-height: 94dvh;
    text-align: left;
    align-items: center;
    padding: 6rem var(--pad-x) 3.25rem;
    /* Mobiilissa ei sahalaitaista alareunaa: suora reuna, ja tumma liuku
       päättyy mustaan kuten heron alla oleva luottamuspalkki. */
    clip-path: none;
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  /* Mobile: strip the pill: no border, no background, no blur */
  .hero__rating {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .split__media--portrait img { aspect-ratio: 3 / 2; }
  .hero h1 {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.015em;
    margin: 2.1rem 0 1.2rem;
    max-width: 16ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  /* Tumma yläreuna, ja alareuna liukuu täysin mustaan. */
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(5,6,8,0.99) 0%, rgba(5,6,8,0.82) 16%, rgba(5,6,8,0.5) 34%, rgba(5,6,8,0.38) 52%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.86) 88%, rgb(0,0,0) 100%),
      linear-gradient(to right, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.14) 24%, rgba(5,6,8,0) 50%, rgba(5,6,8,0.14) 76%, rgba(5,6,8,0.68) 100%);
  }

  /* "Miksi" section: text + CTA above, image below on mobile */
  .why__grid .split__body { order: 1; }
  .why__grid .split__media { order: 2; }

  /* Reviews carousel: no arrow buttons on mobile */
  .car-arrows { display: none; }

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

}

@media (max-width: 520px) {
  .collage__badge { top: 0.6rem; right: 0.6rem; }
}

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

/* =========================================================================
   Palvelut nav dropdown
   Appended after the main media queries so its responsive overrides win over
   the earlier nav rules by source order.
   ========================================================================= */

/* ---------- 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-bg);
  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;
}
/* Hover ja näppäimistöfokus avaavat alavalikon vain työpöydällä. Puhelimen
   laatikossa alavalikkoa ja nuolta ohjaa pelkkä .open-luokka: napautettu
   Palvelut-linkki jää fokukseen (ja kosketuksen :hover jää päälle), joten
   ilman rajausta nuoli jäisi ylösalaisin, kun alavalikko suljetaan. */
@media (min-width: 981px) {
  .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); }

/* Reviews carousel: soft fade on the right edge */
.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; }

@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); }
  /* Pitkä palvelun nimi rivittyy laatikossa (työpöydällä nowrap). */
  .nav__dd-menu a { white-space: normal; }
  /* Nykyinen sivu laatikossa: sininen teksti. */
  .nav__links a[aria-current="page"],
  .nav__dd-menu a[aria-current="page"] { color: var(--color-brand); background: transparent; }
  .nav__dd-menu a:last-child { border-bottom: none; }
}

/* =========================================================================
   Alasivut: palvelusivut (/palvelut/*), hinnasto ja ajanvaraus
   Rakenne ja asettelu Saumaksin mallin mukaan, KM-Detailingin tummaan
   ilmeeseen sovitettuna. Käyttää samoja tokeneita ja komponentteja kuin
   etusivu (.hero, .split, .checklist, .dark, .collage, .work, .svc-card,
   .form). Lohko on tiedoston lopussa, jotta sen säännöt voittavat
   aiemmat samantarkkuuksiset säännöt lähdejärjestyksessä.
   ========================================================================= */

/* ---------- Tekstikappaleet ja yleiset apuluokat ---------- */
.teksti { color: var(--color-text-light); margin-top: 1rem; }
.dark .teksti { color: inherit; }
.section--light .teksti { color: var(--color-on-light-text); }

/* Kuvakortit ja -laatat ovat linkkejä, joiden kulmat on leikattu
   clip-pathilla. Leikkaus piilottaisi tavallisen fokusrenkaan, joten
   näppäimistöfokus piirretään kortin sisäreunaan. */
.svc-card::before,
a.work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--color-focus);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.svc-card:focus-visible,
a.work:focus-visible { outline: none; }
.svc-card:focus-visible::before,
a.work:focus-visible::before { opacity: 1; }
.channel-btn:focus-visible,
.car-arrow:focus-visible,
.footer__socials a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }

/* Kuvan rajauskohta voidaan antaa kuvakohtaisesti: style="--kohta: 50% 60%". */
.svc-card img,
.work img,
.hero__poster { object-position: var(--kohta, 50% 50%); }

/* ---------- Vinot osiorajat alasivuilla ---------- */
/* Tumma vino osio (.dark.edge-both) nostetaan edellisen osion päälle, jotta
   yläkiila näyttää edellisen osion taustaa. Edellinen osio saa lisää
   alapehmustetta, ja seuraava osio vedetään alakiilan alle. */
.section--ennen-vinoa { padding-bottom: calc(var(--section-y) + var(--edge)); }
.dark.dark--nosto { margin-top: calc(var(--edge) * -1); }
.section--vinon-alla {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}

/* ---------- Alasivun hero ---------- */
/* Sama kuvakieli kuin etusivun herossa (kuva, tumma liuku, vino alareuna),
   mutta matalampi. Otsikon toinen rivi (paikkakunnat) on himmeämpi. */
.hero--page {
  min-height: calc(78vh / var(--zoom-factor));
  min-height: calc(78dvh / var(--zoom-factor));
  padding-top: 9rem;
}
.hero--page h1 { font-size: clamp(2.05rem, 4.2vw, 3.35rem); max-width: 26ch; margin: 1.3rem 0 1.4rem; }
.hero--page h1 .accent { display: block; font-size: 0.62em; letter-spacing: 0.04em; margin-top: 0.35rem; }
.hero--page .hero__lead { max-width: 54ch; }
.hero .crumbs { animation-delay: 0.06s; }

/* Murupolku herossa ja kuvattomassa sivun otsikossa. Globaali nollaus
   koskee vain <ul>:ia, joten <ol> nollataan tässä. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; }
.crumbs li {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.crumbs li + li::before { content: "/"; margin-inline: 0.6rem; color: rgba(255, 255, 255, 0.35); }
.crumbs a { display: inline-block; padding-block: 0.35rem; color: rgba(255, 255, 255, 0.82); transition: color 0.2s ease; }
.crumbs a:hover { color: var(--color-white); }
.crumbs [aria-current="page"] { color: var(--color-white); }
.sivu-hero .crumbs ol { justify-content: flex-start; }

/* ---------- Luottamuspalkin linkki ---------- */
a.trust-item { transition: color 0.2s ease; }
a.trust-item:hover { color: var(--color-white); }

/* ---------- Palvelukortit: 5 ja 4 korttia ---------- */
/* Tasan 5 palvelua: 3 + 2. Alarivin kaksi korttia ovat leveämpiä, joten
   niiden kuvasuhde on loivempi ja rivien korkeus pysyy samana. */
.svc-grid--5 { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .svc-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--5 > :nth-child(5) { grid-column: 1 / -1; aspect-ratio: 24 / 9; }
}
@media (min-width: 1060px) {
  .svc-grid--5 { grid-template-columns: repeat(6, 1fr); }
  .svc-grid--5 > * { grid-column: auto / span 2; }
  .svc-grid--5 > :nth-child(4),
  .svc-grid--5 > :nth-child(5) { grid-column: auto / span 3; aspect-ratio: 20 / 9; }
}
/* Muut palvelut: 4 korttia, 2 + 2 ja leveällä näytöllä yksi rivi. */
.svc-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .svc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) {
  .svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .svc-grid--4 .svc-card { aspect-ratio: 3 / 4; }
}
.svc-lisa { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Palvelun esittely ---------- */
/* Esittelykuva on pystykuva (4:5). Rinnakkain-asettelussa kuva pysyy
   paikallaan, kun tekstipalstaa vieritetään; puhelimella kuva on tekstin
   yläpuolella vaakarajauksena. */
.split__media--pysty img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) { .split__media--pysty img { aspect-ratio: 3 / 2; } }
@media (min-width: 880px) {
  .split--esittely { align-items: start; }
  .split--esittely .split__media { position: sticky; top: 7rem; }
}
@media (min-width: 720px) {
  .checklist--2col { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
  .checklist--2col .check:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
}
.huomio {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--color-brand);
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* Nappipari: ensisijainen nappi ja sen rinnalla tekstilinkki. */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: 2.2rem; }
.link-puhelin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.link-puhelin svg { width: 17px; height: 17px; color: var(--color-brand); }
.link-puhelin:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }

/* Tekstin sisäiset linkit johdannoissa, UKK:ssa ja listoissa. */
.section-head p a,
.faq details p a,
.split__body p a,
.huomio a,
.ehdot a,
.tietoa a {
  color: var(--color-heading);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.section-head p a:hover,
.faq details p a:hover,
.split__body p a:hover,
.huomio a:hover,
.ehdot a:hover,
.tietoa a:hover { text-decoration-color: var(--color-brand); color: var(--color-white); }
.section--light .section-head p a,
.section--light .teksti a { color: var(--color-on-light-heading); text-decoration-color: var(--color-light-border); }
.section--light .section-head p a:hover,
.section--light .teksti a:hover { color: var(--color-on-light-heading); text-decoration-color: var(--color-brand); }

/* ---------- Miksi KM-Detailing (tumma, kollaasi) ---------- */
.collage--miksi { width: 100%; max-width: 560px; margin-inline: auto; }
.dark__point a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.45); }
.dark__point a:hover { text-decoration-color: var(--color-accent); }
.dark__point q { quotes: "\201D" "\201D"; font-style: italic; }

/* ---------- Kuvia tehdyistä töistä ---------- */
.work-grid--2 { max-width: 880px; }
@media (min-width: 880px) { .work-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Usein kysytyt kysymykset ---------- */
/* Natiivi <details>: vastaukset ovat HTML:ssä ja luettavissa ilman JS:ää.
   Kaksi saraketta tabletista ylöspäin, joten kysymyksiä on parillinen määrä. */
.faq { margin-top: clamp(2.2rem, 4vw, 3rem); display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .faq { grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; } }
.faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: border-color 0.25s ease;
}
.faq details[open],
.faq details:hover { border-color: var(--color-border-strong); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  cursor: pointer;
  padding: 1.2rem 1.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--color-heading);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ""; }
.faq summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }
.faq__ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.faq__ic svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-soft); }
.faq details[open] .faq__ic { background: var(--color-brand); color: var(--color-white); }
.faq details[open] .faq__ic svg { transform: rotate(45deg); }
.faq details p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--color-text-light); font-size: 0.98rem; }

/* ---------- Yhteydenotto: varausnappi ja lomakkeen valinta ---------- */
.contact__varaa { margin-top: 1.8rem; }
.field__opt { color: var(--color-text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---------- Etusivu: tilastot ja työlaatat linkkeinä ---------- */
a.stat { display: block; transition: background-color 0.2s ease; }
a.stat:hover { background: var(--color-surface); }
a.stat:hover .stat__num { color: var(--color-white); }
a.stat:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--color-focus); }

/* ---------- Hinnasto: hintaluettelo (valkoisella) ---------- */
.hinnasto { display: grid; gap: clamp(2.8rem, 5vw, 4rem); }
.hinnasto__ryhma { scroll-margin-top: 110px; }
.hinnasto__otsikko {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-on-light-heading);
}
.hinnasto__otsikko h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
.hinnasto__johdanto { margin: 1rem 0 0; color: var(--color-on-light-text); max-width: 70ch; }
.hinta { display: grid; gap: 0.8rem 2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--color-light-border); }
@media (min-width: 720px) { .hinta { grid-template-columns: 1fr auto; align-items: center; } }
.hinta h3 { font-size: clamp(0.98rem, 1.3vw, 1.06rem); }
.hinta p { margin: 0.4rem 0 0; color: var(--color-on-light-muted); font-size: 0.95rem; max-width: 64ch; }
.hinta__hinnat { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin: 0; }
.hinta__hinnat div { display: grid; gap: 0.1rem; min-width: 6.5rem; }
.hinta__hinnat dt {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-light-muted);
}
.hinta__hinnat dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-on-light-heading); white-space: nowrap; }
@media (min-width: 720px) { .hinta__hinnat div { text-align: right; } }
.hinta--kysy .hinta__hinnat dd { font-size: 1.05rem; }
.hinnasto__huomio { margin: 1.1rem 0 0; font-size: 0.93rem; color: var(--color-on-light-muted); max-width: 72ch; }
.hinnasto__huomio a { color: var(--color-on-light-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-light-border); }
.hinnasto__huomio a:hover { text-decoration-color: var(--color-brand); }

/* ---------- Ajanvaraus ---------- */
.kalenteri { max-width: 1000px; margin-inline: auto; }
.kalenteri__kehys { background: var(--color-white); border: 1px solid var(--color-light-border); }
/* Acuityn embed.js asettaa iframelle sisällön mukaisen korkeuden. */
.kalenteri iframe { display: block; width: 100%; border: 0; background: var(--color-white); }
.kalenteri__vara { margin: 1.1rem 0 0; text-align: center; font-size: 0.95rem; color: var(--color-on-light-muted); }
.kalenteri__vara a { color: var(--color-on-light-heading); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-light-border); }
.kalenteri__vara a:hover { text-decoration-color: var(--color-brand); }

.tietoa { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 880px) { .tietoa { grid-template-columns: 1fr 1fr; align-items: start; } }
.tietoa h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); }
.ehdot { display: grid; gap: 0.75rem; margin-top: 1.4rem; }
.ehdot li { position: relative; padding-left: 1.5rem; color: var(--color-text-light); }
.ehdot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 9px;
  height: 9px;
  background: var(--color-brand);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
.ehdot b { color: var(--color-heading); font-weight: 600; }
.tietoa__kuva { margin-top: 1.8rem; }
.tietoa__kuva img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }

/* ---------- Pienet lisät alasivuille ---------- */
.section--base { background: var(--color-bg); }
#arvostelut + .section--base { border-top: 1px solid var(--color-border); }
.nobr { white-space: nowrap; }
.footer__socials { margin-top: 1.3rem; }
/* Palvelusivulla Palvelut-valikon otsikko näyttää, että ollaan sen alla. */
.nav__links a.nav__dd-toggle--nyk { opacity: 1; }
.map-embed iframe { border: 0; }
.sivu-hero__lead a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.sivu-hero__lead a:hover { text-decoration-color: var(--color-accent); }
.hinta__hinnat dd a { color: var(--color-on-light-heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-light-border); }
.hinta__hinnat dd a:hover { text-decoration-color: var(--color-brand); }
.contact__grid .tietoa__kuva { margin: 0; }
.error-page__cta { justify-content: center; margin: 0.4rem 0 2rem; }
.error-page__cta .btn { margin-bottom: 0; }
.error-page__linkit { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.4rem; margin: 0 0 1.8rem; }
.error-page__linkit a { display: inline-block; padding-block: 0.3rem; color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-border-strong); }
.error-page__linkit a:hover { color: var(--color-white); text-decoration-color: var(--color-accent); }
.error-page p a { color: var(--color-accent); font-weight: 600; }

/* ---------- Alasivut: puhelin ---------- */
@media (max-width: 767px) {
  .hero.hero--page { min-height: 80vh; min-height: 80dvh; padding-top: 7rem; }
  .hero.hero--page h1 { font-size: clamp(2rem, 8.4vw, 2.9rem); max-width: 100%; margin: 1.5rem 0 1.1rem; }
  .crumbs ol { justify-content: flex-start; }
  .cta-pair { gap: 1rem 1.4rem; }
}

/* =========================================================================
   Palvelusivujen uudistus (1.10.2026): suora heron alareuna, yhtä suuri
   H1, hintakortit, syyt valita, arvostelut valkoisella ja lomakkeen
   kuvakenttä. Lohko on tiedoston lopussa, jotta sen säännöt voittavat
   aiemmat samantarkkuuksiset säännöt.
   ========================================================================= */

/* ---------- Alasivun hero: suora alareuna ---------- */
/* Vino alareuna on poistettu. Kuvan tumma liuku päättyy samaan sävyyn kuin
   heron alla oleva osio (--color-bg-lift, #0b0c0f): palvelusivuilla
   esittely, hinnastossa luottamuspalkki. Hero ja seuraava osio jatkuvat
   näin yhtenä pintana. */
.hero--page { clip-path: none; }
.hero--page .hero__media::after {
  background:
    linear-gradient(to bottom, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.55) 28%, rgba(5,6,8,0.4) 50%, rgba(11,12,15,0.74) 76%, rgb(11,12,15) 100%),
    linear-gradient(to right, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.14) 24%, rgba(5,6,8,0) 50%, rgba(5,6,8,0.14) 76%, rgba(5,6,8,0.68) 100%);
}
.hero--page + .trustbar { background: var(--color-bg-lift); }

/* Puhelimella teksti on vasemmassa laidassa kuvan päällä, joten liuku on
   tummempi ja peittävämpi: tummin vasemmalla, kevenee loivasti oikealle. */
@media (max-width: 767px) {
  .hero--page .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(5,6,8,0.9) 0%, rgba(5,6,8,0.42) 18%, rgba(5,6,8,0.22) 50%, rgba(11,12,15,0.62) 84%, rgb(11,12,15) 100%),
      linear-gradient(to right, rgba(5,6,8,0.9) 0%, rgba(5,6,8,0.76) 42%, rgba(5,6,8,0.54) 100%);
  }
}

/* ---------- Palvelusivun H1: paikkakunnat samaa kokoa ---------- */
/* Palvelun nimi ja "Muuramessa ja Jyväskylässä" ovat yhtä suuria. Toinen
   rivi on edelleen omalla rivillään ja himmeämpi. Hinnaston H1 säilyy
   ennallaan (.hero--page ilman .hero--palvelu). */
.hero--palvelu h1 { max-width: 34ch; font-size: clamp(2rem, 3.9vw, 3.1rem); }
.hero--palvelu h1 .accent { font-size: 1em; letter-spacing: inherit; margin-top: 0; }
@media (max-width: 767px) {
  .hero.hero--palvelu h1 { font-size: clamp(1.85rem, 7.6vw, 2.6rem); }
}

/* Palvelusivun hero: korkeampi kuin muut alasivujen herot (työpöydällä
   88vh, puhelimella 95vh), ja sisältö on alempana. Työpöydällä isompi
   yläpehmuste siirtää keskitetyn sisällön alas, puhelimella sisältö
   asettuu heron alaosaan. */
@media (min-width: 768px) {
  .hero--palvelu {
    min-height: calc(88vh / var(--zoom-factor));
    min-height: calc(88dvh / var(--zoom-factor));
    padding-top: 13rem;
    padding-bottom: 4.5rem;
  }
}
@media (max-width: 767px) {
  .hero.hero--palvelu {
    min-height: 95vh;
    min-height: 95dvh;
    align-items: flex-end;
    padding-top: 7.5rem;
    padding-bottom: 6rem;
  }
}

/* Palvelusivun hero työpöydällä: tummempi liuku, jotta kuva jää selvästi
   tekstin taakse. Puhelimen liuku on omassa säännössään yllä. */
@media (min-width: 768px) {
  .hero--palvelu .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.68) 28%, rgba(5,6,8,0.6) 50%, rgba(11,12,15,0.84) 76%, rgb(11,12,15) 100%),
      linear-gradient(to right, rgba(5,6,8,0.74) 0%, rgba(5,6,8,0.32) 26%, rgba(5,6,8,0.22) 50%, rgba(5,6,8,0.32) 74%, rgba(5,6,8,0.74) 100%);
  }
}

/* Palvelun esittely yhdessä sarakkeessa (puhelin ja kapea tabletti):
   tekstit, lista ja napit ensin, kuva alimpana. */
@media (max-width: 879px) {
  .split--esittely .split__media { order: 2; }
}

/* Puhelimella jaetun otsikon (H2 vasemmalla, alaotsikko oikealla) osat
   ovat allekkain. Väli H2:n ja alaotsikon välillä on tiivis: ruudukon rako
   pienempi ja kappaleen oma yläreunus pois. Koskee mm. etusivun Palvelut-
   ja Töitämme-osioita sekä palvelusivujen Hinnat- ja Töitämme-osioita. */
@media (max-width: 767px) {
  .section-head--split { row-gap: 0.85rem; }
  .section-head--split .section-head__aside p { margin-top: 0; }
}

/* ---------- Palvelusivun hinnat ---------- */
/* Esittelyn jälkeen samalla pohjalla, ohut viiva välissä. Kortteja on
   enintään kolme rinnakkain (1, 2 tai 6 korttia), ja jokaisesta pääsee
   "Lue lisää" -linkillä hinnaston vastaavalle riville. */
.section--ennen-hintoja { padding-bottom: clamp(3rem, 6vw, 5rem); }
.hinnat-osio { padding-top: 0; }
.hinnat-osio__sisus { padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--color-border); }
.hintakortit {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(250px, calc((100% - 2rem) / 3))), 1fr));
}
.hintakortti {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-alt);   /* hieman tummempi kuin muut kortit */
  border: 1px solid var(--color-border);
  padding: 1.4rem 1.4rem 1.3rem;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transition: border-color 0.25s ease;
}
.hintakortti:hover { border-color: var(--color-border-strong); }
.hintakortti h3 { font-size: clamp(0.98rem, 1.3vw, 1.06rem); }
.hintakortti__kuvaus { margin: 0.5rem 0 0; color: var(--color-text-light); font-size: 0.92rem; line-height: 1.5; }
.hintakortti__hinnat { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border); display: grid; gap: 0.4rem; }
.hintakortti__hinnat div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hintakortti__hinnat dt { color: var(--color-text-light); font-size: 0.88rem; }
.hintakortti__hinnat dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-white); white-space: nowrap; }
.hintakortti__hinnat dd small { font-size: 0.68em; font-weight: 600; color: var(--color-text-light); }
.hintakortti .link-arrow { margin-top: auto; padding-top: 1.15rem; align-self: flex-start; }
/* Yksittäinen kortti on yhden sarakkeen levyinen eikä veny koko leveydelle. */
@media (min-width: 600px) {
  .hintakortti:only-child { max-width: max(300px, calc((100% - 2rem) / 3)); }
}
@media (max-width: 599px) {
  .hintakortti { padding: 1.15rem 1.15rem 1.05rem; }
  .hintakortti__hinnat { margin-top: 0.85rem; padding-top: 0.75rem; gap: 0.2rem; }
  .hintakortti .link-arrow { padding-top: 0.85rem; }
}

/* ---------- Miksi KM-Detailing: neljä syytä ---------- */
/* Lyhyet perusteet ruudukossa (2 x 2). Ruutujen välinen 1 px:n rako on
   ruudukon taustaväriä, joten esiinliuku on koko ruudukolla eikä yksittäisillä
   ruuduilla (läpinäkyvä ruutu näyttäisi raon värin). */
.syyt {
  display: grid;
  gap: 1px;
  margin: clamp(1.8rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  background: var(--color-border-strong);
  border: 1px solid var(--color-border-strong);
}
@media (min-width: 520px) { .syyt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.syy { display: flex; flex-direction: column; gap: 0.2rem; background: var(--color-ink); padding: 1.35rem 1.3rem 1.4rem; }
.syy__ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.syy__ic svg { width: 20px; height: 20px; }
/* Miksi-osion kollaasi: kaksi palvelun kuvaa päällekkäin. Iso pystykuva on
   oikealla, pienempi kuva limittyy sen vasempaan alakulmaan, ja tumma kehys
   erottaa kuvat toisistaan. */
.collage--kaksi { max-width: 520px; padding-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.collage--kaksi::after { display: none; }
.collage--kaksi .collage__main { width: 78%; margin-left: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.collage--kaksi .collage__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 44%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 6px solid var(--color-ink);
  background: var(--color-ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.syy b { font-family: var(--font-heading); font-weight: 600; font-size: 1.04rem; line-height: 1.3; color: var(--color-white); }
.syy__teksti { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.68); }
/* Puhelimella ruudut ovat allekkain, joten kuvake on otsikon vieressä ja
   ruutu matalampi. */
@media (max-width: 519px) {
  .syy { display: grid; grid-template-columns: 40px 1fr; column-gap: 1rem; row-gap: 0.15rem; align-items: start; padding: 1.15rem 1.1rem; }
  .syy__ic { grid-row: 1 / span 2; margin-bottom: 0; }
}

/* ---------- Arvostelut valkoisella (palvelusivut) ---------- */
/* Sama karuselli kuin etusivulla, vaaleana. Etusivun id="arvostelut" on
   varattu sen omalle tyylille, joten palvelusivuilla osio on id="arviot". */
.section--light .review { background: #f5f6f8; border-color: var(--color-light-border); }
.section--light .review:hover { border-color: #c9ced6; box-shadow: none; }
.section--light .review p { color: var(--color-on-light-text); }
.section--light .review__stars { color: var(--color-on-light-heading); }
.section--light .review__name { color: var(--color-on-light-heading); }
.section--light .review__src { color: var(--color-on-light-muted); }
.section--light .car-arrow { border-color: var(--color-light-border); color: var(--color-on-light-heading); }
.section--light .car-arrow:hover { border-color: var(--color-on-light-heading); color: var(--color-on-light-heading); background: #f5f6f8; }
.section--light .carousel-wrap::after { background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-light-bg)); }
.arviot__arvosana { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; color: var(--color-on-light-heading); }
.arviot__g { width: 24px; height: 24px; flex-shrink: 0; }
.arviot__luku { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.arviot__tahdet { display: inline-flex; gap: 1px; }
.arviot__tahdet svg { width: 15px; height: 15px; }
.arviot__lahde { font-family: var(--font-ui); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-on-light-muted); }
/* Töitämme jatkaa samalla valkoisella pohjalla heti arvostelujen jälkeen. */
.arviot + .section--light { padding-top: 0; }
@media (max-width: 767px) { .reviews__aside { align-items: flex-start; } }

/* ---------- Hinnasto: rivi, johon palvelusivulta tultiin ---------- */
.hinta[id] { scroll-margin-top: 1.5rem; }
.hinta:target {
  margin-inline: -1rem;
  padding-inline: 1rem;
  background: rgba(61, 139, 255, 0.07);
  box-shadow: inset 3px 0 0 var(--color-brand);
}

/* ---------- Lomake: kuvakenttä ---------- */
/* Raahaa tai valitse kuvat. Itse input on piilotettu mutta tarkennettavissa
   (näppäimistö), ja label toimii pudotusalueena. Toteutus on sama kuin
   Saneeraus Penttilän lomakkeessa, värit tämän sivuston tummaan pohjaan. */
.field .kuvakentta__input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.kuvakentta { position: relative; }
.field .kuvakentta__pudotus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.4rem 1.1rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  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-accent); background: var(--color-surface); }
.kuvakentta__pudotus svg { width: 26px; height: 26px; color: var(--color-brand); }
.kuvakentta__teksti strong { color: var(--color-heading); font-family: var(--font-heading); font-weight: 600; }
.kuvakentta__vihje { font-size: 0.78rem; color: var(--color-text-faint); }
.kuvakentta__input:focus-visible + .kuvakentta__pudotus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.kuvakentta.is-yli .kuvakentta__pudotus { border-color: var(--color-accent); border-style: solid; background: var(--color-surface); }
.kuvakentta.is-invalid .kuvakentta__pudotus { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(224, 99, 94, 0.18); }

/* Esikatselut: neliöruudukko, poistonappi kulmassa. Lataustila: kuva
   himmenee ja sykkii, kunnes lataus on valmis. Virhetila: kuva jää
   harmaana näkyviin ja alareunassa kerrotaan lyhyesti, mikä meni pieleen.
   Epäonnistunut kuva ei estä lomakkeen lähetystä. */
.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-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.kuvakentta__kuva img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kuvakentta__kuva.is-ladataan img { opacity: 0.45; animation: kuvakenttaLataus 1.2s ease-in-out infinite alternate; }
@keyframes kuvakenttaLataus { from { opacity: 0.3; } to { opacity: 0.6; } }
.kuvakentta__koko { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.35rem; font-size: 0.68rem; color: var(--color-white); background: rgba(5, 6, 8, 0.72); 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: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(5, 6, 8, 0.78);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.kuvakentta__poista:hover { background: var(--color-error); }
.kuvakentta__poista:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.kuvakentta__poista svg { width: 13px; height: 13px; }