/* =========================================================================
   Saneeraus Penttilä - style.css
   Cold + architectural. Big light grotesk headings, cool white / grey
   surfaces, deep graphite primary, steel-blue accent (on dark only),
   near-black cool ink, angular (chamfered / diagonal) edges.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Marquee -> Intro -> Services ->
   Why -> Dark -> References -> Before/After -> CTA -> Form -> Footer ->
   Utilities -> Animations -> Media queries
   ========================================================================= */

/* ------------------------------- Fontit --------------------------------- */
/* Itse isännöidyt vaihtelevapainoiset (variable) fontit. Aiemmin nämä tulivat
   Google Fontsista, jolloin jokainen sivunlataus vaati kaksi ylimääräistä
   yhteydenmuodostusta (fonts.googleapis.com + fonts.gstatic.com) ennen kuin
   ensimmäistäkään tekstiä voitiin piirtää. Nyt fontit tulevat samalta
   palvelimelta kuin muukin sivu, vuoden välimuistilla ja ilman kolmannen
   osapuolen seurantaa. Lisenssi: SIL Open Font License 1.1, ks. fontit/LUEMINUT.md
   latin riittää suomen kielelle; latin-ext ladataan vain jos sivulla on
   merkkejä sen alueelta (esim. vieraskieliset nimet). */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontit/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fontit/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Brand (saneerauspenttila.com): cool near-white page (#f4f6f8), light grey
     band (#e8ebef) and a deep graphite primary (#262b31) with black-button
     energy. Primary carries WHITE text; --color-accent is a cool steel-blue
     used only on dark surfaces where the graphite primary would be too low
     contrast. No warm / beige tones anywhere. */
  --color-primary: #262b31;      /* deep cool graphite — white text sits on this */
  --color-primary-dark: #14171a; /* near-black graphite (hover sweep / pressed) */
  --color-primary-soft: #e4e8ec; /* cool light grey tint for soft icon surfaces */
  --color-accent: #9fb2c4;       /* cool steel-blue — accents on dark + laskurin mockupit */
  --color-accent-dark: #7e93a8;  /* darker steel-blue — iso-mockupien varjopinnat */
  --color-on-primary: #ffffff;   /* text/icons on primary-graphite surfaces */
  --color-ink: #1c2025;          /* strong text / dark surfaces (cool charcoal) */
  --color-ink-deep: #121519;     /* deepest dark (hero scrim, footer) */
  --color-text: #23272d;         /* cool near-black body text */
  --color-text-light: #616872;   /* cool grey secondary text */
  --color-text-faint: #99a1ab;
  --color-bg: #f4f6f8;           /* cool near-white page base */
  --color-surface: #ffffff;      /* elevated white cards */
  --color-bg-alt: #e8ebef;       /* cool light grey for alt sections */
  --color-border: #e0e4e9;       /* cool hairline */
  --color-border-strong: #c9cfd7;
  --color-border-dark: #2b3037;  /* hairline inside dark sections */
  --color-white: #ffffff;
  --color-ink-soft: #2b2c1a;     /* legacy (unused) */

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

  --font-heading: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Raleway", system-ui, -apple-system, sans-serif;  /* h1 + h2 only */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

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

  /* Spacing scale */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 7rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Radii - small on purpose; the language is angular, not pill-soft */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 100px;

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

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

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

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

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

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

/* scroll-padding-top tracks the fixed header. The header lives inside the zoomed
   <body>, so its on-screen height grows with --zoom-factor; html itself is not
   zoomed, so we scale the offset here to keep anchored sections clearing it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(92px * var(--zoom-factor)); }

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

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
/* <figure>/<figcaption> käytetään kuvakorteissa: selaimen oletusmarginaali pois */
figure, figcaption { margin: 0; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

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

/* ----------------------------- Typography ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-ink);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 450;              /* big + light is the signature */
  text-wrap: balance;
  /* Pitkat suomalaiset yhdyssanat (esim. "kylpyhuoneremontista") eivat mahdu
     kapeimmille naytoille yhdelle riville. break-word katkaisee sanan vain
     silloin kun se ei muuten mahdu, joten leveammilla naytoilla mikaan ei muutu. */
  overflow-wrap: break-word;
}
h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 7.2vw, 5.1rem); letter-spacing: -0.04em; line-height: 0.98; }
h2 { font-family: var(--font-display); font-size: clamp(2.1rem, 5.2vw, 3.7rem); letter-spacing: -0.035em; line-height: 1.0; font-weight: 540; }
h3 { font-size: clamp(1.18rem, 1.9vw, 1.35rem); font-weight: 560; letter-spacing: -0.015em; line-height: 1.2; }
h4 { font-size: 1.05rem; font-weight: 560; letter-spacing: -0.01em; }

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

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

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

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

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

/* ----------------------------- Layout ---------------------------------- */
.shell { max-width: var(--shell-width); margin-inline: auto; }
.container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--pad-x); }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
/* Referenssit: pure white. Slide it up under the dark section's diagonal so the
   wedge below the diagonal reads white instead of the cream page base behind it. */
#referenssit {
  background: var(--color-white);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
#arvostelut, #tarjous { background: var(--color-bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

/* Asymmetric header: big heading left, supporting text/links right */
.section-head--split {
  display: grid;
  gap: 1.5rem 3rem;
  max-width: none;
  align-items: end;
}
.section-head--split .section-head__aside { color: var(--color-text-light); }
.section-head--split .section-head__aside p { font-size: 1.05rem; margin-bottom: 1.1rem; }

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

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

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

/* Sama tummissa osioissa (.dark): grafiitinharmaa nappi jäisi tummalla
   taustalla lähes näkymättömäksi, joten täyttö on valkoinen ja teksti tumma. */
.dark .btn-primary { background: var(--color-white); color: var(--color-ink); }
.dark .btn-primary::before { background: var(--color-accent); }
.dark .btn-primary:hover { color: var(--color-ink); }

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

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

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

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

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

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

/* ----------------------------- Header / Nav ---------------------------- */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--color-white);
  /* No transform transition: the header tracks scroll 1:1 via an inline transform
     set per-frame in script.js, so it slides away exactly at scroll speed. */
  transition: background-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
  will-change: transform;
}
.header__inner {
  max-width: var(--shell-width);
  margin-inline: auto;
  padding: 0.375rem var(--pad-x);
  min-height: 94px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
}
.logo { display: inline-flex; align-items: center; transition: opacity 0.25s ease; position: relative; justify-self: start; }
.logo:hover { opacity: 0.82; }
.logo img { height: 64px; width: auto; transition: opacity 0.35s ease; }
.logo__light { position: absolute; inset: 0; opacity: 1; }
.logo__dark { opacity: 0; }
.header.scrolled .logo__light { opacity: 0; }
.header.scrolled .logo__dark { opacity: 1; }

/* On desktop the nav dissolves so its children become header grid items:
   links sit in the centred auto column, actions (phone + CTA) on the right. */
.nav { display: contents; }
.nav__links { display: flex; align-items: center; gap: 0.1rem; justify-self: center; }
.nav__actions { display: flex; align-items: center; gap: 0.4rem; justify-self: end; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.95rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: currentColor;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.4rem;
  height: 2px;
  /* currentColor: white while the header is transparent over the hero,
     dark once .scrolled flips the link colour */
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease-soft);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.94rem;
  padding-inline: 0.9rem 0.5rem;
  white-space: nowrap;
}
/* Kuvake seuraa headerin tilaa: valkoinen kun tausta on lapinakyva heron
   paalla, brandivari kun .scrolled tuo vaalean taustan. */
.nav__phone svg { width: 17px; height: 17px; color: var(--color-white); }

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

.header.scrolled {
  background: rgba(244, 246, 248, 0.85);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(20, 24, 30, 0.10);
}
.header.scrolled .nav__links a { color: var(--color-text); }
.header.scrolled .nav__phone { color: var(--color-text); }
.header.scrolled .nav__phone svg { color: var(--color-primary); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  border-radius: 8px;
}
.menu-toggle span { display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease-soft), opacity 0.2s ease; margin-inline: auto; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------- Hero ------------------------------------ */
.hero {
  position: relative;
  /* Divide by --zoom-factor so the zoomed body multiplies it back to exactly
     one viewport height — the hero never spills past the fold at any zoom. Below
     1400px --zoom-factor is 1, so this is plain 100vh/100dvh. */
  min-height: calc(100vh / var(--zoom-factor));
  min-height: calc(100dvh / var(--zoom-factor));
  display: flex;
  align-items: center;            /* vertically centered content */
  justify-content: center;
  text-align: center;
  padding: 8rem var(--pad-x) 6rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
  /* vino alareuna: yksi suora diagonaali vasemmasta alakulmasta oikealle */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    0 100%
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  /* even, slightly centred dark scrim + soft vignette for centred text */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(15,17,21,0.72) 0%, rgba(15,17,21,0.58) 42%, rgba(15,17,21,0.82) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(15,17,21,0.16) 28%, rgba(15,17,21,0.66) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 1;
}
.hero__media.video-ready .hero__poster { opacity: 0; transition: opacity 0.8s ease; }

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

/* Honest hero pill (no reviews exist) — brand statement with a brush mark */

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

/* Hero secondary action: underlined text link with a big angular up-right arrow */
.hero__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-white); font-family: var(--font-heading); font-weight: 500; font-size: 1.06rem; letter-spacing: -0.01em; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(255,255,255,0.5); transition: text-decoration-color 0.25s ease, color 0.25s ease; }
.hero__link svg { width: 28px; height: 28px; transition: transform 0.25s var(--ease-soft); }
.hero__link:hover { text-decoration-color: var(--color-accent); }
.hero__link:hover svg { transform: translate(3px, -3px); color: var(--color-accent); }

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

/* ----------------------------- Trust strip ----------------------------- */
/* Slim band of honest trust points (replaces the partner-logo marquee). */
.trustbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding-block: clamp(1.5rem, 3vw, 2.1rem); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem 2.6rem; }
.trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-heading); font-weight: 540; font-size: 1rem; color: var(--color-text); letter-spacing: -0.01em; }
.trust-item svg { width: 22px; height: 22px; color: var(--color-primary); flex-shrink: 0; }

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

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

.feature-list { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
/* Yksinäinen nosto ei jää puolikkaaseen sarakkeeseen, vaan vie koko leveyden. */
.feature-list--single { grid-template-columns: 1fr; }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-ink); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.feature__icon svg { width: 23px; height: 23px; }
.feature h3 { margin-bottom: 0.3rem; }
.feature p { color: var(--color-text-light); font-size: 0.97rem; }
.intro__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* ----------------------------- Services -------------------------------- */
.svc-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.svc-card {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  isolation: isolate;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: transform 0.4s var(--ease-soft);
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.7s var(--ease-soft); }
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,16,20,0.92) 2%, rgba(14,16,20,0.62) 38%, rgba(14,16,20,0.18) 72%, rgba(14,16,20,0.05) 100%); }
.svc-card:hover img { transform: scale(1.06); }
.svc-card__body { padding: 1.4rem 1.45rem 1.5rem; }
.svc-card h3 { color: var(--color-white); font-size: 1.42rem; font-weight: 620; margin-bottom: 0.5rem; }
.svc-card p { color: rgba(255,255,255,0.8); font-size: 0.92rem; margin-bottom: 0; }
.svc-card .card-go { position: absolute; top: 1.2rem; right: 1.2rem; }
.svc-card:hover .card-go { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.svc-card:hover .card-go svg { transform: translate(2px, -2px); }

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

/* ----------------------------- Benefits (Miksi remontoida) ------------- */
/* Palvelusivujen hyötyosio. Valkoiset paneelit hiusviivaruudukossa, samaa
   arkkitehtonista kieltä kuin tummien osioiden .stats-ruudukko. Paneelit
   erottuvat harmaasta alt-taustasta ilman varjoja, ja iso pehmustus antaa
   osiolle painoa (aiempi .feature-list jäi taustan päällä liian kevyeksi). */
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  background: var(--color-border-strong);
  border: 1px solid var(--color-border-strong);
}
@media (min-width: 640px) { .benefits { grid-template-columns: 1fr 1fr; } }

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

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

/* Laskurivinkki: ruudukon viimeinen, matala rivi. Samaa paneelia kuin hyödyt,
   mutta kevyempi typografia, joten se ei enää dominoi osiota kuten .notice. */
.calc-note {
  grid-column: 1 / -1;
  background: var(--color-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1.3rem;
  padding: clamp(1.5rem, 2.2vw, 1.9rem) clamp(1.4rem, 2.4vw, 2.2rem);
}
.calc-note__icon { width: 22px; height: 22px; margin-top: 0.15rem; flex-shrink: 0; color: var(--color-primary); }
.calc-note p { margin: 0; flex: 1 1 260px; font-size: 0.98rem; line-height: 1.55; color: var(--color-text-light); }
.calc-note b { display: block; margin-bottom: 0.3rem; font-family: var(--font-heading); font-weight: 560; font-size: 1.05rem; color: var(--color-ink); }
@media (min-width: 640px) {
  .calc-note { align-items: center; }
  /* Ikoni linjataan otsikkoriviin, vaikka laatikko muuten keskittaa sisallon:
     kaksirivisessa tekstissa keskitetty ikoni jaisi rivien valiin. */
  .calc-note__icon { align-self: flex-start; margin-top: 0.2rem; }
  .calc-note .link-arrow { margin-left: auto; }
}

/* ----------------------------- Why / checklist ------------------------- */
.why__media { position: relative; }
.why__media img { width: 100%; border-radius: 2px; }
.checklist { display: grid; gap: 0; margin-top: 1.8rem; }
.check { display: grid; grid-template-columns: 30px 1fr; gap: 1rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--color-border); }
.check:last-child { border-bottom: 1px solid var(--color-border); }
.check__mark { width: 30px; height: 30px; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; flex-shrink: 0; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.check__mark svg { width: 16px; height: 16px; }
.check b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-ink); margin-bottom: 0.2rem; }
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

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

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

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

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

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

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

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

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

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

.reviews__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.review { background: var(--color-surface); border: 1px solid var(--color-border); padding: 1.8rem; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s var(--ease-soft); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.review:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.review__stars { color: var(--color-primary); display: inline-flex; gap: 1px; margin-bottom: 0.9rem; }
.review__stars svg { width: 17px; height: 17px; }
.review p { font-size: 1rem; color: var(--color-text); margin-bottom: 1.3rem; }
.review__who { display: flex; align-items: center; gap: 0.8rem; }
.review__avatar { width: 42px; height: 42px; background: var(--color-ink); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 560; font-size: 1rem; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.review__name { font-family: var(--font-heading); font-weight: 560; color: var(--color-ink); font-size: 0.95rem; }
.review__src { font-size: 0.82rem; color: var(--color-text-light); }

/* ----------------------------- CTA banner ------------------------------ */
.cta-banner { background: var(--color-primary); color: var(--color-on-primary); position: relative; overflow: hidden; }
.cta-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 18px); }
.cta-banner__inner { position: relative; text-align: center; max-width: 760px; margin-inline: auto; }
.cta-banner h2 { color: var(--color-white); }
.cta-banner p { font-size: 1.12rem; margin: 1.1rem auto 2rem; max-width: 38em; color: rgba(255,255,255,0.9); }
.cta-banner .btn-primary { background: var(--color-white); color: var(--color-ink); }
.cta-banner .btn-primary::before { background: var(--color-accent); }
.cta-banner .btn-primary:hover { color: var(--color-ink); }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact__item { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.contact__item-ic { width: 46px; height: 46px; background: var(--color-bg-alt); color: var(--color-ink); display: grid; place-items: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.contact__item-ic svg { width: 22px; height: 22px; }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-ink); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-ink); }
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--color-border-strong); font-weight: 560; font-size: 0.9rem; font-family: var(--font-heading); transition: border-color 0.2s ease, background-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.channel-btn svg { width: 18px; height: 18px; }
.channel-btn:hover { border-color: var(--color-ink); background: var(--color-surface); }

.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.7rem, 3vw, 2.5rem); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer))); }
.form__row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-heading); font-weight: 560; font-size: 0.88rem; color: var(--color-ink); }
.field label .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(20,22,29,0.07); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.12); }
.field__error { color: var(--color-error); font-size: 0.8rem; min-height: 1em; }
.form__consent-note { font-size: 0.85rem; color: var(--color-text-light); line-height: 1.55; margin-bottom: 1.2rem; }
.form__consent-note a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.2s ease; }
.form__consent-note a:hover { text-decoration-color: var(--color-ink); }
.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); }

/* Kuvakenttä: raahaa tai valitse kuvat. Itse input on piilotettu mutta
   tarkennettavissa (näppäimistö), ja label toimii pudotusalueena. */
.field label .field__opt { font-weight: 400; color: var(--color-text-faint); }
.kuvakentta { position: relative; }
.kuvakentta__input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.kuvakentta__pudotus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.5rem 1.1rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-light);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.kuvakentta__pudotus:hover { border-color: var(--color-ink); background: var(--color-surface); }
.kuvakentta__pudotus svg { width: 26px; height: 26px; color: var(--color-text-faint); }
.kuvakentta__teksti strong { color: var(--color-ink); font-family: var(--font-heading); font-weight: 560; }
.kuvakentta__vihje { font-size: 0.78rem; color: var(--color-text-faint); }
.kuvakentta__input:focus-visible + .kuvakentta__pudotus { border-color: var(--color-ink); box-shadow: 0 0 0 3px rgba(20,22,29,0.07); }
.kuvakentta.is-yli .kuvakentta__pudotus { border-color: var(--color-ink); border-style: solid; background: var(--color-surface); }
.kuvakentta.is-invalid .kuvakentta__pudotus { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(192,67,63,0.12); }

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

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.64); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border-dark); }
.footer__brand img { height: 84px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 30ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.footer__badge { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-dark); color: rgba(255,255,255,0.72); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.footer h3 { color: var(--color-white); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a, .footer__col span { font-size: 0.95rem; color: rgba(255,255,255,0.64); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer__contact-line svg { width: 16px; height: 16px; color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
/* Alarivi: puhelimessa pinossa vasempaan reunaan, 880px:sta yhdelle riville
   niin etta krediitti jaa vasemmalle ja copyright + tietosuojalinkki oikealle.
   p:n marginaalin nollaus on tarpeen, koska globaali 1rem alamarginaali
   sotkisi flexin pystysuuntaisen kohdistuksen. */
.footer__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; padding-top: 2rem; font-size: 0.85rem; }
.footer__bottom p { margin: 0; }
.footer__bottom-end { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.footer__legal { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__legal:hover { color: var(--color-accent); }
.footer__credit a { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__credit a:hover { color: var(--color-accent); }
.footer__socials { display: flex; gap: 0.6rem; }
.footer__socials a { width: 38px; height: 38px; border: 1px solid var(--color-border-dark); display: grid; place-items: center; color: rgba(255,255,255,0.72); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.footer__socials a:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.footer__socials svg { width: 18px; height: 18px; }

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

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

/* Compact page hero (hinta-arvio): selvästi matalampi, jotta sisältö
   (laskuri) alkaa heti heron alta eikä jää piiloon ruudun alapuolelle. */
.hero--compact {
  min-height: calc(48vh / var(--zoom-factor));
  min-height: calc(48dvh / var(--zoom-factor));
  padding-top: 8.5rem;
  padding-bottom: 4.5rem;
}
.hero--compact h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
@media (max-width: 767px) {
  .hero.hero--page.hero--compact { min-height: 54vh; min-height: 54dvh; padding-top: 7rem; }
}

/* Palvelusivun hero: matala, mutta mahtuu murupolku + H1 + alaotsikko + CTA:t.
   Hieman .hero--compactia korkeampi, selvästi etusivun 100vh:ta matalampi.
   Alareuna on suora linja: ei .heron diagonaalia. */
.hero--svc {
  min-height: calc(64vh / var(--zoom-factor));
  min-height: calc(64dvh / var(--zoom-factor));
  padding-top: 9rem;
  padding-bottom: 5rem;
  clip-path: none;
  /* Palvelusivut tasataan vasempaan reunaan: pidempi H1 lukeutuu paremmin
     vasemmalta reunalta kuin keskitettyna, ja murupolku alkaa samasta linjasta
     kuin muu sisalto. Etusivun hero pysyy keskitettyna. */
  text-align: left;
}
.hero--svc .hero__inner { align-items: flex-start; }
.hero--svc .crumbs ol { justify-content: flex-start; }
.hero--svc h1 { font-size: clamp(2.35rem, 4.7vw, 3.8rem); max-width: 18ch; margin-bottom: 1.3rem; }
.hero--svc .hero__lead { margin-inline: 0; margin-bottom: 2rem; }
.hero--svc .hero__cta { justify-content: flex-start; }
/* Pitaa "avaimet kateen -periaatteella" tyyppiset ilmaukset yhdella rivilla,
   ettei yhdysmerkki jaa roikkumaan rivin loppuun. */
.nowrap { white-space: nowrap; }
/* Vasemmalle tasatun tekstin taakse hieman tummempi reuna, jotta pitka
   valkoinen otsikko erottuu kuvasta myos vaaleissa kohdissa. */
.hero--svc .hero__media::after {
  background:
    linear-gradient(to right, rgba(15,17,21,0.80) 0%, rgba(15,17,21,0.62) 52%, rgba(15,17,21,0.46) 100%),
    linear-gradient(to bottom, rgba(15,17,21,0.52) 0%, rgba(15,17,21,0.40) 45%, rgba(15,17,21,0.74) 100%);
}
@media (max-width: 767px) {
  /* Puhelimessa palvelusivun hero on tasan 80 % nakyvasta ruudusta: kiintea
     korkeus, ei pelkka minimi, joten sisallon pituus ei enaa venyta sita. */
  .hero.hero--page.hero--svc {
    height: 80vh;
    height: 80dvh;
    min-height: 80vh;
    min-height: 80dvh;
    padding-top: 6.25rem;
    padding-bottom: 2.75rem;
  }
  .hero.hero--page.hero--svc h1 { font-size: clamp(2.1rem, 8.1vw, 2.95rem); max-width: 100%; }
}


/* CTA-pari: pääsiirto (Pyydä tarjous) + hintalaskurin sivulinkki vierellä.
   Toistuu palvelusivuilla useassa kohdassa, aina samassa järjestyksessä. */
.cta-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: 2.2rem; }
.cta-pair--tight { margin-top: 1.6rem; }
.link-calc { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-heading); font-weight: 560; font-size: 0.97rem; letter-spacing: -0.01em; color: var(--color-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.22s ease, color 0.22s ease; }
.link-calc svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-primary); }
.link-calc:hover { text-decoration-color: var(--color-primary); }
.dark .link-calc, .cta-banner .link-calc { color: var(--color-white); text-decoration-color: rgba(255,255,255,0.45); }
.dark .link-calc svg, .cta-banner .link-calc svg { color: var(--color-accent); }
.dark .link-calc:hover, .cta-banner .link-calc:hover { text-decoration-color: var(--color-accent); }
.cta-banner .cta-pair { justify-content: center; }

/* Hero: laskurilinkki heron valkoisen napin vieressä */
.hero .link-calc { color: var(--color-white); text-decoration-color: rgba(255,255,255,0.5); font-size: 1.02rem; }
.hero .link-calc svg { color: var(--color-accent); width: 21px; height: 21px; }
.hero .link-calc:hover { text-decoration-color: var(--color-accent); }

/* Palvelusivun sisältölistat: kaksi saraketta työpöydällä */
@media (min-width: 700px) {
  .checklist--2col { grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
  /* Ylin reunaviiva vain ensimmäiselle riville, alin viimeiselle: sarakkeissa
     jokainen .check on oman sarakkeensa jäsen, joten reunat riittävät sellaisenaan. */
  .checklist--2col .check:last-child { border-bottom: 1px solid var(--color-border); }
  .checklist--2col .check:nth-last-child(2) { border-bottom: 1px solid var(--color-border); }
}

/* Hintanosto: korostettu alkaen-hinta (ei käytössä tällä hetkellä) */
.pricetag { display: inline-flex; flex-direction: column; gap: 0.15rem; padding: 1.1rem 1.5rem; background: var(--color-primary); color: var(--color-on-primary); margin-top: 1.9rem; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); }
.pricetag b { font-family: var(--font-heading); font-weight: 620; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; line-height: 1.05; }
.pricetag span { font-size: 0.85rem; opacity: 0.82; }


/* Palvelusivun ensimmainen sisaltoosio tulee suoraan heron alle (trustbar
   poistettu), joten ylapadding on reilumpi seka puhelimessa etta tyopoydalla.
   Tama ID-saanto maaraa #palvelu-osion ylapaddingin, ei .section. */
#palvelu { padding-top: clamp(5rem, 9vw, 8.5rem); }

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

/* The dark "Miksi me" section is pulled up under the process section so
   the wedge above its top-left diagonal shows the alt section background
   instead of the page base. (Same trick as #referenssit on the front page.) */
#miksi-me { margin-top: calc(var(--edge) * -1); }

/* UKK: white section slid up under the dark section's bottom diagonal so the
   wedge below the diagonal reads white too. */
#ukk {
  background: var(--color-white);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}

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

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

/* Sub-page hero on phones: content is short, keep it clearly under full height.
   .hero.hero--page so this wins over the later mobile `.hero { min-height: 94vh }`. */
@media (max-width: 767px) {
  .hero.hero--page { min-height: 78vh; min-height: 78dvh; padding-top: 7.5rem; }
  .hero.hero--page h1 { font-size: clamp(2.35rem, 9vw, 3.2rem); }
  .crumbs ol { justify-content: flex-start; }
}

/* ----------------------------- Hinta-arviolaskuri ---------------------- */
/* Wizard (4 vaihetta) + live-hintapaneeli. Ilman JS:ää kaikki vaiheet
   näkyvät allekkain ja wizard-napit/hintapalkki pysyvät piilossa —
   .calc__noscript-laatikko ohjaa soittamaan tai tarjouslomakkeelle. */

.calc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
/* Laskuri alkaa heti matalan heron alta */
#laskuri { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Piilossa kun script.js on ilmoittautunut valmiiksi. Muissa tapauksissa
   näkyvissä, myös silloin kun skripti jäi lataamatta. */
.js .calc__noscript { display: none; }
.calc__noscript {
  grid-column: 1 / -1;
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}
.calc__noscript a { text-decoration: underline; text-underline-offset: 3px; }

/* Progress */
.calc__progress { display: none; }
.js .calc__progress { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 2.2rem; }
.calc__progress-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.calc__progress-track { display: block; height: 4px; background: var(--color-border); overflow: hidden; }
.calc__progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--color-primary);
  transition: width 0.4s var(--ease-soft);
}

/* Steps */
.calc__form fieldset.calc-step { border: 0; padding: 0; margin: 0 0 2.6rem; min-width: 0; }
.js .calc-step { display: none; margin-bottom: 0; }
.js .calc-step.is-active { display: block; animation: fadeUp 0.45s var(--ease-soft) both; }

.calc-step__title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 540;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink);
}
.calc-step__num {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 1.05rem;
  letter-spacing: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.calc-step__hint { color: var(--color-text-light); font-size: 0.98rem; margin: 0.8rem 0 1.6rem; }

.calc-group[hidden] { display: none !important; }
.calc-group:not([hidden]) + .calc-group:not([hidden]) { margin-top: 2rem; }

/* Option cards (radio) */
.opt-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
.opt-grid--rows { grid-template-columns: 1fr; }

.opt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s var(--ease-soft);
}
.opt-card:hover { border-color: var(--color-ink); box-shadow: var(--shadow-sm); }
.opt-card input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.opt-card:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1.5px var(--color-primary), var(--shadow);
}
.opt-card:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 3px; }

.opt-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.opt-card__desc { color: var(--color-text-light); font-size: 0.86rem; line-height: 1.45; }
.opt-card__tag {
  margin-top: 0.45rem;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.76rem;
  padding: 0.24rem 0.6rem;
  background: var(--color-primary-soft);
  color: var(--color-ink);
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%, 0 5px);
}
/* Tyyppikortit: ikoni ylös */
.opt-card--type { align-items: flex-start; }
.opt-card__ic {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 0.55rem;
  background: var(--color-primary-soft);
  color: var(--color-ink);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.opt-card__ic svg { width: 24px; height: 24px; }
.opt-card--type:has(input:checked) .opt-card__ic { background: var(--color-primary); color: var(--color-on-primary); }

/* Kokoluokkakortit: isometrinen 3D-mockup */
.opt-card--size { padding-top: 0.9rem; }
.opt-card__art {
  display: block;
  margin-bottom: 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}
.opt-card__art svg { width: 100%; height: auto; display: block; padding: 0.3rem 0.4rem; }
/* Mockupien pinnat: kannet valkoisia, vasemmat tahkot vaaleita, oikeat
   tummempia — työtasot ja korostuspinnat teräksensinisellä. */
.opt-card__art path { stroke: var(--color-ink); stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.opt-card__art .a-t { fill: var(--color-surface); }
.opt-card__art .a-l { fill: var(--color-primary-soft); }
.opt-card__art .a-r { fill: var(--color-border-strong); }
.opt-card__art .a-fl { fill: var(--color-bg-alt); }
.opt-card__art .a-w { fill: var(--color-surface); }
.opt-card__art .a-w2 { fill: var(--color-bg); }
.opt-card__art .a-acc { fill: var(--color-accent); }
.opt-card__art .a-accl { fill: var(--color-accent); fill-opacity: 0.35; }
.opt-card__art .a-accd { fill: var(--color-accent-dark); }
.opt-card__art .a-accd2 { stroke: var(--color-accent-dark); stroke-width: 1; }
.opt-card__art .a-gl { fill: var(--color-accent); fill-opacity: 0.16; }
.opt-card__art .a-ink { fill: var(--color-ink); }
.opt-card__art .a-seam { stroke: var(--color-border-strong); stroke-width: 0.9; }
.opt-card--size:has(input:checked) .opt-card__art { border-color: var(--color-border-strong); background: var(--color-surface); }

/* Tasokortit: teksti riittää */
.opt-card--level { padding-block: 1.05rem; }
.opt-card--level .opt-card__desc { max-width: 52ch; }
/* Tasokortin sisältölista. Span-elementteinä, koska <label> sallii vain
   phrasing-sisältöä: <ul> label-elementin sisällä ei olisi validi. */
.opt-card__list { display: grid; gap: 0.3rem; margin-top: 0.2rem; max-width: 52ch; }
.opt-card__li {
  position: relative;
  padding-left: 0.95rem;
  color: var(--color-text-light);
  font-size: 0.86rem;
  line-height: 1.45;
}
.opt-card__li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
  background: var(--color-primary);
}
.opt-card--level:has(input:checked) .opt-card__li { color: var(--color-text); }

/* Oma koko -kortti: koko rivin levyinen, liukuri esiin valittaessa */
.opt-card--custom { grid-column: 1 / -1; }
.opt-card--custom .calc-slider { display: none; margin-top: 1rem; }
.opt-card--custom:has(input[type="radio"]:checked) .calc-slider { display: block; }

/* Liukuri */
.calc-slider__row { display: flex; align-items: center; gap: 1.1rem; }
.calc-slider output {
  flex-shrink: 0;
  min-width: 84px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 620;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  background: var(--color-primary-soft);
  padding: 0.5rem 0.7rem;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.calc-slider input[type="range"] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--color-border-strong);
  border-radius: 3px;
  outline-offset: 6px;
  cursor: pointer;
}
.calc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(20, 22, 29, 0.3);
}
.calc-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 8px rgba(20, 22, 29, 0.3);
}
.calc-slider input[type="range"]::-moz-range-track { height: 6px; background: transparent; }

/* Chips (erityistoiveet): kaksi valintaa per rivi */
.chip-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
@media (max-width: 560px) {
  .chip-list { grid-template-columns: 1fr; }
}
.chip {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  font-size: 0.97rem;
  color: var(--color-text);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.chip:hover { border-color: var(--color-ink); }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip__box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chip__box::before {
  content: "✓";
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-on-primary);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.2s var(--ease-spring);
}
.chip:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.chip:has(input:checked) .chip__box { background: var(--color-primary); border-color: var(--color-primary); }
.chip:has(input:checked) .chip__box::before { opacity: 1; transform: scale(1); }
.chip:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 3px; }

/* Wizard-napit */
.calc__nav { display: none; }
.js .calc__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.2rem; }
/* .btn:n oma display voittaisi muuten hidden-attribuutin (Takaisin vaiheessa 1) */
.calc__nav .btn[hidden] { display: none; }
.js .calc__nav .btn:only-child,
.js .calc__nav #calcCompute { margin-left: auto; }

/* Live-hintapaneeli */
.calc__aside { position: sticky; top: 118px; }
.price-panel {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 2rem 1.9rem 1.9rem;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
}
.price-panel__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
}
.price-panel__note { font-size: 0.84rem; color: rgba(255, 255, 255, 0.6); margin: 1rem 0 1.4rem; }
.price-panel__summary { margin: 0; }
.price-panel__summary > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--color-border-dark);
  font-size: 0.9rem;
}
.price-panel__summary dt { color: rgba(255, 255, 255, 0.58); }
.price-panel__summary dd { margin: 0; color: var(--color-white); font-weight: 500; text-align: right; }
.price-panel__trust { display: grid; gap: 0.55rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border-dark); }
.price-panel__trust li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.88rem; }
.price-panel__trust svg { width: 16px; height: 16px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* Laskenta-animaatio: hetken "laskentaa" ennen tuloksen paljastusta */
.calc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  min-height: 340px;
  text-align: center;
  animation: fadeUp 0.4s var(--ease-soft) both;
}
.calc-loading[hidden] { display: none; }
.calc-loading__spin {
  width: 52px;
  height: 52px;
  background: var(--color-primary);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  animation: calcSpin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.calc-loading__text {
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0;
}
@keyframes calcSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Tulos + liidilomake */
.calc-result { animation: fadeUp 0.5s var(--ease-soft) both; }
.calc-result[hidden] { display: none; }
.calc-result__price-block { margin-bottom: 2.2rem; }
.calc-result__price {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(2.3rem, 5.4vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-ink);
  margin: 0.4rem 0 0.6rem;
}
.calc-result__meta { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 1.3rem; }
.calc-result__summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.calc-result__summary li {
  font-family: var(--font-heading);
  font-weight: 540;
  font-size: 0.84rem;
  color: var(--color-ink);
  background: var(--color-primary-soft);
  padding: 0.38rem 0.75rem;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
#calcEdit { background: none; border: 0; padding: 0; cursor: pointer; }
.calc-result__lead h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 0.6rem; }
.calc-result__lead > p { color: var(--color-text-light); margin-bottom: 1.5rem; max-width: 52ch; }
.calc-result__alt { margin-top: 1.2rem; font-size: 0.95rem; color: var(--color-text-light); }
.calc-result__alt a { font-weight: 600; color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.calc-result__disclaimer {
  margin-top: 2.2rem;
  padding: 1.1rem 1.3rem;
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-light);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* "Miten arvio muodostuu" -osio: kolme steppiä rinnakkain isolla näytöllä */
@media (min-width: 880px) {
  .steps--calc { grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
  .steps--calc .step { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
}

/* Laskurin responsiivisuus */
@media (min-width: 880px) {
  .calc { grid-template-columns: 1.5fr 0.9fr; }
  .opt-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .opt-grid--rows { grid-template-columns: 1fr; }
}
@media (max-width: 879px) {
  .calc__aside { display: none; }
}
@media (max-width: 560px) {
  .opt-grid { grid-template-columns: 1fr 1fr; }
  .opt-grid--3 { grid-template-columns: 1fr; }
  .opt-card--type { padding: 0.95rem 1rem; }
  /* Kokoluokkakortit vaakamallisiksi: mockup vasemmalla, tekstit oikealla,
     jotta kortit eivät vie koko ruutua mutta kuva pysyy selkeänä. */
  .opt-card--size {
    display: grid;
    grid-template-columns: 118px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.95rem;
    align-items: start;
  }
  .opt-card--size .opt-card__art {
    grid-row: 1 / 4;
    margin-bottom: 0;
    align-self: center;
  }
  .opt-card--custom { display: flex; flex-direction: column; }
}

/* ----------------------------- Legal / tietosuoja ---------------------- */
/* Matala tumma otsikkoalue ilman kuvaa: sama tummuus kuin footerissa, jotta
   kiinteä header erottuu sivun ylareunassa. */
.legal-hero { position: relative; background: var(--color-ink-deep); padding-block: 9rem clamp(2.5rem, 6vw, 4rem); }
.legal-hero .crumbs { margin-bottom: 1.2rem; }
.legal-hero .crumbs ol { justify-content: flex-start; }
.legal-hero h1 { color: var(--color-white); font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: 0.75rem; }
.legal-hero__meta { color: rgba(255,255,255,0.62); font-size: 0.95rem; }

.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.8rem; }
.legal h2:first-child { margin-top: 0; }
.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; list-style: disc; }
.legal li { color: var(--color-text-light); line-height: 1.7; padding-left: 0.2rem; }
.legal a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--color-border-strong); transition: text-decoration-color 0.2s ease; }
.legal a:hover { text-decoration-color: var(--color-ink); }
.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);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.legal__contact p { margin-top: 0.4rem; }
.legal__contact p:first-child { margin-top: 0; }

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

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

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

/* Entrance zoom only. Uses `backwards` (not `both`): a forwards/`both` fill
   would keep overriding the JS parallax transform in the cascade, freezing the
   poster. Without forwards-fill the inline transform set in script.js takes
   over once the entrance finishes. */
.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
.hero__inner > * { animation: fadeUp 0.9s var(--ease-soft) both; }
.hero__rating { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.24s; }
.hero__lead { animation-delay: 0.42s; }
.hero__cta { animation-delay: 0.58s; }

/* ----------------------------- Media queries --------------------------- */
@media (min-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { aspect-ratio: 4 / 5; }
  .ref__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

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

@media (min-width: 880px) {
  .ref__grid { grid-template-columns: repeat(3, 1fr); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .ba-row { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--intro { grid-template-columns: 0.9fr 1.1fr; }
  .split--portfolio { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
  .split--reverse .split__media { order: 2; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .dark__grid { grid-template-columns: 1.05fr 0.95fr; }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; }
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; }
  .footer__bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem; }
  .footer__bottom-end { flex-direction: row; align-items: center; gap: 1.1rem; }
  /* Ohut erotinviiva, jotta copyright ja tietosuojalinkki lukevat yhtena rivina. */
  .footer__bottom-end .footer__legal { padding-left: 1.1rem; border-left: 1px solid var(--color-border-dark); }
}

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

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

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

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  /* Drop will-change:transform here. The header still slides on scroll (mobile
     too) via a JS inline transform, but a transform OR will-change:transform
     makes the header a containing block for the position:fixed drawer, trapping
     it in the ~78px header box. We remove will-change, and setMenu() clears the
     inline transform when the menu opens — so while the drawer is shown the
     header has no transform and the drawer's inset:0 resolves against the
     viewport = full height. */
  .header { will-change: auto; }
  /* Back to a simple two-end bar; the centred-grid layout is desktop-only */
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 84vw);
    background: var(--color-bg);
    color: var(--color-text);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 6rem 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-soft);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
  }
  .nav.open { transform: translateX(0); }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__links a { padding: 1rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); opacity: 1; }
  .nav__links a::after { display: none; }
  /* Palvelut: hover-dropdown becomes a tap-to-open accordion in the drawer */
  .nav__item { position: static; width: 100%; }
  .nav__item > a { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav__chevron { width: 19px; height: 19px; }
  .nav__dropdown {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__item.open > .nav__dropdown { display: block; }
  .nav__dropdown a { padding: 0.9rem 0 0.9rem 1.1rem; font-size: 1.02rem; color: var(--color-text-light); border-radius: 0; }
  .nav__dropdown a:hover,
  .nav__dropdown a:focus-visible { background: transparent; color: var(--color-primary); }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.05rem; }
  .nav__phone svg { color: var(--color-primary); }
  .nav__cta { display: none; }
  /* Logo + toggle sit above the full-height drawer; toggle bars + logo go dark
     against the light open panel so both stay visible. */
  .logo { z-index: 2; }
  .menu-toggle { position: relative; z-index: 2; }
  .nav.open ~ .menu-toggle span { background: var(--color-ink); }
  /* When the drawer is open, the top header strip takes the drawer's light
     surface so the dark logo + close icon stay legible at every mobile width
     (on the phone the drawer overlaps the logo; on a tablet it sits beside it).
     backdrop-filter MUST be cleared here: once scrolled the header carries it,
     and (like transform/will-change) it makes the header a containing block for
     the position:fixed drawer, trapping it in the ~78px header box. */
  body.no-scroll .header {
    background: var(--color-bg);
    box-shadow: none;
    color: var(--color-text);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.no-scroll .logo__light { opacity: 0; }
  body.no-scroll .logo__dark { opacity: 1; }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(13,14,17,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}

/* ----- Mobile hero: left-aligned, 94vh, larger heading ----- */
@media (max-width: 767px) {
  .hero {
    /* 94vh on a normal phone; min-height lets it grow taller on very short
       screens where the content would not fit comfortably inside 94vh.
       (At mobile widths --zoom-factor is always 1, so plain vh is correct.) */
    min-height: 94vh;
    min-height: 94dvh;
    text-align: left;
    align-items: center;
    padding: 6rem var(--pad-x) 3.25rem;
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  /* Rating pill on one short line: [G logo] [4,8] [★★★★★], no review-count text,
     so the box is shorter than the desktop two-line version. */
  .hero__rating { align-self: flex-start; padding-block: 0.42rem; }
  .hero__rating-text { flex-direction: row; align-items: center; gap: 0; }
  .hero__rating-text small { display: none; }
  .hero__rating-stars { gap: 3px; }
  .hero__rating-stars svg { width: 15px; height: 15px; }
  .hero__rating-stars em { order: -1; margin: 0 5px 0 0; font-size: 0.98rem; }
  .hero h1 {
    /* Puhelimessa maltillisempi otsikkokoko: aiempi 10.5vw tayti ruudun ja
       tyonsi alaotsikon seka CTA:t liian alas. */
    font-size: clamp(2.3rem, 8.4vw, 3.1rem);
    font-weight: 540;            /* slightly heavier than the desktop 450 */
    line-height: 1.06;
    letter-spacing: -0.032em;
    margin: 1.05rem 0 1rem;
    max-width: 17ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  /* Etusivun hero puhelimessa: H1 viela hieman pienemmaksi, jotta ingressi ja
     CTA:t nousevat ylemmas. Kohdistus :not(.hero--page) rajaa taman etusivulle;
     palvelu- ja laskurisivujen omat h1-koot pysyvat ennallaan. */
  .hero:not(.hero--page) h1 {
    font-size: clamp(2.05rem, 7.4vw, 2.75rem);
    margin-top: 0;
  }

  /* Trust strip: left-aligned and slightly larger on mobile. */
  .trustbar__inner { justify-content: flex-start; align-items: flex-start; gap: 1rem 2.6rem; }
  .trust-item { font-size: 1.1rem; }
  .trust-item svg { width: 24px; height: 24px; }

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

  /* Palvelusivujen ensimmainen sisaltoosio: puhelimessa tekstit ensin ja kuva
     niiden alle, jotta lukija paasee heti otsikkoon ja kuvaukseen kasiksi.
     Kohdistus .hero--svc:n kautta, jotta etusivun vastaava osio ei muutu. */
  .hero--svc ~ .section .split--intro .split__body { order: 1; }
  .hero--svc ~ .section .split--intro .split__media { order: 2; }

  /* "Miksi Saneeraus Penttila" -osion kuva matalammaksi puhelimessa.
     !important koska kuvalla on inline-tyylinen 4/5-kuvasuhde (CLS-varaus). */
  .why__media img { aspect-ratio: 4 / 3 !important; height: auto; }

  /* Nappi ja "Laske hinta-arvio" -linkki menevat puhelimessa allekkain.
     Isompi rivivali erottaa ne toisistaan, ettei linkki nayta napin osalta. */
  .cta-pair, .hero__cta { gap: 1.5rem 1.5rem; }

  /* Tummien osioiden kuvakollaasi pois puhelimesta: kaksi isoa kuvaa
     allekkain venytti osion turhan pitkaksi, ja teksti on siina paaasia. */
  .dark .collage { display: none; }

  /* Palvelusivujen hyotyosion laskurilaatikko pois puhelimesta: sama
     hintalaskuri on jo herossa ja sivun muissa CTA-kohdissa. */
  .calc-note { display: none; }
}

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

/* Compact the wordmark logo on small phones so it never crowds the toggle. */
@media (max-width: 600px) {
  .logo img { height: 56px; }
}

/* Kapeimmat puhelimet (alle 360px): pitkat suomalaiset yhdyssanat, kuten
   "Pyyda tarjous kylpyhuoneremontista", eivat mahdu otsikkokoossa palstaan ja
   tyonsivat sisallon ruudun ulkopuolelle (body piilotti ylimenon, joten sanan
   loppu jai nakymatta). Tavutus katkaisee sanan siististi. Raja on 360px,
   koska 360px ja sita leveammilla naytoilla rivitys toimii jo sellaisenaan
   eika sita haluta muuttaa. */
@media (max-width: 359px) {
  h1, h2, h3, h4 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
}

/* ----------------------------- Reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .hero__poster { animation: none; }
}