/* ============================================================
   hyvinkaanautopalvelu.fi: jaettu tyylikerros (etusivu + renkaat)
   Kaikki arvot tokeneista: src/css/tokens.css.
   Rakenne: reset → fontit → perusta → napit → header → hero →
   sektiot → footer → reveal → view-transitions → responsiivisuus.
   ============================================================ */

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}

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

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

small {
  font-size: var(--fs-small);
}

/* ---------- Fontit (self-hosted woff2) ---------- */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../assets/fonts/barlow-condensed-v13-latin_latin-ext-600.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/barlow-condensed-v13-latin_latin-ext-700.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../assets/fonts/barlow-v13-latin_latin-ext-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../assets/fonts/barlow-v13-latin_latin-ext-500.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../assets/fonts/barlow-v13-latin_latin-ext-700.woff2") format("woff2");
}

/* ---------- Typografian perusta ---------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--ink);
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Tummilla pinnoilla amber-fokus (blue ei erotu navysta) */
.site-header :focus-visible,
.hero :focus-visible,
.tyre-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--accent-solid);
}

.site-header.is-solid :focus-visible {
  outline-color: var(--blue-600);
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--blue-900);
  color: var(--snow);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(calc(-100% - 20px));
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Pilleri-label (uppercase sallittu vain näissä) */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--blue-700);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Napit ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(0);
}

/* §9: CTA-nuoli liukuu 2 px hoverissa */
.btn .btn-arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Pää-CTA: puna-oranssi-meripihka vain pintana, teksti AINA --ink. */
.btn-amber {
  background: var(--accent-surface);
  color: var(--ink);
  box-shadow: 0 14px 34px var(--accent-shadow);
}

.btn-amber:hover {
  background: var(--accent-surface-hover);
  box-shadow: 0 18px 40px var(--accent-shadow-strong);
}

/* Tummille pinnoille */
.btn-outline-light {
  color: var(--snow);
  border-color: color-mix(in srgb, var(--snow) 42%, transparent);
  background: color-mix(in srgb, var(--snow) 7%, transparent);
}

.btn-outline-light:hover {
  border-color: color-mix(in srgb, var(--snow) 75%, transparent);
  background: color-mix(in srgb, var(--snow) 13%, transparent);
}

/* Valoisille pinnoille */
.btn-outline {
  color: var(--blue-800);
  border-color: color-mix(in srgb, var(--blue-800) 55%, transparent);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--blue-800);
  background: var(--blue-50);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  view-transition-name: site-header;
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 28px);
  min-height: 76px;
}

.brand {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.brand-logo {
  width: clamp(128px, 12vw, 155px);
  height: auto;
  transition: opacity var(--dur-base) var(--ease-out);
}

.brand-logo--solid {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
}

.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(2px, 0.8vw, 10px);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--snow-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.nav-link:hover {
  color: var(--snow);
  background: color-mix(in srgb, var(--snow) 9%, transparent);
}

/* Renkaat-korostuspilleri */
.nav-pill {
  border: 1px solid color-mix(in srgb, var(--orange-hot) 72%, transparent);
  color: var(--snow);
  font-weight: 700;
}

.nav-pill:hover,
.nav-pill[aria-current="page"] {
  background: var(--accent-flow-soft);
  border-color: var(--orange-hot);
}

.nav-cta {
  min-height: 44px;
  padding: 0 20px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Solid-tila scrollissa */
.site-header.is-solid {
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

.site-header.is-solid .brand-logo--inverse {
  opacity: 0;
}

.site-header.is-solid .brand-logo--solid {
  opacity: 1;
}

.site-header.is-solid .nav-link {
  color: var(--ink-soft);
}

.site-header.is-solid .nav-link:hover {
  color: var(--ink);
  background: var(--blue-50);
}

.site-header.is-solid .nav-pill {
  color: var(--blue-800);
  border-color: color-mix(in srgb, var(--blue-800) 45%, transparent);
}

.site-header.is-solid .nav-pill:hover,
.site-header.is-solid .nav-pill[aria-current="page"] {
  border-color: var(--blue-800);
  background: var(--blue-50);
}

/* Hampurilainen */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 110;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: var(--r-sm);
}

.toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--snow);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.site-header.is-solid .toggle-bar,
.site-header.nav-open .toggle-bar {
  background: var(--ink);
}

.site-header.nav-open .toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.nav-open .toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero: editoriaalinen limitys (visu-spec §1) ---------- */

.hero {
  --hero-pad-top: calc(var(--hero-header-clearance) + var(--hero-pad-top-fluid));
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--hero-pad-top) 0 0;
  background: linear-gradient(178deg, var(--blue-900) 4%, var(--blue-850) 96%);
  color: var(--snow);
}

/* Aamuvuoron tunnelma syntyy stillistä ja navy-pinnasta ilman glow-blobbeja. */
.hero-atmo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Kuva on koko heron levyinen lavaste. Grid kantaa vain sisällön optisen linjan. */
.hero-grid {
  position: static;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-grid);
  align-items: center;
  /* Hero on oma yhtenäinen kuva-alueensa. Verkostoraili alkaa vasta sen
     jälkeen, joten se ei enää katkaise kuvaa tai pakota heroa keinotekoisesti
     taitteen sisään. */
  min-height: max(
    var(--hero-visual-floor),
    min(
      var(--hero-visual-min-height),
      calc(100svh - var(--hero-pad-top))
    )
  );
}

.hero-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-chip-gap);
}

.hero-pills::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--hero-tread-stitch-offset);
  width: var(--hero-tread-stitch-width);
  height: var(--hero-tread-stitch-height);
  background: var(--hero-tread-stitch);
  opacity: var(--hero-tread-stitch-opacity);
  pointer-events: none;
}

.hero-pill {
  border-color: color-mix(in srgb, var(--snow) 22%, transparent);
  background: color-mix(in srgb, var(--snow) 6%, transparent);
  color: var(--snow-soft);
}

.hero-copy {
  position: relative;
  z-index: 3;
  grid-column: 1 / 8;
  grid-row: 1;
  padding-block: var(--hero-copy-padding-block);
}

/* Täysleveän kuvan yhtenäinen scrim asuu kuvatasolla; erillinen copy-laatta
   tekisi näkyvän pystysauman. */
.hero-copy::before {
  content: none;
}

.hero-title {
  margin-top: var(--hero-title-margin);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--snow);
  text-wrap: initial;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.hero-title-row {
  display: block;
  width: max-content;
  max-width: 100%;
}

/* Tehosterivi jatkaa kuvapinnan lämmintä korjaamovaloa. */
.hero-title-amber {
  color: var(--accent-warm-on-dark);
  background: var(--accent-flow-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: var(--hero-title-indent);
  /* Taustaan leikattu tyyppi tarvitsee maalausvaran myös pisteen oikealle
     puolelle ja alas. Negatiiviset marginaalit palauttavat mitatun rytmin
     ilman layout-siirtymää. */
  max-width: calc(100% + var(--hero-title-accent-bleed-inline));
  padding-block: var(--hero-title-accent-bleed) var(--hero-title-accent-bleed-bottom);
  padding-inline-end: var(--hero-title-accent-bleed-inline);
  /* Hengitysrako ylarivista. */
  margin-block:
    calc(var(--hero-title-accent-gap) - var(--hero-title-accent-bleed))
    calc(-1 * var(--hero-title-accent-bleed-bottom));
  margin-inline-end: calc(-1 * var(--hero-title-accent-bleed-inline));
}

.hero-title-nowrap {
  white-space: nowrap;
}

.hero-lead {
  max-width: var(--hero-copy-measure);
  margin-top: var(--hero-lead-margin);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--snow-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-action-gap);
  margin-top: var(--hero-action-margin);
}

.hero-actions .btn {
  min-height: var(--hero-cta-min-height);
  padding-inline: var(--hero-cta-inline);
}

.hero-actions .btn-amber {
  min-width: var(--hero-cta-primary-min-width);
}

.hero-actions .btn-outline-light {
  min-width: var(--hero-cta-secondary-min-width);
}

.hero-actions .btn:focus-visible {
  outline-width: var(--hero-focus-outline-width);
  outline-offset: var(--hero-focus-outline-offset);
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-chip-gap);
  margin-top: var(--hero-chip-margin);
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hero-chip-inner-gap);
  padding: var(--hero-chip-padding);
  border-radius: var(--hero-chip-radius);
  border: 1px solid color-mix(in srgb, var(--snow) 16%, transparent);
  background: color-mix(in srgb, var(--snow) 5%, transparent);
  color: var(--snow-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hero-chip::before {
  content: "";
  width: var(--hero-chip-dot-size);
  height: var(--hero-chip-dot-size);
  border-radius: 50%;
  background: var(--accent-flow);
  flex: 0 0 auto;
}

/* Kuva on hero-lavaste, ei kehystetty kortti: se jatkuu reunasta reunaan. */
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  min-height: 0;
  pointer-events: none;
}

.hero-ovi-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: none;
}

.hero-ovi-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-image-position-desktop);
}

.hero-ovi-frame picture {
  display: block;
  height: 100%;
}

/* Yksi jatkuva scrim suojaa tekstin ja sulauttaa kuvan ketjubandiin ilman
   erillisen paneelin reunaa tai alakulman katkoa. */
.hero-ovi-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-frame-scrim-desktop);
  pointer-events: none;
}

/* §31: valo jatkaa stillin oven ja hallivalojen omaa suuntaa. */
.hero-beam,
.hero-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: var(--hero-light-origin);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-beam {
  background: var(--hero-beam-field);
}

.hero-rays {
  background: var(--hero-rays-field);
  opacity: var(--hero-rays-opacity);
}

/* Lasikiilto: yksi diagonaalinen highlight kuvan paalla. Lepotila on
   staattinen ja hento; GSAP pyyhkaisee sen kerran sisaan ja antaa
   desktopilla hitaan hengityksen. Tavoite on kevyt lasikiilto, ei valahdys. */
.hero-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--hero-sheen-field);
  -webkit-mask-image: var(--hero-sheen-mask);
  mask-image: var(--hero-sheen-mask);
  mix-blend-mode: screen;
  opacity: var(--hero-sheen-rest-opacity);
  pointer-events: none;
}

/* Aamun poly valokeilassa: motion.js luo normaalissa liikeasetuksessa
   kevyen pölykerroksen. Ilman JS:aa tai reduced-motionissa kerros on tyhja. */
.hero-dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hero-dust span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dust-size, 3px);
  height: var(--dust-size, 3px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--dust-color, var(--hero-dust-color-warm)) 0 34%, transparent 74%);
  box-shadow: 0 0 5px color-mix(in srgb, var(--dust-color, var(--hero-dust-color-warm)) 46%, transparent);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-dust {
    display: none;
  }
}

/* Verkostoraili on oma, tekninen luottamustaso heron jälkeen. Lyhyt navy-
   sisäänveto laskee railin heron kuvapinnasta ja jättää jäsenyydet omalle,
   rauhalliselle tasolleen. */
.network-rail {
  position: relative;
  isolation: isolate;
  padding-top: var(--network-rail-top-inset);
  background: var(--surface-network-field);
  color: var(--snow-soft);
}

.network-rail__redline {
  position: absolute;
  inset: var(--network-rail-top-inset) 0 auto;
  z-index: 2;
  height: var(--network-rail-rule);
  background: var(--redline);
  pointer-events: none;
}

.network-rail__inner {
  position: relative;
  display: grid;
  grid-template-columns: var(--network-rail-columns);
  gap: 0;
  padding-top: var(--network-rail-rule);
}

.network-rail__partner {
  position: relative;
  display: grid;
  grid-template-columns: var(--network-rail-mark-width) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: var(--network-rail-min-height);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.network-rail__partner + .network-rail__partner {
  border-left: 1px solid var(--network-rail-divider);
}

.network-rail__mark {
  display: grid;
  place-items: center;
  min-height: var(--network-rail-min-height);
  padding: var(--network-rail-mark-padding);
}

.network-rail__partner img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.network-rail__partner--ad .network-rail__mark {
  background: var(--ad-navy);
}

.network-rail__partner--ad img {
  height: var(--network-rail-logo-ad);
}

.network-rail__partner--bestdrive .network-rail__mark {
  background: var(--bestdrive-tile-field);
}

.network-rail__partner--bestdrive img {
  height: var(--network-rail-logo-bestdrive);
}

.network-rail__copy {
  display: flex;
  align-items: center;
  padding: var(--network-rail-copy-padding);
  color: var(--snow-soft);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}

/* ---------- Sektioperusta ---------- */

.section {
  padding: var(--section-pad) 0;
  scroll-margin-top: 84px;
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4.6vw, 56px);
}

/* §9: 1 px amber-viiva jonka päässä 5 px "pultti"-ympyrä */
.section-head::after {
  content: "";
  display: block;
  width: clamp(56px, 6vw, 88px);
  height: 5px;
  margin-top: clamp(14px, 2vw, 20px);
  background: var(--accent-flow);
  border-radius: var(--r-sm);
}

.section-title {
  margin-top: 18px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-h2);
}

.section-title--light {
  color: var(--snow);
}

/* §8: leipärytmi 17px/1.55, selite max 58ch */
.section-lead {
  margin-top: 14px;
  max-width: var(--measure-lead);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
}

/* §8: kinemaattinen sektiorytmi: hengittävät vs. tiiviit kaupalliset */
.section-offers {
  padding-bottom: var(--section-pad-air);
}

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

.section-pricing,
.section-hotel {
  padding-block: var(--section-pad-dense);
}

/* SplitText-sanamaski (motion.js clip-reveal tarjous- ja hinnasto-otsikoille) */
.clip-word-mask {
  display: inline-block;
  overflow: hidden;
  padding-block: 0.06em;
  margin-block: -0.06em;
  vertical-align: top;
}

/* ---------- Tread-signatuuri (visu-spec §2) ---------- */

.tread-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Emäntä: overflow hidden leikkaa kallistetun kaistan reunat */
.tread-zone {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  /* Kaista ei saa levittaa sivua viewporttia leveammaksi kapealla naytolla:
     mitattu 2026-09-03 qa_smoke 95 px ylivuoto @375 (kaistan leveys
     tread-w + 170 px ylitti sektion). 96 % jattaa varan left/right-siirroille. */
  max-width: 96%;
  -webkit-mask-image: var(--tread-zone-mask);
  mask-image: var(--tread-zone-mask);
}

.tread-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tread-w);
  height: 156%;
  translate: -50% -50%;
  rotate: 10deg;
  opacity: var(--tread-opacity);
}

/* hero→tarjoukset: kaista nousee horisontin yli */
.tread-zone--a {
  top: calc(-1 * clamp(50px, 6vw, 86px));
  right: 2%;
  width: calc(var(--tread-w) + 150px);
  height: clamp(300px, 31vw, 460px);
}

/* palvelut→tyre-cta: kaista liukuu tumman saarekkeen alle */
.tread-zone--b {
  bottom: calc(-1 * clamp(44px, 6vw, 80px));
  left: 1%;
  width: calc(var(--tread-w) + 160px);
  height: clamp(320px, 33vw, 470px);
}

/* hinnasto→hotelli: kaista sitoo kaupalliset sektiot yhteen */
.tread-zone--c {
  top: calc(-1 * clamp(38px, 5vw, 70px));
  left: 0;
  width: calc(var(--tread-w) + 170px);
  height: clamp(330px, 34vw, 490px);
}

/* ---------- 3 · Kauden tarjoukset: aamunkoitto ---------- */

.section-offers {
  position: relative;
  padding-top: 0;
  scroll-margin-top: 0;
  background: var(--surface-offers-field);
}

/* Verkostorailin jatkumo: navy pysyy täysleveänä ja pehmenee vasta aivan
   lopussa tarjousten omaan aamunvaaleaan kenttään. */
.section-offers::before {
  content: "";
  display: block;
  height: var(--section-offers-horizon);
  background: var(--network-rail-fade);
}

.section-offers > .container {
  padding-top: var(--section-offers-pad-top);
}

/* Asymmetrinen kampanjagrid: kärki 7/12, kolme kompaktia 5/12 (visu-spec §3) */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: stretch;
}

.offer-card--featured {
  grid-column: 1 / span 7;
}

.offer-stack {
  grid-column: span 5;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
}

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--offer-card-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-offer);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.section-head > .section-title:first-child,
.hotel-copy > .section-title:first-child,
.about-copy > .section-title:first-child,
.contact-copy > .section-title:first-child {
  margin-top: 0;
}

.offer-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}

.offer-media picture {
  display: block;
  height: 100%;
}

.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-offer-image) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .offer-card:hover {
    border-color: var(--offer-card-border-hover);
    box-shadow: var(--shadow-offer-hover);
  }

  .offer-card--compact:hover .offer-media img {
    transform: scale(var(--offer-image-hover-scale));
  }
}

.offer-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  padding: 20px 22px 24px;
}

.offer-name {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.offer-desc {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  flex: 1;
}

/* Amber-hintalappu: amber pintana, teksti --ink */
.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--accent-surface);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.price-prefix {
  font-size: var(--fs-small);
  font-weight: 500;
}

.price-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 700;
  line-height: 1;
}

.offer-note {
  color: var(--ink-faint);
  font-size: var(--offer-note-size);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: var(--offer-note-tracking);
  font-variant-numeric: tabular-nums;
}

.offer-note--breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-chip-gap);
  color: var(--ink-soft);
}

.offer-note--breakdown::before {
  content: "";
  width: var(--offer-note-rule-width);
  height: 1px;
  background: var(--accent-flow);
  flex: 0 0 auto;
}

/* Kärkikortti: kuva edge-to-edge 58 %, jättihinta saumassa, CTA ankkuroituna,
   amber 3 px inset-reuna (vain tällä): visu-spec §3 */
.offer-card--featured {
  --seam: 58%;
  border-color: color-mix(in srgb, var(--blue-800) 24%, var(--line));
  box-shadow: var(--shadow-offer-featured);
}

.offer-card--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: var(--offer-featured-inset);
  background: var(--accent-flow);
  pointer-events: none;
}

.offer-card--featured .offer-media {
  aspect-ratio: auto;
  flex: 0 0 var(--seam);
  min-height: 0;
}

.offer-card--featured .offer-body {
  /* Ylavara jattihinnan saumaleimalle: leima ulottuu saumasta noin 36 px
     alaspain, joten otsikko alkaa vasta sen alta (Fable V3 2026-09-03,
     vanha vika jo 536f892:ssa). */
  padding: var(--offer-seam-clear) 26px 28px;
}

.offer-card--featured .offer-name {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
}

.offer-card--featured .offer-desc {
  font-size: var(--fs-body);
}

/* Jättihinta limittyy kuva/sisältö-saumaan */
.price-tag--seam {
  position: absolute;
  top: var(--seam);
  right: clamp(18px, 2.4vw, 30px);
  transform: translateY(-50%);
  z-index: 3;
  align-self: auto;
  box-shadow: var(--shadow-lift);
}

.price-value--hero {
  font-size: var(--fs-price-hero);
}

.offer-cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Kompaktit vaakakortit: kuva ~40 % vasemmalla, hinta baseline-linjassa */
.offer-card--compact {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

.offer-card--compact .offer-media {
  aspect-ratio: auto;
  height: 100%;
}

.offer-card--compact .offer-body {
  padding: 16px 18px 18px;
  gap: 8px;
}

.offer-card--compact .offer-name {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

.offer-card--compact .price-tag {
  margin-top: auto;
}

.ribbon {
  position: absolute;
  top: 16px;
  left: -8px;
  z-index: 1;
  padding: 7px 16px 7px 18px;
  background: var(--red);
  color: var(--snow);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  box-shadow: var(--shadow-card);
}

.ribbon::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  border: 4px solid color-mix(in srgb, var(--red) 55%, var(--blue-950));
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.offer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(26px, 3.4vw, 40px);
}

.offer-disclaimer {
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

.trust-row {
  display: flex;
  gap: 12px;
}

.chain-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 44px;
  padding: 6px 14px;
  border-radius: var(--r-sm);
}

.chain-mini img {
  height: 28px;
  width: auto;
}

.chain-mini--ad {
  background: var(--ad-navy);
}

.chain-mini--bestdrive {
  position: relative;
  overflow: hidden;
  background: var(--bestdrive-tile-field);
}

.chain-mini--bestdrive::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--accent-flow);
}

/* ---------- 4 · Palvelut: aamu ---------- */

.section-services {
  position: relative;
  background: var(--surface-services-field);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: stretch;
}

/* Oma kieli (visu-spec §4): ei täyskorttivarjoja, 1 px navy-reuna 12 %,
   hoverissa reuna 40 % ja amber-viiva kasvaa vasempaan reunaan. */
.service-card {
  position: relative;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--blue-800) 12%, transparent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-service);
  height: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}

.service-card--primary {
  grid-column: span 6;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.service-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-2);
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-zoom) var(--ease-out);
}

.service-card--tyres .service-media img {
  filter: var(--service-tyres-image-filter);
}

.service-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px);
}

.service-label {
  color: var(--blue-700);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.service-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-flow);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-card--primary:hover .service-media img {
    transform: scale(var(--service-image-hover-scale));
  }

  .service-card:hover {
    border-color: color-mix(in srgb, var(--blue-800) 40%, transparent);
  }

  .service-card:hover::before {
    transform: scaleY(1);
  }
}

/* 40 px ikoni tread-kaarimaskin päällä (inline-SVG) */
.service-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--blue-700);
}

.icon-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--blue-700) 24%, transparent);
}

.service-glyph {
  position: relative;
  width: 40px;
  height: 40px;
}

.service-title {
  font-size: var(--fs-h3);
  font-weight: 700;
}

.service-desc {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  flex: 1;
}

.service-link {
  align-self: flex-start;
  color: var(--link);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.service-link:hover {
  color: var(--blue-800);
}

.service-card .service-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- 5 · Rengaskeskus ---------- */

.section-tire-center {
  position: relative;
  overflow: clip;
  padding-block: var(--section-pad-air);
  background: var(--surface-tire-center-field);
}

.tire-center-head {
  max-width: 72ch;
}

.tire-center-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: calc(var(--gap-grid) * 2);
  align-items: center;
}

.tire-center-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tire-center-steps {
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.tire-center-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--gap-grid);
  align-items: start;
  padding-block: var(--gap-grid);
  border-top: 1px solid var(--line);
}

.tire-center-step {
  color: var(--blue-700);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tire-center-steps p {
  display: grid;
  gap: var(--r-sm);
}

.tire-center-steps strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.tire-center-steps p span {
  color: var(--ink-soft);
}

.tire-center-cta {
  margin-top: var(--gap-grid);
}

.tire-center-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 0.92fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--media-border);
  border: 1px solid var(--media-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-media);
}

.tire-center-frame {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border: 0;
}

.tire-center-frame--main {
  grid-row: 1 / -1;
}

.tire-center-frame--detail {
  z-index: 1;
}

.tire-center-frame--storage {
  z-index: 1;
}

.tire-center-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--tire-center-image-filter);
}

.tire-center-frame figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--r-md) var(--gap-grid);
  background: color-mix(in srgb, var(--blue-900) 92%, transparent);
  border-top: 2px solid transparent;
  border-image: var(--accent-flow) 1;
  color: var(--snow);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---------- 6 · Renkaat-CTA, kylkikirjoituskehä (visu-spec §6) ---------- */

.tyre-cta {
  position: relative;
  overflow: clip;
  padding: clamp(80px, 11vw, 148px) 0;
  background: var(--blue-900);
  color: var(--snow);
}

.tyre-cta-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Extreme macro: sama kuva zoomattuna croppina + navy-duotone */
.tyre-cta-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 62% 55%;
  scale: 2.1;
  filter: grayscale(0.75) contrast(1.05);
  opacity: 0.38;
}

.tyre-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue-950) 88%, transparent) 0%, color-mix(in srgb, var(--blue-900) 62%, transparent) 55%, color-mix(in srgb, var(--blue-800) 34%, transparent) 100%),
    radial-gradient(60% 80% at 8% 90%, color-mix(in srgb, var(--orange-hot) 14%, transparent), transparent 65%);
}

/* Kylkikirjoitus: SVG-textPath-kehä, pyörii scrollissa (GSAP scrub) */
.ring-text {
  position: absolute;
  top: 50%;
  right: clamp(-120px, -8vw, -60px);
  z-index: 1;
  width: clamp(300px, 34vw, 460px);
  height: auto;
  translate: 0 -50%;
  pointer-events: none;
}

.ring-type {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: color-mix(in srgb, var(--snow) 78%, transparent);
}

/* Etualan paneeli: navy-lasi, ohut valkoreuna. Navy ≥ 85 % + blur →
   valkoinen ≥ 11:1, amber size-code 5.4:1 myös kuvan kirkkaimman
   kohdan päällä (AA-laskelma visu-passissa). */
.tyre-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding: clamp(24px, 3.4vw, 44px);
  background: color-mix(in srgb, var(--blue-900) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--snow) 22%, transparent);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-navy);
}

.tyre-cta-lead {
  margin: 16px 0 28px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--snow-soft);
}

/* Kylkimerkintä-opaste: sama typo-DNA kuin rengassivun haussa */
.size-code {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--orange-hot) 66%, transparent);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-warm-on-dark);
  background-image: var(--accent-flow-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 6 · Hinnasto: editoriaalinen kytkös (visu-spec §5) ---------- */

.section-pricing {
  background: var(--surface-pricing-field);
}

.price-table-wrap {
  overflow: visible;
}

.price-table th,
.price-table td {
  padding: 15px clamp(16px, 2.4vw, 28px);
  text-align: left;
  border-top: 1px solid var(--line-soft);
}

.price-table thead th {
  border-top: 0;
  background: var(--blue-800);
  color: var(--snow);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.price-table tbody th {
  font-weight: 500;
  color: var(--ink);
}

.price-table tbody th small {
  color: var(--ink-faint);
  font-weight: 400;
}

/* Vuorottelevat pinnat + hover: amber 2 px vasen reuna (visu-spec §5) */
.price-table tbody tr {
  background: var(--paper-day);
}

.price-table tbody tr:nth-child(even) {
  background: var(--surface-day);
}

.price-table tbody tr:hover th {
  box-shadow: inset 2px 0 0 var(--accent-solid);
}

.price-col,
.price-cell {
  text-align: right;
  white-space: nowrap;
}

.price-cell {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}

.price-note {
  margin-top: 18px;
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

/* ---------- 7 · Rengashotelli: limittyy hinnastoon (visu-spec §5) ---------- */

.section-hotel {
  position: relative;
  background: var(--surface-hotel-field);
}

.hotel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}

.hotel-side {
  position: relative;
  z-index: 2;
}

/* Otsikko ja hintakortit alkavat samalla ylälinjalla. Hinnasto päättyy ennen
   hotellia: osion logiikka ei nojaa negatiiviseen limitykseen. */
@media (min-width: 1101px) {
  .hotel-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  }

  .hotel-side {
    margin: 0;
  }
}

.hotel-media {
  margin-top: var(--gap-grid);
  overflow: hidden;
  border: 1px solid var(--media-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-media);
}

.hotel-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: var(--tire-center-image-filter);
}

.check-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.check-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--ink-soft);
}

.check-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent-flow);
  transform: translateY(-1px) rotate(45deg);
}

.hotel-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-grid);
  align-items: stretch;
}

.hotel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-hotel);
  height: 100%;
  overflow: hidden;
}

.hotel-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent-flow);
}

.hotel-size {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--blue-700);
}

.hotel-price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.hotel-terms {
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.hotel-fit {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

.hotel-terms,
.hotel-fit {
  display: grid;
  gap: 4px;
}

.hotel-meta-label {
  color: var(--accent-warm-on-light);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
}

.hotel-card--featured {
  background: var(--blue-900);
  border-color: var(--blue-800);
  box-shadow: var(--shadow-navy);
}

.hotel-card--featured .hotel-size {
  color: var(--accent-warm-on-dark);
  background: var(--accent-flow-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hotel-card--featured .hotel-price,
.hotel-card--featured .hotel-terms {
  color: var(--snow);
}

.hotel-card--featured .hotel-terms {
  color: var(--snow-soft);
}

.hotel-card--featured .hotel-fit {
  color: var(--snow-faint);
  border-top-color: color-mix(in srgb, var(--snow) 14%, transparent);
}

.hotel-card--featured .hotel-meta-label {
  color: var(--accent-warm-on-dark);
  background: var(--accent-flow-on-dark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 8 · Tietoa meistä: täysi valo ---------- */

.section-about {
  background: var(--surface-about-field);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.about-copy {
  grid-column: 1 / 7;
}

/* Oikea bleed säilyy, mutta katkonut viistokulma korvautuu yhdellä suoralla
   media-kehyksellä. */
.about-media {
  grid-column: 7 / 13;
  margin-right: calc((100vw - var(--container)) / -2);
  overflow: hidden;
  border: 1px solid var(--media-border);
  border-right: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  box-shadow: var(--shadow-media);
}

.about-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: var(--about-image-filter);
}

.stats-grid {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid);
  margin-top: clamp(28px, 4vw, 48px);
}

.stat {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.8vw, 22px);
  background: var(--surface-day);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent-flow);
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--blue-800);
}

.stat-label {
  margin-top: 6px;
  color: var(--ink-faint);
  font-size: var(--fs-small);
}

/* ---------- 9 · Yhteystiedot ---------- */

.section-contact {
  background: var(--surface-contact-field);
}

.contact-grid {
  display: grid;
  grid-template-areas:
    "copy form"
    "map form";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--contact-grid-column-gap);
  row-gap: var(--contact-grid-row-gap);
  align-items: start;
}

.contact-copy {
  grid-area: copy;
}

.contact-list {
  display: grid;
  gap: 4px;
  margin-top: 26px;
}

.contact-item {
  display: grid;
  grid-template-columns: minmax(96px, 128px) minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}

.contact-item dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: baseline;
  padding-top: 3px;
}

.contact-item dd {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.contact-item a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-item a:hover {
  color: var(--blue-800);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Huoltopyyntö on korjaamon työmääräys, ei yleinen lomakekortti. Kentät
   seuraavat luettavaa, viivapohjaista rytmiä ja lähetys jää kävijän omaan
   sähköpostisovellukseen. */
.contact-form {
  position: relative;
  display: grid;
  grid-area: form;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: stretch;
  overflow: hidden;
  padding: var(--contact-form-pad);
  border: 1px solid var(--contact-form-border);
  border-radius: var(--r-lg);
  background: var(--surface-contact-form);
  box-shadow: var(--contact-form-shadow);
  color: var(--contact-form-text);
}

.contact-form::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--contact-form-rule-height);
  background: var(--contact-form-rule);
}

.contact-form__head {
  display: grid;
  gap: var(--contact-form-head-gap);
  max-width: var(--measure-lead);
}

.contact-form__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--contact-form-label);
  font-family: var(--font-display);
  font-size: var(--contact-form-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  line-height: 1;
  text-transform: uppercase;
}

.contact-form__eyebrow span {
  color: var(--accent-warm-on-dark);
  font-variant-numeric: tabular-nums;
}

.contact-form__title {
  color: var(--contact-form-text);
  font-size: var(--fs-h3);
}

.contact-form__lead,
.contact-form__note {
  color: var(--contact-form-note);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--contact-form-fields-gap);
  margin-top: var(--contact-form-foot-margin);
}

.contact-field {
  display: grid;
  min-width: 0;
  gap: var(--contact-form-field-label-gap);
}

.contact-field--wide {
  grid-column: 1 / -1;
}

.contact-field label {
  color: var(--contact-form-label);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  line-height: 1.1;
  text-transform: uppercase;
}

.contact-field label span {
  color: var(--contact-form-label-muted);
  font-family: var(--font-body);
  font-size: var(--contact-form-optional-size);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-width: 0;
  padding: var(--contact-form-field-pad);
  border: 0;
  border-bottom: 1px solid var(--contact-form-field-line);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--contact-form-text);
  font: inherit;
  font-weight: 500;
  line-height: var(--lh-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.contact-field select {
  appearance: auto;
  cursor: pointer;
}

.contact-field textarea {
  min-height: var(--contact-form-textarea-min);
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--contact-form-placeholder);
  opacity: 1;
}

.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover {
  border-bottom-color: var(--contact-form-field-line-hover);
}

.contact-field input:focus-visible,
.contact-field select:focus-visible,
.contact-field textarea:focus-visible {
  border-bottom-color: var(--contact-form-focus);
  box-shadow: 0 2px 0 var(--contact-form-focus);
  outline: 0;
}

.contact-form__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--contact-form-foot-gap);
  margin-top: var(--contact-form-foot-margin);
  padding-top: var(--contact-form-foot-margin);
  border-top: 1px solid var(--contact-form-border);
}

.contact-form__note {
  max-width: 32ch;
}

.contact-form__submit {
  flex: 0 0 auto;
  white-space: nowrap;
}

.map-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--surface-2);
}

.contact-map {
  grid-area: map;
}

/* Staattinen karttakortti: ei upotusta, ei ulkoista latausta. Linkki avaa
   kartan kavijan omalla toimella (julkaisuvalmius J3, 2026-09-03). */
.map-static {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: clamp(280px, 30vw, 420px);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  text-decoration: none;
  color: var(--snow);
  background: var(--surface-footer-field);
  border-color: color-mix(in srgb, var(--blue-800) 40%, var(--line));
  transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.map-static::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-flow-soft);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.map-static:hover::after,
.map-static:focus-visible::after {
  opacity: 1;
}

.map-static__pin {
  width: 44px;
  height: 55px;
  margin-bottom: 8px;
  color: var(--amber);
  filter: drop-shadow(0 8px 18px var(--accent-shadow));
}

.map-static__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.map-static__meta {
  color: var(--snow-soft);
  font-size: var(--fs-body);
}

.map-static__cta {
  margin-top: 14px;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
}

.map-static__cta:hover,
.map-static__cta:focus-visible {
  text-decoration: underline;
}

/* Kartan latausnappi: nakyy vain JS:n kanssa (main.js poistaa hidden-attribuutin). */
.map-static__load {
  margin-top: 18px;
  min-width: 12rem;
}

/* Ladattu kartta tayttaa kortin; kortti pitaa mittansa. */
.map-card.is-loaded {
  display: block;
  padding: 0;
  min-height: clamp(280px, 30vw, 420px);
}

.map-card.is-loaded .map-frame {
  display: block;
  width: 100%;
  height: clamp(280px, 30vw, 420px);
  border: 0;
}

.map-frame {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

/* §33: kontaktikuplan painikkeet vähintään 44 x 44 px. */
.kupla .kupla__sulje {
  min-width: 44px;
  min-height: 44px;
}

/* ---------- 10 · Footer: jaettu tehdasrakenne ---------- */

.site-footer {
  position: relative;
  overflow: clip;
  background: var(--surface-footer-field);
  color: var(--snow-soft);
  padding: clamp(48px, 6vw, 72px) 0 clamp(24px, 3vw, 34px);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--footer-rule-accent);
  pointer-events: none;
}

.footer-inner {
  position: relative;
  display: grid;
  gap: clamp(30px, 4vw, 48px);
}

.footer-logo {
  width: 181px;
  height: auto;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr) minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.footer-brand-block,
.footer-column {
  min-width: 0;
}

.footer-promise {
  max-width: 30ch;
  margin-top: 18px;
  color: var(--snow-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.footer-heading {
  color: var(--accent-warm-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  margin-top: 12px;
}

.footer-links a,
.footer-links span,
.footer-map-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--snow-soft);
  font-size: var(--fs-small);
  line-height: 1.35;
  text-decoration: none;
}

.footer-links a:hover,
.footer-map-link:hover {
  color: var(--accent-warm-on-dark);
}

.footer-links--contact a {
  overflow-wrap: anywhere;
}

.footer-address {
  margin-top: 18px;
  color: var(--snow-soft);
  font-size: var(--fs-small);
  font-style: normal;
  line-height: 1.55;
}

.footer-map-link {
  gap: 8px;
  margin-top: 6px;
  color: var(--snow);
  font-weight: 700;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  padding-top: 22px;
  border-top: 1px solid var(--footer-rule);
  color: var(--snow-faint);
  font-size: var(--fs-label);
  line-height: 1.55;
}

/* Tekijätiedot väistävät kelluvan kuplan. Ilman varattua kaistaa rivin
   loppu jää napin alle, ja juuri se osa on nimi joka pitää olla luettavissa.
   Vara tulee tokenista, joten napin koon muutos siirtää tekstiä mukana. */
.footer-credit {
  padding-inline-end: var(--kupla-varattu-kaista);
}

.footer-credit a {
  color: var(--snow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-credit a:hover {
  color: var(--accent-warm-on-dark);
}

/* ---------- Reveal: IO-fallback (main.js lisää html.io-reveal) ---------- */
/* Kotka-sääntö: piilotus tapahtuu vasta kun JS on lisännyt io-reveal-luokan */

html.io-reveal .reveal {
  opacity: 0;
  translate: 0 var(--reveal-rise);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out);
}

html.io-reveal .reveal.is-revealed {
  opacity: 1;
  translate: none;
}

html.io-reveal .service-grid .reveal:nth-child(2),
html.io-reveal .hotel-cards .reveal:nth-child(2),
html.io-reveal .stats-grid .reveal:nth-child(2) {
  transition-delay: 90ms;
}

html.io-reveal .service-grid .reveal:nth-child(3),
html.io-reveal .stats-grid .reveal:nth-child(3) {
  transition-delay: 180ms;
}

html.io-reveal .service-grid .reveal:nth-child(4) {
  transition-delay: 90ms;
}

html.io-reveal .service-grid .reveal:nth-child(5) {
  transition-delay: 180ms;
}

html.io-reveal .service-grid .reveal:nth-child(6) {
  transition-delay: 270ms;
}

/* ---------- CSS scroll-driven reveals (natiivi, off-main-thread) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-rise;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    translate: 0 var(--reveal-rise);
  }
  to {
    opacity: 1;
    translate: none;
  }
}

/* ---------- Cross-document View Transitions ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-out);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html.io-reveal .reveal {
    opacity: 1;
    translate: none;
  }

  /* Universaali valitsin ei osu view-transition-pseudoihin: nollataan erikseen */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ---------- Responsiivisuus ---------- */

@media (max-width: 1100px) {
  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Kampanjagrid pinoutuu: kärkikortti täysleveä, kompaktit alle */
  .offer-card--featured,
  .offer-stack {
    grid-column: 1 / -1;
  }

  .offer-card--featured .offer-media {
    aspect-ratio: 3 / 2;
    flex: none;
  }

  /* Saumabadge ankkuroituu kuvan alareunaan flow'ssa */
  .price-tag--seam {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    align-self: flex-end;
    margin: calc(-1 * clamp(24px, 5vw, 34px)) 18px 0 0;
  }
}

@media (max-width: 960px) {
  /* Hampurilainen + mobiilinavigaatio */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px clamp(18px, 5vw, 28px) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s var(--dur-base);
  }

  .site-header.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  .site-header.nav-open {
    background: var(--paper);
    box-shadow: var(--shadow-card);
  }

  .site-header.nav-open .brand-logo--inverse {
    opacity: 0;
  }

  .site-header.nav-open .brand-logo--solid {
    opacity: 1;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .nav-link,
  .site-header.nav-open .nav-link {
    min-height: 48px;
    padding: 0 14px;
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: var(--fs-body);
  }

  .nav-link:hover,
  .site-header.nav-open .nav-link:hover {
    color: var(--ink);
    background: var(--blue-50);
  }

  .nav-pill,
  .site-header.nav-open .nav-pill {
    color: var(--blue-800);
    border-color: color-mix(in srgb, var(--blue-800) 45%, transparent);
    font-weight: 700;
  }

  .nav-cta {
    justify-content: center;
    min-height: 52px;
  }

  /* Hero pinoutuu: kuva täysleveänä ylös (bleed headerin alle), teksti navylle */
  .hero-grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero-visual {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: auto;
    margin: calc(-1 * var(--hero-pad-top)) calc((100vw - var(--container)) / -2) 0;
    min-height: var(--hero-mobile-image-height);
  }

  .hero-copy {
    grid-column: 1;
    grid-row: 2;
    padding-block: var(--hero-mobile-copy-padding-top) 0;
  }

  /* Teksti ei enää limity kuvan päälle → scrim pois, kuvaan pohjahäivytys */
  .hero-copy::before {
    content: none;
  }

  .hero-ovi-frame img {
    object-position: var(--hero-image-position-mobile);
  }

  .hero-ovi-frame::before {
    background: var(--hero-frame-scrim-mobile);
  }

  .hotel-grid,
  .about-grid,
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-grid {
    grid-template-areas:
      "copy"
      "form"
      "map";
  }

  .about-copy,
  .about-media,
  .stats-grid {
    grid-column: auto;
  }

  .about-media {
    margin-right: 0;
    border-right: 1px solid var(--media-border);
    border-radius: var(--r-lg);
  }

  .tire-center-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-card {
    grid-column: auto;
  }

  .service-card--primary {
    grid-column: 1 / -1;
  }

  .map-frame {
    min-height: 340px;
  }
}

@media (max-width: 640px) {
  .offer-grid,
  .service-grid,
  .hotel-cards,
  .network-rail__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-grid);
  }

  .footer-meta {
    flex-direction: column;
  }

  .tire-center-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .tire-center-frame,
  .tire-center-frame--main,
  .tire-center-frame--detail,
  .tire-center-frame--storage {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }

  .tire-center-frame--main {
    aspect-ratio: 4 / 3;
  }

  .tire-center-frame--detail,
  .tire-center-frame--storage {
    aspect-ratio: 16 / 9;
  }

  .tire-center-cta {
    width: 100%;
  }

  .price-table {
    table-layout: fixed;
  }

  .price-col,
  .price-cell {
    width: 32%;
  }

  .price-table th,
  .price-table td {
    overflow-wrap: anywhere;
  }

  .network-rail__partner + .network-rail__partner {
    border-top: 1px solid var(--network-rail-divider);
    border-left: 0;
  }

  .hero-actions,
  .hero-chips {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-chip {
    width: 100%;
  }

  /* Display-typo skaalautuu 375 px:lle ilman rivikatkoja amber-rivillä */
  .hero-title {
    font-size: var(--hero-mobile-title-size);
  }

  .ring-text {
    width: 260px;
    right: -110px;
  }

  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .contact-actions .btn {
    width: 100%;
  }

  .contact-form__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-field--wide {
    grid-column: auto;
  }

  .contact-form__foot {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form__submit {
    width: 100%;
  }

  .offer-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 420px) {
  .price-table th,
  .price-table td {
    padding: 13px 14px;
  }
}