/* ===================================================================
   Pianonkanto.fi — style.css
   Order: Custom Properties → Reset → Base → Typography → Layout →
   Header/Nav → Hero → Trustbar → Feature → Services → Ribbon →
   Why → Dark feature → Cases → Reviews → CTA → Contact → Footer →
   Utilities → Animations
=================================================================== */

/* ---------- Custom Properties ---------- */
:root {
  --color-primary: #FF4C00;      /* brand orange (pianonkanto.fi) */
  --color-primary-dark: #D93F00; /* darker orange for hovers/fills */
  --color-accent: #E02B20;       /* brand red accent */

  /* Desaturated navy blue — the secondary surface, sampled from the reference.
     Replaces the old near-black so the whole site reads lighter and bluer. */
  --color-navy: #2A3342;         /* main navy section surface */
  --color-navy-2: #384455;       /* elevated navy / lines on navy */
  --color-navy-3: #4A586C;       /* hairline borders on navy */
  --color-navy-deep: #232B38;    /* deepest navy — footer */
  --color-ink: #1E2532;          /* dark blue-ink: buttons, logo keys, avatars */

  /* aliases kept so existing rules using --color-black resolve to navy */
  --color-black: var(--color-navy);
  --color-black-2: var(--color-navy-2);
  --color-black-3: var(--color-navy-3);

  --color-text: #1B2330;         /* main text — blue-cast charcoal */
  --color-text-light: #5B6573;   /* muted text */
  --color-text-onlight: #2C3340;

  --color-bg: #F4F6F9;           /* light page background — near white, cool */
  --color-bg-alt: #E7EDF4;       /* soft blue-grey alternating sections */
  --color-bg-tint: #EEF2F7;      /* faint blue tint */
  --color-surface: #FFFFFF;      /* white cards */
  --color-border: #DCE2EA;       /* cool light border */

  --font-heading: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --max-width: 1240px;
  --wrap-width: 1500px;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 7rem;

  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;

  /* blue-tinted layered shadows */
  --shadow-sm: 0 2px 8px rgba(34,43,60,0.06), 0 6px 18px rgba(34,43,60,0.06);
  --shadow-md: 0 8px 24px rgba(34,43,60,0.09), 0 18px 50px rgba(34,43,60,0.09);
  --shadow-lg: 0 20px 60px rgba(28,36,52,0.18);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --pad-x: clamp(1.25rem, 5vw, 3rem);

  /* diagonal section dividers */
  --slant: clamp(2.2rem, 4.5vw, 4.5rem);  /* vertical offset of a diagonal cut */
  --accent: 9px;                          /* thickness of orange accent line */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Typography ----------
   Oswald is condensed and tall — used uppercase with a hair of tracking
   for an editorial, elegant feel. Weights kept light for minimalism. */
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.04; font-weight: 600; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.7rem, 6.4vw, 5rem); font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; }
h2 { font-size: clamp(2.05rem, 4vw, 3.35rem); font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; }
p { color: var(--color-text-light); }

/* eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-heading);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-text-light);
  margin-bottom: 1.2rem;
}
.eyebrow i {
  width: 26px; height: 1px;
  background: var(--color-primary);
  display: inline-block;
}
.eyebrow-light { color: rgba(255,255,255,0.7); }
.eyebrow-light i { background: var(--color-primary); }

/* ---------- Layout ---------- */
.wrap, .nav-inner, .hero-inner, .trustbar-inner, .feature-grid,
.section-head, .cards, .ribbon-inner, .why-grid, .dark-feature-inner,
.stats, .case-grid, .reviews-head, .trust-row, .review-grid,
.cta-yellow-inner, .contact-grid, .footer-inner, .footer-bottom {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
}

section { position: relative; }

/* generic vertical rhythm for light sections */
.feature, .services, .why, .cases, .reviews, .contact {
  padding-block: clamp(3.5rem, 8vw, var(--spacing-2xl));
  padding-inline: var(--pad-x);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 500; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 1rem 1.7rem;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.btn .ico-arrow { transition: transform 0.2s ease; }
.btn:hover .ico-arrow { transform: translateX(3px) translateY(-3px); }
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.9rem; }
.btn-block { width: 100%; justify-content: center; padding-block: 1.05rem; }

.btn-primary { background: var(--color-primary); color: var(--color-ink); }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-primary-dark);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.btn-primary:hover::before { transform: scaleX(1); }

.btn-dark { background: var(--color-ink); color: #fff; }
.btn-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.btn-dark:hover { color: var(--color-ink); }
.btn-dark:hover::before { transform: scaleX(1); }

.btn-ghost {
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

.btn-outline {
  background: transparent; color: var(--color-text);
  border: 1.5px solid var(--color-border);
  padding: 0.8rem 1.3rem;
}
.btn-outline:hover { border-color: var(--color-ink); color: var(--color-ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 2px;
  transition: gap 0.2s ease;
}
.link-arrow:hover { gap: 0.7rem; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px; border-radius: 0;
}

/* ---------- Header / fixed top bar ----------
   Transparent with light text over the hero; transitions to a solid white
   bar with dark text once scrolled. The bar itself is translated in/out by
   script.js, tracking scroll direction at the same pace as the scroll. */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  padding-inline: var(--pad-x);
  background: transparent;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  will-change: transform;
}
.nav-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: 1rem;
}

/* --- transparent (top of page, over dark hero): light text --- */
.header .logo-text { color: #fff; }
.header .nav a,
.header .nav-phone { color: #fff; }
.header .nav-phone .ico { color: var(--color-primary); }
.header .nav a:hover,
.header .nav-phone:hover { color: var(--color-primary); }
.header .menu-toggle span { background: #fff; }

/* --- solid (scrolled): white bar, dark text --- */
.header.scrolled {
  background: var(--color-surface);
  box-shadow: 0 2px 22px rgba(15,16,20,0.09);
}
.header.scrolled .logo-text,
.header.scrolled .nav a,
.header.scrolled .nav-phone { color: var(--color-text); }
.header.scrolled .nav a:hover,
.header.scrolled .nav-phone:hover { color: var(--color-primary-dark); }
.header.scrolled .menu-toggle span { background: var(--color-ink); }

.logo { display: inline-flex; align-items: center; gap: 0.6rem; transition: opacity 0.25s ease; }
.logo:hover { opacity: 0.82; }
.logo-mark { display: inline-flex; flex: none; }
.logo-text {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.42rem;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-text);
}
.logo-dot { color: var(--color-primary); }

.nav { display: flex; gap: 0.5rem; margin-inline: auto; }
.nav a {
  position: relative;
  font-family: var(--font-heading); font-weight: 500; font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-text);
  padding: 0.5rem 0.9rem; border-radius: 0;
  transition: color 0.3s ease;
}
.nav a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.32rem;
  height: 1.5px; background: var(--color-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.nav a:hover { color: var(--color-primary-dark); }
.nav a:hover::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem;
  color: var(--color-text); transition: color 0.3s ease;
}
.nav-phone .ico { color: var(--color-primary); }
.nav-phone:hover { color: var(--color-primary-dark); }

.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-toggle span { width: 24px; height: 2.5px; background: var(--color-ink); transition: transform 0.3s ease, opacity 0.2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-menu {
  flex-direction: column; gap: 0.2rem;
  margin-inline: calc(-1 * var(--pad-x));
  padding: 0.7rem var(--pad-x) 1.1rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 16px 32px rgba(15,16,20,0.12);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu a { color: var(--color-text); font-family: var(--font-heading); font-weight: 600; padding: 0.78rem 0.4rem; border-radius: 0; }
.mobile-menu a:hover { background: var(--color-bg); color: var(--color-primary-dark); }
.mobile-menu .btn { justify-content: center; margin-top: 0.5rem; }
.mobile-menu .mobile-phone { color: var(--color-primary-dark); text-align: center; font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  position: relative; z-index: 2; min-height: 97vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(7rem, 14vh, 10rem) var(--pad-x) calc(clamp(4rem, 9vh, 7rem) + var(--slant));
  background: var(--color-black);
  overflow: hidden;
  /* photo forms its own diagonal bottom edge — deeper on the left */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
/* thin orange line tracing the hero's diagonal bottom */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(
    0 calc(100% - var(--accent)),
    100% calc(100% - var(--slant) - var(--accent)),
    100% calc(100% - var(--slant)),
    0 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/kuvat/hero.avif') center 42% / cover no-repeat;
  opacity: 0.95;
  transform: scale(1.08);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(28,36,52,0.24), rgba(30,38,54,0.58) 78%),
    linear-gradient(to bottom, rgba(30,38,54,0.38), rgba(34,42,58,0.50) 45%, rgba(38,48,66,0.90));
}
.hero-inner { position: relative; z-index: 2; max-width: 980px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-heading); font-weight: 500; font-size: 0.85rem;
  color: #f3f3f0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  padding: 0.5rem 1rem; border-radius: 0;
  margin-bottom: 1.8rem;
}
.hero h1 { color: #fff; margin-bottom: 1.6rem; font-weight: 400; }
.hl { color: var(--color-primary); white-space: nowrap; }
.hero .lead {
  color: rgba(244,244,240,0.82); font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  max-width: 660px; margin: 0 auto 2.2rem; line-height: 1.6;
}
.cta-group { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Trustbar — light reference marquee ----------
   A light band under the dark hero. Company logos scroll in a seamless loop,
   muted to a soft greyscale wash by default. Hovering the strip pauses the
   scroll, and the hovered logo blooms back to full colour over 200ms. The
   strip dissolves into the background at both edges via a mask gradient. */
.trustbar {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--color-surface);
  /* slide up under the hero so its white fills the diagonal cut seamlessly */
  margin-top: calc(-1 * var(--slant));
  padding-block: calc(clamp(2.6rem, 5.5vw, 3.8rem) + var(--slant)) clamp(2.6rem, 5.5vw, 3.8rem);
  text-align: center;
}
.trustbar-label {
  font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-light); margin-bottom: clamp(1.7rem, 3vw, 2.4rem);
}
.trustbar-inner { position: relative; z-index: 2; padding-inline: 0; }
/* seamless logo marquee — two identical halves, translated by -50% */
.trustbar-marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.trustbar-track {
  display: flex; align-items: center; width: max-content;
  animation: trust-marquee 40s linear infinite;
  will-change: transform;
}
/* hover or keyboard-focus anywhere on the strip freezes the scroll */
.trustbar-marquee:hover .trustbar-track,
.trustbar-marquee:focus-within .trustbar-track { animation-play-state: paused; }
.trustbar-logo {
  flex: none; display: flex; align-items: center;
  padding-inline: clamp(1.5rem, 3.5vw, 3.25rem);
}
/* default: desaturated + lightened to a soft wash; hover restores full colour */
.trustbar-logo img {
  height: 30px; width: auto; opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.trustbar-logo img:hover { opacity: 1; filter: grayscale(0); }
.trustbar-logo .logo-oamk { height: 32px; }
.trustbar-logo .logo-fmusiikki { height: 22px; }
.trustbar-logo .logo-eero { height: 40px; }
.trustbar-logo .logo-kullas { height: 28px; }
@keyframes trust-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .trustbar-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 1.4rem; }
  .trustbar-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Feature ---------- */
.feature { background: var(--color-surface); }
.feature-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature-media { position: relative; }
.feature-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; }
.feature-badge {
  position: absolute; right: clamp(-0.5rem, 1vw, 1.2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--color-primary); color: var(--color-ink);
  padding: 0.9rem 1.2rem; border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.feature-badge strong { font-family: var(--font-heading); font-size: 1.9rem; line-height: 1; }
.feature-badge span { font-size: 0.78rem; line-height: 1.2; font-weight: 500; }

.feature-text h2 { margin-bottom: 1.2rem; }
.feature-text > p { margin-bottom: 1.8rem; font-size: 1.05rem; max-width: 46ch; }
.feature-points { display: grid; gap: 1.3rem; margin-bottom: 2rem; }
.feature-points > div { display: flex; gap: 1rem; align-items: flex-start; }
.fp-ico {
  flex: none; width: 48px; height: 48px; border-radius: 0;
  display: grid; place-items: center;
  background: var(--color-primary); color: var(--color-ink);
}
.feature-points h3 { margin-bottom: 0.2rem; }
.feature-points p { font-size: 0.96rem; }

/* ---------- Section head (shared) ---------- */
.section-head {
  display: grid; grid-template-columns: 1fr; gap: 1.5rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.section-head h2 { max-width: 24ch; }
.section-head-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }
.section-head-aside p { font-size: 1.05rem; max-width: 44ch; }

/* ---------- Services ----------
   Light, minimalist cards: photo on top, white body, dark text. Far cleaner
   and brighter than the old full-bleed dark overlay cards. */
.services {
  position: relative;
  background: var(--color-bg-alt);
  /* extra top room for the white wedge sweeping down from the feature above */
  padding-top: calc(clamp(3.5rem, 8vw, var(--spacing-2xl)) + var(--slant));
}
/* the white feature section above dips in on a diagonal — deeper on the right */
.services::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--color-surface);
  clip-path: polygon(0 0, 100% 0, 100% var(--slant));
}
/* thin orange line tracing that diagonal */
.services::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% var(--slant), 100% calc(var(--slant) + var(--accent)), 0 var(--accent));
}
.services .section-head, .services .cards { position: relative; z-index: 2; }
.cards { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.card-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
}
.card-img::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform 0.6s ease;
}
.card-body { position: relative; padding: 1.55rem 1.6rem 1.7rem; }
.card-body::before {
  content: ""; position: absolute; left: 1.6rem; top: 0;
  width: 34px; height: 3px; background: var(--color-primary);
  transition: width 0.3s ease;
}
.card-body h3 { color: var(--color-text); margin-bottom: 0.4rem; }
.card-body p { color: var(--color-text-light); font-size: 0.95rem; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card:hover .card-img::before { transform: scale(1.06); }
.card:hover .card-body::before { width: 64px; }

/* ---------- Ribbon (dark CTA banner) ---------- */
.ribbon { padding: 0 var(--pad-x) clamp(1rem, 3vw, 1.5rem); background: var(--color-bg-alt); }
.ribbon-inner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
  background: var(--color-navy); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.8rem);
}
/* orange diagonal slash accent at the left edge */
.ribbon-inner::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1.4rem;
  background: var(--color-primary);
  clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
}
.ribbon-ico { flex: none; width: 52px; height: 52px; border-radius: 0; background: var(--color-primary); display: grid; place-items: center; }
.ribbon-text { flex: 1 1 340px; }
.ribbon-text h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.4rem; }
.ribbon-text p { color: rgba(244,244,240,0.74); font-size: 0.98rem; max-width: 62ch; }

/* ---------- Why ----------
   Kept on the base page bg so the dark-feature's diagonal cut below reads
   seamlessly into it. */
.why { background: var(--color-bg); }
.why-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.why-text h2 { margin-bottom: 1.2rem; max-width: 24ch; }
.why-text > p { margin-bottom: 2rem; font-size: 1.05rem; max-width: 50ch; }
.checklist { display: grid; gap: 1rem; }
.checklist li { display: flex; align-items: center; gap: 0.85rem; font-family: var(--font-heading); font-weight: 500; font-size: 1.05rem; color: var(--color-text); }
.chk { flex: none; width: 28px; height: 28px; border-radius: 0; background: var(--color-primary); display: grid; place-items: center; }
.why-media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---------- Dark feature ----------
   A slanted navy "parallelogram" band — both edges cut on the diagonal and
   traced by a thin orange accent line. The signature creative divider. */
.dark-feature {
  position: relative; z-index: 2;
  background: var(--color-navy); color: #fff;
  padding: calc(clamp(3.5rem, 8vw, 6.5rem) + var(--slant)) var(--pad-x)
           calc(clamp(3rem, 6vw, 4.5rem) + var(--slant));
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
}
.dark-feature::before {  /* orange line tracing the top diagonal */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(0 var(--slant), 100% 0, 100% var(--accent), 0 calc(var(--slant) + var(--accent)));
}
.dark-feature::after {  /* orange line tracing the bottom diagonal */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(
    0 calc(100% - var(--accent)),
    100% calc(100% - var(--slant) - var(--accent)),
    100% calc(100% - var(--slant)),
    0 100%);
}
.dark-feature-inner { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.df-text h2 { color: #fff; margin-bottom: 1.3rem; max-width: 26ch; }
.df-text > p { color: rgba(244,244,240,0.74); margin-bottom: 2rem; font-size: 1.05rem; max-width: 52ch; }
.df-points { display: grid; gap: 1.6rem; }
.df-points > div { display: flex; gap: 1rem; align-items: flex-start; }
.df-ico { flex: none; width: 48px; height: 48px; border-radius: 0; background: rgba(255,76,0,0.14); border: 1px solid rgba(255,76,0,0.34); display: grid; place-items: center; }
.df-points h3 { color: #fff; margin-bottom: 0.25rem; }
.df-points p { color: rgba(244,244,240,0.66); font-size: 0.95rem; }

.df-media { position: relative; min-height: 360px; }
.df-media img { position: absolute; border-radius: var(--radius); box-shadow: var(--shadow-lg); object-fit: cover; }
.df-img-a { width: 72%; top: 0; left: 0; aspect-ratio: 3/2; }
.df-img-b { width: 46%; right: 0; bottom: 0; aspect-ratio: 5/6; border: 5px solid var(--color-black); }
.df-badge {
  position: absolute; top: 8%; right: 0; z-index: 3;
  background: var(--color-primary); color: var(--color-ink);
  border-radius: var(--radius); padding: 0.8rem 1.1rem;
  display: flex; flex-direction: column; box-shadow: var(--shadow-md);
}
.df-badge strong { font-family: var(--font-heading); font-size: 1.3rem; line-height: 1; }
.df-badge span { font-size: 0.74rem; font-weight: 500; margin-top: 0.2rem; }

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat {
  border: 1px solid var(--color-black-3); border-radius: var(--radius);
  padding: 1.6rem 1.2rem; text-align: center;
  background: rgba(255,255,255,0.02);
}
.stat-num { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--color-primary); line-height: 1; letter-spacing: -0.03em; }
.stat-label { display: block; color: rgba(244,244,240,0.68); font-size: 0.9rem; margin-top: 0.6rem; }

/* ---------- Cases ---------- */
.cases { background: var(--color-bg); }
.case-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.case {
  background: var(--color-surface); border: 1px solid var(--color-border);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
}
.case:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-img { position: relative; aspect-ratio: 3/2; background-size: cover; background-position: center; overflow: hidden; }
.case-tag {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--color-primary); color: var(--color-ink);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.4rem 0.8rem; border-radius: 0;
}
.case-body { position: relative; padding: 1.5rem 1.6rem 1.8rem; }
.case-body::before {
  content: ""; position: absolute; left: 1.6rem; top: 0;
  width: 34px; height: 3px; background: var(--color-primary);
  transition: width 0.3s ease;
}
.case:hover .case-body::before { width: 64px; }
.case-body h3 { color: var(--color-text); margin-bottom: 0.45rem; }
.case-body p { color: var(--color-text-light); font-size: 0.95rem; }

/* ---------- Reviews ----------
   Slides up under the dark-feature above (which is z-2 and clips its own box on
   a diagonal). This fills the dark-feature's transparent bottom triangle with
   the reviews background, so no page-bg-coloured wedge shows under the cut. */
.reviews {
  background: var(--color-bg-alt);
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--slant));
  padding-top: calc(clamp(3.5rem, 8vw, var(--spacing-2xl)) + var(--slant));
}
.reviews-head { margin-bottom: 2.2rem; }
.reviews-head h2 { max-width: 26ch; }
.trust-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1rem; margin-bottom: 2.4rem; }
.trust-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 0.9rem 1.3rem;
  display: flex; flex-direction: column;
}
.trust-item strong { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-text); line-height: 1.1; }
.trust-item span { font-size: 0.82rem; color: var(--color-text-light); }

.review-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
.review {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-border);
  transition: border-top-color 0.2s ease, transform 0.2s ease;
}
.review:hover { border-top-color: var(--color-primary); transform: translateY(-3px); }
.quote-mark { font-family: Georgia, serif; font-size: 3.5rem; line-height: 0.5; color: var(--color-primary); height: 1.5rem; }
.review > p { color: var(--color-text-onlight); font-size: 1rem; margin-bottom: 1.4rem; }
.review-author { display: flex; align-items: center; gap: 0.8rem; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 0; background: var(--color-ink); color: var(--color-primary); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.04em; }
.review-author > span { display: flex; flex-direction: column; }
.review-author strong { font-family: var(--font-heading); font-size: 0.98rem; color: var(--color-text); }
.review-author span span { font-size: 0.85rem; color: var(--color-text-light); }

/* ---------- Orange CTA ----------
   Enters on a bold diagonal from the reviews section above. */
.cta-yellow {
  position: relative; overflow: hidden;
  background: var(--color-primary);
  padding: calc(clamp(3.5rem, 7vw, 5.5rem) + var(--slant)) var(--pad-x) clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.cta-yellow::before {  /* tint wedge = the section above dipping in */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-bg-alt);
  clip-path: polygon(0 0, 100% 0, 0 var(--slant));
}
.cta-yellow::after {   /* thin ink line tracing the diagonal */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--color-ink);
  clip-path: polygon(
    0 var(--slant), 100% 0,
    100% var(--accent), 0 calc(var(--slant) + var(--accent)));
}
.cta-yellow-inner { max-width: 720px; }
.cta-yellow h2 { color: var(--color-ink); margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3rem); }
.cta-yellow p { color: rgba(21,22,26,0.78); font-size: 1.1rem; margin-bottom: 2rem; max-width: 56ch; margin-inline: auto; }

/* ---------- Contact ----------
   The "blue form" block — navy surface with a sharp orange wedge across the
   top (echoing the reference's TILAA SIIRTO panel). The form panel itself
   stays white for contrast and legibility. */
.contact {
  position: relative; overflow: hidden;
  background: var(--color-navy); color: #fff;
  padding-block: calc(clamp(3.5rem, 8vw, 7rem) + var(--slant)) clamp(3.5rem, 8vw, 7rem);
}
.contact::before {  /* orange wedge sweeping down from the CTA above */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 0 var(--slant));
}
.contact-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact .eyebrow { color: rgba(255,255,255,0.72); }
.contact-info h2 { color: #fff; margin-bottom: 1.1rem; }
.contact-info > p { color: rgba(238,242,248,0.78); font-size: 1.05rem; margin-bottom: 2rem; max-width: 48ch; }
.contact-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,0.14); }
.cc-ico { flex: none; width: 46px; height: 46px; border-radius: 0; background: var(--color-navy-2); border: 1px solid var(--color-navy-3); display: grid; place-items: center; color: #fff; }
.contact-card div { display: flex; flex-direction: column; }
.contact-card strong { font-family: var(--font-heading); color: #fff; margin-bottom: 0.2rem; }
.contact-card a, .contact-card span { color: rgba(238,242,248,0.72); }
.contact-card a:hover { color: #fff; }
.contact-buttons { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.contact-buttons .btn { gap: 0.55rem; }
.contact .btn-outline { color: #fff; border-color: rgba(255,255,255,0.32); }
.contact .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); }

.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field label { font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem; margin-bottom: 0.4rem; color: var(--color-text); }
.field label span { color: #d23; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0;
  background: #fff; color: var(--color-text); border: 1.5px solid var(--color-border); border-radius: 0;
  padding: 0.8rem 0.9rem; font-size: 0.97rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea::placeholder { color: rgba(27,35,48,0.5); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,76,0,0.25);
}
.field textarea { resize: vertical; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e0453a; box-shadow: 0 0 0 3px rgba(224,69,58,0.12); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note { margin-top: 0.9rem; font-size: 0.95rem; font-weight: 500; min-height: 1.2em; }
.form-note.ok { color: #1c8a4a; }
.form-note.err { color: #e0453a; }

/* ---------- Footer ---------- */
.footer {
  position: relative; overflow: hidden;
  background: var(--color-navy-deep); color: #fff;
  padding: calc(clamp(3rem, 6vw, 4.5rem) + var(--slant)) var(--pad-x) 2rem;
}
.footer::before {  /* navy wedge continuing the contact block above */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--color-navy);
  clip-path: polygon(0 0, 100% 0, 100% var(--slant));
}
.footer::after {   /* orange line tracing the diagonal */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--color-primary);
  clip-path: polygon(0 0, 100% var(--slant), 100% calc(var(--slant) + var(--accent)), 0 var(--accent));
}
.footer-inner, .footer-bottom { position: relative; z-index: 2; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 2.2rem; padding-bottom: 2.5rem; }
.footer-brand .logo-footer { margin-bottom: 1.1rem; }
.footer-brand .logo-text { color: #fff; }
.footer-brand p { color: rgba(244,244,240,0.6); font-size: 0.95rem; max-width: 38ch; }
.footer-col h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.45); margin-bottom: 1.1rem; font-weight: 600; }
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a, .footer-contact li { color: rgba(244,244,240,0.82); font-size: 0.97rem; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; align-items: center; padding-top: 1.8rem; border-top: 1px solid var(--color-black-3); }
.footer-bottom p, .footer-bottom a { color: rgba(244,244,240,0.5); font-size: 0.85rem; }
.footer-bottom a:hover { color: var(--color-primary); }

/* ---------- Legal page ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(7rem, 16vh, 10rem) var(--pad-x) 5rem; }
.legal h1 { margin-bottom: 1rem; }
.legal-lead { font-size: 1.1rem; margin-bottom: 2rem; }
.legal h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; }
.legal p { margin-bottom: 0.6rem; }
.legal a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-primary); text-underline-offset: 3px; }
.legal-back { margin-top: 2.5rem; }

/* ---------- Error page (404) ---------- */
.error-page { max-width: 640px; margin: 0 auto; padding: clamp(8rem, 20vh, 12rem) var(--pad-x) 6rem; text-align: center; }
.error-page h1 { margin-bottom: 1rem; }
.error-page p { margin-bottom: 1.5rem; font-size: 1.1rem; }
.error-page .btn { margin-bottom: 1.5rem; }

/* ---------- Utilities / mobile-only CTA ---------- */
.cta-mobile { align-self: flex-start; margin-top: 1.5rem; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(30px) scale(0.985); transition: opacity 0.6s ease, transform 0.6s var(--ease-spring); }
  .reveal.in, .reveal.is-visible { opacity: 1; transform: none; }

  .hero-badge { opacity: 0; animation: heroFade 0.7s ease 0.15s forwards; }
  .hero h1 { opacity: 0; animation: heroFade 0.8s ease 0.3s forwards; }
  .hero .lead { opacity: 0; animation: heroFade 0.8s ease 0.5s forwards; }
  .hero .cta-group { opacity: 0; animation: heroFade 0.8s ease 0.7s forwards; }
  .hero-bg { animation: heroZoom 1.6s var(--ease-spring); }
}
@keyframes heroFade { to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.16); } to { transform: scale(1.08); } }

/* ===================================================================
   Responsive — tablet & desktop
=================================================================== */
@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .form-row { gap: 1.1rem; }
}

@media (min-width: 860px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .case-grid { grid-template-columns: repeat(3, 1fr); }
  .review-grid { grid-template-columns: repeat(3, 1fr); }
  .section-head { grid-template-columns: 1.1fr 1fr; align-items: end; }
  .section-head-aside { align-items: flex-end; text-align: right; }
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2.5rem; }
}

@media (min-width: 1000px) {
  .feature-grid { grid-template-columns: 1fr 1.05fr; }
  .why-grid { grid-template-columns: 1.05fr 1fr; }
  .dark-feature-inner { grid-template-columns: 1.1fr 0.9fr; }
  .contact-grid { grid-template-columns: 1fr 1.1fr; }
  .cards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Mobile nav behavior ---------- */
@media (max-width: 940px) {
  .nav, .nav-actions { display: none; }
  .menu-toggle { display: flex; margin-inline-start: auto; }
}
@media (min-width: 941px) {
  .mobile-menu { display: none !important; }
}

/* ---------- Mobile fine-tuning ---------- */
@media (max-width: 768px) {
  /* A touch more breathing room on stacked headings */
  h2 { line-height: 1.16; }
  /* Nudge the kotitalousvähennys box content away from the left edge */
  .ribbon-inner { padding-left: calc(clamp(1.6rem, 3vw, 2.8rem) + 12px); }

  /* --- Stop content stretching past the viewport edge --- */
  /* Two-column form fields stack to a single column on phones */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  /* Trust badges: 2-up grid, the long "Konservatorio & AMK" card spans full width */
  .trust-row { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .trust-row .trust-item:last-child { grid-column: 1 / -1; }
}

/* ---------- Mobile hero: left-aligned content ---------- */
@media (max-width: 640px) {
  .hero {
    justify-content: flex-start;
    text-align: left;
    min-height: 100vh;
  }
  .hero-inner { max-width: 100%; }
  .hero h1 { margin-inline: 0; }
  .hero .lead { margin-left: 0; margin-right: 0; max-width: 40ch; }
  .cta-group { justify-content: flex-start; }
}