/* ============================================================
   STAYFRESH — variantti A "KENTTÄ", kierros 2
   Teesi: sivu on festarikenttä hämärän tullen. Video vie koko ruudun,
   oranssi on ainoa valo.

   MUOTOKIELI VAIHDETTU 11.9.2026 Simon tuomiosta: "design on liian
   kulmikas ja robottimainen. Paljon mittareita ja viivoja. En halua että
   sivut hakevat neliskanttista symmetriaa, vaan sulavaa yhteensoljuvaa
   designia."

   Uusi perusmuoto on YMPYRÄ JA KAARI, ja se tulee brändistä itsestään:
   logo on pyöreä sinetti, appelsiini on pallo, viipale on ympyrä, ja
   logon sisällä oleva asteikko on KAARI eikä suora viiva. Kierroksella 1
   luin asteikon suoraksi viivastoksi — väärä luenta samasta lähteestä.
   Suorat tikkuviivastot on poistettu kokonaan, pyöristys nostettu
   2 px:stä 14/30/999:ään ja osiorajat korvattu väljyydellä.
   ============================================================ */

:root {
  /* --- väri: 5 arvoa, YKSI korostus (ei muutosta, hyväksytty) --- */
  --muste:        #120E09;
  --muste-2:      #1A1510;
  --kerma:        #F4EFE3;
  --savu:         #A19684;
  --oranssi:      #F08A1E;
  --oranssi-nosto:#FFB24D;
  --oranssi-syva: #9A4F06;   /* sama korostus vaalealla, mitattu 5,24:1 */
  --muste-himmea: #6B6152;
  --tolkkipohja:  #AFA491;   /* asiakkaan tölkkirenderin oma tausta */
  /* Semanttinen virhevari lomakkeen validoinnille (14.9.2026). EI toinen
     brändikorostus (SIMON_MAKU 1/12): näkyy vain virhetilassa, ei koskaan
     yhtä aikaa oranssin kanssa kilpailemassa huomiosta, sama rooli kuin
     minkä tahansa lomakkeen punaisella on kaikkialla — semantiikka, ei koriste. */
  --virhe:        #E5484D;

  /* --- elevaatio: ei varjoja. Viivoja käytetään SÄÄSTELIÄÄSTI:
         osiorajat ovat väljyyttä, eivät viivoja. --- */
  --viiva:        rgba(244, 239, 227, .12);
  --viiva-vahva:  rgba(244, 239, 227, .26);
  --viiva-tumma:  rgba(18, 14, 9, .14);
  --pinta:        rgba(244, 239, 227, .045);

  --t1: 4px;  --t2: 8px;  --t3: 12px; --t4: 16px; --t5: 24px;
  --t6: 32px; --t7: 48px; --t8: 64px; --t9: 96px; --t10: 128px;

  /* --- pyöristys: tasan 3 arvoa, kaikki pehmeitä --- */
  --p1: 14px;    /* pienet pinnat */
  --p2: 30px;    /* kortit, mediapinnat, kaistat */
  --p3: 999px;   /* napit, sinetti, nupit, liuskat */

  --display: 'Archivo', 'Archivo-vara', Arial, sans-serif;
  --leipa:   'Supreme', 'Supreme-vara', Arial, sans-serif;

  --raja-leveys: 1240px;
  --navi-korkeus: 76px;

  --easing: cubic-bezier(.23, 1, .32, 1);
}

/* ============ perusta ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.portti-auki, html.valikko-auki { overflow: hidden; }

body {
  margin: 0;
  background: var(--muste);
  color: var(--kerma);
  font-family: var(--leipa);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

:focus-visible {
  outline: 2px solid var(--oranssi-nosto);
  outline-offset: 4px;
  border-radius: var(--p1);
}

.ohita {
  position: fixed; left: var(--t5); top: var(--t5); z-index: 200;
  background: var(--oranssi); color: var(--muste);
  padding: var(--t3) var(--t6); border-radius: var(--p3);
  font-weight: 700; text-decoration: none;
  transform: translateY(-200%);
  transition: transform 160ms var(--easing);   /* vain transform animoituu */
}
.ohita:focus { transform: translateY(0); }

.raja {
  width: 100%; max-width: var(--raja-leveys);
  margin-inline: auto; padding-inline: var(--t5);
}

/* ============ typografia ============ */
.otsikko1, .otsikko2, .otsikko3, .hero__otsikko {
  font-family: var(--display);
  text-wrap: balance;
  overflow-wrap: break-word;   /* suomen yhdyssanat eivät saa ylittää näyttöä */
}

.hero__otsikko {
  font-stretch: 72%;
  font-weight: 800;
  /* Myös korkeusrajoite: matalassa ikkunassa leveyteen sidottu koko
     kasvattaa heron liian korkeaksi. */
  font-size: clamp(2.4rem, min(6.2vw, 10svh), 5.6rem);
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin-bottom: var(--t5);
}
.hero__otsikko span { display: block; }
/* Korostus rivillä 3: "paikan päällä" on se kohta jota ei saa ymmärtää
   väärin. Aiemmin korostus oli rivillä 1, kun otsikko oli "Tuoreus, joka
   kestää festarin tahdin" — silloin ydinsana oli ensimmäisenä. */
.hero__otsikko span:nth-child(3) { color: var(--oranssi); }

.otsikko1 {
  font-stretch: 86%; font-weight: 800;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1; letter-spacing: -.018em;
}
.otsikko2 {
  font-stretch: 96%; font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.015em;
  max-width: 20ch;
}
.otsikko3 {
  font-stretch: 100%; font-weight: 700;
  font-size: 1.18rem; line-height: 1.25;
}

.silmaluku {
  font-family: var(--leipa);
  font-weight: 500; font-size: .76rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--oranssi);
  margin-bottom: var(--t4);
}
.silmaluku--vaimea { color: var(--savu); }

.ingressi {
  font-size: clamp(1.06rem, 1.6vw, 1.2rem);
  line-height: 1.6; color: var(--savu); max-width: 52ch;
}
.iso-teksti {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55; max-width: 46ch;
}
p { max-width: 62ch; }

.taydennettava { border-bottom: 1px dashed var(--savu); color: var(--savu); }

.linkki {
  display: inline-flex; align-items: center; gap: var(--t2);
  color: var(--oranssi); text-decoration: none;
  font-weight: 500; font-size: .95rem;
  padding: var(--t2) 0; min-height: 44px;
}
.linkki::after {
  content: ''; width: 16px; height: 1px; background: currentColor;
  transition: transform 180ms var(--easing);
}
.linkki:hover::after { transform: translateX(5px); }

/* ============ painikkeet: pilleri, ei neliötä ============ */
.nappi {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: var(--t3) var(--t7);
  border: 1px solid transparent;
  border-radius: var(--p3);
  /* <button>-elementin selainoletus on vaalea harmaa pinta (ButtonFace).
     Ilman tätä "En ole" -nappi näkyi vaaleana pillerinä, jossa --savu-teksti
     jäi alle 4,5:1. Korjattu 30.9.2026: pinta pois, jolloin teksti on
     --muste-pohjaa vasten (laskettu 6,6:1). */
  background: transparent;
  font-family: var(--leipa);
  font-size: .97rem; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--easing), background-color 140ms var(--easing),
              border-color 140ms var(--easing), color 140ms var(--easing);
}
.nappi--paa { background: var(--oranssi); color: var(--muste); }
.nappi--paa:hover { background: var(--oranssi-nosto); transform: translateY(-2px); }
.nappi--reuna { border-color: var(--viiva-vahva); color: var(--kerma); }
.nappi--reuna:hover { border-color: var(--kerma); transform: translateY(-2px); }
.nappi--hiljainen { color: var(--savu); }
.nappi--hiljainen:hover { color: var(--kerma); }
.nappi--iso { min-height: 60px; padding-inline: var(--t8); font-size: 1.05rem; }

/* ============ ikäportti ============ */
.portti {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: var(--t5);
  background: var(--muste) url('../media/hero-v3-poster.webp') center / cover no-repeat;
  transition: opacity 280ms var(--easing);
}
/* Pyöreä häivytys suorakulmaisen sijaan. */
.portti::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, rgba(18,14,9,.90), rgba(18,14,9,.985));
}
.portti.on-poistumassa { opacity: 0; pointer-events: none; }
.portti__sisus { position: relative; text-align: center; max-width: 420px; }
.portti__merkki { margin: 0 auto var(--t7); width: 148px; height: auto; }
.portti .silmaluku { color: var(--savu); margin-bottom: var(--t3); }
.portti__otsikko {
  font-family: var(--display); font-stretch: 88%; font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  line-height: 1.04; letter-spacing: -.015em;
  margin-bottom: var(--t7);
}
.portti__napit { display: flex; flex-direction: column; align-items: center; gap: var(--t2); }
.portti__napit .nappi { width: 268px; }
.portti__esto { color: var(--kerma); margin: var(--t4) auto 0; max-width: 38ch; }
/* Ikäraja pysyy yhtenä yksikkönä: "18-" ja "vuotiaille" eivät saa katketa
   eri riveille (designkatselmus 30.9.2026). Sama EN "under 18" ja SV
   "under 18 år". */
.ei-katkea { white-space: nowrap; }
.portti__laki {
  margin: var(--t7) auto 0; font-size: .82rem;
  color: var(--savu); max-width: 34ch;
}

/* ============ navigaatio ============ */
.navi {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color 220ms var(--easing);
}
/* Pehmeä häivytys kovan alarajaviivan sijaan. */
.navi::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 40px;
  background: linear-gradient(to bottom, rgba(18,14,9,.55), rgba(18,14,9,0));
  opacity: 0; transition: opacity 220ms var(--easing); pointer-events: none;
}
/* .90 päästi vieritettävän tekstin kuultamaan logon läpi (mitattu 13.9.
   yhteysosion kaappauksesta). .97 peittää sen mutta jättää hiukan syvyyttä. */
.navi.on-vieritetty { background: rgba(18,14,9,.97); }
.navi.on-vieritetty::after { opacity: 1; }
.navi__rivi {
  max-width: var(--raja-leveys); margin-inline: auto;
  padding: 0 var(--t5); height: var(--navi-korkeus);
  display: flex; align-items: center; justify-content: space-between; gap: var(--t5);
}
.navi__merkki {
  display: inline-flex; align-items: center; gap: var(--t3);
  text-decoration: none; min-height: 44px;
}
.navi__nimi {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--display); font-stretch: 88%; font-weight: 800;
  font-size: 1.05rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
}
.navi__nimi em {
  font-family: var(--leipa); font-style: normal; font-weight: 500;
  font-size: .58rem; letter-spacing: .22em; color: var(--savu);
}
.navi__linkit { display: flex; align-items: center; gap: var(--t6); }
.navi__linkit a {
  position: relative; text-decoration: none;
  font-size: .93rem; font-weight: 500; color: var(--kerma);
  padding: var(--t2) 0;
}
.navi__linkit a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--oranssi); border-radius: var(--p3);
  transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--easing);
}
.navi__linkit a:hover::after { transform: scaleX(1); }
.navi__cta {
  border: 1px solid var(--viiva-vahva); border-radius: var(--p3);
  padding: var(--t3) var(--t5) !important;
  transition: border-color 140ms var(--easing), color 140ms var(--easing);
}
.navi__cta::after { display: none; }
.navi__cta:hover { border-color: var(--oranssi); color: var(--oranssi); }

/* Kielivalitsin FI / EN / SV (30.9.2026). Ei uutta väriä eikä muotoa:
   silmäluvun kirjasin, --p3-pilleri ja oranssi vain valitulle kielelle
   (korostus = valittu tila, CRAFT). Kosketuskohde 44 × 44 px. */
/* Kierros 2 (omistaja: "saatko nuo kielivalitsimet hieman paremmin
   näkyviin"): valitsin on nyt yksi pilleri, jolla on oma --muste-pinta ja
   --savu-reuna, joten se erottuu myös portin kuvan päällä. Kieli-
   tunnukset --kerma 700 (.9rem), valittu kieli täytetty oranssilla ja
   --muste-tekstillä, samoin kuin päänappi. Uutta väriä tai muotoa ei ole.
   Kontrastit (WCAG 2.x, laskettu): --kerma / --muste 16,8:1,
   --muste / --oranssi 7,7:1, reuna --savu / --muste 6,6:1 (UI-raja >= 3:1;
   --viiva-vahva olisi ollut vain noin 2,2:1). */
.kielet {
  display: flex; align-items: center; gap: var(--t1);
  padding: var(--t1);
  background: var(--muste);
  border: 1px solid var(--savu); border-radius: var(--p3);
}
.kielet button {
  min-width: 48px; min-height: 44px; padding: 0 var(--t3);
  background: none; border: 0; border-radius: var(--p3);
  font-family: var(--leipa); font-size: .9rem; font-weight: 700;
  letter-spacing: .08em; text-indent: .08em;   /* versaalivälin tasaus keskelle */
  color: var(--kerma); cursor: pointer;
  transition: color 140ms var(--easing), background-color 140ms var(--easing);
}
.kielet button:hover { color: var(--oranssi-nosto); }
.kielet button[aria-pressed="true"],
.kielet button[aria-pressed="true"]:hover { background: var(--oranssi); color: var(--muste); }
.kielet button:focus-visible { outline: 2px solid var(--oranssi-nosto); outline-offset: 2px; }
/* Portissa kulmassa: ei kasvata portin korkeutta matalilla näytöillä. */
.kielet--portti { position: absolute; top: var(--t4); right: var(--t4); }

.burger {
  display: none; width: 48px; height: 48px; border-radius: var(--p3);
  background: none; border: 0; cursor: pointer; padding: 0; place-items: center;
}
.burger span {
  display: block; width: 22px; height: 2px; border-radius: var(--p3);
  background: var(--kerma); transition: transform 180ms var(--easing);
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ HERO ============
   Sisältö ankkuroituu ALAS ja saa navilta reilun suojaetäisyyden.
   Kierroksella 1 otsikko täytti ruudun ja matalassa ikkunassa se työntyi
   navin alle (Simon havainto 11.9.). Korjaus: display-koon katto 8,4 →
   6,4 rem ja yläpadding navin korkeus + 96 px. */
.hero {
  position: relative;
  /* EI kiinteää korkeutta. Kiinteä 100svh + justify-content:flex-end työnsi
     sisällön navin alle matalassa ikkunassa: mitattu 1366×700 → silmäluku
     y=31, navin alareuna y=76, eli 45 px päällekkäin. Nyt hero kasvaa
     sisällön mukaan eikä voi mennä navin taakse. */
  min-height: 640px;
  min-height: min(100svh, 1000px);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero__verho {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(18,14,9,.95) 0%, rgba(18,14,9,.84) 40%, rgba(18,14,9,.52) 72%, rgba(18,14,9,.34) 100%),
    linear-gradient(0deg, rgba(18,14,9,.97) 0%, rgba(18,14,9,.44) 42%, rgba(18,14,9,.52) 100%);
}
.hero__sisus {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--raja-leveys);
  margin-inline: auto;
  padding: calc(var(--navi-korkeus) + clamp(28px, 7svh, 76px)) var(--t5) var(--t6);
}
.hero__silmaluku { color: var(--savu); }
.hero__ingressi {
  font-size: clamp(1.04rem, 1.6vw, 1.24rem);
  line-height: 1.55; color: var(--kerma);
  max-width: 46ch; margin-bottom: var(--t5);
}
.hero__napit { display: flex; flex-wrap: wrap; gap: var(--t3); }

/* Lupausrivi: sama asia kolmannen kerran, mutta lyhyenä ja pysäyttävänä.
   Ei laatikkoa eikä ikonia — pelkkä painoero ja ohut kaari alla. */
.hero__lupaus {
  position: relative;
  margin: 0 0 var(--t6);
  padding-bottom: var(--t4);
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--savu);
  max-width: 46ch;
}
.hero__lupaus span {
  font-family: var(--display);
  font-stretch: 96%; font-weight: 700;
  font-size: clamp(1.06rem, 1.6vw, 1.24rem);
  color: var(--kerma);
}
.hero__lupaus::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 86px; height: 2px; border-radius: var(--p3);
  background: var(--oranssi);
}

.hero__suora { margin-top: var(--t4); font-size: .95rem; color: var(--savu); }
.hero__suora a {
  color: var(--kerma); text-decoration-color: var(--oranssi); text-underline-offset: 4px;
  /* Lauseen sisäinen linkki: WCAG 2.5.8 antaa kohdekoolle nimenomaisen
     inline-poikkeuksen, joten 44 px korkeutta ei pakoteta tähän. */
}
.hero__suora a:hover { color: var(--oranssi); }

/* ============ MARK heroon upotettuna ============
   ALKUTILA ON PELKKÄ RIVI: orb, nimi ja kirjoituskenttä. Ei laatikkoa,
   ei taustaa, ei esimerkkikysymyksiä. Keskusteluikkuna syntyy vasta
   ensimmäisestä viestistä (JS asettaa data-auki), jolloin paneeli saa
   pinnan ja reunan. Simon pyyntö 11.9.2026: "pienempi".

   Orb on Markin oma tunnus (media/mark-orb.svg, sama tiedosto kuin
   Hohtokeilalla). Sen violetti-turkoosi väriaalto on MARKIN brändi eikä
   StayFreshin paletti — siksi se on ainoa kohta sivulla jossa noita värejä
   esiintyy, ja se on tarkoituksellista (SIMON_MAKU 1b: logo yhdistää
   tuoteperheen, ei design-ilme). */
.mark {
  max-width: 560px;
  border-radius: var(--p2);
  transition: padding 200ms var(--easing), background-color 200ms var(--easing);
}
.mark[data-auki="true"] {
  padding: var(--t4) var(--t5) var(--t5);
  background: var(--pinta);
  border: 1px solid var(--viiva);
}

.mark__kyltti {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--t3);
  margin-bottom: var(--t3);
}
.mark__orb {
  width: 26px; height: 26px; flex: none;
  filter: drop-shadow(0 0 10px rgba(155, 124, 240, .35));
}
.mark__nimi {
  font-family: var(--display); font-stretch: 94%; font-weight: 700;
  font-size: .98rem; letter-spacing: -.005em;
}
.mark__rooli { font-size: .8rem; color: var(--savu); }
.mark__demo {
  margin-left: auto;
  padding: 2px var(--t3);
  border: 1px solid var(--viiva-vahva);
  border-radius: var(--p3);
  font-size: .62rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--savu);
}

.mark__loki {
  max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--t3);
  margin-bottom: var(--t4);
  padding-right: var(--t2);
}
.mark__viesti { font-size: .94rem; line-height: 1.55; }
.mark__viesti p { margin: 0 0 var(--t2); max-width: none; }
.mark__viesti p:last-child { margin-bottom: 0; }
.mark__viesti ul { margin: var(--t2) 0 0; display: flex; flex-wrap: wrap; gap: var(--t2); }
.mark__viesti li {
  padding: 2px var(--t3);
  border: 1px solid var(--viiva);
  border-radius: var(--p3);
  font-size: .82rem; color: var(--savu);
}
.mark__viesti a { color: var(--oranssi); text-underline-offset: 3px; }
.mark__viesti--kysyja {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--t2) var(--t5);
  background: rgba(240,138,30,.14);
  border-radius: var(--p2) var(--p2) var(--t2) var(--p2);
  color: var(--kerma);
}
.mark__viesti--mark { color: var(--kerma); }
.mark__viesti--mark strong { color: var(--oranssi); font-weight: 700; }

.mark__odottaa { display: flex; gap: 5px; padding: var(--t2) 0; }
.mark__odottaa span {
  width: 6px; height: 6px; border-radius: var(--p3);
  background: var(--savu);
  animation: markPiste 1.1s infinite ease-in-out;
}
.mark__odottaa span:nth-child(2) { animation-delay: .15s; }
.mark__odottaa span:nth-child(3) { animation-delay: .3s; }
@keyframes markPiste {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* Syöttörivi on yksi pilleri, ei laatikko napin vieressä. */
.mark__lomake {
  display: flex; align-items: center; gap: var(--t2);
  padding: 5px 5px 5px var(--t5);
  background: rgba(18,14,9,.5);
  border: 1px solid var(--viiva-vahva);
  border-radius: var(--p3);
  transition: border-color 160ms var(--easing);
}
.mark__lomake:focus-within { border-color: rgba(240,138,30,.55); }
.mark__syote {
  flex: 1; min-width: 0;
  background: none; border: 0; color: var(--kerma);
  font-family: var(--leipa); font-size: .94rem;
  padding: var(--t3) 0;
}
.mark__syote::placeholder { color: var(--savu); }
.mark__syote:focus { outline: none; }
.mark__laheta {
  flex: none;
  min-height: 44px; padding: 0 var(--t6);
  background: var(--oranssi); color: var(--muste);
  border: 0; border-radius: var(--p3);
  font-family: var(--leipa); font-size: .9rem; font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms var(--easing), transform 140ms var(--easing);
}
.mark__laheta:hover { background: var(--oranssi-nosto); transform: translateY(-1px); }

.mark__alaviite {
  margin-top: var(--t3); font-size: .74rem; line-height: 1.5;
  color: var(--savu); max-width: none;
}
/* ============ luvut omana kaistanaan ============ */
.luvut { padding-block: clamp(40px, 5vw, 64px); }
.luvut dl { display: flex; flex-wrap: wrap; gap: var(--t5) var(--t9); }
.luvut > .raja > dl > div { display: flex; flex-direction: column; gap: 2px; }
.luvut dd {
  margin: 0;
  font-family: var(--display); font-stretch: 74%; font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.01em;
}
.luvut dt { font-size: .84rem; color: var(--savu); }

/* ============ osiot: väljyys erottaa, ei viiva ============ */
.osio { padding-block: clamp(72px, 10vw, 140px); }
.osio__paa { margin-bottom: clamp(40px, 5vw, 72px); }
.osio__paa .otsikko2 { margin-bottom: var(--t5); }
.osio__paa--keskitetty { text-align: center; }
/* p:llä on max-width 62ch, joten pelkkä text-align ei keskitä sitä —
   laatikko itse on keskitettävä (mitattu 11.9.: silmäluku jäi vasemmalle). */
.osio__paa--keskitetty .otsikko2,
.osio__paa--keskitetty p { margin-inline: auto; }

/* ---- 01 juomat ---- */
.juomat__parit {
  display: grid;
  grid-template-columns: 1.12fr 1fr;   /* tarkoituksellinen epäsymmetria */
  gap: clamp(20px, 2.6vw, 36px);
  margin-bottom: clamp(56px, 7vw, 104px);
}
.juomakortti {
  background: var(--pinta);
  border-radius: var(--p2);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 200ms var(--easing), background-color 200ms var(--easing);
}
.juomakortti:hover { transform: translateY(-4px); background: rgba(244,239,227,.07); }
.juomakortti__kuva { overflow: hidden; }
.juomakortti__kuva img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 400ms var(--easing);
}
.juomakortti:hover .juomakortti__kuva img { transform: scale(1.03); }
.juomakortti__teksti { padding: var(--t6) var(--t6) var(--t7); }
.juomakortti h3 {
  font-family: var(--display); font-stretch: 100%; font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem); line-height: 1.15;
  margin: var(--t3) 0;
}
.juomakortti p { color: var(--savu); max-width: 40ch; }
.juomakortti--paa { background: rgba(240,138,30,.07); }
.juomakortti--paa:hover { background: rgba(240,138,30,.10); }

.merkki {
  display: inline-block;
  padding: 5px var(--t4);
  border-radius: var(--p3);
  border: 1px solid var(--viiva-vahva);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--savu);
}
.merkki--paa { border-color: rgba(240,138,30,.5); color: var(--oranssi); }

/* Ketju: numerot ja väljyys, ei viivastoa eikä kehyksiä. */
.ketju { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.ketju__nro {
  display: block;
  font-family: var(--display); font-stretch: 70%; font-weight: 200;
  font-size: 2.6rem; line-height: 1; color: var(--oranssi);
  margin-bottom: var(--t3);
}
.ketju h3 {
  font-family: var(--display); font-stretch: 100%; font-weight: 700;
  font-size: 1.06rem; line-height: 1.2; margin-bottom: var(--t2);
}
.ketju p { font-size: .94rem; color: var(--savu); max-width: 28ch; }

/* ---- 02 tölkki: sivun ainoa vaalea luku, pyöristetty saareke ---- */
.tuote {
  background: var(--kerma);
  color: var(--muste);
  border-radius: var(--p2);
  margin-inline: var(--t5);
  padding-inline: var(--t5);
}
.tuote .silmaluku { color: var(--oranssi-syva); }
.tuote .ingressi { color: var(--muste-himmea); }
.tuote__ruudukko {
  display: grid; grid-template-columns: 44fr 56fr;
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.tuote__kuva {
  position: relative;
  border-radius: var(--p2);
  overflow: hidden;
  background: var(--tolkkipohja);
  aspect-ratio: 4 / 5;
}
.tuote__kuva img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuote__teksti .otsikko2 { margin-bottom: var(--t4); }
.tuote__teksti .ingressi { margin-bottom: var(--t7); }

.tiedot { margin-bottom: var(--t5); }
.tiedot > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--t4);
  padding: var(--t3) 0;
  border-bottom: 1px solid var(--viiva-tumma);
}
.tiedot > div:first-child { border-top: 1px solid var(--viiva-tumma); }
.tiedot dt {
  font-size: .74rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muste-himmea); padding-top: 3px;
}
.tiedot dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }

.ainesosat { border-bottom: 1px solid var(--viiva-tumma); padding-bottom: var(--t4); }
.ainesosat summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--t4) 0 var(--t4) var(--t6);
  font-size: .74rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muste-himmea);
}
.ainesosat summary::-webkit-details-marker { display: none; }
/* Pyöreä avausmerkki, ei plus-risti. */
.ainesosat summary::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  border: 1px solid var(--viiva-tumma); border-radius: var(--p3);
}
.ainesosat summary::after {
  content: ''; position: absolute; left: 5px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--oranssi-syva);
  border-bottom: 1.5px solid var(--oranssi-syva);
  transform: rotate(45deg);
  transition: transform 180ms var(--easing);
}
.ainesosat[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.ainesosat p { font-size: .93rem; color: var(--muste-himmea); margin-top: var(--t2); }
.ainesosat__alku { font-size: .85rem; }
.tuote__ikaraja { margin-top: var(--t5); font-size: .82rem; font-weight: 700; letter-spacing: .05em; }

/* ---- 03 kapasiteetti: KAARIMITTARI, signature ---- */
.kapasiteetti { background: var(--muste-2); }
.kaari { position: relative; max-width: 560px; margin: 0 auto clamp(40px, 5vw, 72px); }
.kaari__piirros { display: block; width: 100%; height: auto; overflow: visible; }
.kaari__ura { fill: none; stroke: var(--viiva-vahva); stroke-width: 2; stroke-linecap: round; }
.kaari__taytto {
  fill: none; stroke: var(--oranssi); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 692; stroke-dashoffset: 692;
}
.kaari__nuppi { fill: var(--oranssi); }
.kaari__keskus {
  position: absolute; left: 50%; bottom: 11%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--t2);
  text-align: center; width: 100%;
}
.kaari__luku {
  font-family: var(--display); font-stretch: 74%; font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 8vw, 5.2rem); line-height: .9;
  letter-spacing: -.02em; color: var(--oranssi);
}
.kaari__yksikko {
  font-size: .76rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--savu);
}
.kaari__paat {
  display: flex; justify-content: space-between;
  font-family: var(--display); font-stretch: 74%; font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: .92rem; color: var(--savu);
}
.kaari__selitteet {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
  max-width: 860px; margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.kaari__selitteet h3 { margin-bottom: var(--t3); }
.kaari__selitteet p { color: var(--savu); max-width: 34ch; margin-inline: auto; }
.kapasiteetti .iso-teksti {
  margin-inline: auto; text-align: center; max-width: 50ch; color: var(--savu);
}

/* ---- 04 kalusto ---- */
.kalusto__ruudukko {
  display: grid; grid-template-columns: 40fr 60fr;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
/* Kalustokuva on PYÖREÄ vaalea levy tummalla sivulla — brändin oma muoto
   (logo on pyöreä sinetti) ja samalla ratkaisu siihen, ettei koneen
   valkoista tuotekuvataustaa saa irti puhtaasti: kun uusi pohja on lähes
   yhtä vaalea, avainnuksen epätarkkuus ei näy. Hehku kiertää levyä. */
.kalusto__kuva {
  position: relative;
  display: grid; place-items: center;
  padding: var(--t6);
}
.kalusto__kuva::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(240,138,30,.26), rgba(240,138,30,0) 68%);
  pointer-events: none;
}
.kalusto__kuva img {
  position: relative;
  width: 100%; max-width: 400px;
  aspect-ratio: 1;
  border-radius: var(--p3);
  object-fit: cover;
}
.kalusto__teksti .otsikko2 { margin-bottom: var(--t5); }
.kalusto__teksti .ingressi { margin-bottom: var(--t7); }
.kalusto__teksti .silmaluku--vaimea { margin-bottom: var(--t4); }

/* Perusteet pilleriliuskoina, ei viivataulukkona. */
.perusteet { display: flex; flex-wrap: wrap; gap: var(--t3); }
.perusteet li {
  padding: var(--t2) var(--t5);
  border: 1px solid var(--viiva);
  border-radius: var(--p3);
  font-size: .94rem; color: var(--kerma);
  background: var(--pinta);
}

.nosto {
  max-width: 820px;
  margin: clamp(64px, 8vw, 112px) auto 0;
  padding-inline: var(--t5);
  text-align: center;
}
.nosto p {
  font-family: var(--display); font-stretch: 94%; font-weight: 700;
  font-size: clamp(1.45rem, 3.1vw, 2.35rem);
  line-height: 1.18; letter-spacing: -.015em;
  max-width: none; text-wrap: balance;
  margin-bottom: var(--t5);
}
.nosto footer { color: var(--savu); font-size: 1rem; max-width: 52ch; margin-inline: auto; }

/* ---- 05 miksi: pehmeät pinnat, ei viivastoa ---- */
.kirjanpito {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}
.kirjanpito li {
  display: grid; grid-template-columns: 3.6rem minmax(0, 1fr);
  column-gap: var(--t4);
  align-items: start;
  padding: var(--t6);
  background: var(--pinta);
  border-radius: var(--p2);
}
.kirjanpito li:first-child { grid-column: span 2; }
.kirjanpito__nro {
  font-family: var(--display); font-stretch: 70%; font-weight: 200;
  font-variant-numeric: tabular-nums;
  font-size: 2rem; line-height: .85; color: var(--oranssi);
}
.kirjanpito h3 {
  font-family: var(--display); font-stretch: 100%; font-weight: 700;
  font-size: 1.14rem; line-height: 1.2; margin-bottom: var(--t2);
}
.kirjanpito p { color: var(--savu); font-size: .97rem; }

/* ---- yhteys: yksi pyöristetty kuvakaista, ei 50/50-jakoa ---- */
.yhteys { padding-bottom: clamp(72px, 9vw, 120px); }
.yhteys__kaista {
  position: relative;
  border-radius: var(--p2);
  overflow: hidden;
  min-height: 560px;
  display: flex; align-items: center;
}
.yhteys__tausta {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
.yhteys__kaista::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(18,14,9,.96) 0%, rgba(18,14,9,.88) 46%, rgba(18,14,9,.45) 100%);
}
.yhteys__sisus { position: relative; z-index: 1; padding: clamp(40px, 5vw, 80px); max-width: 620px; }
.yhteys .otsikko1 { margin-bottom: var(--t5); max-width: 14ch; }
.yhteys .iso-teksti { margin-bottom: var(--t6); color: var(--kerma); }
.yhteys__lista { display: flex; flex-wrap: wrap; gap: var(--t2); margin-bottom: var(--t7); }
.yhteys__lista li {
  padding: var(--t2) var(--t5);
  border: 1px solid var(--viiva-vahva);
  border-radius: var(--p3);
  font-size: .9rem; color: var(--kerma);
}
.yhteys__osoite { margin-top: var(--t5); font-size: .95rem; }

/* ---- yhteydenottolomake (14.9.2026, korvasi esitäytetyn mailto-linkin,
        DESIGN.md päätös K4). Sama pinta- ja pyöristyskieli kuin muualla:
        hiusviiva reunana, ei varjoa, pyöristys --p1 kuten muillakin
        "pienillä pinnoilla" (token-taulukko, vaihe 3). ---- */
.lomake { display: flex; flex-direction: column; gap: var(--t5); max-width: 480px; margin-bottom: var(--t6); }
.lomake__rivi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--t4); }
.lomake__kentta { display: flex; flex-direction: column; gap: var(--t2); }
.lomake__kentta label {
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--savu);
}
.lomake__valinnainen { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lomake input, .lomake textarea {
  width: 100%; min-height: 48px;
  background: rgba(244, 239, 227, .05);
  border: 1px solid var(--viiva-vahva);
  border-radius: var(--p1);
  padding: var(--t3) var(--t4);
  color: var(--kerma);
  font-family: var(--leipa); font-size: .98rem; line-height: 1.4;
  transition: border-color 160ms var(--easing), background-color 160ms var(--easing);
}
.lomake textarea { min-height: 112px; resize: vertical; }
.lomake input::placeholder, .lomake textarea::placeholder { color: var(--muste-himmea); }
.lomake input:focus, .lomake textarea:focus {
  outline: none; border-color: var(--oranssi); background: rgba(244, 239, 227, .08);
}
.lomake input[aria-invalid="true"], .lomake textarea[aria-invalid="true"] { border-color: var(--virhe); }
.lomake__virhe { margin: 0; font-size: .82rem; line-height: 1.4; color: var(--virhe); max-width: none; min-height: 1.2em; }
.lomake__virhe:empty { display: none; }
.lomake__ohje { margin: calc(var(--t3) * -1) 0 0; font-size: .82rem; color: var(--savu); max-width: none; }
/* Honeypot: pois näkyvältä alueelta JA pois tab-järjestyksestä (tabindex -1
   HTML:ssä). Botit joita ei ohjaa CSS täyttävät tämän silti usein. */
.lomake__hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lomake__tila { margin: 0; font-size: .94rem; line-height: 1.5; max-width: none; min-height: 1.3em; }
.lomake__tila[data-tila="kiitos"] { color: var(--oranssi-nosto); }
.lomake__tila[data-tila="virhe"] { color: var(--virhe); }
.lomake__tila[data-tila="korjaa"] { color: var(--virhe); }
.lomake__tila a { color: var(--kerma); text-decoration-color: var(--oranssi); text-underline-offset: 3px; }
#yl-laheta[disabled] { opacity: .6; cursor: not-allowed; }
#yl-laheta[disabled]:hover { background: var(--oranssi); transform: none; }

@media (max-width: 760px) {
  .lomake { max-width: none; }
  .lomake__rivi { grid-template-columns: 1fr; }
  #yl-laheta { width: 100%; }
}

/* ============ alatunniste ============ */
.alatunniste { padding-top: var(--t9); background: var(--muste-2); }
.alatunniste__ruudukko {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: var(--t8); padding-bottom: var(--t9);
}
.alatunniste__merkki { margin-bottom: var(--t5); }
.alatunniste__slogan {
  font-family: var(--display); font-stretch: 94%; font-weight: 700;
  font-size: 1.3rem; line-height: 1.2; max-width: 18ch;
}
.alatunniste__sarake p { font-size: .92rem; color: var(--savu); line-height: 1.85; }
.alatunniste__pohja {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--t4);
  padding-block: var(--t5);
  border-top: 1px solid var(--viiva);
}
.alatunniste__pohja p { font-size: .82rem; color: var(--savu); margin: 0; }
.alatunniste__huomio { font-style: italic; }

/* ============ scroll-reveal ============
   Oletustila on NÄKYVÄ. JS piilottaa vain sen mikä on latauksessa
   viewportin alapuolella. Sivu ei koskaan ole opacity 0. */
.on-piilossa { opacity: 0; transform: translateY(14px); }
.on-nakyvissa {
  opacity: 1; transform: none;
  transition: opacity 320ms var(--easing), transform 320ms var(--easing);
}

@keyframes saapuu { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__silmaluku, .hero__otsikko span, .hero__ingressi, .hero__lupaus, .mark, .hero__suora {
  animation: saapuu 300ms var(--easing) both;
}
.hero__silmaluku { animation-delay: 40ms; }
.hero__otsikko span:nth-child(1) { animation-delay: 100ms; }
.hero__otsikko span:nth-child(2) { animation-delay: 160ms; }
.hero__otsikko span:nth-child(3) { animation-delay: 220ms; }
.hero__ingressi { animation-delay: 280ms; }
.hero__lupaus { animation-delay: 340ms; }
.mark { animation-delay: 400ms; }
.hero__suora { animation-delay: 460ms; }

/* ============ responsiivisuus ============ */
@media (max-width: 1000px) {
  .juomat__parit { grid-template-columns: 1fr; }
  .ketju { grid-template-columns: repeat(2, 1fr); }
  .kalusto__ruudukko { grid-template-columns: 1fr; }
  .kalusto__kuva { order: 2; }
  .kalusto__kuva img { max-width: 340px; }
  .tuote__ruudukko { grid-template-columns: 1fr; }
  .tuote__kuva { max-width: 440px; aspect-ratio: 1 / 1; }
  .kirjanpito { grid-template-columns: 1fr; }
  .kirjanpito li:first-child { grid-column: auto; }
  .alatunniste__ruudukko { grid-template-columns: 1fr 1fr; }
}

/* Burger-valikko 960 px:iin asti (oli 760 px). Syy on mitattu laskemalla:
   logo + neljä linkkiä vievät noin 716 px, ja kielivalitsin lisää noin
   164 px, jolloin rivi ei mahtuisi 761–880 px:n leveydellä. Kaikki muut
   mobiilisäännöt pysyvät 760 px:n rajalla. Kielivalitsin on valikon
   viimeisenä rivinä; portissa se on näkyvissä kaikilla leveyksillä. */
@media (max-width: 960px) {
  .navi__linkit {
    position: fixed; inset: var(--navi-korkeus) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: var(--t4);
    padding: var(--t6) var(--t5) var(--t8);
    background: var(--muste);
    border-radius: 0 0 var(--p2) var(--p2);
    transform: translateY(-120%);
    transition: transform 260ms var(--easing);
  }
  .navi__linkit.on-auki { transform: translateY(0); }
  .navi__linkit a { font-size: 1.1rem; }
  .navi__cta { align-self: stretch; display: flex; justify-content: center; }
  .burger { display: grid; }
  .navi { background: rgba(18,14,9,.92); }
}

/* Portin kulmavalitsin ja keskitetty logo osuisivat samaan kohtaan alle
   ~444 px:n leveydellä, jos portin sisältö ulottuu lähelle yläreunaa.
   Yläväli = valitsimen yläväli + korkeus + väli. */
@media (max-width: 460px) {
  /* Valitsimen korkeus kierroksella 2: 44 px nappi + 2 × 4 px sisäväli
     + 2 × 1 px reuna = 54 px. */
  .portti { padding-top: calc(var(--t4) + 54px + var(--t4)); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .hero { min-height: 580px; }
  .hero__sisus { padding-top: calc(var(--navi-korkeus) + var(--t7)); padding-bottom: var(--t5); }
  .hero__otsikko { font-size: clamp(2.4rem, 12vw, 3.8rem); }
  .hero__napit { flex-direction: column; align-items: stretch; }
  .hero__napit .nappi { width: 100%; }
  .luvut dl { gap: var(--t4) var(--t7); }
  .luvut dd { font-size: 1.5rem; }
  .luvut dt { font-size: .78rem; }
  .mark[data-auki="true"] { padding: var(--t4); }
  .mark__lomake { flex-direction: column; align-items: stretch; gap: var(--t3); padding: var(--t3); border-radius: var(--p2); }
  .mark__syote { padding: var(--t2) var(--t3); }
  .mark__laheta { width: 100%; }

  .tuote { margin-inline: var(--t3); padding-inline: var(--t4); }
  .ketju { grid-template-columns: 1fr; gap: var(--t6); }
  .ketju__nro { font-size: 2rem; }
  .kaari__selitteet { grid-template-columns: 1fr; gap: var(--t6); }
  .tiedot > div { grid-template-columns: 1fr; gap: 2px; }
  .yhteys__kaista { min-height: 0; }
  .yhteys__sisus { padding: var(--t7) var(--t5); }
  .alatunniste__ruudukko { grid-template-columns: 1fr; gap: var(--t7); }
}

/* ============ liikkeen vähennys ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .on-piilossa { opacity: 1; transform: none; }
  .kaari__taytto { stroke-dashoffset: 0; }
}