/* ============================================================
   Kotkan Autotarvike, sivukohtaiset luvut
   Runko: shell.css · arvot: tokens.css
   ============================================================ */

/* ---------- luvun perusrytmi ---------- */
.chapter { position: relative; isolation: isolate; }
.gate { padding-block: var(--chapter-pad); overflow: hidden; }

.gate__head { margin-bottom: var(--chapter-gap); }
.gate__title {
  font-size: var(--fs-h2);
  word-spacing: 0.06em;
  max-width: 20ch;
  margin-top: 0.6rem;
}
.gate__foot { margin-top: var(--sp-6); }

/* portti: ohut messinkiviiva luvun yläreunassa.
   gate--contact on suljettu pois: siella ::before on kierratetty ruudukoksi (ember-line
   hoitaa messinkiaksentin), joten perusviiva ei saa peria tanne height:1px:aa. */
.gate:not(.gate--contact)::before {
  content: "";
  position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--chapter-accent) 55%, transparent),
    color-mix(in srgb, var(--chapter-accent) 12%, transparent) 38%,
    transparent 72%);
}

/* ---------- linkit ---------- */
.link {
  color: var(--chapter-accent, var(--brass));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover { text-decoration-color: currentColor; }
.link--strong { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: 0.06em; }

/* ---------- painikkeet ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 0.86rem; letter-spacing: 0.06em;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn__label { position: relative; z-index: 1; }
.btn__meta {
  position: relative; z-index: 1;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.62; margin-top: 0.2rem;
}
.btn--wide { align-items: center; width: 100%; }

/* messinkilaatta, lämpöhehku kämmenen alla, ei glow-efekti */
.btn--brass {
  background: linear-gradient(178deg, var(--brass-bright), var(--brass) 46%, var(--brass-deep));
  color: #1b1206;
  box-shadow: inset 0 1px 0 rgba(255, 236, 210, 0.45);
}
.btn--brass::after {
  content: "";
  position: absolute; left: 50%; top: 120%;
  width: 160%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.4);
  background: radial-gradient(circle, rgba(255, 208, 140, 0.85), rgba(255, 150, 40, 0) 62%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn--brass:hover::after,
.btn--brass:focus-visible::after { opacity: 0.55; transform: translate(-50%, -70%) scale(1); }
.btn--brass:hover { transform: translateY(-1px); }

.btn--ghost {
  border-color: color-mix(in srgb, var(--chapter-text, var(--text)) 30%, transparent);
  color: var(--chapter-text, var(--text));
}
.btn--ghost:hover { border-color: var(--chapter-accent, var(--brass)); color: var(--chapter-accent, var(--brass)); }

/* ============================================================
   HERO, Varaosavirta
   Yksi syvä tila: hyllymuuri, osavirta ja etualan jarrulevy.
   Otsikko jää osittain osien alle, mutta ingressi ja toiminnot
   pysyvät aina päällimmäisinä ja täysin käytettävinä.
   ============================================================ */
.hero {
  position: relative;
  min-height: clamp(720px, 94svh, 960px);
  overflow: clip;
  isolation: isolate;
  background: var(--ink);
  color: var(--text);
}

.hero__layer {
  position: absolute;
  max-width: none;
  pointer-events: none;
}

.hero__layer img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__depth {
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__depth img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
}

.hero__tone {
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--ink) 97%, transparent) 0%,
      color-mix(in srgb, var(--ink) 92%, transparent) 30%,
      color-mix(in srgb, var(--ink) 55%, transparent) 58%,
      color-mix(in srgb, var(--ink) 22%, transparent) 78%,
      color-mix(in srgb, var(--ink) 62%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--ink) 78%, transparent) 48%,
      transparent 72%
    );
}

/* Hero-haamutasot (parts / foreground / forge-seam) poistettu 2026-07-23:
   Andy, "hero on sekava". Syvyys tulee nyt yhdesta rauhallisesta syvyyskuvasta,
   vahvistetusta tone-verhosta ja isommasta typografiasta, ei screen-blend-haamuista. */

.hero__content {
  position: relative;
  min-height: inherit;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: end;
  padding:
    clamp(150px, 18vh, 220px)
    clamp(20px, 4vw, 72px)
    clamp(56px, 8vh, 104px);
}

.hero__kicker {
  position: relative;
  z-index: 7;
  grid-column: 1 / 9;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.7em;
  color: var(--brass-bright);
  margin-bottom: clamp(0.9rem, 2vh, 1.6rem);
}

.hero__kicker::before {
  content: "";
  width: clamp(28px, 5vw, 64px);
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.hero__title {
  position: relative;
  z-index: 7;
  grid-column: 1 / 10;
  max-width: none;
  font-size: clamp(3.2rem, 6.6vw, 7.2rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  word-spacing: 0.1em;
  text-wrap: initial;
}
/* Otsikon kolmas rivi "Kotkassa" on heron ainoa värielementti */
.hero__title-line:last-child > span { color: var(--brass-bright); }

.hero__title-line {
  display: block;
  overflow: visible clip;   /* vaaka ei leikkaa, pystyreveal sailyy */
  white-space: nowrap;
}

.hero__title-line > span {
  display: block;
  padding-right: 0.06em;
  transform-origin: 0 100%;
}

.hero__lead {
  position: relative;
  z-index: 7;
  grid-column: 1 / 6;
  margin-top: clamp(1.1rem, 2.6vh, 2rem);
  max-width: 44ch;
  color: var(--text-muted);
}

.hero__hours {
  position: relative;
  z-index: 7;
  grid-column: 1 / 8;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Kilpihaku: suomalaisen rekisterikilven näköinen hakukenttä (Andy 2026-07-23).
   "Sano rekisterinumero" tulee eläväksi. Degradoituu GET-ankkuriksi ilman JS:ää. */
.platesearch {
  display: inline-flex; align-items: stretch;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}
.platesearch__input {
  width: 8.5ch; min-width: 0; min-height: 44px;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink); background: #f4efe6;
  border: 2px solid #1b1712; border-right: 0;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.platesearch__input::placeholder { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.platesearch__input:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.platesearch__btn {
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.88rem;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--brass);
  border: 2px solid #1b1712; cursor: pointer;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.platesearch__btn:hover { background: var(--brass-bright); }

.hero__actions {
  position: relative;
  z-index: 7;
  grid-column: 1 / 8;
  margin-top: clamp(1.5rem, 3.4vh, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

/* components.css omistaa faktarivien visuaalisen rakenteen. Tässä
   asetetaan vain niiden paikka Varaosavirran kerrosjärjestyksessä. */
.hero__facts {
  position: relative;
  z-index: 7;
  grid-column: 1 / -1;
}

.hero__scroll-cue {
  position: relative;
  z-index: 7;
  grid-column: 12;
  justify-self: end;
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__scroll-cue::before {
  content: "";
  width: clamp(32px, 4vw, 58px);
  height: 1px;
  background: color-mix(in srgb, var(--brass) 54%, transparent);
}

@media (max-width: 760px) {
  .hero { min-height: max(820px, 100svh); }

  .hero__depth img { object-position: 66% 50%; }

  .hero__tone {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--ink) 95%, transparent) 0%, color-mix(in srgb, var(--ink) 72%, transparent) 68%, color-mix(in srgb, var(--ink) 48%, transparent) 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--ink) 92%, transparent) 0%, transparent 58%);
  }

  .hero__content {
    grid-template-columns: minmax(0, 1fr);
    padding: 128px 20px 42px;
  }

  .hero__kicker,
  .hero__title,
  .hero__lead,
  .hero__actions,
  .hero__hours,
  .hero__facts,
  .hero__scroll-cue { grid-column: 1; }

  .hero__title {
    max-width: none;
    font-size: clamp(2.5rem, 11vw, 4.2rem);
    line-height: 0.98;
  }

  .hero__lead { max-width: 35ch; }
  .hero__actions { align-items: stretch; }
  .hero__actions > * { min-width: 0; }
  .hero__scroll-cue { display: none; }
}

/* ============================================================
   KAIVERRUS, kotkanpää koodilla, ei kuvaan poltettuna.
   Paperilukujen sokkokohopaino käyttää aitoa vektorimerkkiä.
   ============================================================ */
.etch {
  position: absolute; pointer-events: none;
  -webkit-mask-image: url("../../assets/brand/logo-mark-1color.svg");
          mask-image: url("../../assets/brand/logo-mark-1color.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
}

/* paperilla: sokkokohopaino, huomaa vasta kun silmä osuu */
.etch--emboss {
  right: clamp(-3rem, -2vw, 0rem); top: clamp(2rem, 8vh, 6rem);
  width: clamp(220px, 30vw, 460px); aspect-ratio: 1066 / 810;
  opacity: 0.06;
  background:
    linear-gradient(152deg,
      color-mix(in srgb, var(--ink) 85%, transparent) 0%,
      color-mix(in srgb, var(--ink) 12%, transparent) 46%,
      transparent 62%);
}
@media (max-width: 860px) { .etch--emboss { opacity: 0.04; width: 62vw; } }

/* Uudet kotka-vesileimat (sama .etch-maskimekanismi) */
.etch--hylly {
  right: -4vw; bottom: 4rem;
  width: clamp(260px, 26vw, 420px); aspect-ratio: 1066 / 810;
  background: var(--ink); opacity: 0.05;
}
.etch--yhteys {
  left: -3vw; bottom: 3rem;
  width: clamp(300px, 30vw, 480px); aspect-ratio: 1066 / 810;
  background: color-mix(in srgb, var(--brass) 60%, transparent); opacity: 0.04;
}
@media (max-width: 940px) { .etch--yhteys { display: none; } }

/* ============================================================
   SILLAT, chapter-siirtymien häivytys (Andy 2026-07-23: kontrasti liian iso).
   Tumman ja vaalean kova raja korvataan liu'ulla siltasävyjen kautta.
   Puhdasta staattista CSS:ää: reduced-motion ja no-JS eivät muuta mitään.
   ============================================================ */
.bridge {
  margin-block: -1px;
  pointer-events: none;
  overflow: hidden;
}
.bridge--syttyy {
  height: clamp(128px, 17vh, 196px);
  background:
    radial-gradient(92% 130% at 78% 52%,
      color-mix(in srgb, var(--brass-bright) 24%, transparent) 0%,
      color-mix(in srgb, var(--brass) 10%, transparent) 34%,
      transparent 66%),
    linear-gradient(180deg,
      var(--ground-deep) 0%,
      var(--bridge-dark) 20%,
      var(--bridge-mid) 49%,
      var(--bridge-warm) 76%,
      var(--paper) 100%);
}
.bridge--hamartyy {
  --bridge-from: var(--paper);
  height: clamp(112px, 14vh, 168px);
  background:
    radial-gradient(88% 128% at 26% 44%,
      color-mix(in srgb, var(--brass) 20%, transparent) 0%,
      color-mix(in srgb, var(--brass) 8%, transparent) 36%,
      transparent 68%),
    linear-gradient(180deg,
      var(--bridge-from) 0%,
      var(--bridge-warm) 24%,
      var(--bridge-mid) 52%,
      var(--bridge-dusk) 78%,
      var(--ground-deep) 100%);
}
.bridge--from-linen { --bridge-from: var(--linen); }

/* ============================================================
   OSIOTAUSTAT, lämmin takomo-atmosfääri (Andy 2026-07-23: mittapiirros-ruudukko oli
   sekava, ledger-rivien päällä pelkkää hälyä). Ei viivastoa vaan hienovarainen
   messinki-hehku yläkulmasta + syvyysvarjo alakulmasta: tuo takomotunnelmaa ja
   syvyyttä ilman että kilpailee sisällön kanssa. Kotka-vesileimat (.etch) jäävät.
   .chapter on isolation: isolate, joten z-index -1 jää sisällön taakse.
   ============================================================ */
.chapter--paper::after,
.chapter--linen::after,
.chapter--shelf::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(112% 82% at 100% 0%,
      color-mix(in srgb, var(--brass-bright) 36%, transparent) 0%,
      color-mix(in srgb, var(--brass) 15%, transparent) 38%,
      transparent 68%),
    radial-gradient(94% 64% at 0% 100%,
      color-mix(in srgb, var(--petrol) 16%, transparent) 0%,
      transparent 70%);
  mix-blend-mode: screen;
}

.chapter--paper,
.chapter--linen,
.chapter--shelf {
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb, var(--ground-deep) 42%, transparent),
    inset 0 -44px 70px -52px color-mix(in srgb, var(--ground-deep) 68%, transparent);
}

/* ============================================================
   LUKU 01. TARVE (epäsymmetrinen jako, ei kolmea korttia)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
.split__lead {
  font-size: var(--fs-lead);
  color: var(--chapter-text);
  margin-bottom: var(--sp-5);
}
.split__main p + p { margin-top: var(--sp-4); }
.split__main p { color: var(--chapter-muted); }
.split__lead strong { color: var(--chapter-text); font-weight: 600; }

.split__aside {
  border-left: 2px solid var(--chapter-accent);
  padding-left: clamp(1.1rem, 2.4vw, 2rem);
}
.spec-list { margin-top: var(--sp-4); display: grid; gap: 0.9rem; }
.spec-list li { display: flex; gap: 0.9rem; align-items: baseline; }
.spec-list__mark {
  flex: none; width: 14px; height: 1px; margin-top: 0.72em;
  background: var(--chapter-accent);
}
.spec-list__foot {
  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);
}

@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ============================================================
   LEDGER, rekisterirakenne. Rivit ovat tuoteryhmiä, ei tuotteita.
   ============================================================ */
/* VIRHE JOKA KORJATTIIN: shelf peri vain maan mutta ei mustepalettia, joten
   vaalea teksti jai vaalealle paperille ja koko luku luki haaleana. Paperiluvun
   varit tulevat aina yhtena pakettina. */
.chapter--shelf {
  --chapter-ground: var(--paper-deep);
  --chapter-text: var(--ink);
  --chapter-muted: var(--ink-muted);
  --chapter-faint: var(--ink-faint);
  --chapter-line: var(--sand);
  --chapter-accent: var(--brass-shelf);
  --focus-ring: var(--brass-shelf);
}

.ledger { border-top: 1px solid var(--chapter-line); }
.ledger__row { border-bottom: 1px solid var(--chapter-line); }

.ledger__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 2rem;
  grid-template-areas: "name desc go";
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding: clamp(1.15rem, 2.4vw, 1.9rem) 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.ledger__link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--chapter-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}
.ledger__link::after {
  content: ""; position: absolute; inset: 0 -1rem;
  background: color-mix(in srgb, var(--chapter-accent) 6%, transparent);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
  z-index: -1;
}
.ledger__link:hover::before,
.ledger__link:focus-visible::before { transform: scaleX(1); }
.ledger__link:hover::after,
.ledger__link:focus-visible::after { opacity: 1; }

.ledger__num {
  font-family: var(--font-mono); font-size: var(--fs-index); font-weight: 500;
  color: var(--chapter-accent);
}
.ledger__name {
  grid-area: name;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h3); line-height: 1.15;
  letter-spacing: -0.015em;
}
.ledger__desc { grid-area: desc; color: var(--chapter-muted); font-size: var(--fs-small); }
.ledger__go {
  grid-area: go;
  font-family: var(--font-mono); color: var(--chapter-accent);
  justify-self: end;
  transition: transform var(--dur-mid) var(--ease-out);
}
.ledger__link:hover .ledger__go { transform: translateX(5px); }

@media (max-width: 820px) {
  .ledger__link {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    grid-template-areas:
      "name go"
      "desc desc";
    row-gap: 0.35rem;
  }
}

/* ============================================================
   LUKU 03. TISKI JA JAKELU (lämmin pellava)
   ============================================================ */
.counter {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.counter__figure {
  position: relative;
  border: 1px solid var(--chapter-line);
  box-shadow: var(--shadow-lift);
}
.counter__figure img { width: 100%; height: auto; }
.counter__figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(190deg, transparent 60%, color-mix(in srgb, var(--ink) 14%, transparent));
}
.counter__block + .counter__block { margin-top: var(--sp-6); }
.counter__title {
  font-size: var(--fs-h3); margin-bottom: 0.5rem;
}
.counter__block p { color: var(--chapter-muted); }
.counter__block strong { color: var(--chapter-text); }
.counter__note {
  margin-top: var(--sp-7); padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--chapter-line);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  font-size: var(--fs-small); color: var(--chapter-muted);
}
.counter__note .label { display: block; margin-bottom: 0.35rem; }

@media (max-width: 900px) { .counter { grid-template-columns: 1fr; } }

/* ============================================================
   LUKU 04. KENELLE
   Epäsymmetrinen jako, EI kolmea samankokoista korttia (se on
   selvin AI-templaattijälki). Harrastaja on marginaalihuomio.
   ============================================================ */
.audience {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  grid-template-areas: "yksityinen yritys" "marginaali yritys";
  gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.audience__item--private { grid-area: yksityinen; }
.audience__item--b2b { grid-area: yritys; }
.audience__margin { grid-area: marginaali; }

.audience__item h3 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 600;
  margin: 0.5rem 0 0.75rem;
}
.audience__item p { color: var(--chapter-muted); }

/* yritysasiakas saa oman pintansa: se on liiketoiminnallisesti painavin lohko */
.audience__item--b2b {
  background: color-mix(in srgb, var(--linen) 62%, var(--chapter-ground));
  border-left: 2px solid var(--chapter-accent);
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
}
.audience__cta { margin-top: var(--sp-4); }

.audience__margin {
  border-top: 1px solid var(--chapter-line);
  padding-top: var(--sp-4);
  font-size: var(--fs-small);
}
.audience__margin p { color: var(--chapter-faint); }
.audience__margin .label { margin-bottom: 0.4rem; }

@media (max-width: 860px) {
  .audience {
    grid-template-columns: 1fr;
    grid-template-areas: "yksityinen" "yritys" "marginaali";
  }
}

/* ============================================================
   LUKU 05. YHTEYS (takomo palaa; ainoa elävä hiillos)
   ============================================================ */
.gate--contact { position: relative; }
.gate--contact::after {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: -6%; transform: translateX(-50%);
  width: min(1100px, 120%); height: 46%;
  background: radial-gradient(ellipse at center top,
    rgba(196, 134, 60, 0.14), rgba(196, 134, 60, 0.035) 46%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}
/* Takomosauma (liekkikuva) poistettu 2026-07-23: Andy, "liekkiefekti ei sovi".
   Yhteysluvun hienovarainen syttyminen jaa .ember-line-messinkiviivaan + vaimennettuun
   ::after-hehkuun, ei enaa kuvatasoa. */

.ember-line {
  position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
  width: min(560px, 74%); height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--brass-bright) 42%, var(--brass) 58%, transparent);
  opacity: 0.55;
  pointer-events: none;
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .contact { grid-template-columns: 1fr; } }

/* ---------- lomake ---------- */
.ask-form { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }

.form-field { display: grid; gap: 0.45rem; }
.form-field label,
.form-field legend {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--text-faint);
}
.form-field input[type="text"],
.form-field textarea {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-control);
  color: var(--text);
  font-family: var(--font-body); font-size: 1.02rem;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form-field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-faint); opacity: 0.78; }
.form-field input:focus,
.form-field textarea:focus { outline: none; border-bottom-color: var(--brass); }
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 4px; }
.form-field [aria-invalid="true"] { border-bottom-color: #c2603f; }

.form-hint, .form-error {
  font-size: 0.9rem; color: var(--text-faint);
}
.form-error { color: #dd8a68; }

.form-field--choice { border: 0; padding: 0; margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-control);
  font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em;
  color: var(--text-muted);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.choice input:checked + span {
  border-color: var(--brass); color: var(--brass-bright);
  background: color-mix(in srgb, var(--brass) 12%, transparent);
}
.choice input:focus-visible + span { outline: 2px solid var(--brass-bright); outline-offset: 3px; }

.form-note { font-size: 0.9rem; color: var(--text-faint); line-height: 1.6; }
.form-note strong { color: var(--text-muted); }

.send-fallback {
  margin-top: var(--sp-6); padding: var(--sp-5);
  border: 1px solid var(--line); background: var(--ground-raise);
}
.send-fallback h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.send-fallback p { font-size: var(--fs-small); color: var(--text-muted); }
.fallback-msg {
  width: 100%; margin-top: var(--sp-4); padding: 0.85rem;
  background: var(--ground-deep); border: 1px solid var(--line-control); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.6; resize: vertical;
}
.fallback-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--sp-4); }
.plain-mail { font-family: var(--font-mono); color: var(--brass-bright); }
.copy-status { margin-top: 0.6rem; font-family: var(--font-mono); font-size: 0.88rem; color: var(--brass-bright); }

/* ---------- yhteysaside ---------- */
.contact__aside { border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 2.6vw, 2.4rem); }
.contact__big { margin: 0.4rem 0 0.2rem; }
.contact__big a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  letter-spacing: -0.02em; color: var(--text);
  transition: color var(--dur-fast) var(--ease-out);
}
.contact__big a:hover { color: var(--brass-bright); }
.contact__mail, .contact__wa { font-size: var(--fs-small); }
.contact__hours {
  font-family: var(--font-mono); font-size: 0.88rem;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin: 0.1rem 0 0.35rem;
}
.contact__rule { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0 var(--sp-5); }
.contact__address { font-style: normal; color: var(--text-muted); margin: 0.5rem 0 0.6rem; }

.promise { display: grid; gap: var(--sp-4); }
.promise li { display: grid; gap: 0.2rem; }
.promise strong {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text);
}
.promise span { font-size: var(--fs-small); color: var(--text-faint); }

@media (max-width: 940px) {
  .contact__aside { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--sp-6); }
}

/* ============================================================
   REVEAL, main.js lisää .is-in. CSS piilottaa VAIN jos JS on läsnä
   (html.js-ready), jottei sisältö katoa ilman JS:ää.
   ============================================================ */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ============================================================
   Portin syttyva messinkiviiva (CSS scroll-driven, ei JS:aa).
   Chapter Gates -DNA vaatii etta portti TAPAHTUU, ei vain ole.
   Sama messinki kuin sivunvaihdon saumassa: sivun sisainen ja
   sivujen valinen liike puhuvat samaa kielta.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gate:not(.gate--contact)::before {
      transform-origin: left;
      animation: gate-line linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    @keyframes gate-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}