/* =========================================================================
   KM-Detailing Oy - style.css
   Dark, premium automotive. Big light grotesk headings, near-black surfaces,
   blue brand accent (#0e5ff7, from the KM-Detailing logo), angular (chamfered /
   diagonal) edges.
   Order: Custom Properties -> Reset -> Base -> Typography -> Angular utils ->
   Layout -> Buttons -> Header/Nav -> Hero -> Trust -> Intro -> Services ->
   Why -> Dark feature -> Works -> Reviews -> CTA -> Form -> Footer ->
   Utilities -> Animations -> Media queries
   ========================================================================= */

/* ----------------------------- Custom Properties ----------------------- */
:root {
  /* Exclusive / minimalist monochrome. The bright brand blue is retired from
     the visual language and lives on only as the interaction-focus ring (a quiet
     brand nod + strong a11y contrast). The "brand fill" role is now a light
     silver (--color-primary) that carries dark text; --color-accent is a
     near-white highlight for links/icons on the near-black surfaces. */
  --color-primary: #e8eaee;       /* light silver fill — dark text sits on this */
  --color-primary-dark: #ced3da;  /* deeper silver (pressed / secondary fill) */
  --color-primary-soft: rgba(232, 234, 238, 0.09); /* faint light tint surfaces */
  --color-accent: #f4f6f8;        /* near-white — highlights/links on dark */
  --color-accent-soft: rgba(232, 234, 238, 0.16);
  --color-on-primary: #0b0c0e;    /* dark text/icons on the light fill */
  --color-focus: #3d6fd6;         /* brand-blue whisper — focus ring only */

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

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

  /* Text */
  --color-heading: #f4f6f8;       /* headings + strong text */
  --color-text: #d6dae1;          /* body text */
  --color-text-light: #9298a3;    /* muted body */
  --color-text-faint: #676c76;    /* faint labels */
  --color-white: #ffffff;

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

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

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

  /* Type system: Jost (geometric, Futura-ish) for all headings + display, set
     UPPERCASE with open tracking — the exclusive signature. Archivo carries the
     interactive/label layer (buttons, links, nav, eyebrows, chips) uppercase in
     a different voice. Hanken Grotesk stays as the readable body face. */
  --font-heading: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Nunito Sans", system-ui, -apple-system, sans-serif;  /* h1 + h2 */
  --font-ui: "Nunito Sans", system-ui, -apple-system, sans-serif;       /* buttons/links/labels */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ----------------------------- Typography ------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  margin: 0;
  color: var(--color-heading);
  line-height: 1.15;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;      /* the exclusive signature: light uppercase Jost */
  text-wrap: balance;
}
h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: 0.015em; line-height: 1.06; }
h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.1; }
h3 { font-size: clamp(0.98rem, 1.4vw, 1.12rem); font-weight: 500; letter-spacing: 0.07em; line-height: 1.28; }
h4 { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.1em; }

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

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

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

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

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

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

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-ink-deep); }
/* Tyomme: pull up under the dark section's diagonal so the wedge below the
   diagonal reads as the base page colour. */
#toitamme {
  background: var(--color-light-bg);
  z-index: 1;
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) + var(--edge));
}
/* Pinnoitus (dark, edge-both): pull it up under Miksi so its TOP diagonal wedge
   fills with Miksi's (lighter) background instead of the page base — this makes
   the top edge a clean diagonal that mirrors the section's bottom diagonal. The
   larger top padding keeps the content clear of the pulled-up diagonal. */
#pinnoitus {
  background: var(--color-black);
  margin-top: calc(var(--edge) * -1);
  padding-top: calc(var(--section-y) * 0.3 + 2 * var(--edge));
}
#arvostelut { background: var(--color-bg-lift); }
#miksi { background: var(--color-bg-lift); padding-bottom: calc(var(--section-y) + var(--edge)); }
/* Heron alla + yhteys: pure black bands. */
#meista { background: var(--color-black); }
#yhteys { background: var(--color-black); }
#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.55rem;
  padding: 1.1rem 1.9rem;
  border-radius: 0;                /* sharp corners — no rounding */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 54px;
  overflow: hidden;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
  isolation: isolate;
}
.btn svg { width: 17px; height: 17px; transition: transform 0.25s var(--ease-soft); }
.btn:active { transform: translateY(1px); }

/* Primary: light fill + dark text on the dark surfaces. On hover it inverts to an
   outline button — transparent fill, white 1px border, white text (200ms). */
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border: 1px solid var(--color-primary); }
.btn-primary:hover { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn-primary:hover svg { transform: translate(3px, -3px); }

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

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

.btn-block { width: 100%; }
.btn-sm { padding: 0.82rem 1.25rem; min-height: 46px; font-size: 0.72rem; letter-spacing: 0.13em; }

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

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

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

.nav { display: contents; }
.nav__links { display: flex; align-items: center; gap: 0.1rem; justify-self: center; }
.nav__actions { display: flex; align-items: center; gap: 0.4rem; justify-self: end; }
.nav__links a {
  position: relative;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.4rem;
  height: 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-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  padding-inline: 0.9rem 0.5rem;
  white-space: nowrap;
}
.nav__phone svg { width: 17px; height: 17px; color: var(--color-brand); }
/* Desktop navbar: no phone number (it stays inside the mobile drawer). */
@media (min-width: 981px) { .nav__phone { display: none; } }

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

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

/* ----------------------------- Hero ------------------------------------ */
.hero {
  position: relative;
  min-height: calc(100vh / var(--zoom-factor));
  min-height: calc(100dvh / var(--zoom-factor));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--pad-x) 6rem;
  overflow: hidden;
  background: var(--color-black);
  isolation: isolate;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--edge)),
    78% calc(100% - 0.5 * var(--edge)),
    68% calc(100% - 0.78 * var(--edge)),
    0 100%
  );
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Stronger, darker overlay: dark at the top fading toward the centre, plus the
     left/right edges darkened and fading toward the centre. */
  background:
    linear-gradient(to bottom, rgba(5,6,8,0.92) 0%, rgba(5,6,8,0.55) 28%, rgba(5,6,8,0.4) 50%, rgba(0,0,0,0.72) 74%, rgba(0,0,0,0.99) 100%),
    linear-gradient(to right, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.14) 24%, rgba(5,6,8,0) 50%, rgba(5,6,8,0.14) 76%, rgba(5,6,8,0.68) 100%);
}
.hero__poster { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; z-index: 2; transition: opacity 0.9s ease; }
/* Hero background video sits below the poster; the poster fades out once the
   player is painting frames (JS toggles .video-ready on .hero__media). The
   source clip is a low-res vertical phone video, so the dark scrim on
   .hero__media::after (z-index 3) keeps it reading as ambient motion. */
.hero__video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: 1; filter: saturate(1.06) contrast(1.03); }
.hero__media.video-ready .hero__poster { opacity: 0; }

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

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

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

/* ----------------------------- Trust strip ----------------------------- */
.trustbar { background: var(--color-black); padding-block: clamp(1.5rem, 3vw, 2.1rem); }
.trustbar__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.9rem 2.6rem; }
.trust-item { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); }
.trust-item svg { width: 18px; height: 18px; color: var(--color-brand); flex-shrink: 0; }

/* ----------------------------- Intro / split --------------------------- */
.split { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.split__media { position: relative; }
.split__media img { width: 100%; object-fit: cover; border-radius: 2px; }
.split__media--portrait img { aspect-ratio: 3 / 2; height: auto; }
/* Meistä photo (portrait van in the hall): bias the 3:2 crop toward the vehicle */
#meista .split__media--portrait img { object-fit: cover; object-position: center 58%; }

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

/* 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-brand); color: var(--color-white); 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%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.checklist { display: grid; gap: 0; margin-top: 1.8rem; }
.check { display: grid; grid-template-columns: 30px 1fr; gap: 1rem; align-items: start; padding: 1.15rem 0; border-top: 1px solid var(--color-border); }
.check:last-child { border-bottom: 1px solid var(--color-border); }
.check__mark { width: 30px; height: 30px; background: var(--color-brand); color: var(--color-white); display: grid; place-items: center; flex-shrink: 0; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.check__mark svg { width: 16px; height: 16px; }
.check b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); margin-bottom: 0.2rem; }
.check span:not(.check__mark) { color: var(--color-text-light); font-size: 0.96rem; }

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

.collage { position: relative; }
.collage__main { display: block; width: 100%; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); }
.collage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; clip-path: polygon(0 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.68) 100%); }
.collage__badge { position: absolute; z-index: 2; top: -1.1rem; right: -0.6rem; background: var(--color-primary); color: var(--color-on-primary); padding: 0.9rem 1.2rem; line-height: 1; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); box-shadow: var(--shadow); }
.collage__badge b { font-family: var(--font-heading); font-size: 1.55rem; letter-spacing: 0.01em; font-weight: 500; text-transform: uppercase; }
.collage__badge span { display: block; font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.35rem; }

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

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

/* -------------- Palvelut + Työmme: white sections ---------------------- */
/* Both sections flip to a white background. Their section-head copy switches to
   the on-light text tokens; the image cards/tiles inside keep their own dark
   overlay + white text, so only the heading + lead text needs recolouring.
   #palvelut overrides .section--alt here; #toitamme sets its white background in
   the layout block above (it also carries the negative top margin). */
#palvelut { background: var(--color-light-bg); }
#palvelut .eyebrow, #toitamme .eyebrow { color: var(--color-on-light-muted); }
#palvelut h2, #toitamme h2 { color: var(--color-on-light-heading); }
#palvelut .section-head__aside, #toitamme .section-head__aside { color: var(--color-on-light-muted); }
#palvelut .section-head__aside p, #toitamme .section-head__aside p { color: var(--color-on-light-muted); }
#palvelut .link-arrow, #toitamme .link-arrow { color: var(--color-on-light-heading); }
#palvelut .link-arrow:hover, #toitamme .link-arrow:hover { color: var(--color-brand); }

/* ----------------------------- 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 { display: none; }   /* name-initial avatars removed per request */
.review__name { font-family: var(--font-heading); font-weight: 560; color: var(--color-heading); font-size: 0.95rem; }
.review__src { font-size: 0.82rem; color: var(--color-text-light); }

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

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

/* ----------------------------- CTA banner ------------------------------ */
.cta-banner { background: var(--color-ink); color: var(--color-text); position: relative; overflow: hidden; border-block: 1px solid var(--color-border); }
.cta-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 22px); }
.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.2rem auto 2.2rem; max-width: 38em; color: var(--color-text-light); }

/* ----------------------------- Contact / form -------------------------- */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.contact__info { display: grid; gap: 1.3rem; margin-top: 2rem; }
.contact__item { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.contact__item-ic { width: 46px; height: 46px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-brand); display: grid; place-items: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.contact__item-ic svg { width: 22px; height: 22px; color: var(--color-brand); }
.contact__item b { font-family: var(--font-heading); font-weight: 560; display: block; color: var(--color-heading); font-size: 0.95rem; }
.contact__item a, .contact__item span { color: var(--color-text-light); }
.contact__item a:hover { color: var(--color-accent); }
.contact__people { display: grid; gap: 0.55rem; margin-top: 0.2rem; }
.contact__person { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.contact__person b { color: var(--color-heading); font-family: var(--font-heading); font-weight: 560; font-size: 0.92rem; }
.contact__person a { color: var(--color-text-light); font-size: 0.92rem; }
.contact__person a:hover { color: var(--color-accent); }
.contact__channels { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.channel-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.15rem; border: 1px solid var(--color-border-strong); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-ui); color: var(--color-text); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.channel-btn svg { width: 18px; height: 18px; }
.channel-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); }

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

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

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

/* ----------------------------- Footer ---------------------------------- */
.footer { background: var(--color-black); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; position: relative; border-top: 1px solid var(--color-border); }
.footer__top { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--color-border); }
.footer__brand img { height: 46px; width: auto; margin-bottom: 1.3rem; }
.footer__brand p { font-size: 0.95rem; max-width: 32ch; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.footer__badge { font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.75rem; border: 1px solid var(--color-border-strong); color: rgba(255,255,255,0.72); clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px); }
.footer h3 { color: var(--color-white); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; font-family: var(--font-ui); }
.footer__col ul { display: grid; gap: 0.7rem; }
.footer__col a, .footer__col span { font-size: 0.95rem; color: rgba(255,255,255,0.62); transition: color 0.2s ease; }
.footer__col a:hover { color: var(--color-accent); }
.footer__contact-line { display: flex; gap: 0.55rem; align-items: flex-start; }
.footer__contact-line svg { width: 16px; height: 16px; color: var(--color-brand); margin-top: 4px; flex-shrink: 0; }
.footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding-top: 2rem; font-size: 0.85rem; }
.footer__bottom > :nth-child(1) { justify-self: start; text-align: left; }
.footer__bottom > :nth-child(2) { justify-self: center; text-align: center; }
.footer__bottom > :nth-child(3) { justify-self: end; text-align: right; }
.footer__credit a { font-weight: 700; }
@media (max-width: 600px) { .footer__bottom { grid-template-columns: 1fr; } .footer__bottom > :nth-child(1), .footer__bottom > :nth-child(2), .footer__bottom > :nth-child(3) { justify-self: center; text-align: center; } }
.footer__legal { color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
.footer__legal:hover { color: var(--color-accent); }
.footer__socials { display: flex; gap: 0.6rem; }
.footer__socials a { width: 38px; height: 38px; border: 1px solid var(--color-border-strong); display: grid; place-items: center; color: rgba(255,255,255,0.72); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.footer__socials a:hover { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.footer__socials svg { width: 18px; height: 18px; }

/* ----------------------------- Error page ------------------------------ */
.error-page { min-height: calc(72vh / var(--zoom-factor)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-block: 9rem 4rem; }
.error-page h1 { font-size: clamp(3.5rem, 13vw, 8rem); margin-bottom: 0.5rem; font-weight: 460; color: var(--color-accent); }
.error-page p { color: var(--color-text-light); max-width: 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); }
  .work-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); }
  .work-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--intro { grid-template-columns: 0.9fr 1.1fr; }
  .split--reverse .split__media { order: 2; }
  .why__grid { grid-template-columns: 1fr 1fr; }
  .dark__grid { grid-template-columns: 1.05fr 0.95fr; }
  .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) {
  /* Six services in a clean, even 3 × 2 grid. */
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
}

@media (max-width: 980px) {
  .menu-toggle { display: flex; }
  .header { will-change: auto; }
  .header__inner { display: flex; justify-content: space-between; }
  .nav {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(360px, 84vw);
    background: var(--color-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: 0.98rem; letter-spacing: 0.12em; border-bottom: 1px solid var(--color-border); color: var(--color-text); opacity: 1; }
  .nav__links a::after { display: none; }
  .nav__actions { flex-direction: column; align-items: stretch; gap: 0; width: 100%; justify-self: auto; }
  .nav__phone { color: var(--color-text); padding: 1.2rem 0 0; font-size: 1.05rem; }
  .nav__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%; }
  /* Mobile: strip the pill — no border, no background, no blur */
  .hero__rating {
    align-self: flex-start;
    padding: 0;
    border: none;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .split__media--portrait img { aspect-ratio: 3 / 2; }
  .hero h1 {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.015em;
    margin: 2.1rem 0 1.2rem;
    max-width: 16ch;
  }
  .hero__lead { margin: 0 0 2rem; max-width: 40ch; }
  .hero__cta { justify-content: flex-start; }

  /* Darker top, lighter bottom fade on mobile */
  .hero__media::after {
    background:
      linear-gradient(to bottom, rgba(5,6,8,0.99) 0%, rgba(5,6,8,0.82) 16%, rgba(5,6,8,0.5) 34%, rgba(5,6,8,0.38) 52%, rgba(0,0,0,0.5) 74%, rgba(0,0,0,0.72) 100%),
      linear-gradient(to right, rgba(5,6,8,0.68) 0%, rgba(5,6,8,0.14) 24%, rgba(5,6,8,0) 50%, rgba(5,6,8,0.14) 76%, rgba(5,6,8,0.68) 100%);
  }

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

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

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

  .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__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.5rem; font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; 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; }
}