/* =========================================================================
   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: green taken from the Master Renovation logo (deep, vivid green),
     sitting on LIGHT surfaces. --color-primary carries white text; --color-accent
     is a readable green used for links/highlights on white. Dark/green sections
     (.hero, .dark) locally raise --color-accent to a brighter green (see overrides). */
  --color-primary: #1f9d43;       /* brand green — white text sits on this */
  --color-primary-dark: #157a33;  /* darker green (hover sweep / pressed) */
  --color-primary-soft: rgba(31, 157, 67, 0.12); /* faint green tint surfaces */
  --color-accent: #15863a;        /* readable green — accents/links on LIGHT surfaces */
  --color-accent-soft: rgba(21, 134, 58, 0.15);
  --color-on-primary: #ffffff;    /* text/icons on green surfaces */

  /* Surfaces — LIGHT system (base -> alt tint -> elevated). The two --color-ink
     tokens are repurposed as DEEP GREEN bands (notice, feature section, hero scrim). */
  --color-bg: #ffffff;            /* page base (light) */
  --color-bg-alt: #eef5f0;        /* alt sections (cool light green tint) */
  --color-surface: #ffffff;       /* elevated cards */
  --color-surface-2: #f3f8f4;     /* form inputs / floating */
  --color-ink: #103a23;           /* deep green band (notice, feature, sweep) */
  --color-ink-deep: #0c2c1b;      /* deepest green (hero scrim base) */

  /* Text — dark on light */
  --color-heading: #14201a;       /* headings + strong text (dark green-ink) */
  --color-text: #3a463f;          /* body text */
  --color-text-light: #5e6a63;    /* muted body */
  --color-text-faint: #8b958e;    /* faint labels */
  --color-white: #ffffff;

  /* On-light surfaces — the Palvelut + Työmme sections stay 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: #14201a;  /* headings on white */
  --color-on-light-muted: #5a655e;    /* muted text on white */

  /* Borders / hairlines — light */
  --color-border: #e4ebe6;        /* hairline on light */
  --color-border-strong: #d2ddd5;
  --color-border-dark: #c3d0c7;   /* slightly stronger hairline */

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

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

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

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

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

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

  /* Shadows - soft + green-tinted on light surfaces */
  --shadow-sm: 0 1px 2px rgba(16, 40, 26, 0.06);
  --shadow: 0 2px 8px rgba(16, 40, 26, 0.07), 0 14px 34px rgba(16, 40, 26, 0.10);
  --shadow-lg: 0 8px 22px rgba(16, 40, 26, 0.10), 0 30px 60px rgba(16, 40, 26, 0.14);

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

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

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

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

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

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

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

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

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

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

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

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

/* ----------------------------- Angular utilities ----------------------- */
.clip-chamfer { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
.clip-tr { clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.clip-bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg))); }

.edge-top { clip-path: polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%); }
.edge-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), 0 100%); }
.edge-both { clip-path: polygon(0 var(--edge), 100% 0, 100% calc(100% - var(--edge)), 0 100%); }

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

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
/* Tyomme: pull up under the dark section's diagonal so the wedge below the
   diagonal reads as the base page colour. */
#tyomme {
  background: var(--color-bg);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
#meista { background: #17191e; }
/* Huolto: pull up under Miksi-osion alapuoli so the dark section's top diagonal
   wedge reads as the lighter #meista colour instead of the page base. */
#huolto {
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + 2 * var(--edge));
}
#arvostelut { background: var(--color-bg-alt); }
#tarjous { background: var(--color-bg); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.feature-list { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
.feature { display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start; }
.feature__icon { width: 46px; height: 46px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-accent); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.feature__icon svg { width: 23px; height: 23px; }
.feature h3 { margin-bottom: 0.3rem; }
.feature p { color: var(--color-text-light); font-size: 0.97rem; }
.intro__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

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

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

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

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

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

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

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

.ba-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.4rem; }
.ba-figure { position: relative; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); 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; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }

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

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

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

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__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; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.contact__item-ic svg { width: 22px; height: 22px; }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-accent); }
.contact__people { display: grid; gap: 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; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.channel-btn svg { width: 18px; height: 18px; }
.channel-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* 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;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  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; }
}

/* =========================================================================
   MASTER RENOVATION — TEEMA-YLIAJOT (vaalea + vihreä)
   Tämä lohko EI muuta seedin rakennetta eikä animaatioita. Se vain sovittaa
   muutaman komponentin, jotka seedissä olettivat tumman taustan, vaaleaan
   teemaan ja brändin vihreään (Master Renovation -logon väri).
   ========================================================================= */

/* --- Logo: aina vihreä, myös ylhäällä heron päällä (käyttäjän pyyntö) --- */
.logo__img { height: 46px; width: auto; }
.logo__img--light { display: none; }
.logo__img--dark { display: inline-block; }

/* --- Hero: vihreäsävyinen overlay, hieman tummempi -> teksti erottuu paremmin --- */
.hero { --color-accent: #5cd081; }
.hero__media::after {
  background:
    linear-gradient(to bottom, rgba(8,22,14,0.72) 0%, rgba(8,22,14,0.60) 44%, rgba(8,22,14,0.86) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(8,22,14,0.26) 30%, rgba(8,22,14,0.70) 100%);
}
/* Hero-pilleri: yksinkertainen sijainti-merkintä (kuvake + Pääkaupunkiseutu) */
.hero__rating-text em { font-style: normal; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--color-white); letter-spacing: -0.01em; }

/* --- Palvelut-osio: pienennetty yläpadding --- */
#palvelut { padding-top: calc(var(--section-y) * 0.5); }

/* --- Miksi-osio: seedissä kovakoodattu tumma -> vaalea vihreä tintti --- */
#meista { background: var(--color-bg-alt); }

/* --- Feature-osio (#huolto): near-black -> brändin vihreä bändi, valkoinen teksti --- */
.dark { --color-accent: #5cd081; background: linear-gradient(160deg, #168544 0%, #0f5b30 58%, #0c4525 100%); }
/* Pienennä osion yläpaddingia (säilytä diagonaalin vaatima 2*--edge geometria) */
#huolto { padding-top: calc(var(--section-y) * 0.4 + 2 * var(--edge)); }
.dark .dark__point { border-color: rgba(255,255,255,0.20); }
/* Stats-laatikot: valkoiset reunat + valkoiset tekstit */
.dark .stats { background: transparent; border: none; gap: 0.85rem; overflow: visible; }
.dark .stat { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.85); }
.dark .stat__num { color: #ffffff; }
.dark .stat__label { color: rgba(255,255,255,0.9); }
.dark .collage__inset { border-color: #0f5b30; }
.dark .collage__badge { background: #ffffff; color: var(--color-primary); }

/* --- CTA-banneri: valkoinen nappi vihreällä bannerilla (oli tumma napilla) --- */
.cta-banner .btn-primary { background: #ffffff; color: var(--color-primary); }
.cta-banner .btn-primary::before { background: rgba(0,0,0,0.08); }
.cta-banner .btn-primary:hover { color: var(--color-primary-dark); }

/* --- Footer: tumma -> vaalea (vihreä logo + tummat tekstit), käyttäjän vaalean teeman mukaisesti --- */
.footer { background: var(--color-bg-alt); color: var(--color-text-light); border-top: 1px solid var(--color-border); }
.footer__top { border-bottom: 1px solid var(--color-border); }
.footer__brand p { color: var(--color-text-light); }
.footer__badge { color: var(--color-text-light); border-color: var(--color-border-strong); }
.footer h3 { color: var(--color-heading); }
.footer__col a, .footer__col span { color: var(--color-text-light); }
.footer__col a:hover { color: var(--color-primary); }
.footer__contact-line svg { color: var(--color-primary); }
.footer__bottom { color: var(--color-text-light); }
.footer__legal { color: var(--color-text); }
.footer__legal:hover { color: var(--color-primary); }

/* --- Työmme-galleria: containerin sisällä (sama reunaväli kuin muulla sisällöllä),
   tiiviit välit. HUOM: <figure>-elementillä on selaimen oletusmarginaali
   (margin-inline: 40px), joka kavensi kuvat. Se nollataan alla. */
.gallery-grid {
  display: grid;
  gap: 6px;                              /* pienet välit */
  grid-template-columns: 1fr;            /* mobiili: 1 sarake (containerin leveys) */
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gallery-item { margin: 0; position: relative; overflow: hidden; background: var(--color-ink); }
.gallery-item img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; display: block; transition: transform 0.7s var(--ease-soft); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item figcaption {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  font-family: var(--font-heading); font-weight: 560; font-size: 0.82rem; letter-spacing: 0.02em;
  color: var(--color-white); background: rgba(8,20,13,0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 0.42rem 0.85rem; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===================== 404 / error page ============================= */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
}
.error-page__code {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(4rem, 14vw, 8rem);
  color: var(--color-primary);
  letter-spacing: -0.03em;
}
.error-page p { color: var(--color-text-light); max-width: 46ch; margin: 0 auto; }
.error-page .btn { margin-top: var(--spacing-xs); }