/* Karjalan Konepaja Oy — tyylit. Brändi: valkoinen / musta / punainen. Ei ulkoisia riippuvuuksia. */

:root {
  --red: #b50027;
  --red-dark: #b80022;
  --black: #111111;
  --ink: #1a1a1a;
  --muted: #5b5f66;
  --line: #e4e6ea;
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --white: #ffffff;
  --maxw: 1140px;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.05);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Keep header resizing from moving scrollY across the compact thresholds. */
  overflow-anchor: none;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; color: var(--black); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.07; letter-spacing: -0.02em; margin: 0 0 0.4em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0 0 0.6em; }
h3 { font-size: 1.15rem; margin: 0 0 0.4em; }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}
::selection { background: var(--red); color: #fff; }

img { max-width: 100%; height: auto; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.bg-soft { background: var(--bg-soft); }
.kicker { display: block; color: var(--red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.78rem; margin-bottom: 0.7rem; }
.section > .container > h2 { margin-bottom: 0.2em; }

.lead { font-size: 1.2rem; color: var(--muted); max-width: 65ch; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }

/* Skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--red); color: #fff;
  padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Header */
.site-header {
  --header-logo-height: 84px;
  --header-padding: 16px;
  position: sticky; top: 0; z-index: 50;
  padding-block: var(--header-padding);
  transition: height .25s ease, padding .25s ease;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header--compact { --header-logo-height: 44px; --header-padding: 14px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 44px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: var(--header-logo-height); width: auto; transition: height .25s ease, padding .25s ease; }
@media (max-width: 640px) {
  .site-header { --header-logo-height: 60px; }
  .site-header--compact { --header-logo-height: 40px; }
}
.main-nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }
.main-nav > a { color: var(--black); font-weight: 600; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
@media (min-width: 1025px) and (max-width: 1200px) {
  .main-nav { gap: 0.6rem; }
  .main-nav > a { font-size: 0.9rem; }
  .main-nav > .nav-external { padding-left: 10px; }
}
.main-nav > a:hover { color: var(--red); text-decoration: none; }
.main-nav > a:not(.nav-external)[aria-current="page"] { border-bottom-color: var(--red); color: var(--red); }
.main-nav > .nav-external { font-weight: 500; border-left: 1px solid var(--line); padding-left: 14px; }
.nav-external__mobile { display: none; }
.lang-toggle {
  border: 1.5px solid var(--black) !important; border-radius: 4px; padding: 6px 12px !important;
  font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em;
}
.lang-toggle:hover { background: var(--black); color: #fff !important; }
.nav-toggle, .nav-burger { display: none; }

/* Home logo intro: top row 100ms, blocks 450ms + 150ms steps (400ms slam), bottom row 2150ms (260ms reveal), fade 3800-4200ms; JS fallback 4800ms. */
#logo-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black);
  place-items: center;
}
#logo-intro.is-playing {
  display: grid;
  animation: intro-fade-out 400ms ease 3800ms both;
}
#logo-intro svg { width: min(88vw, 1100px); height: auto; overflow: visible; }
@media (max-width: 640px) {
  #logo-intro svg { width: 92vw; }
}
#logo-intro .intro-block {
  opacity: 0;
  transform: scale(1.8);
  transform-origin: center;
  transform-box: fill-box;
}
#logo-intro .intro-letters, #logo-intro .intro-top { opacity: 0; }
/* The source's second path contains both dark word rows. */
#logo-intro .intro-top { fill: var(--white); }
#logo-intro.is-playing .intro-block {
  animation: slam 400ms cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay: calc(450ms + var(--i) * 150ms);
}
#logo-intro.is-playing .intro-letters {
  animation: intro-reveal 120ms ease both;
  animation-delay: calc(450ms + var(--i) * 150ms + 180ms);
}
#logo-intro.is-playing .intro-top { animation: intro-reveal 260ms ease both; }
#logo-intro.is-playing .intro-row-top { animation-delay: 100ms; }
#logo-intro.is-playing .intro-row-bottom { animation-delay: 2150ms; }
@keyframes slam {
  from { opacity: 0; transform: scale(1.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes intro-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-fade-out {
  from { opacity: 1; }
  to { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  #logo-intro, #logo-intro.is-playing { display: none; }
}

/* Hero */
.hero {
  position: relative;
  color: #fff;
  min-height: clamp(480px, 74vh, 700px);
  display: flex;
  align-items: center;
  padding: 5rem 0;
  overflow: hidden;
  background-image: linear-gradient(rgba(12,12,12,0.30), rgba(12,12,12,0.30)), url("/content/images/site/hero.jpg");
  background-size: cover; background-position: center;
}
/* Dark box behind the hero text, like the original panel but with every edge
   feathered, so the text sits on the fully dark part and the box ends softly
   before the hero's edges. Optically balanced rather than symmetric: the text
   is flush left (aligned with the header logo) and ragged on the right, so the
   box reaches further to the left (2rem of full dark before the text) than to
   the right. The fades follow a smoothstep curve (alpha = t²(3-2t), sampled
   every 10 %): a linear ramp that stops at a flat plateau leaves a corner the
   eye sees as a darker line (Mach band) — over bright sky it read as a dark
   post beside the heading. No backdrop blur: blurring under a fading mask
   shows up as a frosted seam. */
.hero-content {
  --hero-pad: 2.5rem;
  --hero-feather-x: 6rem;
  --hero-feather-y: 4.5rem;
  --hero-pad-left: calc(var(--hero-feather-x) + 2rem);
  --hero-pad-right: calc(var(--hero-feather-x) - 1rem);
  --hero-fade-x: linear-gradient(to right,
    transparent 0,
    rgba(0,0,0,.028) calc(var(--hero-feather-x) * .1),
    rgba(0,0,0,.104) calc(var(--hero-feather-x) * .2),
    rgba(0,0,0,.216) calc(var(--hero-feather-x) * .3),
    rgba(0,0,0,.352) calc(var(--hero-feather-x) * .4),
    rgba(0,0,0,.5) calc(var(--hero-feather-x) * .5),
    rgba(0,0,0,.648) calc(var(--hero-feather-x) * .6),
    rgba(0,0,0,.784) calc(var(--hero-feather-x) * .7),
    rgba(0,0,0,.896) calc(var(--hero-feather-x) * .8),
    rgba(0,0,0,.972) calc(var(--hero-feather-x) * .9),
    #000 var(--hero-feather-x),
    #000 calc(100% - var(--hero-feather-x)),
    rgba(0,0,0,.972) calc(100% - var(--hero-feather-x) * .9),
    rgba(0,0,0,.896) calc(100% - var(--hero-feather-x) * .8),
    rgba(0,0,0,.784) calc(100% - var(--hero-feather-x) * .7),
    rgba(0,0,0,.648) calc(100% - var(--hero-feather-x) * .6),
    rgba(0,0,0,.5) calc(100% - var(--hero-feather-x) * .5),
    rgba(0,0,0,.352) calc(100% - var(--hero-feather-x) * .4),
    rgba(0,0,0,.216) calc(100% - var(--hero-feather-x) * .3),
    rgba(0,0,0,.104) calc(100% - var(--hero-feather-x) * .2),
    rgba(0,0,0,.028) calc(100% - var(--hero-feather-x) * .1),
    transparent 100%);
  --hero-fade-y: linear-gradient(to bottom,
    transparent 0,
    rgba(0,0,0,.028) calc(var(--hero-feather-y) * .1),
    rgba(0,0,0,.104) calc(var(--hero-feather-y) * .2),
    rgba(0,0,0,.216) calc(var(--hero-feather-y) * .3),
    rgba(0,0,0,.352) calc(var(--hero-feather-y) * .4),
    rgba(0,0,0,.5) calc(var(--hero-feather-y) * .5),
    rgba(0,0,0,.648) calc(var(--hero-feather-y) * .6),
    rgba(0,0,0,.784) calc(var(--hero-feather-y) * .7),
    rgba(0,0,0,.896) calc(var(--hero-feather-y) * .8),
    rgba(0,0,0,.972) calc(var(--hero-feather-y) * .9),
    #000 var(--hero-feather-y),
    #000 calc(100% - var(--hero-feather-y)),
    rgba(0,0,0,.972) calc(100% - var(--hero-feather-y) * .9),
    rgba(0,0,0,.896) calc(100% - var(--hero-feather-y) * .8),
    rgba(0,0,0,.784) calc(100% - var(--hero-feather-y) * .7),
    rgba(0,0,0,.648) calc(100% - var(--hero-feather-y) * .6),
    rgba(0,0,0,.5) calc(100% - var(--hero-feather-y) * .5),
    rgba(0,0,0,.352) calc(100% - var(--hero-feather-y) * .4),
    rgba(0,0,0,.216) calc(100% - var(--hero-feather-y) * .3),
    rgba(0,0,0,.104) calc(100% - var(--hero-feather-y) * .2),
    rgba(0,0,0,.028) calc(100% - var(--hero-feather-y) * .1),
    transparent 100%);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 724px;
  padding: 2rem 2.25rem 2rem 0;
}
.hero-content::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hero-pad)) calc(-1 * var(--hero-pad-right)) calc(-1 * var(--hero-pad)) calc(-1 * var(--hero-pad-left));
  z-index: -1;
  pointer-events: none;
  background: rgba(12,12,12,0.78);
  -webkit-mask-image: var(--hero-fade-x), var(--hero-fade-y);
  -webkit-mask-composite: source-in;
  mask-image: var(--hero-fade-x), var(--hero-fade-y);
  mask-composite: intersect;
}
@media (max-width: 640px) {
  .hero { padding: 3rem 0; }
  .hero-content { --hero-pad: 1.25rem; --hero-pad-left: 1.25rem; --hero-pad-right: 1.25rem; --hero-feather-x: 1.25rem; --hero-feather-y: 1.25rem; max-width: none; padding: 1.25rem 0; }
  .hero-content::before { background: rgba(12,12,12,0.82); }
}
.hero-eyebrow { display: inline-block; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; margin-bottom: 1.1rem; }
.hero-eyebrow::before { content: ""; display: inline-block; width: 30px; height: 2px; background: var(--red); vertical-align: middle; margin-right: 12px; margin-bottom: 3px; }
.hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); text-wrap: balance; }
.hero-phrase { display: inline-block; }
/* Phones: scale with the viewport so each phrase keeps to one line (3 lines at 390px). */
@media (max-width: 640px) { .hero h1 { font-size: clamp(1.5rem, 6.6vw, 2rem); } }
.hero .lead { color: #e3e5e9; max-width: 62ch; }
.nowrap { white-space: nowrap; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }
.hero-companies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
/* Dark glass tile; only the logo sits on a white inset strip, so both logos
   keep their original colours (Panelia's blue is unreadable on dark) without a
   bright white block dominating the hero. */
.company-tile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; padding: 10px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.05); color: var(--white); transition: transform 200ms ease, background 200ms ease, border-color 200ms ease; }
.company-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); text-decoration: none; }
.company-tile:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.company-tile__logo { box-sizing: border-box; width: 100%; height: 100px; padding: 12px 18px; margin-bottom: 12px; background: #fff; border-radius: 4px; object-fit: contain; object-position: center; }
.company-tile__name { font-weight: 700; color: var(--white); padding: 0 10px; }
.company-tile__meta { color: #cfd2d7; font-size: .8rem; padding: 0 10px 8px; }
.wordmark { display: flex; flex-direction: column; gap: 4px; font-family: var(--font); text-transform: uppercase; line-height: 1.2; }
.wordmark--panelia { min-height: 64px; margin-bottom: 12px; }
.wordmark__bar { display: block; width: 48px; height: 6px; background: var(--red); transition: width 200ms ease; }
.wordmark__name { font-weight: 800; letter-spacing: .12em; font-size: 1.5rem; color: var(--white); }
.wordmark__sub { font-weight: 600; letter-spacing: .22em; font-size: .75rem; color: #cfd2d7; }
.company-tile:hover .wordmark__bar { width: 72px; }
@media (max-width: 640px) {
  .hero-companies { grid-template-columns: 1fr; }
  .company-tile__logo { height: 92px; }
  .wordmark--panelia { min-height: 48px; }
  .wordmark__name { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .company-tile, .wordmark__bar { transition: none; }
  .company-tile:hover { transform: none; }
  .company-tile:hover .wordmark__bar { width: 48px; }
}

/* Buttons */
.btn {
  display: inline-block; padding: 0.9rem 1.7rem; border-radius: var(--radius);
  font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform 0.05s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(226, 0, 26, 0.28); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-ghost { border-color: currentColor; color: inherit; background: transparent; }
.hero .btn-ghost { color: #fff; }
.section .btn-ghost { color: var(--black); }

/* Trust badges */
.trust { padding: clamp(2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); }
.trust-label { text-align: center; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; color: var(--muted); margin: 0 0 1.6rem; }
.trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); align-items: center; justify-content: center; }
.trust-badges img { width: 118px; height: 118px; object-fit: contain; opacity: 0.96; transition: transform 0.2s, opacity 0.2s; }
.trust-badges img:hover { opacity: 1; transform: scale(1.05); }
.trust-text { margin: 1.4rem 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }
.trust-badges img.badge-lg { width: 150px; height: 150px; }
@media (max-width: 640px) {
  .trust-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 1.5rem 0.75rem; }
  .trust-badges img { width: 92px; height: 92px; max-width: 100%; }
  .trust-badges img.badge-lg { width: 104px; height: 104px; }
}

/* Konserni-osio */
.section.group { padding-block: clamp(2rem, 4vw, 3rem); }
.group .group-lead { margin: 0.4rem 0 0; }

/* Services */
.service-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.service { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.6rem; border-top: 3px solid var(--red); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service h3 { margin-bottom: 0.3rem; }
.service p { margin: 0; color: var(--muted); }
.service .service-examples { margin-top: 0.8rem; font-size: 0.85rem; }

/* About + stats */
.about-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.stats { list-style: none; margin: 0; padding: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.2rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.stat { display: block; }
.stat b { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--red); letter-spacing: -0.02em; }
.stat span { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 800px) { .about-grid { grid-template-columns: 1fr; } }

/* Asiakaslogot (etusivun trust-bändi + referenssit) */
.client-marquee {
  --client-gap: 3rem;
  max-width: 100%;
  overflow: hidden;
  margin-top: 1.4rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.client-marquee__track {
  display: flex;
  width: max-content;
  gap: var(--client-gap);
  /* Match the inter-copy gap at the end so -50% is exactly one copy + gap. */
  padding-inline-end: var(--client-gap);
  animation: client-marquee 70s linear infinite;
  will-change: transform;
}
.client-marquee .client-row { list-style: none; margin: 0; padding: 0; display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: var(--client-gap); align-items: center; }
.client-marquee .client-row li { flex: 0 0 auto; margin: 0; }
.client-row img { filter: grayscale(1); opacity: 0.66; transition: filter 0.2s, opacity 0.2s; }
.client-row li:hover img { filter: none; opacity: 1; }
.client-marquee:hover .client-marquee__track,
.client-marquee:focus-within .client-marquee__track { animation-play-state: paused; }
@keyframes client-marquee { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .client-marquee { --client-gap: 2rem; } }
@media (prefers-reduced-motion: reduce) {
  .client-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding-inline-end: 0; will-change: auto; }
  .client-marquee__track > ul[aria-hidden] { display: none; }
  .client-marquee .client-row { flex: 0 1 auto; width: 100%; flex-wrap: wrap; justify-content: center; }
  .client-marquee { -webkit-mask-image: none; mask-image: none; }
}
.client-logos { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.trust-gap { margin-top: clamp(2.2rem, 4.5vw, 3.2rem); }

/* FAQ (UKK) */
.container-narrow { max-width: 800px; }
.faq-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 0 1.25rem; transition: border-color 0.15s, box-shadow 0.15s; }
.faq-item[open] { border-color: #d7d9de; box-shadow: 0 6px 20px rgba(17, 17, 17, 0.05); }
.faq-item summary { list-style: none; cursor: pointer; font-weight: 700; padding: 1.05rem 2rem 1.05rem 0; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--red); line-height: 1; transition: transform 0.2s; }
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
.faq-item p { margin: 0 0 1.15rem; color: var(--muted); max-width: 68ch; }

/* CTA band */
.cta { background: var(--black); color: #fff; text-align: center; padding: clamp(3rem, 6vw, 5.5rem) 0; }
.cta h2 { color: #fff; }
.cta p { color: #cfd2d7; max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }

/* Prose */
.prose { max-width: 72ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose h2 { margin-top: 2rem; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }

/* Card grids */
.card-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 1.5rem; }
.card-grid--single { max-width: 560px; grid-template-columns: minmax(0, 1fr); }
.service-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-card.service-card { display: flex; flex-direction: column; scroll-margin-top: 150px; }
.service-card-body { padding: 1rem; display: flex; flex: 1; flex-direction: column; }
.service-card h3 { margin-top: 0; }
.service-card h3 a { color: inherit; }
.service-card .service-examples { font-size: .9rem; color: var(--muted); }
.service-card .read-more { margin-top: auto; }
.service-card.ref-card-text { color: #fff; padding: 0; }
.service-card.ref-card-text h3 { color: inherit; }
.service-card.ref-card-text .service-examples { color: #c7cad0; }
.client-text { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* Palvelusivun loppu: muut palvelut linkkiruudukkona ja tarjouspyyntö samassa kaistassa. */
.other-services { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.other-services h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-bottom: 1.1rem; }
.other-services__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.other-services__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; padding: .95rem 1.1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--black); font-weight: 700; line-height: 1.3; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.other-services__list a::after { content: "→"; color: var(--red); font-weight: 700; transition: transform .15s ease; }
.other-services__list a:hover { text-decoration: none; border-color: var(--red); box-shadow: var(--shadow); transform: translateY(-1px); }
.other-services__list a:hover::after { transform: translateX(3px); }
.other-services__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; padding: 1.4rem 1.6rem; background: var(--bg-soft); border-radius: 10px; }
.other-services__cta p { margin: 0; }
.other-services__cta > p:first-child { font-weight: 600; color: var(--ink); }
@media (max-width: 1024px) { .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .service-cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.16s ease, box-shadow 0.16s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.10); }
.ref-card { display: block; text-decoration: none; color: var(--black); }
.ref-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ref-card:hover { text-decoration: none; }
.ref-card .card-title { display: block; padding: 0.9rem 1rem; font-weight: 700; }
.news-card, .job-card { padding: 1.3rem; }
.news-card time { color: var(--red); font-weight: 700; font-size: 0.85rem; }
.news-card h3 { margin: 0.3rem 0; }
.job-card h3 { margin: 0; }
.read-more { font-weight: 700; display: inline-block; transition: transform 0.15s ease; }
.read-more:hover { transform: translateX(3px); text-decoration: none; }

/* Gallery */
/* Referenssigalleria: isot kuvat alkuperäisessä kuvasuhteessa, klikkaus avaa täysikokoisen */
.gallery { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: 1fr; max-width: 920px; margin: 2rem 0 1rem; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; line-height: 0; }
.gallery img { width: 100%; height: auto; display: block; border-radius: var(--radius); transition: transform 0.25s ease; }
.gallery a:hover img { transform: scale(1.015); }
.gallery a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* Palvelusivun galleria: kaksi saraketta leveällä näytöllä */
/* Sarakkeet (ei ruudukko), jotta pysty- ja vaakakuvat pakkautuvat ilman tyhjiä aukkoja. */
@media (min-width: 720px) {
  .gallery--2 { display: block; column-count: 2; column-gap: clamp(1rem, 2.5vw, 1.75rem); max-width: none; }
  .gallery--2 a { break-inside: avoid; margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
}

/* Definition/meta list */
.meta-list { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 1.5rem; padding: 0; }
.meta-list dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.meta-list dd { margin: 0; font-weight: 700; }

.breadcrumb { font-size: 0.9rem; margin-bottom: 1rem; }
.article-meta { color: var(--muted); }

.contact-box { background: var(--bg-soft); border-left: 3px solid var(--red); padding: 1.2rem 1.4rem; border-radius: var(--radius); margin-top: 2rem; }
.contact-box h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }

/* Contact */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 2.5rem; }
.loc-list, .person-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; }
.loc-list li, .person-list li { display: grid; gap: 2px; }
.person strong { font-size: 1.05rem; }
.person-list + h3 { margin-top: 1.8rem; }

/* Forms */
.contact-form { display: grid; gap: 1rem; max-width: 560px; }
.contact-form label { display: grid; gap: 0.3rem; font-weight: 600; }
.contact-form input, .contact-form textarea {
  font: inherit; padding: 0.7rem 0.8rem; border: 1px solid #c7cad0; border-radius: var(--radius); width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--red); border-color: var(--red); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* Footer */
.site-footer { background: var(--black); color: #d6d8dc; margin-top: 0; padding: 3rem 0 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.site-footer h2.footer-h { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.8rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--red); text-decoration: none; }
.footer-locs { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.footer-locs strong { color: #fff; }
.footer-tagline { color: #b9bcc2; max-width: 30ch; }
/* The global .muted grey is meant for light backgrounds; on the black footer it fails contrast. */
.site-footer .muted { color: #b9bcc2; }
.footer-role { display: inline-block; margin: 0.1rem 0 0.15rem; color: #c4c7cc; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer h2.footer-h--sub { margin-top: 1.6rem; }
.footer-bottom { border-top: 1px solid #2a2a2a; margin-top: 2rem; padding-top: 1.2rem; font-size: 0.85rem; color: #9aa0a8; }

/* Mobile nav */
@media (max-width: 1024px) {
  .nav-burger {
    display: block; width: 44px; height: 44px; cursor: pointer; position: relative;
  }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after {
    content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: var(--black); transition: 0.2s;
  }
  .nav-burger span { top: 21px; }
  .nav-burger span::before { top: -7px; }
  .nav-burger span::after { top: 7px; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 20px 1rem; display: none;
  }
  .main-nav > a { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
  .main-nav > .nav-external { order: 1; border-left: 0; border-top: 1px solid var(--line); border-bottom: 0; padding-left: 0; margin-top: 0.6rem; }
  .nav-external__desktop { display: none; }
  .nav-external__mobile { display: inline; }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .lang-toggle { margin-top: 0.6rem; text-align: center; }
}

/* --- Statement-nosto (etusivun tumma bändi) --- */
.statement { background: var(--black); color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; }
.statement h2 { color: #fff; max-width: 30ch; text-wrap: balance; }
.statement p { color: #cfd2d7; max-width: 72ch; }
.btn-ghost-light { border: 1px solid rgba(255, 255, 255, 0.55); color: #fff; background: transparent; }
.btn-ghost-light:hover { border-color: #fff; color: #fff; }

/* --- Kuvaton referenssikortti (asiakastarina) --- */
.ref-card-text { background: var(--black); display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; }
/* Brand red is too dark for small text on black; same hue, lighter. */
.statement .kicker { color: #ff5a73; }
.ref-card-text .ref-tag { color: #ff5a73;font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.74rem; }
.ref-card-text .card-title { color: #fff; padding: 0; font-size: 1.05rem; }
.ref-card-text:hover .card-title { text-decoration: underline; }
.ref-card-text .ref-card__excerpt { margin: 0; color: #c7cad0; font-size: 0.95rem; }
.ref-card-text .read-more { color: #fff; }

/* --- Ura-osion avoin hakemus -huomautus --- */
.perk-note { margin-top: 1.6rem; color: var(--muted); }

/* Panelian Terästyö: oma ilme konsernin headerin ja footerin sisällä. */
.panelia {
  --accent: #007ac3;
  --red: var(--accent);
  --red-dark: #005f99;
}
.panelia [id] { scroll-margin-top: 100px; }
.panelia .panelia-hero {
  min-height: 70vh;
  overflow: hidden;
  isolation: isolate;
  background: #12161b;
  padding: 0;
  align-items: stretch;
}
.panelia .panelia-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/content/images/panelia/hero.jpg") center / cover no-repeat;
  animation: panelia-zoom 22s ease-out forwards;
}
.panelia .panelia-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(8,12,16,.86) 0%, rgba(8,12,16,.72) 45%, rgba(8,12,16,.25) 100%);
}
@keyframes panelia-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.panelia .panelia-hero__inner { display: flex; flex-direction: column; }
.panelia .panelia-hero__content {
  width: 100%;
  max-width: 640px;
  margin-block: auto;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.panelia .panelia-hero__logo { width: 240px; height: auto; margin-bottom: 1.8rem; }
.panelia .panelia-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  margin: 0 0 1.1rem;
}
.panelia .panelia-hero__eyebrow::before {
  content: "";
  flex: 0 0 48px;
  height: 4px;
  background: var(--accent);
}
.panelia .hero h1 { max-width: 25ch; font-size: clamp(2rem, 3.6vw, 3rem); text-wrap: balance; }
.panelia .hero .lead { max-width: 64ch; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.panelia .hero-cta { margin-bottom: 0; }
.panelia .panelia-hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 1.25rem 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  color: #e3e5e9;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.panelia .panelia-hero__facts li { padding-inline: 1.25rem; }
.panelia .panelia-hero__facts li:first-child { padding-left: 0; }
.panelia .panelia-hero__facts li + li { border-left: 1px solid rgba(255,255,255,.18); }
.panelia .btn-primary:hover { box-shadow: 0 6px 20px rgba(0,122,195,.28); }
.panelia .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panelia .service p + p { margin-top: 1rem; }
.panelia .panelia-strengths {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.panelia .panelia-strengths__list {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  padding: 0;
  margin: 1.75rem 0 0;
}
.panelia .panelia-strengths__list li { border-left: 3px solid var(--accent); padding-left: 1rem; }
.panelia .panelia-strengths__image {
  width: 100%;
  height: 420px;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
}
.panelia .panelia-story a { text-decoration: underline; text-underline-offset: 3px; }
.panelia .contact-grid { margin-top: 1.5rem; }
@media (max-width: 800px) {
  .panelia .service-grid { grid-template-columns: 1fr; }
  .panelia .panelia-strengths { grid-template-columns: 1fr; }
  .panelia .panelia-strengths__image { height: 360px; }
}
@media (max-width: 640px) {
  .panelia .panelia-hero { min-height: auto; }
  .panelia .panelia-hero__bg { background-position: 72% 50%; }
  .panelia .panelia-hero__content { padding-block: 2.5rem; }
  .panelia .panelia-hero__logo { width: 180px; }
  .panelia .hero h1 { max-width: none; overflow-wrap: anywhere; }
  .panelia .hero-cta { flex-direction: column; }
  .panelia .hero-cta .btn { width: 100%; text-align: center; }
  .panelia .panelia-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .panelia .panelia-hero__facts li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .panelia .panelia-hero__facts li:nth-child(even) { padding-right: 0; }
  .panelia .contact-grid { grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .panelia .panelia-hero__bg { animation: none; }
  .panelia .service, .panelia .btn { transition: none; }
  .panelia .service:hover, .panelia .btn:active { transform: none; }
}

/* Panelian oma sivusto: sama sisältö, oma navigaatio ja alatunniste. */
.panelia .panelia-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #12161b;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.panelia .panelia-site-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding-block: 1.1rem; }
.panelia .panelia-site-header__brand { flex-shrink: 0; }
.panelia .panelia-site-header__brand img { height: 34px; width: auto; }
.panelia .panelia-site-header__nav { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.6rem); }
.panelia .panelia-site-header__nav a { color: #fff; white-space: nowrap; font-size: 0.85rem; padding-block: 0.65rem; }
.panelia .panelia-site-header__nav a:hover { text-decoration-color: var(--accent); text-underline-offset: 6px; }
.panelia .panelia-site-header__language { grid-column: 3; grid-row: 1; justify-self: end; font-weight: 700; color: #fff; padding: 0.65rem 0.25rem; }
.panelia-site-header__group-short { display: none; }
.panelia .panelia-site-header__nav .panelia-site-header__group { border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius); padding-inline: 0.85rem; font-size: 0.75rem; }
.panelia .panelia-site-footer { background: #12161b; color: #d6dae0; padding-top: 3.5rem; }
.panelia .panelia-site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.panelia .panelia-site-footer__brand img { height: 34px; width: auto; }
.panelia .panelia-site-footer p, .panelia .panelia-site-footer address { font-size: 0.9rem; }
.panelia .panelia-site-footer address { font-style: normal; }
.panelia .panelia-site-footer h2 { font-size: 1rem; color: #fff; }
.panelia .panelia-site-footer a { color: #fff; overflow-wrap: anywhere; }
.panelia .panelia-site-footer__bottom { border-top: 1px solid rgba(255,255,255,.18); padding-block: 1.25rem; font-size: 0.8rem; }
.panelia-group-strip { background: #1c232c; color: #d6dae0; padding-block: 1.5rem; }
.panelia-group-strip__inner { display: flex; align-items: center; gap: 2rem; }
.panelia-group-strip img { height: 40px; width: auto; flex-shrink: 0; }
.panelia-group-strip p { margin: 0; flex: 1; font-size: 0.9rem; }
.panelia-group-strip .btn { flex-shrink: 0; font-size: 0.85rem; }
@media (max-width: 1024px) {
  .panelia .panelia-site-header__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; padding-bottom: 0.5rem; }
  .panelia .panelia-site-header__language { grid-column: 2; }
  .panelia .panelia-site-header__nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: space-between; }
  .panelia-site [id] { scroll-margin-top: 155px; }
}
@media (max-width: 800px) {
  .panelia .panelia-site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .panelia-group-strip__inner { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 640px) {
  .panelia .panelia-site-header__brand img, .panelia .panelia-site-footer__brand img { height: 28px; }
  .panelia .panelia-site-header__nav { gap: 0.4rem; }
  .panelia .panelia-site-header__nav a { font-size: 0.7rem; }
  .panelia .panelia-site-header__nav .panelia-site-header__group { padding: 0.5rem 0.4rem; font-size: 0.7rem; border-radius: 999px; }
  .panelia-site-header__group-full { display: none; }
  .panelia-site-header__group-short { display: inline; }
}

/* Static reference logo wall: original colours in equal-height white cells. */
.client-wall { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.client-wall li { min-width: 0; height: 120px; padding: 1.5rem; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.client-wall img { max-width: 100%; max-height: 72px; object-fit: contain; filter: none; }
.client-group { margin-block: 2rem; }

/* Panelia: "Mikään työ ei ole liian pieni" – pieni osa ja suuret rungot rinnakkain. */
.panelia-small .eyebrow { margin: 0 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent, var(--red)); }
.panelia-small__text p:last-child { font-size: 1.08rem; color: var(--muted); max-width: 46ch; margin: 0; }
.panelia-small__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.panelia-small__pair figure { position: relative; margin: 0; }
.panelia-small__pair img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.panelia-small__pair figcaption { position: absolute; left: .9rem; bottom: .9rem; padding: .35rem .7rem; background: rgba(13, 27, 42, .85); color: #fff; font-size: .85rem; font-weight: 700; border-radius: 4px; }
@media (max-width: 760px) { .panelia-small__pair { grid-template-columns: 1fr; } }

/* Viilaukset 10/2026 */
:target { scroll-margin-top: 110px; }
@media (max-width: 560px) {
  .client-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .client-wall li { height: 92px; padding: 1rem; }
  .client-wall img { max-height: 48px; }
}

[hidden] { display: none !important; }