/* Finlandia Marine – tyylit
   Paletti: syvä järvi, selkävesi, jää, usva, valkoinen */
:root {
  --syva: #0E2A47;
  --syva-2: #163A5E;
  --selka: #1F5A8C;
  --kirkas: #3D86C6;
  --jaa: #DCE8F2;
  --usva: #F4F8FB;
  --valko: #FFFFFF;
  --muste: #13263A;
  --harmaa: #55687B;
  --raja: #C9D8E6;
  --kansi: #E9F1F8;
  --kansi-viiva: #9DB7CF;

  --f-otsikko: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-teksti: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;

  --leveys: 1180px;
  --kapea: 720px;
  --r-pieni: 4px;
  --r-media: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  font-family: var(--f-teksti);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--muste);
  background: var(--valko);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--selka); text-underline-offset: 3px; }
a:hover { color: var(--syva); }
:focus-visible { outline: 3px solid var(--kirkas); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--f-otsikko);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  line-height: 1.12;
  color: var(--syva);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); font-weight: 750; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.35rem; font-weight: 650; }
h4 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0 0 1em; max-width: 68ch; }

.ohita { position: absolute; left: -999px; top: 0; background: var(--syva); color: #fff; padding: .6rem 1rem; z-index: 100; }
.ohita:focus { left: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sisa { max-width: var(--leveys); margin: 0 auto; padding: 0 1.25rem; }
.osio { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.osio--usva { background: var(--usva); }
.osio--syva { background: var(--syva); color: #DCE8F2; }
.osio--syva h2, .osio--syva h3 { color: #fff; }
.osio--syva a { color: #fff; }
.ingressi { font-size: 1.2rem; color: var(--harmaa); max-width: 60ch; }
.osio--syva .ingressi { color: #B9CDE0; }

/* ---------- Napit ---------- */
.nappi {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-otsikko); font-weight: 650; font-size: 1rem;
  padding: .85rem 1.4rem; border-radius: var(--r-pieni);
  background: var(--selka); color: #fff; text-decoration: none;
  border: 2px solid var(--selka); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nappi:hover { background: var(--syva); border-color: var(--syva); color: #fff; }
.nappi--haamu { background: transparent; color: var(--selka); }
.nappi--haamu:hover { background: var(--selka); color: #fff; }
.nappi--valko { background: #fff; color: var(--syva); border-color: #fff; }
.nappi--valko:hover { background: var(--jaa); border-color: var(--jaa); color: var(--syva); }
.nappi--reuna-valko { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.nappi--reuna-valko:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.napit { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ---------- Ylätunniste ---------- */
.yla {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--raja);
}
.yla .sisa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--syva); }
.logo svg { width: 38px; height: 38px; flex: none; }
.logo-teksti { font-family: var(--f-otsikko); font-variation-settings: "wdth" 120; font-stretch: 120%; font-weight: 750; font-size: 1.15rem; line-height: 1; letter-spacing: .01em; }
.logo-teksti small { display: block; font-family: var(--f-teksti); font-weight: 500; font-size: .72rem; color: var(--harmaa); letter-spacing: .02em; margin-top: .25rem; font-variation-settings: normal; font-stretch: normal; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: .25rem; }
.nav a, .nav .avaa { font-family: var(--f-otsikko); font-weight: 600; font-size: .98rem; color: var(--muste); text-decoration: none; padding: .55rem .75rem; border-radius: var(--r-pieni); display: block; }
.nav a:hover, .nav .avaa:hover { background: var(--usva); color: var(--selka); }
.nav a[aria-current="page"] { color: var(--selka); box-shadow: inset 0 -2px 0 var(--selka); border-radius: 0; }
.nav .avaa { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.nav .avaa svg { width: 12px; height: 12px; transition: transform .15s; }
.pudotus { position: relative; }
.pudotus-lista {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--raja); border-radius: var(--r-media);
  padding: .4rem; box-shadow: 0 14px 34px rgba(14,42,71,.14);
  display: none;
}
.pudotus-lista a { font-weight: 550; }
.pudotus-lista a span { display: block; font-family: var(--f-teksti); font-weight: 400; font-size: .82rem; color: var(--harmaa); }
.pudotus:hover .pudotus-lista, .pudotus:focus-within .pudotus-lista, .pudotus.auki .pudotus-lista { display: block; }
.pudotus.auki .avaa svg { transform: rotate(180deg); }
.yla-puh { font-family: var(--f-otsikko); font-weight: 650; white-space: nowrap; padding: .6rem 1rem; }
.valikko-nappi { display: none; background: none; border: 1px solid var(--raja); border-radius: var(--r-pieni); padding: .5rem .7rem; cursor: pointer; color: var(--syva); font-family: var(--f-otsikko); font-weight: 600; }

@media (max-width: 960px) {
  .valikko-nappi { display: inline-flex; }
  .yla-puh { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--raja); display: none; max-height: calc(100vh - 72px); overflow-y: auto; }
  .nav.auki { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; padding: .5rem 1.25rem 1.25rem; gap: 0; }
  .nav a, .nav .avaa { padding: .8rem .25rem; width: 100%; }
  .nav a[aria-current="page"] { box-shadow: none; }
  .pudotus-lista { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 1rem; min-width: 0; }
  .nav .avaa svg { display: none; }
  .nav .mobiili-puh { display: block; margin-top: .5rem; }
}
.nav .mobiili-puh { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; color: #fff; background: var(--syva); overflow: hidden; }
.hero-kuva { position: absolute; inset: 0; }
.hero-kuva img { width: 100%; height: 100%; object-fit: cover; }
.hero-kuva::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,42,71,.92) 0%, rgba(14,42,71,.7) 45%, rgba(14,42,71,.15) 100%); }
.hero .sisa { position: relative; z-index: 1; padding-top: clamp(4rem, 11vw, 8.5rem); padding-bottom: clamp(5.5rem, 12vw, 9.5rem); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero p { color: #D5E3F0; font-size: 1.2rem; max-width: 52ch; }
.hero-vesiraja { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; width: 100%; height: 48px; display: block; }
.hero--sivu .sisa { padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(4rem, 9vw, 6.5rem); }
.hero--sivu h1 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 22ch; }

.polku { font-size: .9rem; margin-bottom: 1.2rem; color: #B9CDE0; }
.polku a { color: #DCE8F2; }
.polku ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.polku li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }

/* ---------- Kuvan paikka (kunnes oikea kuva lisätään) ---------- */
.kuvapaikka {
  position: relative; background: linear-gradient(160deg, #24507A 0%, #0E2A47 100%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  min-height: 260px; color: #B9CDE0; font-size: .85rem; overflow: hidden;
}
.kuvapaikka svg.kaislat { position: absolute; right: 6%; bottom: 0; height: 78%; width: auto; opacity: .55; }
.kuvapaikka span { position: relative; padding: .8rem 1rem; }
.hero-kuva .kuvapaikka { position: absolute; inset: 0; min-height: 0; }
.hero-kuva .kuvapaikka span { display: none; }

.media { border-radius: var(--r-media); overflow: hidden; background: var(--jaa); }
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.media .kuvapaikka { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--r-media); }

/* ---------- Mallisto mittakaavassa ---------- */
.mallisto { margin-top: 2.5rem; border-top: 1px solid var(--raja); }
.mallisto-ryhma { padding: 1.25rem 0 .5rem; border-bottom: 1px solid var(--raja); }
.mallisto-ryhma h3 { font-size: 1.05rem; margin: 0 0 .6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mallisto-ryhma h3 a { font-family: var(--f-teksti); font-weight: 500; font-size: .92rem; font-variation-settings: normal; font-stretch: normal; }
.mallirivi { display: grid; grid-template-columns: 8.5rem 1fr 6.5rem; align-items: center; gap: 1rem; padding: .35rem .5rem; margin: 0 -.5rem; text-decoration: none; color: inherit; border-radius: var(--r-pieni); }
.mallirivi:hover { background: var(--usva); }
.mallirivi:hover .mallirivi-nimi { color: var(--selka); }
.mallirivi-nimi { font-family: var(--f-otsikko); font-weight: 650; color: var(--syva); }
.mallirivi-nimi small { display: block; font-family: var(--f-teksti); font-weight: 400; color: var(--harmaa); font-size: .82rem; }
.mallirivi-hinta { text-align: right; font-family: var(--f-otsikko); font-weight: 650; white-space: nowrap; }
.mallirivi svg { width: 100%; height: auto; display: block; }
.mittanauha { display: grid; grid-template-columns: 8.5rem 1fr 6.5rem; gap: 1rem; padding: .6rem 0 0; color: var(--harmaa); font-size: .8rem; }
.mittanauha svg { width: 100%; height: auto; }
@media (max-width: 640px) {
  .mallirivi, .mittanauha { grid-template-columns: 1fr auto; gap: .2rem .75rem; }
  .mallirivi svg { grid-column: 1 / -1; grid-row: 2; }
  .mittanauha > :first-child, .mittanauha > :last-child { display: none; }
  .mittanauha svg { grid-column: 1 / -1; }
}

/* ---------- Ruudukot ---------- */
.kaksi { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.kaksi--kaanteinen > :first-child { order: 2; }
@media (max-width: 860px) { .kaksi { grid-template-columns: 1fr; } .kaksi--kaanteinen > :first-child { order: 0; } }

.tyypit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 900px) { .tyypit { grid-template-columns: 1fr; } }
.tyyppi { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tyyppi .media { margin-bottom: 1rem; }
.tyyppi h3 { margin-bottom: .3rem; }
.tyyppi:hover h3 { color: var(--selka); text-decoration: underline; text-underline-offset: 4px; }
.tyyppi p { color: var(--harmaa); margin-bottom: .6rem; }
.tyyppi .alkaen { margin-top: auto; font-family: var(--f-otsikko); font-weight: 650; color: var(--syva); }

.edut { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem 2.5rem; margin-top: 2.5rem; }
.etu { border-top: 2px solid var(--selka); padding-top: 1rem; }
.osio--syva .etu { border-top-color: var(--kirkas); }
.etu h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.etu p { margin: 0; color: var(--harmaa); }
.osio--syva .etu p { color: #B9CDE0; }

/* ---------- Valintaopas ---------- */
.taulukko-kehys { overflow-x: auto; margin: 2rem 0 0; border: 1px solid var(--raja); border-radius: var(--r-media); background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--raja); vertical-align: top; }
thead th { background: var(--usva); font-family: var(--f-otsikko); font-weight: 650; color: var(--syva); white-space: nowrap; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--syva); white-space: nowrap; }
td.luku, th.luku { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody th a { color: var(--syva); }

/* ---------- Mallikortit ---------- */
.mallit { margin-top: 3rem; display: grid; gap: 0; }
.malli { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: 3rem 0; border-top: 1px solid var(--raja); scroll-margin-top: 90px; }
@media (max-width: 860px) { .malli { grid-template-columns: 1fr; } }
.malli-kuvat { display: grid; gap: 1rem; align-content: start; }
.kaavio { margin: 0; background: var(--usva); border: 1px solid var(--raja); border-radius: var(--r-media); padding: 1rem 1rem .6rem; }
.kaavio svg { width: 100%; height: auto; display: block; }
.kaavio figcaption { font-size: .8rem; color: var(--harmaa); margin-top: .5rem; }
.malli h3 { font-size: 1.6rem; margin-bottom: .4rem; }
.malli-tunnus { font-size: .95rem; color: var(--harmaa); margin-bottom: 1rem; }
.speksit { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 1.25rem 0; padding: 1rem 0; border-top: 1px solid var(--raja); border-bottom: 1px solid var(--raja); font-size: .97rem; }
.speksit dt { color: var(--harmaa); }
.speksit dd { margin: 0; color: var(--muste); font-weight: 500; }
@media (max-width: 480px) { .speksit { grid-template-columns: 1fr; gap: 0; } .speksit dd { margin-bottom: .55rem; } }
.ominaisuudet { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.ominaisuudet li { background: var(--jaa); color: var(--syva); font-size: .86rem; font-weight: 500; padding: .25rem .65rem; border-radius: 999px; }
.hinta { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 .3rem; }
.hinta-summa { font-family: var(--f-otsikko); font-variation-settings: "wdth" 112; font-stretch: 112%; font-weight: 750; font-size: 2rem; color: var(--syva); }
.hinta-alv { color: var(--harmaa); font-size: .9rem; }
.ei-sisalla { font-size: .92rem; color: var(--harmaa); margin-bottom: 1.25rem; }
.huomio { font-size: .92rem; background: var(--usva); border-left: 3px solid var(--kirkas); padding: .6rem .9rem; margin: 0 0 1rem; }

/* ---------- Tarvikkeet ---------- */
.tarvikkeet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 2.5rem; margin-top: 2rem; }
.tarvike { padding: 1.1rem 0; border-top: 1px solid var(--raja); }
.tarvike h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.tarvike p { margin: 0; color: var(--harmaa); font-size: .97rem; }

/* ---------- Jalat ---------- */
.jalat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; align-items: start; }
@media (max-width: 700px) { .jalat { grid-template-columns: repeat(2, 1fr); } }
.jalka { border: 1px solid var(--raja); border-radius: var(--r-media); padding: 1rem; background: #fff; }
.jalka svg { width: 100%; height: 200px; display: block; margin-bottom: .6rem; }
.jalka strong { font-family: var(--f-otsikko); font-size: 1.4rem; color: var(--syva); display: block; }
.jalka span { display: block; font-size: .9rem; color: var(--harmaa); min-height: 2.8em; }

/* ---------- UKK ---------- */
.ukk { margin-top: 2rem; max-width: 820px; }
.ukk details { border-top: 1px solid var(--raja); }
.ukk details:last-child { border-bottom: 1px solid var(--raja); }
.ukk summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-family: var(--f-otsikko); font-weight: 650; font-size: 1.1rem; color: var(--syva); position: relative; }
.ukk summary::-webkit-details-marker { display: none; }
.ukk summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--selka); transition: transform .2s; }
.ukk details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ukk details > div { padding: 0 0 1.2rem; color: var(--muste); }
.ukk details > div p:last-child { margin-bottom: 0; }

/* ---------- Galleria ---------- */
.galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .75rem; margin-top: 2rem; }
.galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-pieni); }

/* ---------- Lomake ---------- */
.lomake { display: grid; gap: 1.1rem; }
.rivi2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .rivi2 { grid-template-columns: 1fr; } }
.kentta label, .kentta legend { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; color: var(--syva); }
.kentta input[type=text], .kentta input[type=email], .kentta input[type=tel], .kentta select, .kentta textarea {
  width: 100%; font: inherit; color: var(--muste); padding: .75rem .85rem;
  border: 1px solid #A9BFD3; border-radius: var(--r-pieni); background: #fff;
}
.kentta textarea { min-height: 140px; resize: vertical; }
.kentta input:focus, .kentta select:focus, .kentta textarea:focus { outline: 3px solid rgba(61,134,198,.35); border-color: var(--selka); }
fieldset.kentta { border: 0; padding: 0; margin: 0; }
.valinnat { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.valinnat label { font-weight: 400; display: inline-flex; gap: .45rem; align-items: center; color: var(--muste); margin: 0; }
.valinnat input { width: 18px; height: 18px; accent-color: var(--selka); }
.apu { font-size: .85rem; color: var(--harmaa); margin-top: .3rem; }
.lomake-tila { padding: .9rem 1rem; border-radius: var(--r-pieni); display: none; }
.lomake-tila.ok { display: block; background: #E3F2EA; color: #134D2E; }
.lomake-tila.virhe { display: block; background: #FBE9E7; color: #7A1D12; }
.botti { display: none; }

.yhteys-lista { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
.yhteys-lista li { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; }
.yhteys-lista span { color: var(--harmaa); }
.kartta { border: 0; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-media); background: var(--jaa); }

/* ---------- Tekstisivut ---------- */
.teksti { max-width: var(--kapea); }
.teksti h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.teksti ul { padding-left: 1.2rem; }

/* ---------- CTA-kaista ---------- */
.kaista { background: var(--selka); color: #fff; }
.kaista .sisa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2.75rem; padding-bottom: 2.75rem; }
.kaista h2 { color: #fff; margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.kaista p { margin: .4rem 0 0; color: #DCE8F2; }
.kaista .napit { margin: 0; }

/* ---------- Alatunniste ---------- */
.ala { background: var(--syva); color: #B9CDE0; font-size: .95rem; }
.ala a { color: #fff; }
.ala .sisa { padding-top: 3.5rem; padding-bottom: 2rem; }
.ala-ruudut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .ala-ruudut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ala-ruudut { grid-template-columns: 1fr; } }
.ala h4 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.ala ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.ala .logo { color: #fff; margin-bottom: 1rem; }
.ala .logo-teksti small { color: #B9CDE0; }
.ala-pohja { border-top: 1px solid rgba(220,232,242,.18); margin-top: 2.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; font-size: .85rem; }

@media (max-width: 640px) {
  [role="tablist"] { gap: .4rem; }
  [role="tablist"] .nappi { padding: .5rem .8rem; font-size: .9rem; }
}

.havainne { margin: 0; }
.havainne .media img { aspect-ratio: 16 / 10; }
.havainne figcaption { font-size: .8rem; color: var(--harmaa); margin-top: .5rem; }
.tarvike { display: flex; gap: 1rem; align-items: flex-start; }
.tarvike-kuva { width: 72px; height: 72px; flex: none; border: 1px solid var(--raja); border-radius: var(--r-pieni); background: #fff; object-fit: contain; }
.jalka-osta { display: inline-block; margin-top: .6rem; font-weight: 600; font-size: .92rem; }
.hero--sivu .hero-kuva .kuvapaikka svg.kaislat { opacity: .35; }
.tarvike-kuvat { display: flex; flex-direction: column; gap: .4rem; flex: none; }