/* =========================================================================
   NextBuild Oy - style.css
   Dark, industrial. Big light grotesk headings, near-black surfaces,
   copper/orange brand accent (from the NB logo), angular (chamfered /
   diagonal) edges.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Trust -> Intro -> Services ->
   Why -> Dark feature -> Before/after -> Reviews -> CTA -> Form -> Footer ->
   Utilities -> Animations -> Media queries
   ========================================================================= */

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Brand: turquoise (Lämpöpumppupojat demo) sitting on near-black surfaces.
     --color-primary carries white text; --color-accent is a brighter turquoise
     used for links/highlights on the dark surfaces. */
  --color-primary: #0d9e95;       /* turquoise — white text sits on this */
  --color-primary-dark: #0a7c75;  /* darker turquoise (hover sweep / pressed) */
  --color-primary-soft: rgba(13, 158, 149, 0.14); /* faint turquoise tint surfaces */
  --color-accent: #2dd4c4;        /* brighter turquoise — accents/links on dark */
  --color-accent-soft: rgba(45, 212, 196, 0.16);
  --color-on-primary: #ffffff;    /* text/icons on turquoise surfaces */

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

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

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

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

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

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

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

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

  /* Radii - sharp square corners on boxes & images (no chamfers, no rounding) */
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-pill: 100px;

  /* Legacy tokens kept for compatibility; corners are now rounded and section
     dividers are straight, so these are no longer used for clipping. */
  --chamfer: 22px;
  --chamfer-lg: 40px;
  --edge: clamp(38px, 6vw, 86px);

  /* Shadows - deep on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.55);

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

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

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

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

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

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

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

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

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

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

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

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

/* ----------------------------- Rounded utilities ----------------------- */
.clip-chamfer { border-radius: var(--radius-lg); overflow: hidden; }
.clip-tr { border-radius: var(--radius-xl); overflow: hidden; }
.clip-bl { border-radius: var(--radius-xl); overflow: hidden; }

/* Section dividers are straight now (no diagonal clip). */
.edge-top, .edge-bottom, .edge-both { clip-path: none; }

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

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
#tyomme { background: var(--color-bg); }
#meista { background: #17191e; }
#arvostelut { background: var(--color-bg-alt); }
#tarjous { background: var(--color-bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

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

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

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

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

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

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

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

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

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

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

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

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.94rem;
  padding-inline: 0.9rem 0.5rem;
  white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--color-accent); }

.header.scrolled {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--color-border);
}
.header.scrolled .nav__links a { color: var(--color-text); }
.header.scrolled .nav__phone { color: var(--color-text); }

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

/* ----------------------------- Hero ------------------------------------ */
.hero {
  position: relative;
  min-height: calc(100vh / var(--zoom-factor));
  min-height: calc(100dvh / var(--zoom-factor));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 8rem 0 6rem;
  overflow: hidden;
  background: var(--color-ink-deep);
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(8,9,11,0.74) 0%, rgba(8,9,11,0.64) 42%, rgba(8,9,11,0.84) 100%),
    radial-gradient(120% 90% at 50% 42%, rgba(8,9,11,0.18) 28%, rgba(8,9,11,0.66) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; }

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  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: 560; letter-spacing: -0.04em; line-height: 1.0; text-shadow: 0 2px 30px rgba(0,0,0,0.5); max-width: 20ch; }
.hero h1 .accent { color: var(--color-accent); }
.hero__lead { color: rgba(255,255,255,0.86); font-size: clamp(1.05rem, 1.5vw, 1.24rem); max-width: 46ch; margin: 0 0 2.2rem; text-shadow: 0 1px 16px rgba(0,0,0,0.5); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; justify-content: flex-start; align-items: center; }

/* Hero Google rating pill (frosted glass) */
.hero__rating { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.5rem 1.15rem 0.5rem 0.8rem; border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); background: rgba(255,255,255,0.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero__rating-logo { width: 24px; height: 24px; flex-shrink: 0; }
.hero__rating-text { display: inline-flex; align-items: center; gap: 0.55rem; line-height: 1; color: var(--color-white); }
.hero__rating-score { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--color-white); letter-spacing: 0.01em; }
.hero__rating-stars { display: inline-flex; align-items: center; gap: 2px; color: #fbbc05; }
.hero__rating-stars svg { width: 15px; height: 15px; }

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

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

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

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

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

/* ----------------------------- 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; border-radius: 0; }
.check__mark svg { width: 16px; height: 16px; }
.check b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); margin-bottom: 0.2rem; }
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

/* ----------------------------- Collage (intro) ------------------------- */
.collage { position: relative; }
.collage__main { width: 100%; border-radius: var(--radius-xl); }
.collage__inset { position: absolute; width: 46%; border: 5px solid var(--color-ink); left: -1.2rem; bottom: -1.6rem; border-radius: var(--radius-lg); }

/* ----------------------------- Dark feature / brands ------------------- */
/* Solid dark band — no gradient, no border. The clean diagonal top & bottom
   edges come from clipping the section to a parallelogram and overlapping the
   neighbouring sections, so the cut corners reveal the ACTUAL adjacent sections
   (#meista above, #tyomme below) with no stray off-colour triangle. */
.dark { background: var(--color-ink); color: rgba(255, 255, 255, 0.82); }
.dark .eyebrow { color: rgba(255, 255, 255, 0.72); }
.dark .eyebrow::before { background: var(--color-accent); }
.dark h2 { color: var(--color-white); }

.brand-section {
  --brand-edge: clamp(42px, 5vw, 78px);
  position: relative;
  z-index: 1;
  clip-path: polygon(0 var(--brand-edge), 100% 0, 100% calc(100% - var(--brand-edge)), 0 100%);
  margin-block: calc(var(--brand-edge) * -1);
  padding-block: calc(var(--section-y) + var(--brand-edge));
}

/* Header: heading on the left, short intro on the right */
.brand-head { display: grid; gap: 0.9rem 3rem; }
.brand-head__text { color: rgba(255, 255, 255, 0.72); font-size: 1.04rem; line-height: 1.65; margin: 0; }

/* Brand boxes — side by side, each framed with a turquoise border */
.brand-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(2.2rem, 4vw, 3rem); }
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft), background-color 0.25s var(--ease-soft);
}
.brand-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: var(--color-surface-2); }
.brand-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.brand-card__logo {
  display: grid;
  place-items: center;
  width: 100%;
  height: 96px;
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.4rem;
}
.brand-card__logo img { width: auto; max-width: 76%; max-height: 48px; height: auto; }
/* Cap the Toshiba wordmark shorter so it doesn't outweigh the Mitsubishi mark. */
.brand-card__logo img[alt="Toshiba"] { max-height: 31px; }
.brand-card__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-accent); font-weight: 600; font-size: 0.95rem; }
.brand-card__link svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease-soft); }
.brand-card:hover .brand-card__link svg { transform: translate(2px, -2px); }

/* Scanoffice importer mention — big logo on the left, text on the right */
.importer {
  display: grid;
  gap: 0.9rem 2rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--color-border-strong);
}
.importer__logo { display: inline-flex; align-items: center; opacity: 0.95; transition: opacity 0.25s var(--ease-soft); }
.importer__logo:hover { opacity: 1; }
.importer__logo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.importer__logo img { height: 46px; width: auto; }
.importer__text { color: rgba(255, 255, 255, 0.66); font-size: 0.95rem; margin: 0; }

@media (min-width: 620px) {
  .brand-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .importer { grid-template-columns: auto 1fr; }
}
@media (min-width: 880px) {
  .brand-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .brand-head__text { padding-bottom: 0.4rem; }
}

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

.ba-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.ba-figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-ink); }
.ba-figure img { width: 100%; display: block; }
.ba-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.3rem 1rem; color: var(--color-white); background: linear-gradient(to top, rgba(8,9,11,0.85), rgba(8,9,11,0)); font-family: var(--font-heading); font-weight: 540; font-size: 0.98rem; }
.ba-figure__chip { position: absolute; top: 1rem; left: 1rem; background: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-heading); font-weight: 560; font-size: 0.74rem; letter-spacing: 0.04em; padding: 0.35rem 0.7rem; border-radius: var(--radius); }

/* -------------- White sections: Palvelut + Ennen ja jälkeen ------------- */
/* These two sections flip to a white background. Only text sitting directly on
   the white background goes dark — the section head and the on-page links.
   The service cards (.svc-card) and slider labels stay light because they sit
   on their own dark photo overlay, so they are deliberately NOT targeted here. */
#palvelut,
#tyomme {
  background: var(--color-light-bg);
}
#palvelut { padding-top: clamp(2.25rem, 4.5vw, 4.5rem); }
#palvelut .section-head h2, #palvelut .section-head h3,
#tyomme .section-head h2, #tyomme .section-head h3 { color: var(--color-on-light-heading); }
#palvelut .eyebrow,
#tyomme .eyebrow { color: var(--color-on-light-muted); }
#palvelut .section-head p:not(.eyebrow),
#tyomme .section-head p:not(.eyebrow),
#palvelut .section-head--split .section-head__aside,
#tyomme .section-head--split .section-head__aside { color: var(--color-on-light-muted); }
#palvelut .link-arrow,
#tyomme .link-arrow { color: var(--color-on-light-heading); }
#palvelut .link-arrow:hover,
#tyomme .link-arrow:hover { color: var(--color-primary); }

/* ===== Demo: light intro + contact, reference gallery ===================
   Intro (#esittely) and contact (#tarjous) flip to white, like Palvelut.
   The form card stays dark on its own (self-contained). */
#esittely,
#tarjous { background: var(--color-light-bg); }

#esittely .eyebrow,
#tarjous .eyebrow { color: var(--color-on-light-muted); }
#esittely h2,
#tarjous h2,
#esittely .feature h3 { color: var(--color-on-light-heading); }
#esittely .feature p { color: var(--color-on-light-muted); }

#tarjous .contact__item b,
#tarjous .contact__person b { color: var(--color-on-light-heading); }
#tarjous .contact__item a,
#tarjous .contact__item span,
#tarjous .contact__person a { color: var(--color-on-light-muted); }
#tarjous .contact__item a:hover,
#tarjous .contact__person a:hover { color: var(--color-primary); }
#tarjous .channel-btn { color: var(--color-on-light-heading); border-color: rgba(20,22,26,0.18); }
#tarjous .channel-btn:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-soft); }
/* Contact icon chips: light turquoise tint + turquoise icon (extra specificity
   so they win over the muted-span rule above). */
#tarjous .contact__item .contact__item-ic { background: var(--color-primary-soft); border-color: transparent; color: var(--color-accent); }

/* Intro collage: picture-in-picture like the dark feature section, but on the
   white section the inset frame matches the page (white) instead of ink. */
#esittely .collage__main { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 16px 40px rgba(8, 9, 11, 0.12); }
#esittely .collage__inset { border-color: var(--color-light-bg); }
/* Desktop: lay the smaller (top) image over the bottom-right of the tall main. */
@media (min-width: 880px) {
  #esittely .collage__inset { left: auto; right: -1.3rem; bottom: -1.3rem; width: 48%; }
}

/* Quote form: light card with a soft shadow so it lifts off the white section. */
#tarjous .form {
  background: var(--color-white);
  border: 1px solid rgba(20, 22, 26, 0.07);
  box-shadow: 0 10px 28px rgba(8, 9, 11, 0.10), 0 30px 64px rgba(8, 9, 11, 0.10);
}
#tarjous .field label { color: var(--color-on-light-heading); }
#tarjous .field input,
#tarjous .field select,
#tarjous .field textarea {
  background: #f5f7f8;
  border-color: rgba(20, 22, 26, 0.16);
  color: var(--color-on-light-heading);
}
#tarjous .field input::placeholder,
#tarjous .field textarea::placeholder { color: var(--color-on-light-muted); }
#tarjous .field--float label { color: var(--color-on-light-muted); }
#tarjous .field--float input:focus + label,
#tarjous .field--float input:not(:placeholder-shown) + label,
#tarjous .field--float textarea:focus + label,
#tarjous .field--float textarea:not(:placeholder-shown) + label,
#tarjous .field--float select:focus + label,
#tarjous .field--float select:not(:has(option[value=""]:checked)) + label { color: var(--color-primary); }
#tarjous .field--float input::placeholder,
#tarjous .field--float textarea::placeholder { color: transparent; }
#tarjous .field--float input:focus::placeholder,
#tarjous .field--float textarea:focus::placeholder { color: var(--color-on-light-muted); }
#tarjous .field input:focus,
#tarjous .field select:focus,
#tarjous .field textarea:focus {
  background: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
#tarjous .form__consent-note { color: var(--color-on-light-muted); }
#tarjous .field__error { color: var(--color-error); }

/* Trustbar (value promises) flips to white. The hero's lightning bottom edge is
   a clip-path that reveals whatever sits BEHIND the hero box (the dark page bg),
   so just colouring the trustbar left the zig-zag notch dark. Pull the white
   trustbar up under the hero (like #tyomme tucks under #huolto) and keep the hero
   painting on top, so the white fills the notch while the dark shape stays. */
.hero { z-index: 2; }
.trustbar {
  background: var(--color-light-bg);
  border-bottom-color: rgba(20,22,26,0.10);
  position: relative;
  z-index: 1;
}
.trust-item { color: var(--color-on-light-heading); }

/* Reference gallery (#tyomme): plain photos, no overlay/text/arrow. 3 x 2. */
.ref-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.ref-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}
.ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-soft); }
.ref-item:hover img { transform: scale(1.05); }
@media (min-width: 600px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 920px) { .ref-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }

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

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

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

.form { background: var(--color-surface); border: 1px solid var(--color-border); padding: clamp(1.7rem, 3vw, 2.5rem); border-radius: var(--radius-lg); }
.form__row { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: var(--font-heading); font-weight: 560; font-size: 0.88rem; color: var(--color-heading); }
.field label .req { color: var(--color-error); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.field input.invalid, .field textarea.invalid, .field select.invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(224,99,94,0.18); }

/* Floating label: label rests inside the field as a placeholder, then
   shrinks and rises to the top edge once the field is focused or filled. */
.field--float { position: relative; }
.field--float input,
.field--float select,
.field--float textarea { padding-top: 1.45rem; padding-bottom: 0.45rem; }
.field--float textarea { padding-top: 1.55rem; }
.field--float label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}
.field--float input:focus + label,
.field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label,
.field--float textarea:not(:placeholder-shown) + label,
.field--float select:focus + label,
.field--float select:not(:has(option[value=""]:checked)) + label {
  transform: translateY(-0.62rem) scale(0.72);
  color: var(--color-accent);
}
/* Hide the placeholder text while the label is resting over it; reveal any
   descriptive hint only once the label has floated up on focus. */
.field--float input::placeholder,
.field--float textarea::placeholder { color: transparent; transition: color 0.18s ease; }
.field--float input:focus::placeholder,
.field--float textarea:focus::placeholder { color: var(--color-text-faint); }
.field__error { color: var(--color-error-text); font-size: 0.8rem; min-height: 1em; }
.form__consent-note { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 1.2rem; line-height: 1.55; }
.form__consent-note a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; transition: color 0.2s ease; }
.form__consent-note a:hover { color: var(--color-primary); }
.form__status { margin-top: 1rem; font-size: 0.92rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); display: none; }
.form__status.ok { display: block; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.form__status.err { display: block; background: var(--color-error-bg); color: var(--color-error-text); border: 1px solid var(--color-error-border); }

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-ink-deep); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; border-top: 1px solid var(--color-border); }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); }
.footer__brand img { height: 46px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 32ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.footer__badge { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-strong); color: rgba(255,255,255,0.72); border-radius: var(--radius); }
.footer h3 { color: var(--color-white); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; font-family: var(--font-body); }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a, .footer__col span { font-size: 0.95rem; color: rgba(255,255,255,0.62); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer__contact-line svg { width: 16px; height: 16px; color: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 2rem; font-size: 0.85rem; }
.footer__legal { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__legal:hover { color: var(--color-accent); }
.footer__socials { display: flex; gap: 0.6rem; }
.footer__socials a { width: 38px; height: 38px; border: 1px solid var(--color-border-strong); display: grid; place-items: center; color: rgba(255,255,255,0.72); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border-radius: 0; }
.footer__socials a:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.footer__socials svg { width: 18px; height: 18px; }

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

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

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

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

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

.hero__poster { animation: heroZoom 1.7s var(--ease-soft) backwards; }
.hero__inner > * { animation: fadeUp 0.9s var(--ease-soft) both; }
.hero__rating { animation-delay: 0.1s; }
.hero h1 { animation-delay: 0.24s; }
.hero__lead { animation-delay: 0.42s; }
.hero__cta { animation-delay: 0.58s; }

/* ----------------------------- Media queries --------------------------- */
@media (min-width: 600px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card { aspect-ratio: 4 / 5; }
  .ba-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) {
  .feature-list { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; }
  .feature-list--3 { grid-template-columns: repeat(3, 1fr); gap: 1.8rem 2.6rem; }
  .section-head--split { grid-template-columns: 1.3fr 1fr; }
  .section-head--split .section-head__aside { padding-bottom: 0.4rem; }
}

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

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

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

/* ----- Mobile hero: left-aligned, larger heading ----- */
@media (max-width: 767px) {
  main { --hero-edge: clamp(30px, 9vw, 58px); }
  .hero {
    min-height: 94vh;
    min-height: 94dvh;
    text-align: left;
    align-items: center;
    padding: 6rem 0 3.25rem;
    /* Diagonal bottom edge: lower-left to higher-right, so the white trustbar
       behind it reveals a top edge that rises from left to right. */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-edge)), 0 100%);
  }
  .hero__inner { align-items: flex-start; max-width: 100%; }
  .hero__rating { align-self: flex-start; padding-block: 0.42rem; }
  .split__media--portrait img { aspect-ratio: 3 / 2; }
  .hero h1 {
    font-size: clamp(2.9rem, 10.5vw, 3.8rem);
    font-weight: 540;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 1.15rem 0 1.1rem;
    max-width: 15ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  /* Pull the white trustbar up under the hero so it fills the diagonal wedge,
     and pad the top so the value promises clear the slanted seam. */
  .trustbar { margin-top: calc(var(--hero-edge) * -1); padding-top: calc(clamp(1.5rem, 3vw, 2.1rem) + var(--hero-edge)); }
  .trustbar__inner { justify-content: flex-start; align-items: flex-start; gap: 1rem 2.6rem; }
  .trust-item { font-size: 1.1rem; }
  .trust-item svg { width: 24px; height: 24px; }

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

  /* Intro section: hide the photo collage on mobile */
  #esittely .collage--intro { display: none; }
}

@media (max-width: 520px) {
  .collage__inset { position: static; width: 100%; margin-top: 1rem; border: none; }
  .stat-badge__num { font-size: 1.8rem; }
}

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

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

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

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

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

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

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

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

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

/* Before / after: in-image work-quality tag (bottom-left of each slider) */
.ba-item { display: flex; flex-direction: column; }
.ba-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  font-family: var(--font-heading);
  font-weight: 560;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--color-white);
  background: rgba(8, 9, 11, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0.42rem 0.85rem;
  border-radius: 0;
  pointer-events: none;
}

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

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

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

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

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

/* ----------------------------- 404 error page -------------------------- */
.error-page {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-md);
  padding-block: var(--spacing-2xl);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 16vw, 9rem);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-accent);
  margin: 0;
}
.error-page h1 { margin: 0; }
.error-page p { color: var(--color-text-light); max-width: 46ch; margin: 0 auto; }
.error-page .btn { margin-top: var(--spacing-xs); }
.error-page__contact { font-size: 0.95rem; }
.error-page__contact a { color: var(--color-accent); }