/* ============================================================================
   WAVERIDERS — VARIANTTI A "HORISONTTI"
   Toteutus DESIGN.md:n mukaan. Kaikki väriarvot on kopioitu sanatarkasti
   osasta C. Videopeitteen arvot ovat osasta E, mitattuja, ei silmällä säädettyjä.
   Yksikään väri ei ole tässä tiedostossa keksitty.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONTIT — itse isännöityinä, ei ulkoista pyyntöä ajonaikana.
   Kaksi lähdepolkua: sama fontti on projektissa kahdessa kansiossa
   (fonts/ ja assets/fonts/), joten toinen toimii varana jos toinen puuttuu.
   Cabinet Grotesk = display (200 ja 800, TASAN 2 roolia).
   Switzer = kaikki muu. Kumpikaan ei ole kielletyllä listalla.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinetgrotesk-200.woff2') format('woff2'),
       url('assets/fonts/CabinetGrotesk-Extralight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinetgrotesk-800.woff2') format('woff2'),
       url('assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2'),
       url('assets/fonts/Switzer-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2'),
       url('assets/fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-600.woff2') format('woff2'),
       url('assets/fonts/Switzer-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------------------
   2. TOKENIT — DESIGN.md osa C, kopioitu sanatarkasti
   ------------------------------------------------------------------------- */
:root {
  /* C.1 vaalea teema "Utu" — OLETUS */
  --bg:           #F7F6F2;
  --surface:      #F0EEE8;
  --surface-2:    #DFE5E7;
  --ink:          #172227;
  --ink-2:        #506168;
  --line:         #CBD4D8;
  --line-strong:  #718C98;
  --accent:       #046F77;
  --accent-soft:  #DBEEF0;
  --on-accent:    #F9F8F6;

  /* Footeri on tumma saareke myös vaaleassa teemassa (DESIGN.md osa G, osio 12).
     Arvot ovat samoja tokeneita eri roolissa — mitään uutta väriä ei ole.
     Aksentiksi tulee tumman teeman aksentti, koska vaalean teeman #046F77
     antaa #172227-pohjalla vain 2,74:1 (mitattu). #47D7E1 antaa 9,33:1. */
  --footer-bg:     #172227;   /* = --ink vaalea      */
  --footer-ink:    #F7F6F2;   /* = --bg    vaalea    */
  --footer-ink-2:  #A0ACB1;   /* = --ink-2 tumma     */
  --footer-line:   #2B373B;   /* = --line  tumma     */
  --footer-accent: #47D7E1;   /* = --accent tumma    */

  /* C.5 tilaskaala — mitään näiden ulkopuolelta ei käytetä */
  --s1:   4px;  --s2:   8px;  --s3:  12px;  --s4:  16px;  --s5:  24px;
  --s6:  32px;  --s7:  48px;  --s8:  64px;  --s9:  96px;  --s10:128px;

  /* C.6 pyöristys — kolme arvoa, roolin mukaan */
  --r-flat:  0;      /* kaikki rakenteelliset pinnat */
  --r-field: 4px;    /* kontrollit (valikkopainike). Lomaketta ei ole. */
  --r-pill:  999px;  /* VAIN toiminta: Varaa-napit ja toimipistekytkin */

  /* C.8 motion */
  --ulos:   cubic-bezier(0.23, 1, 0.32, 1);
  --liuku:  cubic-bezier(0.32, 0.72, 0, 1);

  /* Sisältöleveys */
  --leveys: 1200px;

  color-scheme: light dark;
}

/* C.2 tumma teema "Syvä vesi" — sama sävy 184, eri kirkkaus */
@media (prefers-color-scheme: dark) {
  :root:not([data-teema="vaalea"]) {
    --bg:           #0B1114;
    --surface:      #141C1F;
    --surface-2:    #1D272A;
    --ink:          #F0EEEA;
    --ink-2:        #A0ACB1;
    --line:         #2B373B;
    --line-strong:  #5D7279;
    --accent:       #47D7E1;
    --accent-soft:  #103E41;
    --on-accent:    #0A161A;

    --footer-bg:     #141C1F;
    --footer-ink:    #F0EEEA;
    --footer-ink-2:  #A0ACB1;
    --footer-line:   #2B373B;
    --footer-accent: #47D7E1;
  }
}
:root[data-teema="tumma"] {
  --bg:           #0B1114;
  --surface:      #141C1F;
  --surface-2:    #1D272A;
  --ink:          #F0EEEA;
  --ink-2:        #A0ACB1;
  --line:         #2B373B;
  --line-strong:  #5D7279;
  --accent:       #47D7E1;
  --accent-soft:  #103E41;
  --on-accent:    #0A161A;

  --footer-bg:     #141C1F;
  --footer-ink:    #F0EEEA;
  --footer-ink-2:  #A0ACB1;
  --footer-line:   #2B373B;
  --footer-accent: #47D7E1;
}

/* ---------------------------------------------------------------------------
   3. POHJA
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;         /* MOLEMMAT aina — 17.8. livevirhe */
  display: block;
}

/* C.4 typografia — kokoskaala suhteella 1,26, ei tasavälein */
h1, h2, h3 { margin: 0; text-wrap: balance; }
p, ol, ul, dl { margin: 0; }

h1, .h1 {
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h2, .h2 {
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(33px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
h3 { font-size: 21px; font-weight: 600; line-height: 1.3; }

.ingressi { font-size: 21px; line-height: 1.5; text-wrap: pretty; max-width: 34rem; }
p { max-width: 34rem; }              /* rivileveys 62–68 merkkiä */

.silmakulma {
  font-size: 13px; font-weight: 500; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.08em;
  max-width: none;
}

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

.ohita {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s3) var(--s5); border-radius: var(--r-pill);
  text-decoration: none; font-weight: 500;
  transition: transform 160ms var(--ulos);
}
.ohita:focus { top: var(--s4); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.rajaus {
  max-width: var(--leveys);
  margin-inline: auto;
  padding-inline: var(--s6);
}

/* ---------------------------------------------------------------------------
   4. SIGNATURE: VESIRAJA-DATUM
   Ei koriste. Viiva on sivun tasausperusta ja se kantaa AINA osion nimen
   ja yhden konkreettisen luvun. Jos viiva poistetaan, tieto katoaa.
   ------------------------------------------------------------------------- */
.datum {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4);
  max-width: none;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-bottom: var(--s7);
  color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.datum span:last-child { text-align: right; }

/* ---------------------------------------------------------------------------
   5. NAPIT JA LINKIT
   Pillerimuoto tarkoittaa "tästä tapahtuu jotain". Muualla ei ole pillereitä.
   ------------------------------------------------------------------------- */
.nappi {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-weight: 500; font-size: 17px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform 120ms var(--ulos),
              background-color 140ms ease-out,
              border-color 140ms ease-out,
              color 140ms ease-out;
}
.nappi:active { transform: scale(0.98); }

.nappi--ensi { background: var(--accent); color: var(--on-accent); }
.nappi--ensi:hover { background: var(--ink); color: var(--bg); }

.nappi--haamu { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.nappi--haamu:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.nappi--reuna { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.nappi--reuna:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* white-space: nowrap 15.9.2026 — Markin linkki_teksti-kirjoitus (sivukentat.js
   asetaLinkki) kirjoittaa napin textContentin ilman ruudunlukija-spania, joten
   näkyvä teksti on aina "Varaa". Nowrap on silti varmistus, ei korjaus: jos
   joku joskus kirjoittaa napin tekstin pidemmäksi, se ei saa rikkoa rivikorkeutta. */
.nappi--pieni { padding: var(--s2) var(--s5); font-size: 15px; white-space: nowrap; }

.linkki {
  display: inline-block; position: relative;
  color: var(--accent); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.linkki::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 160ms var(--ulos);
  will-change: transform;
}
.linkki:hover::after, .linkki:focus-visible::after { transform: scaleX(1); }
.linkki--ulkoinen::before { content: '↗ '; }

/* ---------------------------------------------------------------------------
   6. VIDEOPEITE — DESIGN.md osa E, MITATTU. Älä säädä silmällä.
   L1 sävytys:      #0B1B1F alfa 0,32 koko videon päällä, aina
   L2 ankkuriliuku: vain tekstin puolella
   Takuulattia (kuvitteellinen täysin valkoinen ruutu, teksti #F0EEEA):
       työpöytä 4,69:1 · mobiili 4,91:1  — todennettu omalla laskennalla
   ------------------------------------------------------------------------- */
.peite__savy,
.peite__ankkuri,
.peite__scrim { position: absolute; inset: 0; pointer-events: none; }

.peite__savy { background: #0B1B1F52; }          /* alfa 0,32 */

.peite__ankkuri {
  background: linear-gradient(90deg,
    #0B1B1FA8 0%,     /* alfa 0,66 */
    #0B1B1F7A 46%,    /* alfa 0,48 */
    #0B1B1F00 74%);
}

/* Navipalkin scrim. EI E:n luku vaan E:n MENETELMÄLLÄ laskettu lisäys:
   navi on videon päällä x 50–95 %:n kohdalla, jossa L2 on jo nolla, joten
   pelkkä L1 antaisi valkoista ruutua vasten 1,77:1. Yhdistetty alfa 0,65
   (= L1 0,32 + scrim 0,49) antaa tekstille #F0EEEA takuulattian 4,80:1 ja
   Varaa-napin täytölle #6EE5ED reunakontrastin 3,73:1. Vakio 0–40 %
   (= 0–67 px) jotta koko 64 px:n navi on vahvassa vyöhykkeessä. */
.peite__scrim {
  inset: 0 0 auto 0; height: 168px;
  background: linear-gradient(180deg,
    #0B1B1F7D 0%,     /* alfa 0,49 */
    #0B1B1F7D 40%,
    #0B1B1F00 100%);
}

/* Videon/kuvan päällä on TASAN YKSI tekstiväri. Ei himmennettyä toissijaista:
   #E3E6E8 antaisi takuulattiaksi vain 3,96:1 (DESIGN.md E.3). */
.hero__sisalto,
.kaista__teksti { color: #F0EEEA; }

.hero__sisalto .nappi--ensi,
.kaista__teksti .nappi--ensi { background: #6EE5ED; color: #0A161A; }
.hero__sisalto .nappi--ensi:hover,
.kaista__teksti .nappi--ensi:hover { background: #F0EEEA; color: #0A161A; }

.hero__sisalto .nappi--haamu,
.kaista__teksti .nappi--haamu { color: #F0EEEA; border-color: #F0EEEA; }
.hero__sisalto .nappi--haamu:hover,
.kaista__teksti .nappi--haamu:hover { background: #F0EEEA; color: #0A161A; }

.hero__sisalto :focus-visible,
.kaista__teksti :focus-visible { outline-color: #6EE5ED; }

/* ---------------------------------------------------------------------------
   MARK HEROSSA (Simon pyyntö 26.8.2026, Seppo)

   Kolmas reitti "Varaa aika" ja "Soita" -nappien rinnalle: kysy suoraan.
   Kenttä on pilleri eikä --r-field-kontrolli, koska se on herossa TOIMINTO
   kahden pillerinapin vieressä; neliömäinen kenttä olisi rikkonut rivin.
   CSS:n kommentti "Lomaketta ei ole" (rivi 78) ei enää pidä paikkaansa,
   ja tämä on se muutos.

   Yksi korostus säilyy: #6EE5ED, sama jota hero jo käyttää. Ei toista väriä.
   Ei backdrop-filteriä (CLAUDE.md), joten pinta on läpikuultava kiinteä sävy.
   ------------------------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.mark { margin-top: var(--s6); max-width: 34rem; }

.mark__lomake {
  display: flex; align-items: center; gap: var(--s2);
  padding: 6px 6px 6px var(--s5);
  background: #0B1B1FA8;
  border: 1px solid #F0EEEA59;
  border-radius: var(--r-pill);
  transition: border-color 200ms var(--liuku, ease);
}
.mark__lomake:focus-within { border-color: #6EE5ED; }
.mark__kentta {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: #F0EEEA; font: inherit; font-size: 16px; line-height: 1.4;
  padding-block: var(--s3);
}
.mark__kentta::placeholder { color: #F0EEEAA8; }
.mark__laheta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;            /* kosketuksen alaraja */
  background: #6EE5ED; color: #0A161A;
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  transition: transform 160ms var(--ulos, ease), background-color 160ms ease;
}
.mark__laheta:hover { background: #F0EEEA; transform: translateY(-1px); }
.mark__lomake[aria-busy="true"] .mark__laheta { opacity: .5; pointer-events: none; }

.mark__tunnus {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-top: var(--s3);
  color: #F0EEEAC4; font-size: 13px; line-height: 1.45;
}
/* Merkki kantaa merkityksen: se on Markin läsnäolon indikaattori, ei koriste. */
.mark__merkki {
  flex: 0 0 auto; margin-top: 5px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: #6EE5ED;
}

/* Ei kuollutta nappia: jos palvelin ei tunne siteKeytä, kenttä piilotetaan
   ja tilalle tulee oikea reitti. Ks. mark.js tarkistaYhteys(). */
.mark__eiyhteytta { display: none; margin-top: var(--s3); font-size: 14px; color: #F0EEEAC4; }
.mark[data-mark-tila="ei-yhteytta"] .mark__lomake,
.mark[data-mark-tila="ei-yhteytta"] .mark__tunnus { display: none; }
.mark[data-mark-tila="ei-yhteytta"] .mark__eiyhteytta { display: block; }

/* Simo 15.9.2026: paneeli on nyt HTML:ssä ENNEN lomaketta (keskustelu
   aukeaa ylospain), joten valitila on lomakkeen YLAPUOLELLA eika
   alapuolella -- margin-top vaihtui margin-bottomiksi samalla mitalla. */
.mark__paneeli {
  margin-bottom: var(--s4);
  background: #0B1B1FD9;
  border: 1px solid #F0EEEA33;
  border-radius: var(--r-field);
  overflow: hidden;
}
.mark__ylapalkki {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  border-bottom: 1px solid #F0EEEA26;
}
.mark__otsikko {
  font-size: 12px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #F0EEEAC4;
}
.mark__sulje {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent; border: 0; color: #F0EEEA; cursor: pointer;
  border-radius: var(--r-field);
}
.mark__sulje:hover { background: #F0EEEA1F; }

/* KIINTEA korkeus (ei max-height), Simo 15.9.2026: "kentta ei saa liikkua
   viestin lahetyksen aikana". max-height olisi antanut laatikon kasvaa
   viesti viestilta, jolloin lomake sen alla olisi tyontynyt alaspain joka
   vastauksella (odotuspisteet -> vastaus -> seuraava kysymys). Kiintea
   korkeus varaa tilan heti kun paneeli avautuu, ja sen jalkeen vain
   sisalto vierii laatikon SISALLA -- lomake pysyy paikallaan. */
.mark__virta {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  height: 15rem; overflow-y: auto; overscroll-behavior: contain;
  font-size: 15px; line-height: 1.55;
}
.mark-viesti p { margin: 0; }
.mark-viesti--kavija {
  align-self: flex-end; max-width: 88%;
  background: #6EE5ED; color: #0A161A;
  padding: var(--s3) var(--s4); border-radius: var(--r-field);
}
.mark-viesti--mark { align-self: flex-start; max-width: 94%; color: #F0EEEA; }
.mark-viesti--odottaa p { color: #F0EEEAA8; }
.mark-viesti--virhe p { color: #F0EEEA; }

.mark__pikat {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  padding: 0 var(--s5) var(--s5);
}
.mark__pikat button {
  background: transparent; color: #F0EEEAC4;
  border: 1px solid #F0EEEA3D; border-radius: var(--r-pill);
  padding: var(--s2) var(--s4);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.mark__pikat button:hover { color: #F0EEEA; border-color: #F0EEEA; }

/* ---------------------------------------------------------------------------
   7. NAVI
   ------------------------------------------------------------------------- */
/* Navi on kiinteä koko ajan. Hero alkaa sen alta, koska hero on 100svh:n
   videopinta johon navin kuuluukin istua. Ankkurilinkkien laskeutuminen
   korjataan scroll-margin-topilla. */
.navi {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
/* Läpinäkyvä videon päällä, jähmettyy vierityksessä. C.7: ei varjoa,
   vain hiusviiva. */
.navi--videolla {
  background: transparent;
  border-bottom-color: transparent;
}
/* Kolmas tila, VAIN mobiilissa (script.js ei lisää tätä luokkaa työpöydällä,
   koska siellä videokaista on koko hero ja rajat osuvat yhteen).
   Navi on heron tumman tekstipinnan päällä: läpinäkyvyys ei ole enää
   perusteltua, koska videota ei ole alla, ja se törmäisi hero-tekstiin.
   Pinta on heron oma #0B1B1F, ei --bg, jotta navi ei ole vaalea laatta
   tumman heron päällä. Ei uutta väriä. */
.navi--herolla {
  background: #0B1B1F;
  border-bottom-color: transparent;
}
section[id] { scroll-margin-top: 80px; }
.navi--videolla .navi__rivi > *,
.navi--herolla .navi__rivi > * { color: #F0EEEA; }

.navi__rivi {
  max-width: var(--leveys); margin-inline: auto;
  padding: var(--s3) var(--s6);
  min-height: 64px;
  display: flex; align-items: center; gap: var(--s6);
}

.merkki {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: inherit; text-decoration: none; flex: 0 0 auto;
}
.merkki__sana {
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 800; font-size: 19px; line-height: 1;
  letter-spacing: -0.015em; text-transform: uppercase;
}
/* Pantteri: irrotettu logo-pantteri-nelio.jpg:stä, yksivärisenä maskina.
   Silmä on negatiivista tilaa, ei kolmas väri. Datan lähde ja johtaminen
   tämän tiedoston lopussa. */
.merkki__pantteri {
  display: block; width: 34px; height: 35px; flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pantteri) center / contain no-repeat;
          mask: var(--pantteri) center / contain no-repeat;
}
.merkki__pantteri--iso { width: 96px; height: 100px; }

.navi__linkit { display: flex; gap: var(--s5); margin-right: auto; }
.navi__linkit a {
  color: inherit; text-decoration: none;
  font-size: 15px; font-weight: 500;
  position: relative; padding-block: var(--s1);
}
.navi__linkit a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 160ms var(--ulos);
}
.navi__linkit a:hover::after, .navi__linkit a:focus-visible::after { transform: scaleX(1); }

.navi__toiminnot { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; }
.navi__puhelin {
  color: inherit; text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  white-space: nowrap;
}
.navi--videolla .nappi--ensi,
.navi--herolla .nappi--ensi { background: #6EE5ED; color: #0A161A; }
.navi--videolla .nappi--ensi:hover,
.navi--herolla .nappi--ensi:hover { background: #F0EEEA; color: #0A161A; }
.navi--videolla :focus-visible,
.navi--herolla :focus-visible { outline-color: #6EE5ED; }

.hampurilainen {
  display: none;
  width: 40px; height: 40px; padding: 0;
  /* Kontrollin pyöristys, EI pilleri: pilleri on varattu Varaa-napeille ja
     toimipistekytkimelle. Valikkopainike on kontrolli, ei sivun toiminta. */
  background: transparent; border: 1px solid currentColor; border-radius: var(--r-field);
  color: inherit; cursor: pointer;
  align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.hampurilainen__viiva {
  display: block; width: 16px; height: 1px; background: currentColor;
  transition: transform 200ms var(--liuku);
}
.hampurilainen[aria-expanded="true"] .hampurilainen__viiva:first-child { transform: translateY(3px) rotate(45deg); }
.hampurilainen[aria-expanded="true"] .hampurilainen__viiva:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   8. HERO — video täysleveänä, 100svh
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--s9);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: #0B1B1F; }

.hero__poster {
  position: absolute; inset: 0;
  background: url('assets/video/hero-poster.jpg') center / cover no-repeat;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.hero__video.on-valmis { opacity: 1; }

/* Tekstilaatikko: x 5–46 % (DESIGN.md E.2). 40rem katkaisee rivileveyden
   leveillä ruuduilla niin ettei laatikko koskaan ylitä 46 %:a. */
.hero__sisalto {
  position: relative;
  margin-left: 5vw;
  width: min(41vw, 40rem);
  display: flex; flex-direction: column; align-items: flex-start;
}

.hero__otsikko { margin-top: var(--s3); }

.hero__hinnat {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  font-size: 17px; max-width: none;
}
.hero__hinnat b { font-weight: 600; }
/* Erotinpiste EI ole himmennetty. DESIGN.md päätös 15: videolla on tasan yksi
   tekstiväri, ja hierarkia tehdään koolla ja painolla, ei läpinäkyvyydellä.
   Himmennetty #E3E6E8-tason sävy antaisi takuulattiaksi vain 3,96:1. */
.hero__hinnat-jako { color: inherit; }

.hero__ingressi { margin-top: var(--s3); font-size: 17px; }

.hero__toiminnot {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s3);
}
/* Mitattu rajoite (DESIGN.md E.2 + päätös 16): hero-CTA:n täytön on oltava
   x ≤ 30 %. Täytetty nappi on rivin ensimmäinen ja ~190 px leveä, joten
   sen oikea reuna on 5 vw + 190 px = 18–28 % kaikilla työpöytäleveyksillä.
   Haamunappi kietoutuu omalle rivilleen kun laatikko käy ahtaaksi, joten
   kumpikaan ei ylitä 46 %:a. */

/* ---------------------------------------------------------------------------
   9. FAKTARIVI — tiivis, 88 px
   ------------------------------------------------------------------------- */
.faktat { background: var(--surface); }
.faktat__rivi {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7);
  padding-block: var(--s5);
  font-size: 15px;
}
.faktat__rivi p { max-width: none; }
.faktat__nimi {
  display: inline-block; margin-right: var(--s2);
  color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
   10. OSIOT — rytmi ei ole tasapaksu
   ------------------------------------------------------------------------- */
.osio { padding-block: var(--s9); }
.osio--pinta { background: var(--surface); padding-block: var(--s10); }
.osio__otsikko { margin-bottom: var(--s7); max-width: 20ch; }

/* --- 10a. Kalusto: kolme ERI KOKOISTA lohkoa, ei ruudukkoa --------------- */
.kalusto__jetti {
  display: grid; grid-template-columns: 46fr 54fr; gap: var(--s7);
  align-items: center;
  margin-bottom: var(--s8);
}
.kalusto__teksti h2 { margin-bottom: var(--s4); }
.kalusto__teksti .ingressi { margin-bottom: var(--s4); }
.korostus { color: var(--accent); font-weight: 600; margin-bottom: var(--s5); }
.kalusto__kuva { margin: 0; }
/* RAJAUS KORJATTU 26.8.2026 (Simo: "Vesijetti ei ole keskellä vaan reunassa
   ja melkein rajattu ulos").
   Mitattu lähteestä jetti-4.jpg (1280×720) pikselitasolla (tumma runko,
   valkoinen kori tai turkoosi, rivit 250–545): jetti on x 549–1170,
   keskipiste x 860 = 67,1 % leveydestä. Lähteen
   vasen puolisko on tyhjää vettä — se oli DESIGN.md C.9:ssä varattu tekstille,
   mutta rakennetussa versiossa teksti on OMASSA sarakkeessaan kuvan vieressä,
   joten tyhjä vesi jäi kuvan sisään ja työnsi jetin oikeaan reunaan.
   Korjaus: tyhjä vasen laita rajataan pois (object-position 100 %) ja
   laatikon kuvasuhde on 7:6.

   Miksi juuri 7:6 eikä säädetty silmällä: object-fit cover näyttää tästä
   lähteestä aina koko korkeuden, joten näkyvän ikkunan leveys lähteessä on
   tasan 720 × kuvasuhde. Kun ikkunan oikea reuna on lähteen oikea reuna,
   ikkunan keskipiste on 1280 − 360A. Jetin keskipiste 860 ratkaisee
   A = 1,167 → 7:6. Mitattu tulos: ikkuna = lähteen x 440–1280, jetti
   ikkunassa 13,0–86,9 %, keskipiste 50,0 %. Marginaali on keulan puolella
   13,0 % ja perän puolella 13,1 % eli symmetrinen.
   Sivutuotteena jetti on 14 % isompi (skaala 0,613 → 0,699). */
.kalusto__kuva img { width: 100%; object-fit: cover; aspect-ratio: 7 / 6; object-position: 100% center; }

/* HIUSVIIVAN KURI (DESIGN.md D, itsekritiikki "broadsheet-hiusviiva"):
   viiva esiintyy sivulla TASAN kahdessa roolissa —
   (1) osion vesiraja-datum, (2) rivijako niissä neljässä listassa jotka ovat
   oikeasti rivilistoja: hinnasto 13, varausehdot 7, varausvaiheet 3,
   yhteystiedot 2. Lukupareilla, maksutavoilla, UKK:lla ja faktarivillä EI
   ole viivaa: ne erotetaan tilalla ja pikkuversaalilla. */
.luvut { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); margin-bottom: var(--s5); }
.luvut dt {
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.luvut dd { margin: var(--s1) 0 0; font-size: 17px; font-weight: 500; }
.luvut--pysty { flex-direction: column; gap: var(--s5); }
.luvut--pysty > div { width: 100%; }

.hinta-vihje {
  font-variant-numeric: tabular-nums;
  color: var(--ink-2); font-size: 15px; margin-bottom: var(--s5);
}

/* Paneelien väli on 48 px ja niiden sisäpadding 48 px: sisempi väli ei saa
   ylittää ulompaa (CRAFT § Spacing). */
.kalusto__loput { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s7); }
.paneeli {
  background: var(--surface-2);
  border-radius: var(--r-flat);
  /* Padding on siirretty .paneeli__tekstiin: kuva on paneelin RAKENNE ja
     yltää sen reunoihin, joten paneeli itse ei saa olla pehmustettu. */
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.paneeli__teksti { padding: var(--s7); display: flex; flex-direction: column; }
.paneeli h2 { margin-bottom: var(--s4); }
.paneeli .ingressi { font-size: 17px; margin-bottom: var(--s6); }
.paneeli__luvut { display: flex; flex-wrap: wrap; gap: var(--s7); margin-bottom: var(--s6); }
.iso-luku {
  display: block;
  font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.iso-luku__nimi {
  display: block; margin-top: var(--s2);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.paneeli--sup .ingressi { max-width: 32rem; }
/* Luvut vasemmalle, hinta rivin oikeaan päähän: teksti käyttää paneelin koko
   leveyden nyt kun kuva ei enää ole sen vieressä sarakkeena. */
.paneeli__rivi {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s5) var(--s7);
}
.paneeli__rivi .paneeli__luvut,
.paneeli__rivi .hinta-vihje { margin-bottom: 0; }

/* --- Kuvat ovat paneelin rakennetta, eivät sen päälle liimattuja ---------
   Sommittelu uusittu 26.8. (Web Design), Simon tuomio "hassusti rajattuja ja
   päälle läntättyjä".

   Kolme sääntöä joista tämä koostuu:
   1) Kuva yltää paneelin kolmeen reunaan. Ei marginaalia, ei kelluvaa
      laatikkoa. Siksi paneelin padding on tekstilohkossa, ei paneelissa.
   2) Kuva määrää paneelin korkeuden (flex-basis kuvasuhteesta) JA imee
      ruudukon venymän itseensä (flex-grow: 1). Näin kahden eri korkuisen
      paneelin erotus ei jää tyhjäksi kaistaleeksi vaan menee kuvapinnaksi.
      Tämä on vastaus kysymykseen "mihin tyhjä tila kuuluu".
   3) Kuvan suunta seuraa lähteen sommittelua: vaakalähde alalaitaan
      leveänä, pystylähde ylälaitaan täyteen korkeuteen. Kumpaakaan ei
      rajata vastoin omaa muotoaan.
   Ei varjoja, ei pyöristystä: DESIGN.md C.6 ja C.7. */
.paneeli__kuva {
  margin: 0;
  position: relative;
  flex: 1 0 auto;
  min-height: 0;
  background: var(--surface-2);
}
.paneeli__kuva img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--r-flat);
}

/* SUP: vaakalähde 1200×892. Laituri johtaa kuvan alareunasta sisään, joten
   kuva on paneelin pohja ja rajataan leveäksi. object-position 50 % 74 %
   pitää laiturin ja laudan kokonaan mukana ja pudottaa taivasta ylhäältä
   (mitattu: lauta alkaa lähteen korkeudesta y ≈ 56 %). */
.paneeli__kuva--pohja { aspect-ratio: 16 / 9; }
.paneeli__kuva--pohja img { object-position: 50% 74%; }

/* Flyboard: pystylähde 900×1122. Suihkut kulkevat ylhäältä alas, joten kuva
   on paneelin katto koko leveydeltä. 4:5 näyttää lähteen kokonaan. */
.paneeli__kuva--pysty { aspect-ratio: 4 / 5; }
/* Cabinet Groteskin paino 200 esiintyy sivulla TASAN KERRAN. Tämä on se
   kerta: yksi suuri hintanumero jossa ei ole mitään tasattavaa.
   Numerotaulukot ladotaan Switzerillä (mitatusti tasalevyiset numerot). */
.iso-hinta {
  margin-top: auto;
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 200;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.9; letter-spacing: -0.02em;
}
.iso-hinta__nimi {
  margin-top: var(--s3);
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* --- 10b. Kuvakaistat — sama mitattu peite kuin herossa ------------------ */
/* TÄYSLEVEÄ 26.8.2026. Simon päätös sanatarkasti: "Vesillä ja tyky päivät
   kohdissa taas kuvien reunoihin jää palkit eikä kuva ole rajautunut siten
   että veisi koko tilan, tämä pitää myös korjata."
   Kaistan kuvalevy oli enintään 1280 px, koska DESIGN.md C.9 kielsi stillien
   suurentamisen. Sääntö kirjoitettiin kun kaistoissa oli videon 1280×720
   -stillejä. Nyt kaistoissa ovat oikeat valokuvat, ja Simo kumoaa säännön
   NÄIDEN KAHDEN KAISTAN osalta: kuvan pitää viedä koko tila. DESIGN.md C.9
   on päivitetty vastaavasti. 1907 px:n ruudulla levyn ulkopuolelle jäi
   306 px vasemmalla ja 321 px oikealla — juuri ne palkit jotka Simo näki.

   Suurennus mitattuna: lähteet vaihdettiin Leonardon alkuperäisiin
   1376×768 (olivat 1280×714, eli sama kuva pienennettynä), joten skaala on
   1440:ssä 1,05× · 1907:ssä 1,39× · 2560:ssä 1,86×. Kohde on pehmeä
   kultaisen tunnin valokuva 0,32-alfan sävypeitteen alla, ei tekstiä eikä
   kovia reunoja, joten suurennus ei ole erotettavissa; todennettu
   kaappauksin kaikilla kolmella leveydellä.

   Kaistan korkeus kasvaa loivasti leveyden mukana (clamp), jotta täysleveä
   kuva ei rajaudu ohueksi kaistaleeksi leveillä ruuduilla — se oli
   Pidennyshuoneen 19.8. oppi. 1440:ssä korkeus on ennallaan. */
.kaista { background: var(--surface-2); }
.kaista--kausi .kaista__teksti { width: min(41%, 32rem); }
.kaista__plate {
  position: relative;
  max-width: none;               /* Simon päätös 26.8.2026, ks. yllä */
  margin-inline: auto;
  min-height: clamp(420px, 24vw, 580px);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
  /* Kuva on täysleveä mutta TEKSTI pysyy sivun sisältösarakkeessa: sama
     vasen reuna kuin .rajaus-osioilla (--leveys 1200 + --s6 kumpaankin
     laitaan). Ilman tätä teksti karkaisi ruudun laitaan ja sivun
     tasausperusta (vesiraja-datum) rikkoutuisi. */
  padding-inline: max(var(--s6), calc((100% - var(--leveys)) / 2 + var(--s6)));
}
.kaista--tumma .kaista__plate { min-height: clamp(480px, 27vw, 680px); }
.kaista__kuva {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Pystyrajaus per kuva, mitattu lähteen sommittelusta — ei silmällä säädetty.
   venesatama: aurinko on y 25,4 %:ssa ja laituri johtaa alas; ikkuna
   ankkuroidaan ylös (32 %) jotta aurinko ja horisontti pysyvät mukana.
   yrityksille: kolme jettiä ovat y 40,6–69,3 % ja vastaranta 26–31 %;
   48 % on suurin arvo jolla jettien rungot mahtuvat kokonaan sisään vielä
   2560 px:n ruudulla (alareuna 69,9 % vs. rungot 69,3 %) ja pienin jolla
   vastaranta näkyy yhtenäisenä viivana yläreunassa. Kokeiltu myös 58 %:
   jetit näkyivät mutta vastaranta katosi ja yläreunaan jäi irrallinen
   rantakaistale, joka luki vahingolta. */
.kaista--kausi .kaista__kuva { object-position: 50% 32%; }
.kaista--tumma .kaista__kuva { object-position: 50% 48%; }
.kaista__teksti {
  position: relative;
  width: min(41%, 36rem);
  padding-block: var(--s7);
}
/* TYKY-kaistan tekstipalsta on leveämpi kuin muiden. Korjattu 26.8.2026.
   Regressio omasta täysleveyskorjauksestani: kun palsta alkoi laskea 41 %
   sisältösarakkeesta (1136 px) eikä 1280 px:n levystä, se kapeni 525 → 466
   px ja **nappirivi putosi kahdelle riville kaikilla leveyksillä**. Napit
   ovat 288 + 12 + 213 = 513 px, eli vajaus oli 47 px.

   34rem = 544 px ei ole pyöristetty luku vaan kaksi asiaa yhtä aikaa:
   (1) se on `p`-elementin oma rivileveys tässä järjestelmässä (rivi 179,
   62–68 merkkiä), joten kappale osuu nyt täsmälleen suunniteltuun mittaansa
   eikä ylitä sitä; (2) se on pienin mitta johon 513 px:n nappirivi mahtuu
   yhdelle riville, ja jättää 31 px pelivaraa.
   `max(41%, …)` pitää palstan leveänä myös kapealla työpöydällä ja `62 %`
   on katto, ettei teksti syö kuvaa. Mitattu rajapiste: napit pysyvät
   rinnakkain 908 px:n ikkunaan asti (palsta 514 px) ja rivittyvät 900:ssa
   (palsta 509 px) hallitusti allekkain vasempaan reunaan.
   Kausikaistaa EI levennetä: siellä leveintä on aukiolorivi 352 px, joka
   mahtuu 466 px:iin 114 px:n varalla (mitattu). */
.kaista--tumma .kaista__teksti { width: min(max(41%, 34rem), 62%); }
/* Vesiraja-datum myös kuvakaistoilla: variantti A korostaa signaturea
   jokaisen osion yläreunassa. Viiva ja teksti täydessä #F0EEEA:ssa, ei
   himmennettynä (päätös 15). Marginaali pienempi kuin kiinteillä pinnoilla. */
.kaista__teksti .datum {
  border-top-color: #F0EEEA;
  color: #F0EEEA;
  margin-bottom: var(--s5);
}
.kaista__teksti h2 { margin-top: 0; }
.kaista__ajat {
  margin-top: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  font-size: 21px; max-width: none;
  font-variant-numeric: tabular-nums;
}
.kaista__ajat b { font-weight: 600; }
.kaista__lisa { margin-top: var(--s4); font-size: 17px; }
.kaista__toiminnot { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3); }
.kaista__pikkuteksti { margin-top: var(--s4); font-size: 13px; }

/* --- 10c. Hinnasto ------------------------------------------------------ */
.hinnasto__ylatunniste {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--s5); margin-bottom: var(--s7);
}
.hinnasto__ylatunniste h2 { max-width: 16ch; }

.suodatin {
  display: inline-flex; gap: var(--s1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--s1);
}
.suodatin__nappi {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 500;
  padding: var(--s2) var(--s5);
  border-radius: var(--r-pill);
  transition: background-color 200ms var(--liuku), color 200ms var(--liuku);
}
.suodatin__nappi.on-valittu { background: var(--accent); color: var(--on-accent); }

.hinnasto { max-width: none; }
.hinnasto__otsikkorivi,
.hinta-rivi {
  display: grid;
  grid-template-columns: 1fr 80px 128px 112px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s3);
  margin-inline: calc(var(--s3) * -1);
}
.hinnasto__otsikkorivi {
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding-block: var(--s2);
}
.hinnasto__ryhma {
  margin-top: var(--s7); margin-bottom: var(--s2);
  font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2);
}
.hinta-rivi {
  /* Vesiraja rivijakona — sama viiva kuin osioiden datumissa */
  border-top: 1px solid var(--line);
  transition: background-color 140ms ease-out;
}
.hinta-rivi:hover { background: var(--accent-soft); }
/* Mitattu: --line-strong putoaa --accent-softin päällä 2,96:1:een (vaalea) ja
   2,32:1:een (tumma), eli alle UI-rajan 3:1. Rivin osuessa napin reuna
   vaihtuu aksenttiin: 4,94:1 vaalea, 6,76:1 tumma. */
.hinta-rivi:hover .nappi--reuna { border-color: var(--accent); color: var(--accent); }
.hinta-rivi .nappi--reuna:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.hinta-rivi__nimi { font-weight: 500; }
.hinta-rivi__kesto,
.hinta-rivi__hinta { font-variant-numeric: tabular-nums; }
.hinta-rivi__kesto { color: var(--ink-2); }
.hinta-rivi__hinta { font-weight: 600; text-align: right; }
.hinta-rivi .nappi { justify-self: end; }
.hinta-rivi[hidden], .hinnasto__ryhma[hidden] { display: none; }

.alaviite {
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 15px; max-width: 46rem;
}

/* --- 10d. Paikat -------------------------------------------------------- */
.paikat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.paikka { background: var(--surface); padding: var(--s7); border-radius: var(--r-flat); }
.paikka h3 { margin-bottom: var(--s2); }
.paikka__osoite { color: var(--ink-2); margin-bottom: var(--s6); }
.paikka .luvut { gap: var(--s5) var(--s6); }
.paikka .luvut dd { font-variant-numeric: tabular-nums; }

/* --- 10e. Varaaminen ---------------------------------------------------- */
.varaaminen { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8); }
.varaaminen h2 { margin-bottom: var(--s6); }
.varaaminen__vaiheet { max-width: 40rem; }
.vaiheet { list-style: none; padding: 0; margin-bottom: var(--s6); }
.vaiheet li {
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  gap: var(--s4);
  border-top: 1px solid var(--line);
  padding-block: var(--s4);
}
.vaiheet__nro {
  font-size: 21px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.vaiheet__teksti { font-size: 17px; }
.varaaminen__sivu h3 { margin-bottom: var(--s4); }
.varaaminen__lahja { margin-top: var(--s7); }
.varaaminen__sivu p { margin-bottom: var(--s4); }
.maksut > div { margin-bottom: var(--s5); }
.maksut dt {
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.maksut dd { margin: var(--s1) 0 0; }

/* --- 10f. Varausehdot --------------------------------------------------- */
/* Kuva poistettu 26.8. (Web Design): mittariston lähikuva ei kertonut
   varausehdoista mitään (SLOP 13) ja sen alle jäi 618 px tyhjää saraketta
   (SLOP 15). Sarake täytettiin sisällöllä joka oli jo osiossa: peruutusehto
   ja henkilöllisyystodistus siirtyivät listan alta omaan sarakkeeseensa.
   Otsikko ylittää molemmat sarakkeet, joten sarakkeet alkavat samalta
   riviltä ilman laskettua siirtymää. */
.ehdot {
  display: grid; grid-template-columns: 7fr 5fr;
  column-gap: var(--s8); row-gap: var(--s6); align-items: start;
}
.ehdot__otsikko { grid-column: 1 / -1; }
.ehdot__teksti { max-width: 44rem; }
.ehdot__lisa { max-width: 32rem; }
.ehdot__lisa h3:first-child { margin-top: 0; }
.ehdot h3 { margin-top: var(--s7); margin-bottom: var(--s3); }
.ehtolista { padding-left: 0; list-style: none; counter-reset: ehto; }
.ehtolista li {
  counter-increment: ehto;
  display: grid; grid-template-columns: 40px 1fr; gap: var(--s4);
  border-top: 1px solid var(--line);
  padding-block: var(--s4);
  max-width: 40rem;
}
.ehtolista li::before {
  content: counter(ehto);
  color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500;
}

/* --- 10g. UKK ----------------------------------------------------------- */
.ukk { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s8); }
.ukk__kohta { max-width: 36rem; }
.ukk__kohta h3 { margin-bottom: var(--s3); }
.ukk__kohta p { color: var(--ink-2); }

/* --- 10h. Yhteys — ei lomaketta ---------------------------------------- */
.yhteys { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: start; }
.yhteys h2 { margin-bottom: var(--s6); }
.yhteys__paa { max-width: 40rem; }
/* Sivusarake alkaa vasta ison sähköpostin yläreunan tasalta, ei osion alusta */
.yhteys__sivu { padding-top: var(--s8); }
.yhteys__iso {
  display: block;
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 800; font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink); text-decoration: none;
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
  transition: color 140ms ease-out;
  overflow-wrap: anywhere;
}
.yhteys__iso:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.footer { background: var(--footer-bg); color: var(--footer-ink); padding-block: var(--s8); }
.footer a { color: var(--footer-ink); text-decoration: none; }
.footer a:hover { color: var(--footer-accent); }
.footer__rivi { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s8); }
.footer__merkki { color: var(--footer-ink); }
.footer__sana {
  margin-top: var(--s4);
  font-family: 'Cabinet Grotesk', 'Switzer', Arial, sans-serif;
  font-weight: 800; font-size: 28px; line-height: 1;
  letter-spacing: -0.015em; text-transform: uppercase;
}
/* Tagline on asiakkaan omaa brändiä (og:image). Ladotaan tekstinä sivuston
   omalla typografialla, ei kuvana. */
.footer__tagline {
  margin-top: var(--s3);
  color: var(--footer-accent);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.footer__sarakkeet { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.footer__otsikko {
  font-family: 'Switzer', Arial, sans-serif;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--footer-ink-2);
  margin-bottom: var(--s3);
}
.footer__sarakkeet p { font-size: 15px; margin-bottom: var(--s2); }
.footer__pohja {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--footer-line);
  color: var(--footer-ink-2); font-size: 15px;
}
.footer__pohja p { max-width: none; }

/* ---------------------------------------------------------------------------
   12. MOTION — yksi orkestroitu latausanimaatio, porrastus 60 ms
   ------------------------------------------------------------------------- */
@keyframes nouse {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.navi__rivi,
.hero__sisalto > *,
.faktat__rivi {
  animation: nouse 280ms var(--ulos) backwards;
  will-change: opacity, transform;
}
.navi__rivi            { animation-delay: 0ms; }
.hero__sisalto > *:nth-child(1) { animation-delay: 60ms; }
.hero__sisalto > *:nth-child(2) { animation-delay: 60ms; }
.hero__sisalto > *:nth-child(3) { animation-delay: 120ms; }
.hero__sisalto > *:nth-child(4) { animation-delay: 120ms; }
.hero__sisalto > *:nth-child(5) { animation-delay: 180ms; }
.faktat__rivi          { animation-delay: 240ms; }

/* Scroll-reveal VAIN hinnaston riveille. Oletustila on näkyvä: luokka
   .odottaa lisätään JS:llä ja vain jos IntersectionObserver on olemassa
   JA rivi on viewportin alapuolella. Koko sivu ei ole koskaan opacity 0. */
.hinta-rivi.odottaa { opacity: 0; transform: translateY(8px); }
.hinta-rivi.saapuu {
  animation: nouse 280ms var(--ulos) both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  /* Ei toistoa, pelkkä poster. Ei neuvoteltavissa. */
  .hero__video { display: none; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, outline-color, fill, stroke !important;
    transition-duration: 140ms !important;
  }
  .hinta-rivi.odottaa { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   13. RESPONSIIVISUUS
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .kalusto__jetti { grid-template-columns: 1fr; gap: var(--s6); }
  /* Pinottuna kuva on koko sisältöleveys, jolloin 7:6 olisi 1000 px:n
     ruudulla 802 px korkea eli 89 % ruudusta. Levennetään 4:3:een: ikkuna on
     silloin lähteen x 320–1280, jetti 23,9–88,5 % eikä leikkaudu. Oikea
     ankkuri (100 %) säilyy, eli tyhjää vettä ei tule takaisin vasemmalle. */
  .kalusto__kuva img { aspect-ratio: 4 / 3; }
  /* Paneelit EIVÄT pinoudu tässä välissä. Kun kuva on paneelin rakenne,
     täysleveä pystykuva olisi tabletilla yli 900 px korkea. Sarakkeet
     tasataan sen sijaan 7fr/5fr, jolloin pystykuva pysyy pystynä ja
     vaakakuva vaakana. Pinoaminen tehdään vasta 768:ssa. */
  .kalusto__loput { grid-template-columns: 7fr 5fr; gap: var(--s6); }
  .varaaminen, .ehdot, .yhteys { grid-template-columns: 1fr; gap: var(--s7); }
  .footer__rivi { grid-template-columns: 1fr; gap: var(--s7); }
}

@media (max-width: 900px) {
  .navi__linkit {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: var(--s4) var(--s6) var(--s6);
  }
  .navi__linkit.on-auki { display: flex; }
  .navi--videolla .navi__linkit.on-auki,
  .navi--herolla .navi__linkit.on-auki { color: var(--ink); }
  .navi--videolla .navi__linkit.on-auki a,
  .navi--herolla .navi__linkit.on-auki a { color: var(--ink); }
  .navi__linkit a { padding-block: var(--s3); border-top: 1px solid var(--line); font-size: 17px; }
  .navi__linkit a:first-child { border-top: 0; }
  .navi__rivi { gap: var(--s4); position: relative; }
  .merkki { margin-right: auto; }
  .hampurilainen { display: inline-flex; }
  .navi__puhelin { display: none; }
  .ukk { grid-template-columns: 1fr; gap: var(--s6); }
  .paikat { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .rajaus, .navi__rivi { padding-inline: var(--s4); }

  /* Puhelimessa paneelit pinoutuvat ja ovat kapeita, joten kumpikin kuva saa
     olla oman lähteensä muotoinen: mitään ei rajata pois. 390 px leveänä
     SUP 4:3 = 269 px ja flyboard 4:5 = 448 px. max-height on vain varmistus
     leveämmille pikkunäytöille (768 px leveänä 4:5 olisi 920 px); 390×844:ssä
     se ei aktivoidu lainkaan, mitattu. */
  .kalusto__loput { grid-template-columns: 1fr; gap: var(--s6); }
  .paneeli__kuva--pohja { aspect-ratio: 4 / 3; }
  .paneeli__kuva--pysty { aspect-ratio: 4 / 5; max-height: 70svh; }

  /* =====================================================================
     MOBIILIN HERO — PINOTAAN, sama sääntö kuin kuvakaistoilla.
     Simon tuomio 27.8.2026: "yritä optimoida mobiilille paremmin, etenkin
     hero osio ja hero osion video."

     JUURISYY, mitattu 390×844 (yksi syy, kaksi oiretta):
     hero oli 100svh JA teksti sen päällä, joten script.js kasvatti heron
     1 164 px:iin pitääkseen tekstin ankkuriliu'un tummassa päässä (54,6 %).
     Siitä seurasi molemmat viat:
       (1) videolaatikko 390×1164 = suhde 0,335. object-fit: cover näyttää
           16:9-lähteestä silloin vain 18,9 % leveydestä (x 40,6–59,4 %).
           Kohteen vaakasijainti videolla on 44–65 %, joten jetti oli
           rajauksen ULKOPUOLELLA noin puolet 10 sekunnin kestosta.
       (2) nappirivi ja Mark jäivät taitteen alle (974 ja 1 116 vs. ruutu 844).

     RATKAISU: video on oma kaistansa heron yläreunassa, teksti sen ALLA
     kiinteällä #0B1B1F-pinnalla. Tämä ei ole uusi keksintö vaan tämän
     sivuston oma mobiilisääntö: kuvakaistat pinoutuvat täällä jo nyt
     ("mitattu peite on ratkaisu tekstille KUVAN PÄÄLLÄ, ja pinottuna
     ongelmaa ei ole olemassa"). Hero on sama tapaus.

     Seuraukset, mitatut:
       • kaista ≤ 46svh takaa aina näkyvyyden ≥ 0,49 × lähteen leveydestä
         (f = 0,5625 × W/kaista; puhelimen W/H on 0,40–0,50).
       • teksti on tasaisella #0B1B1F:llä → kontrasti #F0EEEA 15,20:1,
         riippumatta siitä mitä videossa näkyy. Vahvempi takuu kuin
         DESIGN.md E.3:n takuulattia 4,91:1.
       • värit, napit ja Mark-kenttä pysyvät täsmälleen ennallaan, koska
         pinta on sama tumma sävy kuin ennenkin.
     ===================================================================== */
  .hero {
    /* Oletus ilman JS:ää. Skripti tarkentaa tämän niin että koko nappirivi
       mahtuu ensimmäiseen ruutuun; katto 46svh pitää geometrian voimassa
       kummassakin tapauksessa. 108vw on maisemapuhelimen katto. */
    --kaista: min(42svh, 108vw);
    display: block;
    padding: calc(var(--kaista) + var(--s6)) 0 var(--s7);
    background: #0B1B1F;
  }
  /* Media on vain kaista, ei koko hero. Tästä koko korjaus seuraa: laatikon
     korkeus määrää sen, kuinka leveä siivu 16:9-lähteestä näkyy. */
  .hero__media { inset: 0 0 auto 0; height: var(--kaista); }
  .hero__poster { background-image: url('assets/video/hero-poster-mobiili.jpg'); }

  /* L2 ei ole enää kontrastikerros vaan kaistan alareunan häivytys: ilman
     sitä videon ja tekstipinnan väliin jäisi kova sauma, joka näkyy vain
     osassa kehyksiä (kirkas kori) ja katoaa muissa. Ramppi on tasan 12 %
     kaistan korkeudesta = kohteen alapuolinen vesi; jetin runko on
     kehyksissä 6–10 korkeintaan y 83 %:ssa, joten sitä ei syödä. */
  .peite__ankkuri {
    background: linear-gradient(0deg,
      #0B1B1F 0%,
      #0B1B1F00 12%);
  }

  .hero__sisalto { margin-left: 0; width: 100%; padding-inline: var(--s4); }
  .hero__otsikko { margin-top: var(--s3); }
  .hero__hinnat { margin-top: var(--s4); font-size: 15px; }
  .hero__ingressi { margin-top: var(--s2); font-size: 15px; }
  .hero__toiminnot { margin-top: var(--s4); gap: var(--s2); width: 100%; }
  .hero__toiminnot .nappi { flex: 1 1 100%; }

  /* Kuvakaistat PINOUTUVAT mobiilissa: kuva päälle, teksti alle kiinteälle
     pinnalle. Peittoa ei käytetä, koska sitä ei tarvita — mitattu peite on
     ratkaisu tekstille KUVAN PÄÄLLÄ, ja pinottuna ongelmaa ei ole olemassa.
     Vaihtoehto (teksti kuvan päällä myös mobiilissa) olisi vaatinut yli
     800 px korkean kaistan jotta E:n mitattu 54,6 %:n raja pitäisi. */
  /* Levyn sisältösarake-padding (työpöytä) nollataan: pinottuna teksti saa
     oman paddinginsa alla, ja ilman tätä ne kahdentuisivat. */
  .kaista__plate { display: block; min-height: 0; padding-inline: 0; }
  .kaista--tumma .kaista__plate { min-height: 0; }
  .kaista__kuva {
    position: static; width: 100%; height: auto; aspect-ratio: 16 / 9;
  }
  .kaista .peite__savy, .kaista .peite__ankkuri { display: none; }
  /* .kaista--tumma on lueteltava erikseen: sen työpöytäsääntö on
     kaksiluokkainen (0,2,0) eikä pelkkä .kaista__teksti (0,1,0) kumoaisi
     sitä täällä. Ilman tätä TYKY-kaistan teksti jäisi 544 px:iin puhelimessa. */
  .kaista__teksti,
  .kaista--kausi .kaista__teksti,
  .kaista--tumma .kaista__teksti {
    margin-left: 0; width: 100%;
    padding: var(--s6) var(--s4) var(--s7);
    color: var(--ink);
  }
  .kaista__teksti .nappi--ensi { background: var(--accent); color: var(--on-accent); }
  .kaista__teksti .nappi--ensi:hover { background: var(--ink); color: var(--bg); }
  .kaista__teksti .nappi--haamu { color: var(--ink); border-color: var(--line-strong); }
  .kaista__teksti .nappi--haamu:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .kaista__teksti :focus-visible { outline-color: var(--accent); }
  .kaista__teksti .datum { border-top-color: var(--line); color: var(--ink-2); }
  .kaista__toiminnot .nappi { flex: 1 1 100%; }

  /* C.5: mobiilin osiopaddingit 48 tai 64 — kaksitasoinen rytmi säilyy */
  .osio { padding-block: var(--s7); }
  .osio--pinta { padding-block: var(--s8); }
  .faktat__rivi { gap: var(--s4); padding-block: var(--s5); }

  .paneeli__teksti { padding: var(--s6); }
  .paneeli__luvut { gap: var(--s6); }
  .iso-luku { font-size: 42px; }

  .hinnasto__otsikkorivi { display: none; }
  .hinta-rivi {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'nimi hinta' 'kesto nappi';
    gap: var(--s2) var(--s4);
    padding-block: var(--s4);
  }
  .hinta-rivi__nimi  { grid-area: nimi; }
  .hinta-rivi__hinta { grid-area: hinta; }
  .hinta-rivi__kesto { grid-area: kesto; font-size: 15px; }
  .hinta-rivi .nappi { grid-area: nappi; }

  .vaiheet li { grid-template-columns: 32px 1fr; }
  .footer__sarakkeet { grid-template-columns: 1fr; gap: var(--s5); }
}

@media (max-width: 420px) {
  .hero__hinnat { flex-direction: column; gap: var(--s1); }
  .hero__hinnat-jako { display: none; }
}

/* ---------------------------------------------------------------------------
   14. PANTTERIMERKKI
   Irrotettu tiedostosta assets/brand/logo-pantteri-nelio.jpg, ei badgesta:
   neliöversiossa pantteri on vaahdon päällä ilman mustaa ympyräkehystä ja
   ilman tekstiä päällä, joten siluetti irtoaa puhtaasti.

   Menetelmä (mitattu, ei silmällä säädetty):
     • rajaus x 344–846, y 561–1082 (tummien pikselien mitattu ääriviiva)
     • alfaramppi luma 0,28 → 0,48. Molemmat luvut ovat luminanssihistogrammin
       laaksossa: alue 25–70 % sisältää vain 3,5 % pikseleistä, eli lähde on
       lähes puhtaasti kaksijakoinen.
     • kylläisyysportti max−min 0,10 → 0,22. Pantteri on neutraali harmaa,
       ympäröivä vesi turkoosia; ilman tätä porttia tumma vesi olisi tullut
       mukaan maskiin.
     • yhtenäiset komponentit: jäljelle jäi tasan yksi (145 621 px), roskat pois.
     • laatikkosuodatin 384 px leveäksi, harmaa+alfa-PNG, 6,4 kt.
     Tulos: assets/brand/pantteri-siluetti-a.png (384×399, alfamaski).

   Vihreä silmä jäi automaattisesti ULKOPUOLELLE (se on kirkas), eli silmä on
   negatiivista tilaa eikä kolmas väri — täsmälleen kuten DESIGN.md osa F vaatii.
   Väri tulee currentColorista, joten merkki on --ink vaalealla teemalla,
   --ink tummalla ja #F0EEEA videon päällä. Yksivärinen kaikkialla.
   ------------------------------------------------------------------------- */
:root {
  --pantteri: url('assets/brand/pantteri-siluetti-a.png');
}

/* ---------------------------------------------------------------------------
   KIELIKYTKIN (Seppo 31.8.2026, tyojonon kohta #22)

   Muoto on lainattu hinnaston `.suodatin__nappi`ista tarkoituksella: sivulla
   oli jo yksi kahden vaihtoehdon valitsin, eika toista visuaalista kielta
   tarvita. Erot: pienempi kirjasin ja tiukempi padding, koska tama on
   navipalkissa eika osion sisalla.

   Videon paalla navi on lapinakyva ja teksti vaalea, joten valittu tila
   kaytaa samaa #6EE5ED-korostusta kuin navin oma ensisijainen nappi.
   --------------------------------------------------------------------------- */
.kieli { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.kieli__nappi {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: inherit;
  font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-pill);
  opacity: 0.72;
  transition: background-color 200ms var(--liuku), color 200ms var(--liuku), opacity 200ms var(--liuku);
}
.kieli__nappi:hover { opacity: 1; }

/* Valittu kieli EI ole taytetty pilleri, vaikka `.suodatin__nappi` on.
   Syy on mitattu kuvasta 31.8.2026: navissa on jo yksi korostuspilleri
   ("Varaa"), ja toinen samanvarinen sen vieressa teki palkin lukemisesta
   levotonta ja nosti kielivalinnan yhta tarkeaksi kuin varaamisen. Se ei
   ole tarkea yhta tarkea; se on apuvaline. Alleviivaus riittaa. */
.kieli__nappi.on-valittu {
  opacity: 1;
  box-shadow: inset 0 -2px 0 0 currentColor;
  border-radius: 0;
}

/* Kapealla ruudulla puhelinnumero piilotetaan jo rivilla 1146. Kielikytkin
   jaa nakyviin: turisti tarvitsee sita nimenomaan puhelimella.

   ⚠ MITATTU KUVASTA 31.8.2026, EI LUVUSTA. Kaksi nappia 390 px:n ruudulla
   tyonsi hampurilaisvalikon ulos navipalkista. `scrollWidth === clientWidth`
   sanoi silti ettei ylivuotoa ole, koska palkki leikkasi napin nakymatta.
   Luku oli vihrea ja kuva oli rikki.

   Korjaus: kapealla naytetaan vain SE KIELI JOHON VOI VAIHTAA. Nappeja on
   yha kaksi, joten nappaimistolla ja ruudunlukijalla kaytos ei muutu; vain
   valittu piilotetaan, koska sen painaminen ei tekisi mitaan. */
/* Kaksi sijaintia, joista tasan yksi on kerrallaan nakyvissa.
   ⚠ MITATTU KUVASTA JA LUVUISTA 31.8.2026, TASSA JARJESTYKSESSA. Ensin
   kytkin oli vain navipalkissa. Kuva 390 px:lla naytti hampurilaisen
   leikkautuvan reunaan, mutta `scrollWidth === clientWidth` sanoi ettei
   ylivuotoa ole: palkki leikkasi napin nakymatta. Sitten mitattiin
   perusversio (git HEAD) samalla menetelmalla: hampurilaisen oikea reuna
   360 px:lla oli 344, eli sisalto tayttaa rivin TASAN eika pelivaraa ole
   yhtaan. Siksi kytkin ei mahdu kapean ruudun palkkiin millaan tiivistyksella,
   ja se siirtyy valikkoon. 320 px oli ylivuodossa jo perusversiossa (340),
   eika se ole taman muutoksen aiheuttamaa. */
.kieli--valikko { display: none; }
@media (max-width: 600px) {
  .kieli--navi { display: none; }
  .kieli--valikko {
    display: flex; gap: var(--s4);
    margin-top: var(--s4); padding-top: var(--s4);
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  .kieli--valikko .kieli__nappi { font-size: 15px; font-weight: 500; padding: var(--s2) 0; }
}