/* ============================================================
   Kotkan Autotarvike, komponentit
   (alasivujen avaus, poimintarivit, maaliosasto, noutolipuke)
   Arvot tulevat AINA tokens.css:stä.
   ============================================================ */

/* ---------- sivun avaus (alasivut) ---------- */
.pagehead { position: relative; overflow: clip; padding-block: calc(var(--header-h, 72px) + clamp(3.5rem, 9vh, 7rem)) var(--chapter-pad); }
.pagehead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.pagehead__text { min-width: 0; }
/* Clash Display on luonnostaan tiivis. Negatiivinen kirjainväli tarvitsee
   vastapainoksi positiivisen sanavälin, muuten sanat menevät kiinni toisiinsa
   ja teksti muuttuu vaikealukuiseksi. */
.pagehead__title {
  font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  word-spacing: 0.08em;
  max-width: min(17ch, 100%);
  overflow-wrap: break-word;
  hyphens: auto;
  margin: 0.7rem 0 1.2rem;
}
.pagehead .lead { max-width: 48ch; }
.pagehead__note {
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--chapter-line);
  font-size: var(--fs-small); color: var(--chapter-muted);
}
.pagehead__note strong { color: var(--chapter-text); }
.pagehead__figure { min-width: 0; border: 1px solid var(--chapter-line); box-shadow: var(--shadow-lift); }
.pagehead__figure img { width: 100%; height: auto; }
@media (max-width: 1100px) { .pagehead__inner { grid-template-columns: 1fr; } }

.gate__intro { margin-top: var(--sp-4); max-width: 54ch; color: var(--chapter-muted); font-size: var(--fs-lead); }
.missing-note { font-size: var(--fs-small); color: var(--chapter-muted); max-width: 62ch; }
.missing-note .label { display: block; margin-bottom: 0.3rem; }

/* ---------- ledger: poimintarivit ---------- */
.ledger--pick .ledger__cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  grid-template-areas: "name desc";
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(1.05rem, 2.2vw, 1.7rem) 0;
}
.ledger__add {
  display: none;
  grid-area: add;
  position: relative;
  width: 2.75rem; height: 2.75rem; justify-self: end; align-self: center;
  border: 1px solid var(--chapter-line);
  color: var(--chapter-accent);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ledger__add::before,
.ledger__add::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: currentColor; transform: translate(-50%, -50%);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) linear;
}
.ledger__add::before { width: 11px; height: 1px; }
.ledger__add::after { width: 1px; height: 11px; }
.lipuke-ready .ledger--pick .ledger__cell {
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 3rem;
  grid-template-areas: "name desc add";
}
.lipuke-ready .ledger__add { display: block; }
.ledger__add:hover,
.ledger__add:focus-visible { border-color: var(--chapter-accent); background: color-mix(in srgb, var(--chapter-accent) 10%, transparent); }
.ledger__add[aria-pressed="true"] {
  background: var(--chapter-accent);
  border-color: var(--chapter-accent);
  color: var(--paper);
}
.ledger__add[aria-pressed="true"]::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.ledger--pick .ledger__row:hover { background: color-mix(in srgb, var(--chapter-accent) 4%, transparent); }

@media (max-width: 820px) {
  .ledger--pick .ledger__cell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "desc";
    row-gap: 0.35rem;
  }
  .lipuke-ready .ledger--pick .ledger__cell {
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    grid-template-areas:
      "name add"
      "desc desc";
  }
}

/* ---------- maaliosasto ---------- */
.paint__swatches {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--chapter-line);
  border: 1px solid var(--chapter-line);
  margin-bottom: var(--sp-4);
}
.swatch { position: relative; aspect-ratio: 4 / 3; display: block; }
.swatch__label {
  position: absolute; left: 0.75rem; bottom: 0.6rem;
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* "Sinun sävysi" on tarkoituksella tunnistamaton: sävy on auton koodissa, ei meidän listassamme */
.swatch--code {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px),
    linear-gradient(150deg, #6d4a3a, #2f2a26 62%, #4a3f36);
}
.swatch--primer { background: linear-gradient(150deg, #6f6a63, #3f3b35); }
.swatch--filler { background: linear-gradient(150deg, #8a7f6d, #4c4539); }
.swatch--clear {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06) 58%, rgba(0, 0, 0, 0.22)), #6b6257;
}
.paint__caption { font-size: var(--fs-small); color: var(--chapter-muted); margin-bottom: var(--sp-6); }
.paint__figure { margin-top: var(--sp-7); border: 1px solid var(--chapter-line); }
.paint__figure img { display: block; width: 100%; height: auto; }
.paint__figure figcaption {
  padding: 0.8rem 1rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--chapter-muted); background: color-mix(in srgb, var(--paper) 40%, transparent);
}
/* Valikoiman automaalikuvan maalisumu rakentuu kolmesta vaaleasta sumupilvestä.
   Pilvet rajautuvat kuvan vasempaan yläosaan eivätkä koske palvelusivun kuvaan. */
.paint__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}
.paint__visual picture { display: block; }
.paint__mist {
  position: absolute;
  z-index: 1;
  inset: -2% 53% 45% -2%;
  pointer-events: none;
}
.paint__plume {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: normal;
}
.paint__plume--broad {
  top: 5%;
  left: -17%;
  width: 92%;
  height: 76%;
  background: radial-gradient(
    ellipse at 48% 52%,
    color-mix(in srgb, var(--paper) 88%, transparent) 0%,
    color-mix(in srgb, var(--paper) 68%, transparent) 25%,
    color-mix(in srgb, var(--linen) 30%, transparent) 53%,
    transparent 76%
  );
  filter: blur(clamp(24px, 3.6vw, 52px));
  opacity: 0.58;
}
.paint__plume--high {
  top: -18%;
  left: 12%;
  width: 68%;
  height: 62%;
  background: radial-gradient(
    ellipse at 44% 50%,
    color-mix(in srgb, var(--paper) 84%, transparent) 0%,
    color-mix(in srgb, var(--linen) 52%, transparent) 34%,
    color-mix(in srgb, var(--linen) 20%, transparent) 59%,
    transparent 78%
  );
  filter: blur(clamp(18px, 2.8vw, 42px));
  opacity: 0.50;
}
.paint__plume--drift {
  top: 39%;
  left: -4%;
  width: 88%;
  height: 44%;
  background: radial-gradient(
    ellipse at 52% 46%,
    color-mix(in srgb, var(--paper) 86%, transparent) 0%,
    color-mix(in srgb, var(--paper) 60%, transparent) 29%,
    color-mix(in srgb, var(--linen) 24%, transparent) 57%,
    transparent 79%
  );
  filter: blur(clamp(20px, 3.2vw, 48px));
  opacity: 0.54;
}

@media (prefers-reduced-motion: no-preference) {
  .paint__plume { will-change: transform, opacity; }
  .paint__plume--broad {
    animation: paint-plume-broad 18.5s cubic-bezier(0.45, 0, 0.55, 1) -7s infinite alternate;
  }
  .paint__plume--high {
    animation: paint-plume-high 22s cubic-bezier(0.45, 0, 0.55, 1) -13s infinite alternate;
  }
  .paint__plume--drift {
    animation: paint-plume-drift 14s cubic-bezier(0.45, 0, 0.55, 1) -4s infinite alternate;
  }
}

@keyframes paint-plume-broad {
  from {
    opacity: 0.48;
    transform: translate3d(-5%, 4%, 0) scale(0.94) rotate(-2deg);
  }
  to {
    opacity: 0.66;
    transform: translate3d(12%, -5%, 0) scale(1.12) rotate(2deg);
  }
}

@keyframes paint-plume-high {
  from {
    opacity: 0.44;
    transform: translate3d(10%, -5%, 0) scale(1.06) rotate(2deg);
  }
  to {
    opacity: 0.58;
    transform: translate3d(-9%, 12%, 0) scale(0.90) rotate(-3deg);
  }
}

@keyframes paint-plume-drift {
  from {
    opacity: 0.46;
    transform: translate3d(-8%, 5%, 0) scale(0.93) rotate(-1deg);
  }
  to {
    opacity: 0.64;
    transform: translate3d(18%, -9%, 0) scale(1.15) rotate(3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .paint__plume {
    animation: none;
    will-change: auto;
    transform: none;
  }
  .paint__plume--broad { opacity: 0.58; }
  .paint__plume--high { opacity: 0.50; }
  .paint__plume--drift { opacity: 0.54; }
}

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

/* ---------- loppu-CTA ---------- */
.endcta { display: grid; gap: var(--sp-5); }
.endcta .lead { max-width: 56ch; }
.endcta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ============================================================
   NOUTOLIPUKE, paperiliuska, ei ostoskori.
   Ei hintoja, ei saatavuutta, ei tilausta: ostoslista joka
   päättyy puheluun. Kun verkkokauppa aikanaan avataan, tämä
   on valmis kytkettäväksi koriksi.
   ============================================================ */
.lipuke {
  --focus-ring: var(--ink);
  position: fixed; z-index: calc(var(--z-bubble) + 1);
  left: clamp(12px, 3vw, 32px);
  bottom: max(clamp(12px, 3vw, 28px), calc(env(safe-area-inset-bottom) + 8px));
  width: min(340px, calc(100vw - 5.5rem));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--sand);
  box-shadow: var(--shadow-plate);
  font-size: var(--fs-small);
}
.lipuke[hidden] { display: none; }
/* pieni sinetti: lipuke on dokumentti, ei widgetti */
.lipuke::after {
  content: ""; position: absolute; right: 14px; bottom: 12px;
  width: 46px; aspect-ratio: 1066 / 810; opacity: 0.07; pointer-events: none;
  background: var(--ink);
  -webkit-mask: url("../../assets/brand/logo-mark-1color.svg") center / contain no-repeat;
          mask: url("../../assets/brand/logo-mark-1color.svg") center / contain no-repeat;
}
.lipuke__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid var(--line-ink-soft);
  background: color-mix(in srgb, var(--linen) 55%, var(--paper));
}
.lipuke__toggle { min-height: 44px; display: flex; align-items: center; gap: 0.5rem; flex: 1; text-align: left; }
.lipuke__title {
  font-family: var(--font-mono); font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink);
}
.lipuke__count { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brass-deep); }
.lipuke__clear {
  min-height: 44px;
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint);
  padding: 0.3rem;
}
.lipuke__clear:hover,
.lipuke__clear:focus-visible { color: var(--brass-deep); }
.lipuke__body { padding: 0.85rem 0.9rem 1rem; max-height: min(48vh, 420px); overflow-y: auto; }
.lipuke__list { display: block; }

/* Luokkanimet vastaavat lipuke.js:n tuottamaa DOMia (lipuke__rivi / __osasto / __nro /
   __nimi / __poista). Rivi on tilikirjarivi: osastootsikko omalla rivillään, numero,
   nimi ja poisto omilla sarakkeillaan. */
.lipuke__rivi {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2.75rem;
  align-items: baseline;
  column-gap: 0.5rem;
  padding: 0.42rem 0;
  border-bottom: 1px dotted var(--line-ink-soft);
}
.lipuke__osasto {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin: 0.85rem 0 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line-ink-soft);
}
.lipuke__rivi:first-child .lipuke__osasto { margin-top: 0; }
.lipuke__nro { font-family: var(--font-mono); font-size: 0.85rem; color: var(--brass-deep); }
.lipuke__nimi { line-height: 1.4; }
.lipuke__poista {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1; color: var(--ink-faint);
  justify-self: end; align-self: center;
}
.lipuke__poista:hover,
.lipuke__poista:focus-visible { color: #a2402a; }

/* rivin lentosiru lipukkeeseen (GSAP Flip) */
.lipuke__lento {
  position: fixed; z-index: calc(var(--z-bubble) + 1);
  padding: 0.3rem 0.6rem;
  background: var(--brass); color: #1b1206;
  font-family: var(--font-mono); font-size: 0.85rem;
  pointer-events: none; white-space: nowrap;
}
.lipuke__actions { display: grid; gap: 0.5rem; margin-top: var(--sp-4); }
.lipuke__actions .btn { padding: 0.7rem 1rem; align-items: center; text-align: center; }
.lipuke__actions .btn--ghost { border-color: var(--sand); color: var(--ink); }
.lipuke__actions .btn--ghost:hover { border-color: var(--brass-deep); color: var(--brass-deep); }
.lipuke__fallback { margin-top: var(--sp-4); }
.lipuke__fallback .fallback-msg {
  background: color-mix(in srgb, var(--linen) 40%, var(--paper));
  border-color: var(--sand); color: var(--ink-muted);
}
.lipuke__fallback .copy-status { color: var(--brass-deep); }

@media (max-width: 720px) {
  .lipuke {
    left: 12px; right: 12px; width: auto;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
  }
  .lipuke__body { max-height: 40vh; }

  .page-valikoima.lipuke-visible {
    padding-bottom: calc(4.4rem + env(safe-area-inset-bottom));
  }
  .page-valikoima.lipuke-visible .ssfcb {
    bottom: max(calc(12px + 4.4rem), calc(env(safe-area-inset-bottom) + 5.2rem));
  }
  .page-valikoima.lipuke-visible.lipuke-expanded .ssfcb {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }
}

/* lomakkeen automaattinen esitäyttöhuomautus (yhteys.js luo tämän) */
.form-hint--auto { color: var(--brass-bright); }

/* ============================================================
   PALVELUT. "Työmääräin": vaiheet ovat rivejä lomakkeella,
   ei kortteja. Oma rakenteellinen DNA, ei etusivun eikä
   valikoiman toisinto.
   ============================================================ */
.worksheet {
  counter-reset: worksheet-step;
  border-top: 2px solid var(--chapter-accent);
}
.worksheet__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(0.75rem, 2.5vw, 2.5rem);
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--chapter-line);
}
.worksheet__what {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  line-height: 1.25;
}
.worksheet__detail { color: var(--chapter-muted); }
.worksheet__detail strong { color: var(--chapter-text); }
@media (max-width: 820px) {
  .worksheet__row { grid-template-columns: 1fr; }
  .worksheet__detail { grid-column: 1; }
}

/* toimitusportaat */
.tiers {
  display: grid; grid-template-columns: 1.15fr 1fr 0.9fr;
  align-items: start;
  gap: 1px; background: var(--chapter-line); border: 1px solid var(--chapter-line);
}
/* portaikko: tiski ensin, jakeluauto sitten, posti viimeisena. Luonnollinen
   hierarkia (lahin -> kaukaisin), ei kolmea identtista laattaa (anti-AI). */
.tier:nth-child(2) { margin-top: 1.4rem; }
.tier:nth-child(3) { margin-top: 2.8rem; }
@media (max-width: 820px) {
  .tier:nth-child(2), .tier:nth-child(3) { margin-top: 0; }
}
.tier { background: var(--chapter-ground); padding: clamp(1.3rem, 2.4vw, 2.1rem); }
.tier__range {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--chapter-accent);
}
.tier h3 { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); margin: 0.45rem 0 0.6rem; font-weight: 600; }
.tier p { font-size: var(--fs-small); color: var(--chapter-muted); }
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

/* maalikoodiopas */
.codeguide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.codeguide__spot { border-top: 1px solid var(--chapter-line); padding-top: var(--sp-4); }
.codeguide__spot h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.4rem; }
.codeguide__spot p { font-size: var(--fs-small); color: var(--chapter-muted); }
.codeguide__spot .label { display: block; margin-bottom: 0.5rem; }
@media (max-width: 760px) { .codeguide { grid-template-columns: 1fr; } }

/* löydät meidät */
.findus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.findus__address { font-style: normal; font-size: var(--fs-lead); line-height: 1.6; }
.findus__list { display: grid; gap: 0.7rem; margin-top: var(--sp-4); font-size: var(--fs-small); color: var(--chapter-muted); }
.findus__list li { display: flex; gap: 0.7rem; }
.findus__list li::before { content: ""; flex: none; width: 12px; height: 1px; margin-top: 0.72em; background: var(--chapter-accent); }
.findus__list b { color: var(--chapter-accent); font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; }
@media (max-width: 760px) { .findus { grid-template-columns: 1fr; } }

/* ============================================================
   CTA ilman nappilaatikoita.
   Gradienttitaytteinen laatikko + aariviivalaatikko on juuri se
   SaaS-pari jonka anti-AI-lista kieltaa. Taalla puhelinnumero ON
   elementti: kaiverrettu laatta ilman tayttoa, ja toissijainen
   toiminto on tekstilinkki jonka alle piirtyy messinkiviiva.
   ============================================================ */
.calltile {
  display: inline-grid;
  gap: 0.28rem;
  padding: 0.15rem 0 0.5rem 1.05rem;
  border-left: 2px solid var(--chapter-accent, var(--brass));
  position: relative;
}
.calltile__label {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--chapter-faint, var(--text-faint));
}
.calltile__num {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem);
  letter-spacing: 0.005em; line-height: 1;
  color: var(--chapter-text, var(--text));
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.calltile::after {
  content: ""; position: absolute; left: 1.05rem; right: 0; bottom: 0;
  height: 1px; background: var(--chapter-accent, var(--brass));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.calltile:hover .calltile__num,
.calltile:focus-visible .calltile__num { color: var(--brass-bright); }
.chapter--paper .calltile:hover .calltile__num,
.chapter--paper .calltile:focus-visible .calltile__num,
.chapter--linen .calltile:hover .calltile__num,
.chapter--linen .calltile:focus-visible .calltile__num,
.chapter--shelf .calltile:hover .calltile__num,
.chapter--shelf .calltile:focus-visible .calltile__num { color: var(--chapter-accent); }
.calltile:hover::after,
.calltile:focus-visible::after { transform: scaleX(1); }

.textlink {
  position: relative; align-self: end;
  display: inline-flex; align-items: baseline; gap: 0.55em;
  min-height: 44px;
  padding-bottom: 0.5rem;
  font-family: var(--font-mono); font-size: 0.88rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--chapter-muted, var(--text-muted));
  transition: color var(--dur-fast) var(--ease-out);
}
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: 0.35;
  transform: scaleX(0.24); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-fast) linear;
}
.textlink:hover,
.textlink:focus-visible { color: var(--chapter-text, var(--text)); }
.textlink:hover::after,
.textlink:focus-visible::after { transform: scaleX(1); opacity: 1; }
.textlink__arrow { transition: transform var(--dur-mid) var(--ease-out); }
.textlink:hover .textlink__arrow,
.textlink:focus-visible .textlink__arrow { transform: translateX(4px); }

.hero__actions,
.endcta__actions {
  display: flex; flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* Lomakkeen lahetysnappi saa olla nappi (se on lomake), mutta ilman
   gradienttia ja hehkua: yksi tasainen messinkipinta ja terava kulma. */
.ask-form .btn--brass {
  background: var(--brass);
  box-shadow: none;
  border: 1px solid var(--brass-bright);
}
.ask-form .btn--brass::after { display: none; }
.ask-form .btn--brass:hover { background: var(--brass-bright); transform: none; }

/* Heron palvelunostot: ei numeroindeksia vaan kolme lyhytta lupausta,
   joissa on lampoa. Messinkihehku syttyy kun kohdistin kay paalla. */
.hero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0; margin-top: clamp(2rem, 6vh, 4rem);
  border-top: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  background: none;
}
.hero__facts li {
  display: block;
  padding: 1.15rem clamp(1rem, 2vw, 2rem) 0.4rem 0;
  font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.55;
  color: var(--text-muted);
  border-right: 1px solid color-mix(in srgb, var(--brass) 22%, transparent);
  transition: color var(--dur-mid) var(--ease-out), background var(--dur-mid) var(--ease-out);
}
.hero__facts li:last-child { border-right: 0; }
.hero__facts li:hover {
  color: var(--text-muted);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brass) 9%, transparent), transparent 70%);
}
.hero__facts-tag {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--brass-bright);
}
@media (max-width: 800px) {
  .hero__facts { grid-template-columns: 1fr; border-top: 0; }
  .hero__facts li { border-right: 0; border-top: 1px solid var(--line-soft); padding-right: 0; }
}

/* Kupla kantaa WhatsApp-tunnusta: se tunnistetaan ilman selitysta, ja se on
   matalin kynnys ottaa yhteytta. Tunnus on kasin authoroitu vektori ja perii
   varinsa currentColorista, joten sita ei tarvitse vaantaa filttereilla. */
.ssfcb__toggle-glyph {
  width: 32px; height: 32px;
  color: #17110a;
  filter: drop-shadow(0 1px 0 rgba(255, 236, 210, 0.35));
}

/* Lipukkeen napit litteiksi: ei gradienttilaatikoita. */
.lipuke__actions .btn--brass {
  background: var(--brass-deep); color: var(--paper);
  border: 1px solid var(--brass-deep); box-shadow: none;
}
.lipuke__actions .btn--brass::after { display: none; }
.lipuke__actions .btn--brass:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); transform: none; }

/* Työmääräimen 01-04-indeksi tekee asioinnin järjestyksen näkyväksi
   ilman erillisiä kortteja. */
.worksheet__row {
  counter-increment: worksheet-step;
  position: relative;
  padding-left: clamp(3.6rem, 6vw, 5.2rem);
}
.worksheet__row::before {
  content: counter(worksheet-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: clamp(1.45rem, 3vw, 2.35rem);
  font-family: var(--font-mono);
  font-size: var(--fs-index);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--chapter-accent);
}
.worksheet__what { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); }

/* ============================================================
   KARTTA. Upotus sovitetaan brandiin: paperinen kehys, messinkireuna
   ja lampoa suodattimella, jotta Googlen oma varimaailma ei riko lukua.
   ============================================================ */
.mapframe {
  grid-column: 1 / -1;
  position: relative;
  border: 1px solid var(--chapter-line);
  border-top: 2px solid var(--chapter-accent);
  background: var(--paper-deep);
  margin-bottom: var(--sp-6);
}
.mapframe iframe {
  display: block; width: 100%; height: clamp(280px, 38vw, 420px);
  filter: sepia(0.28) saturate(0.78) contrast(1.04) brightness(0.98);
  transition: filter var(--dur-slow) var(--ease-out);
}
.mapframe:hover iframe,
.mapframe:focus-within iframe { filter: sepia(0.08) saturate(0.95) contrast(1.02) brightness(1); }
.mapframe figcaption {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--chapter-line);
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.05em;
  color: var(--chapter-muted);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: space-between;
}

/* ============================================================
   SIJAINTINÄKYMÄ: otsikko, kartta ja selkeä ulos vievä linkki.
   Kehyksetön kokonaisuus jatkaa luvun editoriaalista rytmiä, kartan
   oma hienovarainen kehys sitoo upotuksen materiaalimaailmaan.
   ============================================================ */
.location-card {
  grid-column: 1 / -1;
  border: 0;
  border-top: 2px solid var(--chapter-accent);
  background: transparent;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0 0;
  margin-bottom: var(--sp-6);
}
.location-card__title {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600; margin: 0.4rem 0 0.9rem;
}
.location-card__map { position: relative; border: 1px solid var(--chapter-line); overflow: hidden; }
.location-card__map iframe {
  display: block; width: 100%; height: clamp(260px, 34vw, 400px); border: 0;
  filter: sepia(0.3) saturate(0.75) contrast(1.05) brightness(0.97);
  transition: filter var(--dur-slow) var(--ease-out);
}
.location-card:hover .location-card__map iframe,
.location-card:focus-within .location-card__map iframe { filter: sepia(0.06) saturate(0.98) contrast(1.02); }
.location-card__map:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.map-open {
  min-height: 44px;
  display: inline-flex; align-items: center; margin-top: 0.65rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--chapter-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--chapter-accent) 45%, transparent);
  padding-bottom: 0.2rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.map-open:hover,
.map-open:focus-visible { border-bottom-color: var(--chapter-accent); }

/* ============================================================
   LOMAKKEEN LUETTAVUUSARKKITEHTUURI
   Ongelma: jokainen otsikko oli samaa mono-versaalia samassa koossa,
   joten mikaan ei ollut tarkeampaa kuin toinen ja lohko luki sekavana.
   Ratkaisu: kolme selkeasti eri tasoa. Label on pieni ja hiljainen,
   syote on iso ja luettava, apuinfo on pienta leipatekstia eika monoa.
   ============================================================ */
.ask-form { gap: 2rem; }
/* TASO 1, KYSYMYKSET: sivun tarkeimmat kysymykset ovat isoin luettava taso.
   Tarkeys nousee kokohierarkialla, ei laatikolla. */
.ask-form .form-field label,
.ask-form .form-field legend {
  font-family: var(--font-body);
  font-size: 1.25rem; font-weight: 600;
  text-transform: none; letter-spacing: normal;
  color: var(--text);
  margin-bottom: 0.5rem;
}
/* TASO 2, SYOTTEET */
.ask-form .form-field input[type="text"],
.ask-form .form-field textarea {
  font-size: 1.125rem; padding: 0.7rem 0;
  border-bottom-width: 1px;
}
/* Poikkeusrooli: rekisterinumero erottuu materiaalilla (mono), ei uudella koolla */
.ask-form #f-ajoneuvo {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.ask-form .form-field input::placeholder,
.ask-form .form-field textarea::placeholder {
  font-size: 1rem; opacity: 0.78;
}
/* TASO 3, APU */
.ask-form .form-hint,
.ask-form .form-note {
  font-family: var(--font-body); font-size: var(--fs-small);
  color: var(--text-muted); line-height: 1.5;
}
.ask-form .form-error {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500;
  color: #d98b63;
  display: flex; align-items: baseline; gap: 0.4rem;
}
.ask-form .form-error::before { content: ""; flex: none; width: 10px; height: 1px; background: currentColor; margin-top: 0.55em; }
.ask-form .form-field--choice legend { margin-bottom: 0.5rem; }
.ask-form .btn--brass { margin-top: 0.4rem; }

/* ============================================================
   LUETTAVUUSARKKITEHTUURI (yksi paikka, ei paikkauksia)

   Juurisyy jota korjattiin useaan kertaan vaarasta paasta: Clash Display
   on kondensoitu display-leikkaus. Se toimii vain isona, ja pienessa
   koossa sen sanavalit menevat umpeen niin etta "Sama tiski" lukee
   muodossa "Samatiski". Asiakkaan pitaa pystya lukemaan sivu vaivatta,
   joten saanto on nyt rakenteellinen:

   1. Clash Display VAIN otsikoissa jotka ovat vahintaan noin 1.6rem.
   2. Kaikki sita pienemmat otsikot ovat Hanken Grotesk 600.
   3. Kaikkialla missa Clash on kaytossa, negatiivinen kirjainvali saa
      vastapainoksi positiivisen sanavalin.
   ============================================================ */

/* 1 + 2: pienet otsikot pois display-fontista */
.promise strong,
.ssfcb__title,
.send-fallback h3,
.location-card__title,
.counter__title,
.tier h3,
.codeguide__spot h3,
.audience__item h3,
.worksheet__what {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.002em;
  word-spacing: normal;
}

/* 3: display-otsikoiden sanavali auki, jotta sanat erottuvat toisistaan */
.hero__title,
.pagehead__title,
.gate__title,
.ledger__name {
  word-spacing: 0.09em;
}
.ledger__name { letter-spacing: -0.008em; }

/* Lupauslistan rytmi: otsikko ja selitys erottuvat selvasti toisistaan */
.promise li { gap: 0.28rem; }
.promise strong { font-size: 1.05rem; line-height: 1.35; }
.promise span { line-height: 1.6; }

/* ============================================================
   KELLUVAT PINNAT: pois laatikkopinosta.

   Virhe jota korjataan: paneeli oli laatikko, jokainen rivi oli
   laatikko, ja jokaisen ikonin ymparilla oli viela oma nelio.
   Kolme reunaviivaa paallekkain lukee templaattina. Korjaus ei ole
   kaikkien kolmen pyoristaminen vaan YHDEN laatikkotason poisto:
   rivit erotetaan hiusviivalla ja ikoni istuu suoraan pinnalla.
   ============================================================ */

/* --- kontaktikupla --- */
.ssfcb__panel {
  border: 0;
  border-radius: var(--radius-soft);
  padding: 1.5rem 1.5rem 1.2rem;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ground-edge) 92%, var(--brass)) 0%,
      var(--ground-raise) 34%,
      var(--ground) 100%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.52),
    0 2px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 232, 200, 0.10);
}
.ssfcb__header {
  margin-bottom: 1.1rem;
  padding-right: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.ssfcb__title { font-size: 1.35rem; }
.ssfcb__subtitle { font-size: 1rem; line-height: 1.5; }
.ssfcb__close {
  top: -2px; right: -2px;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ssfcb__close:hover,
.ssfcb__close:focus-visible { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* rivit: ei omaa laatikkoa, vain hiusviiva ja pehmea lampopesu hoverissa */
.ssfcb__content { display: block; background: none; border: 0; gap: 0; }
.ssfcb__item {
  position: relative;
  padding: 1rem 0.75rem;
  margin-inline: -0.75rem;
  background: none;
  border-radius: var(--radius-card);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ssfcb__item + .ssfcb__item::before {
  content: ""; position: absolute; top: 0; left: 0.75rem; right: 0.75rem;
  height: 1px; background: var(--line-soft);
}
.ssfcb__item:hover,
.ssfcb__item:focus-visible {
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  color: var(--brass-bright);
}
.ssfcb__item:hover::before,
.ssfcb__item:focus-visible::before,
.ssfcb__item:hover + .ssfcb__item::before,
.ssfcb__item:focus-visible + .ssfcb__item::before { opacity: 0; }

/* ikoni istuu suoraan pinnalla, ei kehysta */
.ssfcb__icon-wrap {
  width: 26px; height: 26px;
  border: 0; background: none;
}
.ssfcb__icon { width: 24px; height: 24px; opacity: 0.72; transition: opacity var(--dur-fast) var(--ease-out); }
.ssfcb__item:hover .ssfcb__icon,
.ssfcb__item:focus-visible .ssfcb__icon { opacity: 1; }
.ssfcb__label { letter-spacing: 0.08em; }
.ssfcb__hint { margin-top: 0.1rem; }

/* --- noutolipuke ja varapaneeli samaan kieleen --- */
.lipuke {
  border: 0;
  border-radius: var(--radius-soft);
  overflow: hidden;
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.lipuke__bar { border-bottom-color: color-mix(in srgb, var(--sand) 55%, transparent); }
.lipuke__rivi { border-bottom-style: solid; border-bottom-color: color-mix(in srgb, var(--sand) 40%, transparent); }
.lipuke__actions .btn { border-radius: var(--radius-card); }

.send-fallback {
  border: 0;
  border-radius: var(--radius-soft);
  background: linear-gradient(180deg, var(--ground-edge), var(--ground-raise) 40%, var(--ground));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 232, 200, 0.08);
}
.fallback-msg, .lipuke__fallback .fallback-msg { border-radius: var(--radius-card); }

/* Sisällön kuvakehykset pysyvät editoriaalisesti terävinä.
   Pehmeä radius kuuluu vain aidosti kelluviin käyttöliittymäpintoihin. */
.counter__figure,
.pagehead__figure,
.paint__figure,
.location-card__map,
.shelf-art,
.codeguide__figure { overflow: hidden; }

/* ============================================================
   BRANDI HEADERISSA: toimitettu lockup sellaisenaan.

   Virhe jota korjataan: tunnuksen alle oli hitsattu osoiterivi, mika
   loi uuden lockup-variantin ohi brandiohjeiston. Brandi on jo
   suunniteltu ja toimitettu Logopaketissa, joten headerissa kaytetaan
   sen vaakalockupia sellaisenaan. Nain mittasuhteet ja turva-alue
   tulevat ohjeistosta eika niita sommitella uudelleen CSS:lla.
   Osoite kuuluu yhteystietoihin, footeriin ja JSON-LD:hen.
   ============================================================ */
/* view-transition-name kuuluu todelliselle header-logolle, ei kayttamattomalle
   .brand__lockup-luokalle (uusi header-wing korvasi sen). */
.header-wing__brand img { view-transition-name: brand-mark; }
.gate-seam { view-transition-name: page-seam; }
.brand__lockup {
  height: clamp(30px, 3.4vw, 38px);
  width: auto;
  view-transition-name: brand-mark;
}

/* Jarrusarjan asetelma kuuluu Autovaraosat-osastoon, ei maalirivin alle.
   Kuvan pitaa aina kertoa sen osaston aiheesta jonka yhteydessa se on. */
.shelf-art { margin-top: var(--sp-7); border: 1px solid var(--chapter-line); overflow: hidden; }
.shelf-art img { width: 100%; height: auto; }
.shelf-art figcaption {
  padding: 0.8rem 1rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em;
  color: var(--chapter-muted); background: color-mix(in srgb, var(--paper) 40%, transparent);
}

.codeguide__figure {
  margin-top: var(--sp-7);
  border: 1px solid var(--chapter-line);
}
.codeguide__figure img { width: 100%; height: auto; }
.codeguide__figure figcaption {
  padding: 0.8rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--chapter-muted);
  background: color-mix(in srgb, var(--paper) 40%, transparent);
}

/* Maalisumun cinemagraph-elo on tarkoituksella havaittava mutta rauhallinen.
   Kuvasuhde ja picture-elementin tila eivät muutu, joten liike ei aiheuta CLS:ää. */
.codeguide__figure--mist picture {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--ground-deep);
}
.codeguide__figure--mist img {
  display: block;
  transform-origin: 46% 54%;
}
.codeguide__figure--mist picture::after {
  content: "";
  position: absolute;
  inset: -14%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 48% 52%,
    color-mix(in srgb, var(--brass-bright) 46%, transparent) 0%,
    color-mix(in srgb, var(--brass) 20%, transparent) 34%,
    transparent 67%
  );
  mix-blend-mode: screen;
  opacity: 0.38;
}

@media (prefers-reduced-motion: no-preference) {
  .codeguide__figure--mist img {
    animation: paint-mist-drift 13s cubic-bezier(0.37, 0, 0.63, 1) -3s infinite alternate;
    will-change: transform, opacity;
  }
  .codeguide__figure--mist picture::after {
    animation: paint-mist-glow 9.5s cubic-bezier(0.37, 0, 0.63, 1) -1.5s infinite alternate;
    will-change: transform, opacity;
  }
}

@keyframes paint-mist-drift {
  from {
    opacity: 0.91;
    transform: translate3d(-0.8%, 0.35%, 0) scale(1.012);
  }
  to {
    opacity: 1;
    transform: translate3d(1.05%, -0.65%, 0) scale(1.08);
  }
}

@keyframes paint-mist-glow {
  from {
    opacity: 0.28;
    transform: translate3d(-1.8%, 0.8%, 0) scale(0.96);
  }
  to {
    opacity: 0.62;
    transform: translate3d(2.1%, -1.1%, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .codeguide__figure--mist img {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .codeguide__figure--mist picture::after {
    animation: none;
    opacity: 0.38;
    transform: none;
  }
}