/* =============================================================================
   Hämeen Trukkihuolto Oy - style.css
   Sisältö:
     01  Fontit (self-hosted woff2)
     02  Design-tokenit
     03  Reset ja pohja
     04  Typografia
     05  Layout-apurit
     06  Ikonit, napit, linkit
     07  Header ja navigaatio
     08  Callbar (mobiili)
     09  Hero (etusivu)
     10  Phero (alasivut)
     11  Sektiot ja mediat
     12  Kortit, chipit, tuoteruudukko
     13  Brändinauha (marquee)
     14  Lomake ja yhteydenotto
     15  Galleria, spec-lista, suodatin (alasivut)
     16  Footer
     17  Utilities
     18  Liike (vain kun käyttäjä sallii)
   ========================================================================== */

/* 01  Fontit ------------------------------------------------------------- */

/* Barlow Condensed 600 on jätetty pois: yksikään sääntö ei käytä sitä
   (display-fontti esiintyy vain painoilla 700 ja 800). */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin_latin-ext-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
}

/* 02  Design-tokenit ------------------------------------------------------ */

:root {
  /* pinnat */
  --concrete: #E8E7E3;
  --concrete-2: #F3F2EF;
  --paper: #FFFFFF;
  --ink: #1B1B1D;
  --ink-2: #27282B;

  /* teksti */
  --fg: #F3F2EE;
  --fg-muted: #B4B2AC;
  --text: #1B1B1D;
  --text-muted: #5B5A56;

  /* toiminta */
  --red: #85020C;
  --red-hover: #6E0209;
  --red-bright: #C0141E;
  --red-bright-hover: #A2111A;
  --warn: #F2B705;

  /* viivat */
  --line: rgba(27, 27, 29, .14);
  --line-strong: rgba(27, 27, 29, .28);
  --line-dark: rgba(255, 255, 255, .14);
  --line-dark-strong: rgba(255, 255, 255, .3);

  /* typografia */
  --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* mitat */
  --header-h: 72px;
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: clamp(64px, 9vw, 120px);
  --radius: 12px;
  --radius-sm: 6px;

  /* Leipatekstin rivin mitta. Mitattu canvas-measureTextilla: Barlow 400
     17px:lla keskimaarainen merkki on 7.24 px ja 1ch (nolla) 9.60 px, joten
     50ch = 480 px = ~66 todellista merkkia rivilla. */
  --measure: 50ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 1023px) {
  :root { --header-h: 64px; }
}

/* 03  Reset ja pohja ------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--concrete);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; }

figure { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 2px;
}

.on-dark :focus-visible { outline-color: var(--fg); }

::selection {
  background: var(--red);
  color: #fff;
}

/* 04  Typografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-weight: 800; }

/* Otsikkokoko on mitoitettu niin, etta pisin sana (HAMEENLINNASSA, 6.57em
   Barlow Condensed 800:lla) mahtuu tummaan paneeliin joka leveydella. */
.h-hero {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  /* .98 riittaa juuri: Ä-pisteet nousevat .93em perusviivan ylapuolelle. */
  line-height: .98;
  overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  .h-hero { font-size: clamp(3rem, 4.7vw, 5.4rem); }
}

.h-page {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: .98;
  font-weight: 800;
  overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  .h-page { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
}

.h-section { font-size: clamp(2rem, 4vw, 3rem); overflow-wrap: break-word; }

.h-sub { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.h-close { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

p { margin: 0 0 1.1em; }

p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.15rem);
  max-width: 46ch;
}

.prose { max-width: var(--measure); }

/* :where() pitaa spesifisyyden luokkatasolla, jotta myohemmat kapeammat
   saannot (.contact__area 44ch) voittavat yha. */
.prose p,
.stack > :where(p) { max-width: var(--measure); }

.prose p + p { margin-top: 0; }

.muted { color: var(--text-muted); }

.on-dark .muted { color: var(--fg-muted); }

strong, b { font-weight: 700; }

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-feature-settings: 'tnum' 1;
}

/* Tekstilinkit leipätekstissä */
.prose a,
.link {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.prose a:hover,
.link:hover { color: var(--red-hover); }

.on-dark .prose a,
.on-dark .link {
  color: var(--fg);
  text-decoration-color: var(--red-bright);
  text-decoration-thickness: 2px;
}

.on-dark .prose a:hover,
.on-dark .link:hover { color: #fff; }

/* Pisteellinen luettelo punaisella neliöllä */
.marks {
  list-style: none;
  display: grid;
  gap: 10px;
}

.marks li {
  position: relative;
  padding-left: 20px;
}

.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--red);
}

.on-dark .marks li::before { background: var(--red-bright); }

/* 05  Layout-apurit ------------------------------------------------------- */

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

.section { padding-block: var(--section-pad); }

.section--tight { padding-block: clamp(44px, 6vw, 72px); }

.section--light { background: var(--concrete); }

.section--light-2 { background: var(--concrete-2); }

.section--dark {
  background: var(--ink);
  color: var(--fg);
}

.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.split--top { align-items: start; }

.col-5, .col-6, .col-7 { min-width: 0; }

@media (min-width: 1024px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
}

.stack {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  justify-items: start;
}

/* Väliotsikko pinon sisällä tarvitsee gapia enemmän ilmaa yläpuolelleen. */
.stack > :is(h2, h3):not(:first-child) { margin-block-start: 16px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 06  Ikonit, napit, linkit ----------------------------------------------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  /* Vain värit tässä; box-shadow ja transform ovat liikkeen puolella
     (osio 18), jotta prefers-reduced-motion todella pysäyttää ne. */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn--primary {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); }

.on-dark .btn--primary {
  background: var(--red-bright);
  border-color: var(--red-bright);
}

.on-dark .btn--primary:hover {
  background: var(--red-bright-hover);
  border-color: var(--red-bright-hover);
}

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover { border-color: var(--text); background: rgba(27, 27, 29, .04); }

.on-dark .btn--ghost {
  border-color: var(--line-dark-strong);
  color: var(--fg);
}

.on-dark .btn--ghost:hover { border-color: var(--fg); background: rgba(255, 255, 255, .06); }

.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }

.btn--block { width: 100%; }

/* 07  Header ja navigaatio ------------------------------------------------ */

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--red);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.skip:focus { top: 12px; }

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--fg);
  border-bottom: 1px solid transparent;
}

.hdr.is-scrolled { border-bottom-color: var(--line-dark); }

.hdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

/* Logo ja oikean reunan toiminnot pysyvät mobiilivalikon päällä */
.logo,
.hdr__actions { position: relative; z-index: 95; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--fg);
  text-decoration: none;
}

.logo__mark {
  width: 34px;
  height: 34px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__word {
  display: grid;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.logo:hover .logo__mark { color: var(--red-bright); }

/* Navi */
.nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 8px 2px;
  color: var(--fg-muted);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--red-bright);
  transform: scaleX(0);
  transform-origin: left;
}

.nav__link:hover { color: var(--fg); }

.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] {
  color: var(--fg);
  font-weight: 700;
}

.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Header-CTA: mobiilissa soittaminen hoituu callbarista, joten nappi
   ilmestyy vasta 768px:sta ylospain. */
.hdr__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hdr__call {
  display: none;
  min-height: 44px;
  padding: 0 18px;
  font-size: .95rem;
}

@media (min-width: 768px) {
  .hdr__call { display: inline-flex; }
}

/* Hampurilainen */
.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
}

.burger:hover { border-color: var(--fg); }

.burger__open { display: block; }
.burger__close { display: none; }

.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* Mobiilivalikko */
.nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: calc(var(--header-h) + 32px) var(--gutter) 40px;
  background: var(--ink);
  color: var(--fg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
}

.nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav .nav__list {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.nav .nav__link {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -.01em;
  padding: 6px 2px;
}

.nav__foot {
  display: grid;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
  color: var(--fg-muted);
  font-size: 1rem;
}

.nav__foot a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark-strong);
}

.nav__foot a:hover { border-bottom-color: var(--fg); }

@media (min-width: 1024px) {
  .burger { display: none; }

  .nav {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
  }

  .nav .nav__list {
    flex-direction: row;
    align-items: center;
    gap: clamp(14px, 1.8vw, 28px);
  }

  .nav .nav__link {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 2px;
  }

  .nav .nav__link[aria-current="page"] { font-weight: 700; }

  .nav__foot { display: none; }
}

body.is-locked { overflow: hidden; }

/* 08  Callbar (mobiili) --------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: block;
  background: var(--red);
}

.callbar[hidden] { display: none; }

.callbar.is-down { transform: translateY(100%); }

.callbar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px;
  color: #fff;
  font-weight: 600;
  font-size: .98rem;
  text-align: center;
  text-decoration: none;
}

@media (min-width: 768px) {
  .callbar { display: none; }
}

@media (max-width: 767px) {
  body { padding-bottom: 56px; }

  /* JS lisää luokan kun callbar on liu'utettu alas: tyhjä kaista pois. */
  body.is-callbar-down { padding-bottom: 0; }
}

/* 09  Hero (etusivu) ------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--fg);
}

.hero__grid { display: grid; }

.hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 2.6vw, 30px);
  padding: clamp(40px, 6vw, 96px) var(--gutter) clamp(48px, 6vw, 96px);
}

.hero__title { display: grid; }

 /* Faktarivi on pystylista hiusviivoin: paneeli on kapea (5/12), joten
   vaakarivi rikkoutuisi rivityksessa. */
.hero__facts {
  list-style: none;
  display: grid;
  border-top: 1px solid var(--line-dark);
  color: var(--fg);
  font-size: .95rem;
  font-weight: 500;
}

.hero__facts li { padding-block: 11px; }

.hero__facts li + li { border-top: 1px solid var(--line-dark); }

.hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-2);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

.hero__stripe {
  height: 6px;
  background: repeating-linear-gradient(45deg,
    var(--red) 0 10px,
    var(--concrete) 10px 20px);
}

@media (max-width: 1023px) {
  .hero__media { order: -1; }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: min(calc(100vh - var(--header-h)), 860px);
  }

  .hero__panel { padding-inline: clamp(40px, 5vw, 96px); }

  .hero__media { aspect-ratio: auto; }
}

/* 10  Phero (alasivut) ---------------------------------------------------- */

.phero {
  background: var(--ink);
  color: var(--fg);
}

.phero__grid {
  display: grid;
  align-items: center;
}

.phero__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
  padding: clamp(44px, 6vw, 84px) var(--gutter);
}

.phero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--ink-2);
}

.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .phero__media { order: -1; }
}

@media (min-width: 1024px) {
  .phero__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    min-height: 46vh;
  }

  .phero--low .phero__grid { min-height: 36vh; }

  .phero__panel { padding-inline: clamp(40px, 5vw, 96px); }

  .phero__media { aspect-ratio: auto; height: 100%; }
}

.breadcrumb {
  font-size: .95rem;
  color: var(--text-muted);
  padding-block: 18px;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.breadcrumb a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

.breadcrumb li + li::before { content: "\203A"; margin-right: 8px; color: var(--text-muted); }

/* 11  Sektiot ja mediat --------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--concrete-2);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--43 { aspect-ratio: 4 / 3; }

.figure { display: grid; gap: 12px; }

.figure figcaption {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.figure--cap { max-width: 640px; }

/* Pikalinkkilaatat */
.qlinks {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

@media (min-width: 640px) {
  .qlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qlink {
  display: grid;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}

.qlink__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  background: var(--concrete-2);
}

.qlink__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qlink__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.qlink__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.qlink:hover .qlink__row { border-bottom-color: var(--red); }

.qlink:hover .qlink__name { color: var(--red); }

/* Ensimmäinen laatta on kaksi kertaa leveämpi ja kaikki kuvat ovat saman
   korkuisia, jolloin nimirivit kohdistuvat: leveys kantaa hierarkian. */
@media (min-width: 1024px) {
  .qlinks { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }

  .qlink__media { aspect-ratio: auto; height: clamp(210px, 21vw, 300px); }
}

/* Epätasakorkuinen kuvapari */
.duo { position: relative; padding-bottom: clamp(40px, 6vw, 72px); }

.duo__big { border-radius: var(--radius); overflow: hidden; }

.duo__small {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .duo__small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    margin-top: 0;
    border: 6px solid var(--concrete);
  }

  .section--light-2 .duo__small { border-color: var(--concrete-2); }
}

/* Epätasakorkuinen galleria (alasivut) */
.mgrid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

@media (min-width: 768px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mgrid > :first-child { grid-row: span 2; }
}

/* Loppulause */
.closer { text-align: center; }

.closer.stack { justify-items: center; }

.closer .actions { justify-content: center; }

/* 12  Kortit, chipit, tuoteruudukko --------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  white-space: nowrap;
}

.chip--status {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--fg);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chip--big {
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  background: var(--concrete-2);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--concrete-2);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
}

.card:hover {
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(27, 27, 29, .12);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--concrete);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__status {
  position: absolute;
  top: 10px;
  left: 10px;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 16px 16px 18px;
}

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}

.card__spec {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Luvut monolla, sanat leipäfontilla: rivi luetaan lauseena, ei koodina. */
.card__spec .num {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .92em;
  font-feature-settings: 'tnum' 1;
}

.card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.card__amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--red);
}

/* Monon väli on leveä: "31 800 EUR" luettaisiin kahtena lukuna ilman tätä.
   Vain luvuille: "Kysy hintaa" on leipätekstiä ja sanat menisivät kiinni. */
.card__amount:not(.card__amount--ask),
.pricebox__sum { word-spacing: -.35em; }

.card__amount--ask {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
}

.card__vat {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.card:hover .card__name { color: var(--red); }

.cards {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Etusivun kolmen koneen nosto */
.machines__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.machines__cards {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .machines__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
  .machines__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* 13  Brändinauha (marquee) ----------------------------------------------- */

.brands {
  background: var(--ink);
  color: var(--fg);
  padding-block: clamp(40px, 5vw, 64px);
  --bgap: clamp(28px, 3.4vw, 46px);
}

.brands__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(22px, 3vw, 32px);
}

 /* Pohjatila (myös reduced motion): rivitetty lista containerin sisennyksellä */
.brands__viewport {
  overflow: visible;
  padding-inline: var(--gutter);
}

.brands__track {
  display: flex;
  gap: var(--bgap);
  flex-wrap: wrap;
}

.brands__row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bgap);
  margin: 0;
  padding: 0;
}

.brands__row--dup { display: none; }

.brands__row li {
  display: flex;
  align-items: center;
  gap: var(--bgap);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Erotinneliö on osa jokaista kohtaa, jolloin radan rytmi pysyy tasaisena
   ja marqueen sauma (-50% - gap/2) osuu kohdalleen. */
.brands__row li::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--red-bright);
}

.brands__tail {
  margin-top: clamp(20px, 2.6vw, 28px);
  font-size: .95rem;
  color: var(--fg-muted);
}

/* 14  Lomake ja yhteydenotto ---------------------------------------------- */

.contact { background: var(--concrete-2); }

.contact__lines {
  display: grid;
  gap: 2px;
  font-size: 1.05rem;
}

.contact__lines .mono { font-size: .95rem; color: var(--text-muted); }

.contact__mail {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.contact__mail:hover { color: var(--red-hover); }

.contact__area {
  font-size: .95rem;
  color: var(--text-muted);
  max-width: 44ch;
}

.formcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
}

.form {
  display: grid;
  gap: 18px;
  margin-top: clamp(18px, 2.4vw, 26px);
}

.field { display: grid; gap: 7px; }

.field__label {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
}

.field__req { color: var(--red); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  transition: border-color .2s ease;
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.field select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5A56' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-muted); }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-color: var(--red);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--red); }

.field__error {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--red);
}

.field__error[hidden] { display: none; }

.form__note {
  margin: 0;
  font-size: .88rem;
  color: var(--text-muted);
}

.form__consents {
  display: grid;
  gap: 10px;
  border: 0;
  margin: 0;
  padding: 0;
}

.form__consents legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: .92rem;
  font-weight: 600;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .98rem;
}

.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--red);
  margin: 0;
}

.form__ok {
  display: grid;
  gap: 8px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--fg);
  margin-top: clamp(18px, 2.4vw, 26px);
}

.form__ok[hidden] { display: none; }

.form__ok h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: var(--fg);
}

.form__ok p { color: var(--fg-muted); }

/* 15  Galleria, spec-lista, suodatin (alasivut) ---------------------------- */

.gallery { display: grid; gap: 12px; }

.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--concrete-2);
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  list-style: none;
}

.gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--concrete-2);
  transition: border-color .2s ease;
}

.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumb:hover { border-color: var(--text-muted); }

.gallery__thumb[aria-pressed="true"] { border-color: var(--red); border-width: 2px; }

.lightbox {
  width: min(94vw, 1200px);
  max-width: 94vw;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--fg);
}

.lightbox::backdrop { background: rgba(15, 15, 16, .82); }

.lightbox img { width: 100%; height: auto; }

.lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-dark-strong);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--fg);
}

.spec {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
}

.spec dt,
.spec dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.spec dt {
  font-weight: 500;
  color: var(--text-muted);
  padding-right: 16px;
}

.spec dd { font-family: var(--font-mono); font-size: .95rem; }

.pricebox {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  color: var(--fg);
}

.pricebox__stripe {
  height: 6px;
  background: repeating-linear-gradient(45deg,
    var(--red-bright) 0 10px,
    var(--ink-2) 10px 20px);
}

.pricebox__body {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.6vw, 30px);
}

.pricebox__amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.pricebox__notes {
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: .92rem;
  color: var(--fg-muted);
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.filter__btn {
  padding: 11px 16px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.filter__btn:hover { border-color: var(--text); }

.filter__btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--fg);
}

.filter__count {
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--text-muted);
}

/* Kapealla naytolla chipit eivat rivity kolmelle riville vaan rullaavat
   vaakasuunnassa oman laatikkonsa sisalla (min-width: 0 pitaa sivun
   scrollWidthin kurissa). */
@media (max-width: 640px) {
  .filter {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .filter > li { scroll-snap-align: start; }
}

.empty {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding: clamp(28px, 4vw, 44px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  max-width: var(--measure);
}

.empty[hidden] { display: none; }

/* 16  Footer -------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--fg);
  padding-block: clamp(48px, 6vw, 80px) 0;
}

.footer__grid {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
}

@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); }
}

.footer__blurb {
  margin-top: 16px;
  max-width: 34ch;
  color: var(--fg-muted);
  font-size: .98rem;
}

.footer__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
  color: var(--fg-muted);
}

.footer__list {
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: .98rem;
}

.footer__list a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.footer__list a:hover { border-bottom-color: var(--fg); }

.footer__list .mono { color: var(--fg-muted); font-size: .92rem; }

.footer__badge {
  display: inline-block;
  padding: 10px;
  background: var(--paper);
  border-radius: 8px;
  margin-bottom: 14px;
}

.footer__badge img { width: 148px; height: auto; }

.footer__bar {
  margin-top: clamp(36px, 5vw, 56px);
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: .92rem;
  color: var(--fg-muted);
}

/* 17  Utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-wide { display: none; }

@media (min-width: 1100px) {
  .u-wide { display: inline; }
}

.js [data-reveal] { opacity: 1; transform: none; }

/* 18  Liike (vain kun käyttäjä sallii) ------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Liikkuvat ja yli .2s kestävät siirtymät. Pohjatyyleissä on vain
     hover-värit (≤ .2s), joten reduced motion pysäyttää kaiken muun. */
  .skip { transition: top .2s ease; }

  .hdr { transition: border-color .25s ease; }

  .nav { transition: opacity .3s ease, visibility .3s ease; }

  .nav__link::after { transition: transform .28s var(--ease); }

  .callbar { transition: transform .3s var(--ease); }

  .btn {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                box-shadow .25s var(--ease), transform .25s var(--ease);
  }

  .btn__arrow { transition: transform .25s var(--ease); }

  .qlink__media img { transition: transform .5s var(--ease); }

  .qlink__row { transition: border-color .25s ease; }

  .card {
    transition: border-color .25s ease, box-shadow .3s var(--ease), transform .3s var(--ease);
  }

  .card__media img { transition: transform .5s var(--ease); }

  /* Scroll-revealit */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Heron latausanimaatio */
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes settle {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }

  .js .hero [data-load] {
    opacity: 0;
    animation: rise .7s var(--ease) forwards;
    animation-delay: var(--load-delay, 0ms);
  }

  .js .hero__img { animation: settle 1.4s var(--ease) forwards; }

  /* Marquee */
  @keyframes brandroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - var(--bgap) / 2), 0, 0); }
  }

  .brands__viewport { overflow: hidden; padding-inline: 0; }

  .brands__track {
    flex-wrap: nowrap;
    width: max-content;
    animation: brandroll 60s linear infinite;
    will-change: transform;
  }

  .brands__row { flex-wrap: nowrap; }

  .brands__row--dup { display: flex; }

  .brands__viewport:hover .brands__track,
  .brands__viewport:focus-within .brands__track { animation-play-state: paused; }

  /* Mikroliike */
  .btn--primary:hover,
  .btn--ghost:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }

  .btn:hover .btn__arrow { transform: translateX(3px); }

  .card:hover { transform: translateY(-2px); }

  .card:hover .card__media img,
  .qlink:hover .qlink__media img { transform: scale(1.04); }
}

/* ===== Alasivut =============================================================
   Vain lisäyksiä: palvelut.html, huolto-ja-korjaus.html, yhteydenotto.html,
   evasteet.html ja 404.html. Yksikään yllä oleva sääntö ei muutu.
   ========================================================================== */

/* Otsikko sektion alussa, kun sitä ei kääritä .stackiin */
.section__head { margin-bottom: clamp(26px, 3.6vw, 44px); }

/* Kaksi palstaa leipätekstiä (palvelut: huolto- ja rengaskappaleet) */
.cols2 {
  display: grid;
  gap: clamp(20px, 3vw, 44px);
}

.cols2 > p {
  margin: 0;
  max-width: var(--measure);
}

@media (min-width: 900px) {
  .cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Kehotusrivi: asiakkaan lihavoitu lause + nappi samalla viivalla */
.ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(30px, 4vw, 48px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--line);
}

.ctarow p {
  margin: 0;
  flex: 1 1 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

/* Palvelulistojen laatat: hiusviiva TAI varjo, ei molempia */
.panels {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

@media (min-width: 768px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.panel {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--concrete-2);
}

/* Vaaleammalla bandilla laatta nousee valkoisena, kuten .formcard. */
.section--light-2 .panel { background: var(--paper); }

/* Listan aloitusrivi on lause, ei otsikko: ei versaalia eikä kicker-ilmettä. */
.panel__lead {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
}

.note {
  margin-top: clamp(22px, 3vw, 32px);
  max-width: var(--measure);
  color: var(--text-muted);
}

/* Iso hyötylista tummalla bandilla (huolto: "Milloin huoltoon?") */
.marks--big { gap: 14px; }

.marks--big li {
  padding-left: 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.marks--big li::before {
  top: .42em;
  width: 9px;
  height: 9px;
}

/* Chip-rivi (ei linkkejä). Pitkä chip saa rivittyä, jottei 360px vuoda. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.chips .chip { white-space: normal; }

.section--light-2 .chip--big { background: var(--paper); }

/* Kuvan paikanvaraus tummalla pohjalla */
.section--dark .media { background: var(--ink-2); }

/* Tumman sektion ja brändinauhan raja, kun ne osuvat peräkkäin */
.section--dark + .brands { border-top: 1px solid var(--line-dark); }

/* Epätasakorkuinen galleria: ensimmäinen ruutu täyttää molemmat rivit */
@media (min-width: 768px) {
  .mgrid--stretch > :first-child { align-self: stretch; }

  .mgrid--stretch > figure:first-child { grid-template-rows: minmax(0, 1fr) auto; }

  .mgrid--stretch > :first-child.media,
  .mgrid--stretch > :first-child > .media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }
}

/* Kuvaton phero (evasteet, 404): yksi palsta, containerin linjassa */
.phero--plain .phero__grid {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}

.phero--plain .phero__panel {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(44px, 6.5vw, 84px) var(--gutter);
}

/* Yhteystietojen lisärivit (Y-tunnus, www) */
.contact__meta {
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: .95rem;
  color: var(--text-muted);
}

.contact__meta .mono { font-size: .9rem; }

/* Rivitetty h1 (huolto-ja-korjaus) */
.h-lines > span { display: block; }

/* Lyhyt sivu: footer ei nouse heti otsikon perään */
.minipage {
  display: grid;
  align-items: center;
  min-height: 34vh;
}

/* ===== Linkit tummalla pherolla (ingressin sisäinen linkki) ===== */
.phero a:not(.btn),
.section--dark p a:not(.btn) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--red-bright);
  text-underline-offset: .16em;
}
.phero a:not(.btn):hover,
.section--dark p a:not(.btn):hover {
  text-decoration-color: var(--fg);
}