/* Hallmark · v4 · genre: modern-minimal (Packhelp-henkinen) · macrostructure: Catalogue + Feature Stack · theme: custom (JIT-sininen)
 * tone: selkeä ja graafinen · anchor hue: 258 · corners: pyöreät (terävä vaihtoehto vertailussa) · design-system: design.md v4
 * v4 = v2:n teema palautettuna. Uutta: hero kuvakehyksenä ilman laatikkoa, luottamusrivi, säänkestävien nosto, 1440 px sivu.
 * etusivun järjestys: navi (2 riviä) → hero (banneri, otsikko kuvalla) → luottamusrivi → tuoteryhmät (välilehdet)
 *   → miksi JIT (haitari) → toimialat (välilehdet + 4 korttia) → liukuva nauha → palvelut ja tekninen tuki (tumma paneeli)
 *   → säänkestävät → tarjouspyyntö (valitsin) → footer
 * Asiakkaan poikkeukset: lasiefekti kuvan päällä, kiilto painikkeissa, yksi liukuva koristenauha.
 * 23.10. (brief): heron valokerros ja sisääntulo,
 *   tuotteet samassa mittakaavassa, verkkokaupan hakuosio, UKK avattavana listana, lomake lasilla.
 *   Asettelu 23.10.: yksirivinen läpinäkyvä navigaatio, luottamusrivi heron alareunassa, verkkokauppaosio pois,
 *   läpinäkyvät tuotekuvat laatoissa ja valokuvat yhteisessä hillityssä sävyssä. Lasipinnat poistettu (umpinaiset pinnat).
 *   Viimeistely 23.10.: yhtenäiset tuotelaatat ja kuvakortit, yksi painikekoko, ei kiiltoa eikä zoomausta (hover: värimuutos
 *   ja pieni nousu), samat otsikko- ja tekstileveydet, irtoava tarrankulma yksityiskohtana.
 *   Animaatiot 23.10.: osiot ja kortit nousevat pehmeästi esiin vieritettäessä, täytetyissä painikkeissa kiilto hoverissa.
 */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-lg));
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }

h1, h2, h3 {
  min-width: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
/* Tummalla kuvalla vaalea kohdistus */
.hero :focus-visible { outline-color: var(--color-on-dark); }

.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  left: var(--space-md);
  top: calc(-1 * var(--space-4xl));
  z-index: var(--z-skip);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-weight: 600;
}
.skip-link:focus { top: var(--space-sm); }

/* --------------------------------------------------------------------------
   Painikkeet — yksi koko kaikkialla: pilleri, 48 px. Täytetyssä painikkeessa nuoli valkoisessa ympyrässä, joka täyttää painikkeen hoverissa.
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  overflow: hidden;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  font: 500 0.9375rem/1 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-short) var(--ease-out); }

.btn--primary { background: var(--color-accent); color: var(--color-on-dark); }
.btn--primary:hover { background: var(--color-accent-hover); }
/* Täytetty painike: vasemmalla valkoinen ympyrä ja sininen kuvake (nuoli, puhelinpainikkeessa puhelin). Hoverissa ja näppäimistökohdistuksessa ympyrä
   laajenee koko painikkeen levyiseksi niin, että sininen reuna jää näkyviin; nuoli liukuu oikeaan reunaan ja teksti muuttuu
   siniseksi. Painikkeen leveys ei muutu, koska sisennykset vaihtavat puolta. */
.btn--primary:has(> .icon) {
  --dot-inset: 1.5px;
  --dot: calc(46px - 2 * var(--dot-inset));
  padding-inline: calc(var(--dot-inset) + var(--dot) + var(--space-sm)) var(--space-lg);
  transition: color var(--dur-short) var(--ease-out), padding var(--dur-fill) var(--ease-smooth), transform var(--dur-micro) var(--ease-out);
}
.btn--primary:has(> .icon)::before {
  content: "";
  position: absolute;
  inset-block: var(--dot-inset);
  left: var(--dot-inset);
  z-index: -1;
  width: var(--dot);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  transition: width var(--dur-fill) var(--ease-smooth);
}
.btn--primary > .icon { position: absolute; top: calc(50% - 9px); left: calc(var(--dot-inset) + var(--dot) / 2 - 9px); color: var(--color-accent); transition: left var(--dur-fill) var(--ease-smooth); }
.btn--primary:has(> .icon):is(:hover, :focus-visible) { padding-inline: var(--space-lg) calc(var(--dot-inset) + var(--dot) + var(--space-sm)); background: var(--color-accent); color: var(--color-accent); }
.btn--primary:has(> .icon):is(:hover, :focus-visible)::before { width: calc(100% - 2 * var(--dot-inset)); }
.btn--primary:is(:hover, :focus-visible) > .icon { left: calc(100% - var(--dot-inset) - var(--dot) / 2 - 9px); }
/* Toissijainen toiminto: pelkkä teksti ja nuoli perässä, ei reunaa eikä taustaa (vaalealla ja kuvan päällä) */
.btn--line, .btn--glass { padding-inline: var(--space-2xs); background: none; }
.btn--line { color: var(--color-ink); }
.btn--glass { color: var(--color-on-dark); }
.btn--line:hover { color: var(--color-accent); }
.btn--glass:hover { color: var(--color-accent-soft); }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link .icon { width: 18px; height: 18px; }

/* Yläotsikko osion otsikon yläpuolella: versaalit väljällä välistyksellä (karico.fi). Sama tyyli valkoisella
   ja huurrepaneeleissa, joissa väri on vaalea. */
.eyebrow, .hero__since {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}
/* Heron otsikon yläpuolella perustamisvuosi yksinään pienenä tarrana: ohut jäänsininen reuna ja valkoinen teksti */
.hero__since { width: fit-content; padding: 0.45em 0.95em; border: var(--rule-hair) solid color-mix(in oklch, var(--color-accent-soft) 60%, transparent); border-radius: var(--radius-pill); color: var(--color-on-dark); }

/* --------------------------------------------------------------------------
   Navigaatio · yksi rivi: logo, päävalikko ja toiminnot (haku, puhelin, kieli, tarjouskori, Pyydä tarjous).
   Läpinäkyvä heron päällä valkoisin tekstein ja vierii heron mukana pois (ei kellu heron päällä). Kun hero on vieritetty,
   palkki liukuu näkyviin valkoisena tummin tekstein ja pysyy ylhäällä; valkoinen myös valikon ollessa auki.
   Megavalikko ja haku avautuvat valkoisina paneeleina palkin alle.
   -------------------------------------------------------------------------- */
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  border-bottom: var(--rule-hair) solid transparent;
  color: var(--color-on-dark);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled { position: fixed; animation: nav-in var(--dur-long) var(--ease-out); }
@keyframes nav-in { from { transform: translateY(-100%); } }
.nav.is-scrolled, .nav.is-open {
  border-bottom-color: var(--color-rule);
  background-color: var(--color-paper);
  box-shadow: var(--shadow-bar);
  color: var(--color-ink);
}
/* Kohdistus: läpinäkyvänä vaalea, vaalealla palkilla ja paneeleissa sininen */
.nav :focus-visible { outline-color: var(--color-on-dark); }
.nav.is-scrolled :focus-visible, .nav.is-open :focus-visible, .nav .mega :focus-visible, .nav .search :focus-visible { outline-color: var(--color-focus); }

.nav__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  min-height: var(--nav-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand { position: relative; flex: none; display: block; width: 164px; }
.brand img { width: 164px; transition: opacity var(--dur-short) var(--ease-out); }
.brand .logo-dark { position: absolute; inset: 0; opacity: 0; }
.nav.is-scrolled .logo-dark, .nav.is-open .logo-dark { opacity: 1; }
.nav.is-scrolled .logo-light, .nav.is-open .logo-light { opacity: 0; }

/* Päävalikko logon jälkeen: pelkkä teksti; hiiren alla ja avoimena korostusväri */
/* Valikkokohdat ovat palkin korkuisia, jotta hiiri pääsee kohdasta suoraan megavalikkoon ilman väliä */
.nav__row { display: flex; align-self: stretch; align-items: stretch; min-width: 0; }
.nav__item { display: flex; align-items: center; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: inherit;
  font: 400 var(--text-base)/1 var(--font-body);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.nav__link .icon { width: 16px; height: 16px; transition: transform var(--dur-short) var(--ease-out); }
.nav__link:hover, .nav__item--menu.is-open .nav__trigger { color: var(--color-accent-soft); }
.nav.is-scrolled .nav__link:hover, .nav.is-open .nav__link:hover, .nav.is-open .nav__item--menu.is-open .nav__trigger { color: var(--color-accent); }
.nav__item--menu.is-open .nav__trigger .icon { transform: rotate(180deg); }

/* Toiminnot oikealla: kuvakkeet ilman taustaa (hover himmentää) ja Pyydä tarjous -painike */
.nav__actions { display: flex; align-items: center; gap: var(--space-2xs); margin-inline-start: auto; }
.nav__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.nav__icon .icon { width: 22px; height: 22px; }
/* Puhelin näkyvissä ylhäällä (palaveri: asiakaspalvelu ylhäällä); kapeammalla pelkkä kuvake */
.nav__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 44px;
  min-height: 44px;
  margin-inline: var(--space-xs);
  font: 500 0.9375rem/1 var(--font-body);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__phone .icon { width: 20px; height: 20px; }
.nav__lang {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 44px;
  color: inherit;
  font: 500 var(--text-sm)/1 var(--font-body);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.nav__phone, .nav__icon, .nav__lang { transition: opacity var(--dur-short) var(--ease-out); }
.nav__phone:hover, .nav__icon:hover, .nav__lang:hover { opacity: 0.7; }
.nav__cta { margin-inline-start: var(--space-xs); }
.nav__menu { display: none; }

/* Hiirellä megavalikko aukeaa osoittimen alla; palkki muuttuu valkoiseksi paneelin jatkeeksi */
@media (hover: hover) and (min-width: 75.01rem) {
  .nav:has(.nav__item--menu:hover) { border-bottom-color: var(--color-rule); background-color: var(--color-paper); color: var(--color-ink); }
  .nav:has(.nav__item--menu:hover) .logo-dark { opacity: 1; }
  .nav:has(.nav__item--menu:hover) .logo-light { opacity: 0; }
  .nav:has(.nav__item--menu:hover) .nav__scrim { opacity: 1; }
  .nav__item--menu:hover .nav__trigger { color: var(--color-accent); }
  .nav__item--menu:hover .nav__trigger .icon { transform: rotate(180deg); }
  /* Hiiren alla oleva valikko korvaa napautuksella avatun */
  .nav__row:has(.nav__item--menu:hover) .nav__item--menu:not(:hover) .mega { display: none; }
}

/* Megavalikko: koko levyinen valkoinen paneeli, palstat ja nostokortit. Sivu himmenee alla. */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding-block: var(--space-xl) var(--space-lg);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-float);
  color: var(--color-ink);
}
.nav__item--menu.is-open .mega { display: block; }
@media (hover: hover) and (min-width: 75.01rem) { .nav__item--menu:hover .mega { display: block; } }
.mega__inner, .mega__foot {
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mega__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xl); }
.mega__inner--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
.mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.mega__title { margin-bottom: var(--space-sm); color: var(--color-ink); font: 500 var(--text-base)/1.2 var(--font-display); letter-spacing: -0.015em; }
.mega__col a {
  display: block;
  padding-block: 6px;
  color: var(--color-ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.mega__col a:hover { color: var(--color-accent); }
.mega__promos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.mega__foot { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }

.promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 15.5rem;
  padding: var(--space-lg);
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  isolation: isolate;
}
.promo__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.75; }
.promo__title { max-width: 15ch; font: 500 var(--text-lg)/1.15 var(--font-display); letter-spacing: -0.02em; }
.promo__link { font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 4px; }
.promo__img {
  position: absolute;
  right: -6%;
  bottom: -12%;
  z-index: -1;
  width: 52%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  transform: rotate(-7deg);
  transition: transform var(--dur-long) var(--ease-out);
}
.promo:hover .promo__img { transform: rotate(-4deg) translateY(-6px); }
.promo--tint { background: var(--color-accent-tint); color: var(--color-ink); }
.promo--accent { background: var(--color-accent); color: var(--color-on-dark); }
.promo--photo { justify-content: flex-end; padding: var(--space-sm); color: var(--color-ink); background: var(--color-photo-bed); }
.promo__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.promo--photo:hover .promo__bg { transform: scale(1.04); }
.promo__label {
  display: grid;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  box-shadow: var(--shadow-tile);
}
.promo__label .promo__title { font-size: var(--text-base); max-width: none; }

.nav__scrim {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100vh;
  background: var(--color-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out);
}
.nav.is-mega .nav__scrim { opacity: 1; }

.nav__sheet { display: none; }

/* Hakupaneeli palkin alla: iso pilleri-kenttä ja ehdotukset */
.search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--space-lg) var(--space-xl);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-float);
  color: var(--color-ink);
}
.search[hidden] { display: none; }
.search__form { display: flex; align-items: center; gap: var(--space-sm); }
.search__form > .icon { position: absolute; margin-left: var(--space-md); color: var(--color-muted); pointer-events: none; }
.search__form { position: relative; }
.search__form input[type="search"] {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 var(--space-md) 0 3rem;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-card-2);
  color: var(--color-ink);
  font: 500 var(--text-lg)/1.2 var(--font-display);
  letter-spacing: -0.015em;
  -webkit-appearance: none;
  appearance: none;
}
.search__form > .icon { left: var(--gutter); }
.search__form input[type="search"]::placeholder { color: var(--color-muted); font-weight: 400; }
.search__form input[type="search"]:focus-visible { border-color: var(--color-ink); outline-offset: 2px; }
.search__results { margin-top: var(--space-md); }
.search__hint { color: var(--color-muted); font-size: var(--text-sm); }
.search__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.search__list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-card);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out);
}
.search__list a:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.search__list small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Hero · asiakkaan banneri sumennettuna sinivaloksi reunasta reunaan, navigaatio läpinäkyvänä päällä. Ei tuotekuvia: näyttävyys
   tulee suuresta kaksirivisestä otsikosta (rivit nousevat maskin takaa), taustan elokuvamaisesta sisääntulosta ja hitaasta
   liukumasta, hiiren mukana liikkuvasta valosta ja hennosta rakeesta. Vieritettäessä tausta jää jälkeen ja teksti nousee pois.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: clamp(44rem, 100svh, 62rem);
  overflow: clip;
  background: var(--color-night);
  color: var(--color-on-dark);
  isolation: isolate;
}
/* Taustakerros: kuva, valo ja rae. Kuva tulee esiin suurennoksesta ja liukuu sen jälkeen hitaasti; hiirellä kuva liikkuu
   hieman osoittimen mukana kuin kangas (main.js: --mx, --my, -1…1). Scale 1.06 jättää liikkeille tilaa reunoihin. */
.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  scale: 1.06;
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 10px);
  animation: hero-push var(--dur-cinema) var(--ease-out) both, fade-in 900ms ease both, hero-drift 26s ease-in-out var(--dur-cinema) infinite alternate;
}
/* Valo hiiren kohdalla (main.js: --gx, --gy). Tekstin tummennus on valon päällä, joten teksti pysyy luettavana */
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 74%; }
@property --gy { syntax: "<percentage>"; inherits: true; initial-value: 38%; }
.hero__glow { position: absolute; inset: 0; background: radial-gradient(38rem circle at var(--gx) var(--gy), var(--hero-glow), transparent 70%); mix-blend-mode: screen; pointer-events: none; animation: fade-in 1400ms ease 900ms both; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: 0.16; mix-blend-mode: overlay; pointer-events: none; }
/* Kangas (main.js, WebGL): sama kuva piirretään aaltoilevana kuvan päälle, kun sisääntulo on ohi; ilman WebGL:ää näkyy kuva */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; scale: 1.06; opacity: 0; transition: opacity 900ms ease; }
.hero__canvas.is-ready { opacity: 1; }
@keyframes hero-push { from { scale: 1.16; } }
@keyframes hero-drift { to { transform: translate3d(-1.2%, -0.8%, 0); } }
/* Tumma liukuväri yläreunassa: läpinäkyvän navigaation teksti erottuu */
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(var(--nav-h) * 2.4); background: var(--scrim-top); pointer-events: none; }
/* Tausta rauhoitetaan tekstin takaa; tuotteen puoli jää kirkkaaksi */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-calm); pointer-events: none; }
/* Teksti ja luottamusrivi aina taustan yläpuolella */
.hero__inner { position: relative; z-index: 2; align-self: center; padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-xl); }
/* Teksti suoraan kuvan päällä ilman paneelia; luettavuus tulee tummennuksesta (--hero-calm) ja hennosta varjosta */
.hero__copy { text-shadow: var(--hero-text-shadow); }
.hero h1 { margin-top: var(--space-md); color: var(--color-on-dark); font-size: var(--text-display); letter-spacing: -0.05em; line-height: 0.92; }
/* Otsikon rivit nousevat maskin takaa porrastetusti; alareunan lisätila pitää j- ja p-kirjainten hännät näkyvissä */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; text-wrap: balance; }
.hero__line > span { display: inline-block; animation: line-up var(--dur-hero) var(--ease-out) both; animation-delay: calc(240ms + var(--l, 0) * 130ms); }
@keyframes line-up { from { transform: translate3d(0, 108%, 0); } }
/* Luottamusrivin kohdat nousevat esiin tekstin jälkeen porrastetusti */
.hero__lede { max-width: var(--measure-text); margin-top: var(--space-lg); color: var(--color-on-dark); font-size: var(--text-md); line-height: 1.6; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
/* Luotettavuus heron oikeassa alakulmassa erillään tekstistä: AAA-merkki ja asiakasmäärä pienenä vaaleanharmaalla, välissä
   ohut pystyviiva. Tulee esiin tekstin jälkeen. Puhelimella heron yläosassa navigaation alla. */
.hero__foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-bottom: var(--space-xl); }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); color: var(--color-on-dark-2); font-size: var(--text-sm); line-height: 1.4; }
.hero__proof li { display: flex; align-items: center; gap: var(--space-sm); animation: rise var(--dur-enter) var(--ease-out) 700ms both; }
.hero__proof li + li { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-line-on-dark); animation-delay: 790ms; }
.hero__aaa { flex: none; width: auto; height: 2rem; }

/* Heron sisääntulo sivun latautuessa: teksti nousee rauhallisesti porrastettuna (otsikolla oma rivinousu) */
.enter > * {
  opacity: 0;
  transform: translateY(14px);
  animation: enter var(--dur-enter) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 100ms);
}
.enter > h1 { opacity: 1; transform: none; animation: none; }
@keyframes enter { to { opacity: 1; transform: none; } }
/* Vieritettäessä tausta jää jälkeen ja heron teksti nousee ja himmenee (selaimissa, jotka tukevat vieritykseen sidottua animaatiota) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__bg { animation: hero-sink linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .hero__inner { animation: hero-lift linear both; animation-timeline: scroll(root); animation-range: 0 85svh; }
  }
}
@keyframes hero-sink { to { transform: translate3d(0, 22%, 0); } }
@keyframes hero-lift { to { opacity: 0.3; transform: translate3d(0, -10%, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade-in { from { opacity: 0; } }

/* Sisääntulot vieritettäessä: main.js lisää osioille ja korteille .reveal ja näkyviin tullessa .is-visible.
   Nousu 18 px ja häivytys pehmeällä käyrällä, rivien kortit porrastetusti 60 ms (--d). Ilman JavaScriptiä kaikki näkyy heti. */
.reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-reveal) var(--ease-smooth), transform var(--dur-reveal) var(--ease-smooth); transition-delay: calc(var(--d, 0) * 60ms); }
.reveal:not(.is-visible) { will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Tuoteryhmän vaihto: valittu ryhmä häivytetään esiin, ettei ruudukko vaihdu nykäyksellä */
[role="tabpanel"]:not([hidden]) { animation: panel-in var(--dur-long) var(--ease-smooth); }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
@media print { .reveal { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Edustamamme tuotemerkit · valmistajien logot yksivärisinä ja himmennettyinä yhdellä rivillä heron alla, otsikko
   ohuen viivan alussa. Koko tasataan pinta-alan mukaan: korkeus = --brand-size × --h (--h ≈ 1/√leveyssuhde), joten
   leveät ja kapeat logot näyttävät yhtä suurilta. Tabletilla ja puhelimella 3 × 3.
   -------------------------------------------------------------------------- */
.brands { --brand-size: clamp(2.1rem, 1.5rem + 1.9vw, 3.4rem); padding-block: var(--section-y); }
.brands__title { display: flex; align-items: center; gap: var(--space-md); color: var(--color-muted); font: 600 var(--text-xs)/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; }
.brands__title::after { content: ""; flex: 1; border-top: var(--rule-hair) solid var(--color-rule); }
.brands__list { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); }
.brands__list li { display: flex; justify-content: center; }
.brands__list img { width: auto; max-width: 100%; height: calc(var(--brand-size) * var(--h)); object-fit: contain; filter: brightness(0); opacity: 0.55; }

/* --------------------------------------------------------------------------
   Tuoteryhmät · kaksitoista pääryhmää ruudukkona: tuote tasaisella harmaalla, nimi alla. Kaikki näkyvissä kerralla.
   -------------------------------------------------------------------------- */
/* Tuoteryhmien ja seuraavan osion (palvelut) väli on 40 px muita pienempi (asiakkaan toive 23.10.) */
.catalog { padding-block: var(--section-y) calc(var(--section-y) - 1.25rem); }
.sec-head.sec-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-sm) var(--space-xl); max-width: none; }
.catalog__more { display: flex; justify-content: flex-end; margin-top: var(--space-lg); }
.catalog__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }

/* Tuotelaatta: vaalea siniharmaa pyöreä neliö, hento reuna ja varjo, tuote keskellä ja nimi alla. Kaikki tuotekuvat
   ovat läpinäkyviä (assets/img/irti, irrotettu taustasta) ja samassa mittakaavassa: tuotteen pisin sivu noin 78 %
   laatasta, sama pehmeä varjo. Hoverissa laatta nousee 4 px ja nimi muuttuu siniseksi – ei zoomausta. */
.pcard { display: grid; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; }
.pcard__img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-photo-light);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--color-tile-line), var(--shadow-tile);
  isolation: isolate;
  transition: transform var(--dur-long) var(--ease-smooth), box-shadow var(--dur-long) var(--ease-smooth);
}
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard:hover .pcard__img { transform: translateY(-4px); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-tile-line), var(--shadow-tile-hover); }
.pcard__name { font-size: var(--text-base); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; text-align: center; text-wrap: balance; transition: color var(--dur-short) var(--ease-out); }
.pcard:hover .pcard__name { color: var(--color-accent); }
.pcard:focus-visible { outline: none; }
.pcard:focus-visible .pcard__img { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html[data-kuvat="vaaleat"] .pcard__img .pcard__irti { object-fit: contain; padding: 11%; filter: var(--shadow-cutout); }
/* Luonnoksen vertailu: nykyiset kuvat tummalla alustalla */
html[data-kuvat="nykyiset"] .pcard__img { background: var(--color-photo-bed); }

/* --------------------------------------------------------------------------
   Miksi JIT · ilman kortteja (23.10.): pääviesti ja iso kuva vierekkäin. Perustelut on tiivistetty ingressiin,
   johon valikon Tekninen tuki -linkki (#tuki) osuu.
   -------------------------------------------------------------------------- */
.why { padding-block: var(--section-y); }
.why__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: center; }
.why h2 { max-width: var(--measure-title); margin-top: var(--space-md); font-size: var(--text-2xl); }
.why__intro > p:not(.eyebrow) { max-width: var(--measure-text); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.6; }
.why__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-photo-bed); }
/* Graafinen yksityiskohta: irtoava tarrankulma kuvan oikeassa yläkulmassa – vain tässä kuvassa */
.why__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4.5rem;
  height: 4.5rem;
  border-bottom-left-radius: var(--radius-sm);
  background: linear-gradient(225deg, var(--color-paper) 50%, var(--color-sticker-back) 50%, var(--color-paper));
  box-shadow: var(--shadow-peel);
  pointer-events: none;
}
.why__img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-xl); }

/* Tuoteryhmien suodatus otsikkorivin oikeassa reunassa (referenssin mukaan): pelkkä teksti, valittu tumma ja
   alleviivattu JIT-sinisellä (viiva kasvaa näkyviin), muut harmaat. Kapealla rivi vierii vaakasuunnassa. */
.filters { display: flex; gap: var(--space-xs) var(--space-lg); }
.filters[hidden] { display: none; }
.filters__btn {
  position: relative;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  font: 500 var(--text-base)/1 var(--font-body);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.filters__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--dur-long) var(--ease-out); }
.filters__btn:hover, .filters__btn[aria-selected="true"] { color: var(--color-ink); }
.filters__btn[aria-selected="true"]::after { transform: scaleX(1); }
[role="tabpanel"][hidden] { display: none; }

/* Osion otsikkorivi */
.sec-head { max-width: 46rem; margin-bottom: var(--space-xl); }
.sec-head h2 { max-width: var(--measure-title); margin-top: var(--space-md); font-size: var(--text-2xl); }
.sec-head p:not(.eyebrow) { max-width: var(--measure-text); margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); }

/* Valokuvien yhteinen sävy (23.10.): toimialojen, palveluiden, Miksi JIT - ja K-kaupoille-osion
   kuvat hillitymmin värein, jotta eriväriset kuvat muodostavat yhtenäisen sarjan. Tuotekuvat säilyttävät värinsä. */
.sector__media img, .svc__media img, .feature__photo, .why__img { filter: var(--photo-grade); }

/* --------------------------------------------------------------------------
   Aukeavat kuvapaneelit (toimialat ja palvelut) · React-kirjastojen expandable gallery- ja focus cards -mallin mukaan:
   paneelit vierekkäin, ensimmäinen auki. Hiiren tai näppäimistön kohdalla oleva aukeaa ja muut kapenevat ja himmenevät.
   Kuva täyttää paneelin, nimi alareunassa tumman liukuvärin päällä (liukuväri kuvan alaosassa); auki olevassa nimi on
   suurempi ja näkyy myös kuvaus. Valkoinen nuoliympyrä on jokaisen paneelin oikeassa yläkulmassa ja muuttuu siniseksi
   hiiren alla. Auki-tila on muuttujassa --open (0/1). Koko paneeli on linkki.
   Alle 960 px:n leveydellä tavallisina kuvapaneeleina (toimialat 2 × 2, palvelut allekkain), kaikki auki.
   -------------------------------------------------------------------------- */
/* Toimialat tummansinisellä pohjalla reunasta reunaan: rytminvaihdos pitkään valkoiseen sivuun, valkoinen otsikko */
.sectors { padding-block: var(--section-y); background: var(--color-night); color: var(--color-on-dark-2); }
.sectors .eyebrow { color: var(--color-on-dark-2); }
.sectors h2 { color: var(--color-on-dark); }
.sectors :focus-visible { outline-color: var(--color-on-dark); }
.sectors__grid, .svc-grid { display: flex; gap: var(--space-sm); height: clamp(24rem, 14rem + 20vw, 34rem); }
.sectors__grid > li, .svc-grid > li { --open: 0; flex: 1 1 0; min-width: 0; transition: flex-grow var(--dur-open) var(--ease-smooth); }
.sectors__grid:not(:has(> li:is(:hover, :focus-within))) > li:first-child,
.svc-grid:not(:has(> li:is(:hover, :focus-within))) > li:first-child,
.sectors__grid > li:is(:hover, :focus-within),
.svc-grid > li:is(:hover, :focus-within) { --open: 1; flex-grow: 2.4; }
.sector, .svc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: clamp(1.25rem, 0.6rem + 1.6vw, 2.25rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-photo-bed);
  color: var(--color-on-dark);
  text-decoration: none;
  isolation: isolate;
}
.sector::before, .svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panel-shade); pointer-events: none; }
.sector::after, .svc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--panel-dim); opacity: calc(1 - var(--open)); transition: opacity var(--dur-open) var(--ease-smooth); pointer-events: none; }
.sector__media, .svc__media { position: absolute; inset: 0; z-index: -2; }
.sector__media img, .svc__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.sector:focus-visible, .svc:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
/* Nimi kasvaa auki olevassa paneelissa (--text-lg → --text-xl) */
.sector__title, .svc__title { max-width: 16ch; color: var(--color-on-dark); font: 500 calc(var(--text-lg) + var(--open) * (var(--text-xl) - var(--text-lg)))/1.15 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; transition: font-size var(--dur-open) var(--ease-smooth); }
.sector__text, .svc__text {
  max-width: 34ch;
  max-height: calc(var(--open) * 5em);
  margin-top: calc(var(--open) * var(--space-xs));
  overflow: hidden;
  color: var(--color-on-dark-2);
  font-size: var(--text-md);
  line-height: 1.5;
  opacity: var(--open);
  transition: max-height var(--dur-open) var(--ease-smooth), margin var(--dur-open) var(--ease-smooth), opacity var(--dur-long) var(--ease-out);
}
/* Valkoinen nuoliympyrä jokaisen paneelin oikeassa yläkulmassa (sama kuin täytetyissä painikkeissa), hiiren alla sininen */
.sector__title .icon, .svc__title .icon {
  position: absolute;
  top: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  right: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  width: 44px;
  height: 44px;
  padding: 13px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--shadow-float);
  color: var(--color-accent);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sectors__grid > li:is(:hover, :focus-within) .icon, .svc-grid > li:is(:hover, :focus-within) .icon { background: var(--color-accent); color: var(--color-on-dark); }

/* --------------------------------------------------------------------------
   Liukuva nauha · suora vaaleansininen kaista osioiden välissä (koriste)
   -------------------------------------------------------------------------- */
.ribbon {
  position: relative;
  z-index: 1;
  padding-block: var(--space-sm);
  overflow: hidden;
  border-block: var(--rule-hair) solid var(--color-accent-tint-2);
  background: var(--color-accent-tint);
}
/* Nauha koostuu samanlaisista sarjoista (main.js monistaa niitä tarpeen mukaan) ja liikkuu tasan yhden sarjan verran,
   joten toisto on saumaton kaikilla leveyksillä. Ilman JavaScriptiä kaksi sarjaa ja siirtymä -50 %. */
.ribbon__track { display: flex; width: max-content; animation: marquee var(--marquee-time, var(--dur-marquee)) linear infinite; }
.ribbon__set { display: flex; flex: none; align-items: center; gap: var(--space-lg); padding-right: var(--space-lg); }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon span { color: var(--color-accent); font: 500 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.ribbon .icon { width: 18px; height: 18px; color: var(--color-accent); }
@keyframes marquee { to { transform: translateX(var(--marquee-distance, -50%)); } }

/* --------------------------------------------------------------------------
   Palvelut · tuoteryhmien jälkeen valkoisella: kolme aukeavaa kuvapaneelia rinnakkain (ks. toimialat)
   -------------------------------------------------------------------------- */
.services { padding-block: calc(var(--section-y) - 1.25rem) var(--section-y); }

/* --------------------------------------------------------------------------
   K‑kaupoille · kuva ja teksti vierekkäin ilman laatikkoa: myymäläkuva, neljä tuoteryhmää kuvakkein
   -------------------------------------------------------------------------- */
.feature { padding-block: var(--section-y); }
.feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl) var(--space-3xl); align-items: center; }
.feature__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--color-photo-bed); isolation: isolate; }
.feature__photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.feature h2 { max-width: var(--measure-title); margin-top: var(--space-md); font-size: var(--text-2xl); }
.feature__body > p:not(.eyebrow) { max-width: var(--measure-text); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-md); }
.feature__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-xl); margin-top: var(--space-xl); }
.feature__list li { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--color-muted); font-size: var(--text-base); line-height: 1.5; }
.feature__list .icon { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--color-accent); stroke-width: 1.6; }
.feature__list strong { display: block; margin-bottom: var(--space-2xs); color: var(--color-ink); font: 500 var(--text-lg)/1.2 var(--font-display); letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   Usein kysyttyä · otsikko ja yhteystiedot vasemmalla, kysymykset oikealla pyöristettyinä kortteina: kiinni vaalea
   siniharmaa, auki valkoinen ohuella reunalla ja kevyellä varjolla. Oikealla pyöreä avauspainike kuten nuoliympyrät:
   kiinni valkoinen ja sininen plus, auki sininen ja valkoinen risti. Yksi auki kerrallaan, ensimmäinen valmiiksi auki.
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--section-y); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--space-3xl); align-items: start; }
.faq__head { display: flex; flex-direction: column; align-items: flex-start; }
.faq h2 { max-width: var(--measure-title); margin-top: var(--space-md); font-size: var(--text-2xl); }
.faq__head > p:not(.eyebrow) { max-width: var(--measure-text); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-md); }
.faq a { color: var(--color-ink); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 4px; white-space: nowrap; }
.faq a:hover { color: var(--color-accent); }
.faq__list { display: grid; gap: var(--space-sm); }
.faq__item {
  border-radius: var(--radius-lg);
  background: var(--color-mist);
  transition: background-color var(--dur-long) var(--ease-smooth), box-shadow var(--dur-long) var(--ease-smooth);
}
.faq__item[open] { background: var(--color-paper); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule), var(--shadow-float); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-md) clamp(1.25rem, 0.9rem + 1vw, 2rem);
  color: var(--color-ink);
  font: 500 var(--text-md)/1.3 var(--font-display);
  letter-spacing: -0.02em;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span { text-wrap: balance; }
.faq__item summary:hover { color: var(--color-accent); }
.faq__item summary:focus-visible { border-radius: var(--radius-lg); }
.faq__icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 11px;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  box-shadow: var(--shadow-tile);
  color: var(--color-accent);
  stroke-width: 1.6;
  transition: transform var(--dur-long) var(--ease-smooth), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.faq__item summary:hover .faq__icon { background: var(--color-accent); color: var(--color-on-dark); }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--color-accent); color: var(--color-on-dark); }
.faq__answer { padding: 0 clamp(1.25rem, 0.9rem + 1vw, 2rem) var(--space-lg); }
.faq__answer p { max-width: var(--measure-text); color: var(--color-ink-2); font-size: var(--text-base); line-height: 1.6; }
/* Pehmeä avautuminen selaimissa, jotka tukevat ::details-content-valitsinta; muissa avautuu heti */
@supports selector(::details-content) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-long) var(--ease-out), content-visibility var(--dur-long) allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
}


/* --------------------------------------------------------------------------
   Tarjouspyyntö · sama vaalea siniharmaa pinta kuin footerissa (--color-card), pyöristetty, ilman kuvia ja tehosteita.
   Vasemmalla iso otsikko, yksi virke ja linkki verkkokauppaan (tuotteet valitaan tarjouskoriin), oikealla lomake ilman
   korttia valkoisin kentin ja sininen lähetyspainike.
   -------------------------------------------------------------------------- */
.quote { padding-block: var(--section-y); }
.quote__band {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-xl) var(--space-3xl);
  padding: clamp(2rem, 1rem + 3vw, 4.5rem);
  border-radius: var(--radius-xl);
  background: var(--color-card);
}
.quote h2 { max-width: 12ch; margin-top: var(--space-md); font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem); letter-spacing: -0.045em; line-height: 0.98; }
.quote__lede { max-width: var(--measure-text); margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-md); }
.quote__more { margin-top: var(--space-lg); }

/* Lomake ilman korttia: valkoiset kentät siniharmaalla pinnalla, kohdistuksessa sininen reuna */
.quote__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); }
.quote__form .field input, .quote__form .field textarea { border-color: transparent; background: var(--color-paper); }
.quote__form .field input:hover, .quote__form .field textarea:hover { border-color: var(--color-rule-strong); }
.quote__form .field input:focus, .quote__form .field textarea:focus { border-color: var(--color-accent); box-shadow: var(--ring); }
.quote__form .field [aria-invalid="true"] { border-color: var(--color-error-ink); }
.quote__submit { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-xs); }

.field { display: grid; gap: var(--space-xs); align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
.field label span { color: var(--color-muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  outline: none;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.field textarea { min-height: 104px; padding: var(--space-sm) var(--space-md); line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }
.field input:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus, .field textarea:focus { border-color: var(--color-accent); box-shadow: var(--ring); }
.field [aria-invalid="true"] { border-color: var(--color-error-ink); }
/* Vapaaehtoisissa kentissä tyhjä virherivin korkuinen tila, jotta kenttien väli on sama kaikkialla */
.field:not(:has(.field__msg))::after { content: ""; min-height: 1lh; }
.field__msg { min-height: 1lh; margin: 0; color: var(--color-error-ink); font-size: var(--text-xs); line-height: 1.4; }
.form__note { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.5; }
.form__note a { color: var(--color-ink); }
.form__status { grid-column: 1 / -1; margin: 0; color: var(--color-ink); font-size: var(--text-sm); line-height: 1.5; }
.form__status:empty { display: none; }

/* --------------------------------------------------------------------------
   Footer · vaalea pyöreä pohja, lausuma ja puhelin, linkkipalstat ja pohjarivi
   -------------------------------------------------------------------------- */
.foot { padding-block: var(--space-2xl) var(--space-lg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-card); color: var(--color-ink-2); font-size: var(--text-sm); }
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.foot__line { max-width: var(--measure-title); color: var(--color-ink); font: 500 var(--text-2xl)/1.06 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-xl); padding-block: var(--space-xl); }
.foot__brand img { width: 164px; }
.foot address { margin-top: var(--space-md); font-style: normal; line-height: 1.7; }
.foot address a { color: var(--color-ink); text-decoration: none; }
.foot__title { margin-bottom: var(--space-sm); color: var(--color-ink); font-weight: 500; }
.foot__col li + li { margin-top: var(--space-xs); }
.foot__col a { text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.foot__col a:hover, .foot address a:hover { color: var(--color-accent); }
.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }
.foot__bottom a, .foot__bottom button { color: inherit; text-decoration: none; }
.foot__bottom button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.foot__bottom a:hover, .foot__bottom button:hover { color: var(--color-ink); }
.foot__aaa { width: auto; height: 34px; margin-left: auto; }

/* --------------------------------------------------------------------------
   Mobiilin alapalkki ja luonnoksen vertailu
   -------------------------------------------------------------------------- */
.mbar { display: none; }

.compare {
  position: fixed;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-dropdown);
  max-width: 19rem;
  border-radius: var(--radius-md);
  background: var(--color-compare);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-panel);
  color: var(--color-on-dark);
  font-size: var(--text-xs);
}
.compare summary { padding: var(--space-xs) var(--space-sm); font-weight: 600; list-style: none; cursor: pointer; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: " +"; color: var(--color-accent-soft); }
.compare[open] summary::after { content: " −"; }
.compare__body { display: grid; gap: var(--space-sm); padding: 0 var(--space-sm) var(--space-sm); }
.compare fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; }
.compare legend { width: 100%; margin-bottom: var(--space-2xs); padding: 0; color: var(--color-on-dark-2); }
.compare label { position: relative; display: inline-flex; }
.compare input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.compare label span { padding: var(--space-2xs) var(--space-xs); border: var(--rule-hair) solid var(--color-line-on-dark); border-radius: var(--radius-pill); }
.compare input:checked + span { border-color: var(--color-accent-soft); background: var(--color-accent-soft); color: var(--color-night); font-weight: 600; }
.compare input:focus-visible + span { outline: 2px solid var(--color-on-dark); outline-offset: 2px; }

/* Otsikkofonttien vertailu: Plus Jakarta Sans ladataan vasta valittaessa */
html[data-fontti="jakarta"] { --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
html[data-fontti="jakarta"] h1, html[data-fontti="jakarta"] h2, html[data-fontti="jakarta"] h3 { font-weight: 600; letter-spacing: -0.025em; }

/* --------------------------------------------------------------------------
   Responsiivisuus — 1200 px tiivistys, 960 px asettelu ja mobiilivalikko, 640 px mobiili
   -------------------------------------------------------------------------- */
/* Navigaatiossa puhelimesta pelkkä kuvake ennen kuin rivi ahtautuu */
@media (max-width: 87.5rem) {
  .nav__phone { margin-inline: 0; }
  .nav__phone span { display: none; }
}

@media (max-width: 75rem) {
  /* Päävalikko valikkopainikkeen taakse, luottamusrivi 2 × 2 */
  :root { --nav-h: 64px; }
  .brand, .brand img { width: 148px; }
  .nav__row { display: none; }
  .nav__menu { display: inline-grid; }
  .nav__sheet.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--gutter) var(--space-lg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--color-paper);
    box-shadow: var(--shadow-float);
    color: var(--color-ink);
  }
  .nav__sheet a:not(.btn) {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 52px;
    padding-inline: var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 500;
    text-decoration: none;
  }
  .nav__sheet a:not(.btn):hover { background: var(--color-card); }
  .nav__sheet .btn { margin-top: var(--space-xs); }
  .mega__inner { grid-template-columns: minmax(0, 1fr); }
  .mega__promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo { min-height: 11rem; }
  .catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
  .quote__band { gap: var(--space-xl) var(--space-2xl); }
}

@media (max-width: 60rem) {
  .feature__grid { grid-template-columns: minmax(0, 1fr); }
  .brands { --brand-size: clamp(2.1rem, 10.5vw, 2.8rem); }
  .brands__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
  .why__top { grid-template-columns: minmax(0, 1fr); }
  /* Kuvapaneelit tavallisina paneeleina, kaikki auki: toimialat 2 × 2, palvelut allekkain */
  .sectors__grid, .svc-grid { display: grid; height: auto; }
  .sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .sectors__grid > li, .svc-grid > li { --open: 1; }
  .sector { aspect-ratio: 4 / 5; height: auto; }
  .svc { aspect-ratio: 16 / 10; height: auto; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .quote__band { grid-template-columns: minmax(0, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 40rem) {
  :root { --nav-h: 60px; }
  .nav__bar { gap: var(--space-sm); }
  .brand, .brand img { width: 140px; }
  /* Hero: kuva yläosassa, teksti ja luottamusrivi alaosassa; navigaatiosta pois puhelin ja painike (alapalkissa) */
  .nav__phone, .nav__lang, .nav__cta { display: none; }
  .hero { min-height: min(100svh, 52rem); }
  .hero__img { object-position: 60% center; }
  .hero__inner { align-self: center; padding: calc(var(--nav-h) + var(--space-xl)) var(--gutter) var(--space-xl); }
  /* Luotettavuustiedot heron alareunassa ohuen viivan alla, kaksi faktaa vierekkäin (teksti rivittyy) */
  .hero__foot { justify-content: flex-start; padding-bottom: var(--space-lg); }
  .hero__proof { flex-wrap: nowrap; align-items: stretch; gap: var(--space-md); width: 100%; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-line-on-dark); font-size: 0.8125rem; line-height: 1.35; }
  .hero__proof li { flex: 1 1 0; min-width: 0; }
  .hero__proof li + li { padding-left: var(--space-md); }
  .hero__aaa { height: 1.75rem; }
  .hero::after { background: var(--hero-calm-v); }
  .hero h1 { margin-top: var(--space-sm); font-size: clamp(2.5rem, 1.1rem + 6.4vw, 3.25rem); }
  .hero__lede { margin-top: var(--space-md); }
  .hero__actions { margin-top: var(--space-lg); }
  /* Alaotsikot ovat samankokoisia kuin muualla, joten K-kaupoille-lista on yhtä palstaa */
  .feature__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

  .catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md) var(--space-xs); }
  .filters { overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }

  .pcard__name { font-size: var(--text-sm); }
  .sector { padding: var(--space-md); border-radius: var(--radius-md); }
  .sector__text { display: none; }
  .sector__title { font-size: var(--text-lg); }
  /* Palvelut puhelimella: kuva ylhäällä ja teksti sen alla, koska pitkä kuvaus ei mahdu kuvan päälle luettavasti */
  .svc-grid { gap: var(--space-xl); }
  .svc { aspect-ratio: auto; padding: 0; overflow: visible; background: none; color: var(--color-ink-2); }
  .svc__title { color: var(--color-ink); }
  .svc__text { color: var(--color-ink-2); }
  .svc::before, .svc::after { display: none; }
  .svc__media { position: relative; z-index: auto; aspect-ratio: 16 / 10; margin-bottom: var(--space-md); overflow: hidden; border-radius: var(--radius-md); }
  .svc__title .icon { top: var(--space-sm); right: var(--space-sm); width: 36px; height: 36px; padding: 10px; }
  .sector__title .icon { top: var(--space-sm); right: var(--space-sm); width: 36px; height: 36px; padding: 10px; }
  .faq__item summary { gap: var(--space-md); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); }
  .faq__icon { width: 36px; height: 36px; padding: 10px; }
  .faq__answer { padding-inline: var(--space-md); }
  .quote__band { padding: var(--space-xl) var(--space-md); border-radius: var(--radius-lg); }
  .quote__form { grid-template-columns: minmax(0, 1fr); }

  .foot { padding-bottom: calc(var(--space-lg) + 72px); }
  .foot__aaa { margin-left: 0; }
  .compare { left: var(--space-sm); bottom: calc(72px + env(safe-area-inset-bottom)); }

  .mbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom));
    border-top: var(--rule-hair) solid var(--color-rule);
    background-color: var(--color-paper);
    box-shadow: var(--shadow-bar-up);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
  }
  .mbar.is-visible { transform: none; visibility: visible; transition: transform var(--dur-short) var(--ease-out); }
  .mbar .btn { min-height: 48px; }
  .mbar .btn--line { padding-inline: var(--space-md); }
}

/* Hyvin kapeat näytöt: sidottu otsikon loppu saa rivittyä, ettei se leikkaudu */
@media (max-width: 22.5rem) {
  .nowrap { white-space: normal; }
  .brand, .brand img { width: 124px; }
}

@media (pointer: coarse) {
  .btn { min-height: 48px; }
  .nav__icon { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; }
  .enter > * { transform: none; animation-name: enter-fade; animation-delay: 0ms; }
  .ribbon__track, [role="tabpanel"], .hero__img, .hero__glow, .hero__line > span, .hero__proof li { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .pcard:hover .pcard__img, .promo--photo:hover .promo__bg { transform: none; }
}
@keyframes enter-fade { to { opacity: 1; } }