/* RSK-asennus – pohjana mockup 1 "Rohkea", värit ja otsikkofontti logon mukaan:
   tummansininen pohja, vaaleansininen korostus, kermanvalkoinen teksti; otsikot Barlow Condensed */

/* Barlow ja Barlow Condensed (SIL OFL 1.1), latin-osajoukko. Omalta palvelimelta, ettei kävijän IP-osoite mene Googlelle. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontit/barlow-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(fontit/barlow-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontit/barlow-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontit/barlow-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url(fontit/barlow-condensed-800-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(fontit/barlow-condensed-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontit/barlow-condensed-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url(fontit/barlow-condensed-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Varafontit mitoitettu Barlow-leveyksille (mitattu 25.10.2026), ettei teksti hyppää, kun oikea fontti latautuu (CLS) */
@font-face { font-family: "Barlow Varafontti"; font-weight: 400 500; src: local("Arial"), local("ArialMT"), local("Roboto"); size-adjust: 96.9%; ascent-override: 103.2%; descent-override: 20.6%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Varafontti"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"); size-adjust: 91.4%; ascent-override: 109.4%; descent-override: 21.9%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Varafontti"; font-weight: 600 800; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"); size-adjust: 70.4%; ascent-override: 142%; descent-override: 28.4%; line-gap-override: 0%; }

:root {
  --navy: #0c2546;
  --navy-2: #1a3d68;
  --navy-3: #081b34;
  --sininen: #acd1e2;
  --sininen-2: #c8e2ee;
  --sininen-tumma: #2e6b98;
  --kerma: #f6f1e6;
  --valko: #fff;
  --harmaa: #edf4f8;
  --teksti: #0b1a2e;
  --hento: #56657a;
  --virhe: #c0321e;
  --sivureuna: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: Barlow, "Barlow Varafontti", system-ui, sans-serif; color: var(--teksti); background: var(--valko); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }
.k { max-width: 1280px; margin: 0 auto; padding: 0 var(--sivureuna); }
.otsikko { font-family: "Barlow Condensed", "Barlow Condensed Varafontti", sans-serif; font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.005em; }
.otsikko em { font-style: italic; color: var(--sininen); }
[hidden] { display: none !important; }
.nakymaton { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ohita { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--sininen); color: var(--navy); font-weight: 700; padding: 10px 14px; }
.ohita:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sininen-tumma); outline-offset: 3px; }
.yla :focus-visible, .hero :focus-visible, .tyot :focus-visible, .ala :focus-visible, .katselin :focus-visible { outline-color: var(--sininen); }

/* Napit */
.nappi { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; padding: 17px 26px; border: 0; cursor: pointer; transition: background .2s, color .2s; }
.nappi svg { width: 20px; height: 20px; fill: currentColor; }
.nappi.vaalea { background: var(--sininen); color: var(--navy); }
.nappi.vaalea:hover { background: var(--sininen-2); }
.nappi.reuna { border: 2px solid #fff; color: #fff; padding: 15px 24px; }
.nappi.reuna:hover { background: #fff; color: var(--navy); }

/* Yläpalkki */
.yla { position: fixed; inset: 0 0 auto; z-index: 30; color: #fff; transition: background .25s, box-shadow .25s; }
.yla.kiintea, .yla.auki { background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
/* Läpinäkyvän palkin alle tumma liuku, ettei logo huku vaaleaan taivaaseen */
.yla::before { content: ""; position: absolute; inset: 0 0 -48px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(12,37,70,.6), rgba(12,37,70,0)); transition: opacity .25s; }
.yla.kiintea::before, .yla.auki::before { opacity: 0; }
.yla .k { display: flex; align-items: center; height: 76px; gap: 28px; }
/* Läpinäkyvä logo; varjo pitää vaalean tekstin luettavana valoisan kuvan päällä */
.logo { display: block; flex-shrink: 0; text-decoration: none; }
.logo img { height: 64px; width: auto; transition: height .25s; filter: drop-shadow(0 1px 6px rgba(12,37,70,.55)); }
.yla.kiintea .logo img, .yla.auki .logo img { height: 54px; filter: none; }
.valikko { margin-left: auto; display: flex; align-items: center; gap: 26px; font-weight: 600; }
.valikko a { text-decoration: none; }
.valikko a:hover { color: var(--sininen); }
.valikko-tarjous { display: none; }
.puh { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; border: 2px solid var(--sininen); padding: 8px 14px; white-space: nowrap; transition: background .2s, color .2s; }
.puh svg { width: 16px; height: 16px; fill: currentColor; }
.puh:hover { background: var(--sininen); color: var(--navy); }
.valikkonappi { display: none; width: 46px; height: 46px; background: none; border: 0; color: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.valikkonappi i { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.yla.auki .valikkonappi i:nth-child(2) { transform: translateY(8px) rotate(45deg); }
.yla.auki .valikkonappi i:nth-child(3) { opacity: 0; }
.yla.auki .valikkonappi i:nth-child(4) { transform: translateY(-8px) rotate(-45deg); }

/* Hero */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--navy); }
.hero-kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; animation: zoom 18s ease-out both; }
@keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,37,70,.92) 0%, rgba(12,37,70,.7) 45%, rgba(12,37,70,.15) 100%); }
.hero .k { position: relative; z-index: 1; padding-bottom: clamp(48px, 8vh, 96px); padding-top: 140px; width: 100%; }
.hero h1 { font-size: clamp(54px, 9vw, 132px); max-width: 9.5em; color: var(--kerma); }
/* Rajaus nousuanimaatiota varten; yläpehmuste pitää Ä/Ö-pisteet näkyvissä tiukalla rivivälillä */
.hero h1 .rivi { display: block; overflow: hidden; padding: .14em .06em 0 0; margin-top: -.14em; }
.hero h1 .rivi > * { display: inline-block; animation: nousu .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 .rivi:nth-child(2) > * { animation-delay: .1s; }
.hero h1 .rivi:nth-child(3) > * { animation-delay: .2s; }
@keyframes nousu { from { transform: translateY(105%); } to { transform: none; } }
.ingressi { margin-top: 22px; font-size: clamp(18px, 1.6vw, 21px); max-width: 34em; color: rgba(255,255,255,.9); border-left: 3px solid var(--sininen); padding-left: 18px; }
.napit { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Lyhyesti-rivi heron alaosassa: pienet tekstit ilman taustaa, ohuet erotinviivat */
.hero-edut { list-style: none; margin-top: clamp(36px, 5vh, 56px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); display: grid; grid-template-columns: repeat(4, auto); justify-content: start; max-width: 760px; }
.hero-edut li { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.22); }
.hero-edut li:first-child { padding-left: 0; border-left: 0; }
.hero-edut b, .hero-edut span { display: block; font-weight: 400; font-size: 15px; line-height: 1.35; color: rgba(255,255,255,.85); }
.hero-edut span { margin-top: 2px; }

/* Yhteiset osio-otsikot */
.ots-rivi { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.ots-rivi h2 { font-size: clamp(44px, 6vw, 84px); }
.ots-rivi p { max-width: 30em; color: var(--hento); }

/* Palvelut */
.palvelut { padding: clamp(72px, 10vw, 130px) 0; }
.ryhmat { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ryhma { background: var(--harmaa); padding: 28px 24px 26px; border-top: 6px solid var(--navy); display: flex; flex-direction: column; transition: transform .2s, border-color .2s; }
.ryhma:hover { transform: translateY(-4px); border-color: var(--sininen-tumma); }
.ryhma .nro { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 18px; color: var(--hento); }
.ryhma h3 { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 34px; text-transform: uppercase; line-height: 1; margin-top: 6px; }
.ryhma h3 a { color: inherit; text-decoration: none; }
.ryhma h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.ryhma ul { list-style: none; margin: 18px 0 22px; }
.ryhma li { padding: 9px 0; border-top: 1px solid rgba(14,39,71,.12); font-weight: 600; }
.ryhma-linkki { margin-top: auto; font-weight: 700; color: var(--navy-2); text-decoration: none; }
.ryhma-linkki::after { content: " →"; transition: margin .2s; }
.ryhma-linkki:hover { text-decoration: underline; text-underline-offset: 4px; }
.lisa { margin-top: 26px; color: var(--hento); display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; }
.lisa a { color: var(--navy); font-weight: 700; }
.lisa .lisa-palvelut { text-decoration: none; border-bottom: 2px solid var(--sininen); padding-bottom: 2px; }
.lisa .lisa-palvelut:hover { border-color: var(--navy); }

/* Työt */
.tyot { background: var(--navy); color: #fff; padding: clamp(72px, 10vw, 130px) 0; }
.tyot .ots-rivi p { color: rgba(255,255,255,.7); }
.galleria { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 220px; gap: 10px; }
.galleria button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--navy-3); cursor: zoom-in; overflow: hidden; }
.galleria img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galleria button:hover img { transform: scale(1.05); }
.galleria span { position: absolute; left: 0; bottom: 0; background: var(--sininen); color: var(--navy); font-weight: 700; font-size: 14px; padding: 6px 10px; }
.g1 { grid-column: span 4; grid-row: span 2; }
/* Neljä kuvaa: keittiö + portaat ylärivillä, julkisivu ja pergola puoliksi alarivillä */
.g2 { grid-column: span 2; grid-row: span 2; }
.g3, .g5 { grid-column: span 3; grid-row: span 2; }

/* Miten toimimme */
.miksi { padding: clamp(72px, 10vw, 130px) 0; }
.miksi .k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.miksi h2 { font-size: clamp(40px, 5vw, 72px); }
.miksi-kuva { position: relative; isolation: isolate; }
.miksi-kuva img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.miksi-kuva::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--navy); z-index: -1; }
.askeleet { margin-top: 30px; counter-reset: a; list-style: none; }
.askeleet li { counter-increment: a; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; padding: 16px 0; border-top: 2px solid var(--harmaa); }
.askeleet li::before { content: counter(a); grid-row: span 2; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 40px; line-height: 1; color: var(--navy); background: var(--sininen); display: grid; place-items: center; height: 56px; }
.askeleet b { font-size: 19px; }
.askeleet span { color: var(--hento); }
.miksi .askeleet li::before { background: var(--navy); color: var(--kerma); }

/* Roni: yrittäjän esittely etusivulla ja yrityssivulla */
.roni { background: var(--kerma); padding: clamp(72px, 10vw, 130px) 0; }
.roni .k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.roni-kuva { position: relative; isolation: isolate; max-width: 480px; }
.roni-kuva img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.roni-kuva::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; background: var(--navy); z-index: -1; }
.roni h2 { font-size: clamp(44px, 6vw, 84px); color: var(--navy); }
.roni .otsikko em { color: var(--sininen-tumma); }
.roni-teksti { max-width: 36em; }
.roni-teksti p { margin-top: 16px; font-size: 18px; }
.roni-teksti .roni-ingressi { margin-top: 26px; font-size: clamp(21px, 2vw, 25px); font-weight: 600; line-height: 1.35; color: var(--navy); }
.roni-allekirjoitus { display: flex; flex-direction: column; gap: 2px; margin-top: 30px !important; padding-top: 18px; border-top: 2px solid rgba(12,37,70,.15); }
.roni-allekirjoitus b { font-family: "Barlow Condensed", "Barlow Condensed Varafontti", sans-serif; font-weight: 800; font-size: 26px; text-transform: uppercase; color: var(--navy); line-height: 1.1; }
.roni-allekirjoitus span { font-size: 16px; color: var(--hento); }
.roni-allekirjoitus a { color: var(--navy); font-weight: 600; }
.roni-linkki { display: inline-block; margin-top: 22px; color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--sininen-tumma); padding-bottom: 2px; }
.roni-linkki:hover { border-color: var(--navy); }
/* Miksi valita RSK: etusivun erottautumiskohdat, sama dl-rakenne kuin yrityssivun periaatteissa */
.erot { background: var(--navy); color: #fff; padding: clamp(72px, 10vw, 130px) 0; }
.erot .k { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 88px); align-items: start; }
.erot h2 { font-size: clamp(44px, 6vw, 84px); }
.erot-alku p { margin-top: 20px; font-size: 18px; color: rgba(255,255,255,.75); max-width: 22em; }
.erot-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.erot-lista div { padding: 22px 0 30px; border-top: 2px solid var(--sininen); }
.erot-lista dt { font-family: "Barlow Condensed", "Barlow Condensed Varafontti", sans-serif; font-weight: 800; font-size: clamp(26px, 2.4vw, 32px); text-transform: uppercase; line-height: 1; }
.erot-lista dd { margin-top: 12px; color: rgba(255,255,255,.78); }
@media (max-width: 1080px) {
  .erot .k { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .erot-lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .roni .k { grid-template-columns: minmax(0, 1fr); }
  .roni-kuva { margin-left: 18px; }
}
@media (max-width: 640px) {
  .roni-kuva { max-width: 340px; margin-left: 10px; }
  .roni-kuva::before { inset: -10px 10px 10px -10px; }
  .roni-teksti p { font-size: 17px; }
}

/* Kotitalousvähennys */
.vahennys { background: var(--sininen); color: var(--navy); padding: clamp(48px, 6vw, 72px) 0; }
.vahennys .k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 56px; align-items: center; }
.vahennys h2 { font-size: clamp(38px, 4.6vw, 64px); grid-row: span 2; }
.vahennys p { font-size: 18px; font-weight: 500; }
.vahennys a { font-weight: 700; }

/* Yhteys */
.yhteys { background: var(--harmaa); padding: clamp(72px, 10vw, 130px) 0; }
.yhteys .k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.yhteys h2 { font-size: clamp(44px, 6vw, 84px); }
.yhteys-tiedot > p { margin-top: 18px; color: var(--hento); max-width: 28em; }
.isonro { display: block; margin-top: 28px; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(48px, 6vw, 80px); text-decoration: none; color: var(--navy); line-height: 1; }
.isonro:hover { color: var(--navy-2); }
.sp { display: inline-block; margin-top: 10px; font-weight: 600; overflow-wrap: anywhere; }
.ehdot { margin-top: 30px; list-style: none; display: grid; gap: 8px; font-weight: 600; }
.ehdot li::before { content: "✓ "; color: var(--navy); font-weight: 800; }

.lomake { background: #fff; padding: clamp(22px, 3vw, 38px); border-top: 6px solid var(--sininen); }
.aiheet { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.aiheet legend { font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.aiheet label { position: relative; cursor: pointer; }
.aiheet input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.aiheet span { display: inline-block; padding: 9px 14px; border: 2px solid #cfd6df; font-weight: 600; font-size: 15px; transition: background .15s, border-color .15s; }
.aiheet label:hover span { border-color: var(--navy); }
.aiheet input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.aiheet input:checked + span::before { content: "✓ "; color: var(--sininen); }
.aiheet input:focus-visible + span { outline: 3px solid var(--sininen-tumma); outline-offset: 2px; }
.rivit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.rivit label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; min-width: 0; }
.koko { grid-column: 1 / -1; }
.rivit input, .rivit textarea { font: inherit; font-weight: 400; border: 2px solid #cfd6df; border-radius: 0; padding: 12px; background: #fff; width: 100%; color: var(--teksti); }
.rivit textarea { resize: vertical; }
.rivit input:focus, .rivit textarea:focus { outline: none; border-color: var(--navy); }
[aria-invalid="true"] { border-color: var(--virhe) !important; }
.virhe { color: var(--virhe); font-weight: 600; margin-top: 14px; }
.lomake .nappi { margin-top: 20px; width: 100%; }
.tietosuoja { margin-top: 10px; font-size: 14px; color: var(--hento); text-align: center; }
.tietosuoja a { color: var(--navy); }
.hunaja { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.kiitos b { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 40px; text-transform: uppercase; display: block; line-height: 1; margin-bottom: 10px; }
.kiitos p + p { margin-top: 8px; }
.kiitos:focus { outline: none; }

/* Alapalkki */
.ala { background: var(--navy); color: rgba(255,255,255,.75); font-size: 15.5px; }
.ala .k:first-child { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr; gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.ala-merkki p { margin-top: 14px; max-width: 20em; }
.ala .ala-arvio { display: inline-block; margin-top: 14px; padding: 6px 0; color: var(--sininen); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ala .ala-arvio:hover { color: #fff; }
.ala h2 { color: #fff; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 700; text-transform: uppercase; font-size: 18px; letter-spacing: .04em; margin-bottom: 10px; }
.ala a { text-decoration: none; overflow-wrap: anywhere; }
/* Allekkäiset linkit saavat kosketusalaa (väh. 24 px); rivivälin kasvu ei haittaa. */
.ala p a { display: inline-block; padding: 5px 0; }
.ala a:hover { color: var(--sininen); }
.ala .logo { display: inline-block; }
.ala .logo img { height: 132px; filter: none; }
.ala-rivi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; padding-bottom: 18px; font-size: 14px; }
.ala-rivi > * { padding: 6px 0; }
.ala-rivi .ala-toteutus a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.ala-rivi .ala-toteutus a:hover { text-decoration-color: currentColor; }

/* Kuvakatselin */
.katselin { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; }
.katselin::backdrop { background: rgba(6, 15, 28, .94); }
.katselin[open] { display: grid; place-items: center; }
.katselin img { max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.katselin p { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); background: var(--sininen); color: var(--navy); font-weight: 700; padding: 6px 12px; }
.katselin button { position: absolute; background: var(--navy); color: #fff; border: 0; width: 52px; height: 52px; font-size: 34px; line-height: 1; cursor: pointer; }
.katselin button:hover { background: var(--sininen); color: var(--navy); }
.kiinni { top: 16px; right: 16px; }
.selaa { top: 50%; transform: translateY(-50%); }
.edellinen { left: 16px; }
.seuraava { right: 16px; }

/* Alasivut: palvelut, yritys, yhteystiedot */
.valikko a[aria-current="page"] { color: var(--sininen); }
.sivu-alku { position: relative; background: var(--navy); color: #fff; padding: 150px 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.sivu-alku .k { position: relative; z-index: 1; }
.sivu-alku h1 { font-size: clamp(56px, 9vw, 128px); color: var(--kerma); margin-top: 18px; }
.sivu-alku-kuva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kuvalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,37,70,.95) 0%, rgba(12,37,70,.8) 50%, rgba(12,37,70,.35) 100%); }
.murut { display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; color: rgba(255,255,255,.7); }
.murut a { text-decoration: none; padding: 4px 0; }
.murut a:hover { color: var(--sininen); }

.hyppy { list-style: none; margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.25); }
.hyppy li + li { border-left: 1px solid rgba(255,255,255,.25); }
.hyppy a { display: block; height: 100%; padding: 18px 16px 6px; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(22px, 2.3vw, 32px); text-transform: uppercase; line-height: 1; text-decoration: none; }
.hyppy li:first-child a { padding-left: 0; }
.hyppy span { display: block; font-size: 16px; color: var(--sininen); margin-bottom: 8px; }
.hyppy a:hover { color: var(--sininen); }

.palvelu { padding: clamp(64px, 9vw, 120px) 0; }
.palvelu .k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.palvelu.kaanteinen { background: var(--harmaa); }
.palvelu.kaanteinen .palvelu-kuva { order: 2; }
.palvelu-kuva img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.palvelu-teksti .nro { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 20px; color: var(--sininen-tumma); }
.palvelu h2 { font-size: clamp(48px, 6vw, 88px); margin-top: 4px; }
.palvelu-teksti > p { margin-top: 18px; max-width: 34em; font-size: 18px; }
.tyolista { list-style: none; margin: 24px 0; }
.tyolista li { padding: 11px 0; border-top: 1px solid rgba(14,39,71,.14); font-weight: 600; font-size: 18px; }
.tyolista li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 12px; vertical-align: middle; background: var(--sininen-tumma); }
.hyva { margin-bottom: 26px; padding: 16px 18px; background: var(--harmaa); border-left: 4px solid var(--sininen-tumma); font-size: 16px; max-width: 36em; }
.hyva b { display: block; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.kaanteinen .hyva { background: #fff; }
.palvelu .ryhma-linkki { display: inline-block; font-size: 18px; }
.palvelu.tumma { background: var(--navy); color: #fff; }
.tumma .k { align-items: start; }
.tumma .nro, .tumma .ryhma-linkki { color: var(--sininen); }
.tumma .palvelu-teksti > p { color: rgba(255,255,255,.85); margin-bottom: 26px; }
.tumma .tyolista { margin-top: 0; }
.tumma .tyolista li { border-color: rgba(255,255,255,.16); padding: 16px 0; font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); text-transform: uppercase; line-height: 1.05; }
.tumma .tyolista li::before { background: var(--sininen); width: 10px; height: 10px; }
.tumma .hyva { background: var(--navy-2); border-color: var(--sininen); color: rgba(255,255,255,.9); }

.muut { padding: clamp(56px, 7vw, 96px) 0; }
.muut .k { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 20px 48px; align-items: center; }
.muut h2 { font-size: clamp(38px, 4.6vw, 64px); }
.muut p { color: var(--hento); font-size: 18px; }

.loppu { background: var(--kerma); color: var(--navy); padding: clamp(64px, 9vw, 120px) 0; }
.loppu h2 { font-size: clamp(34px, 4vw, 56px); max-width: 16em; }
.loppu .isonro { font-size: clamp(56px, 10vw, 148px); margin-top: 14px; }
.loppu p { margin-top: 18px; font-size: 18px; color: var(--hento); }
.loppu p a { color: var(--navy); font-weight: 700; }

.jaettu .k { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.alku-kuvat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.alku-kuvat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.alku-kuvat img:last-child { margin-top: 56px; }

.tapa, .tiedot { padding: clamp(72px, 10vw, 130px) 0; }
.tapa h2, .tiedot h2 { font-size: clamp(44px, 6vw, 84px); }
.periaatteet { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.periaatteet div { padding: 22px 0 26px; border-top: 2px solid var(--navy); }
.periaatteet dt { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); text-transform: uppercase; line-height: 1; }
.periaatteet dd { margin-top: 10px; color: var(--hento); max-width: 30em; }

.alue { background: var(--sininen); color: var(--navy); padding: clamp(64px, 8vw, 110px) 0; }
.alue .k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.alue h2 { font-size: clamp(40px, 5vw, 72px); }
.alue p { margin-top: 18px; font-size: 18px; font-weight: 500; max-width: 32em; }
.paikat { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.paikat li { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 700; font-size: 26px; text-transform: uppercase; line-height: 1; padding: 9px 14px; border: 2px solid var(--navy); }
.paikat .koti { background: var(--navy); color: var(--kerma); }

.tietorivit { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; border-top: 2px solid var(--navy); }
.tietorivit div { padding: 16px 0; border-bottom: 1px solid #d5dde6; }
.tietorivit dt { font-size: 14px; font-weight: 600; color: var(--hento); text-transform: uppercase; letter-spacing: .05em; }
.tietorivit dd { margin-top: 2px; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.tietorivit a { text-underline-offset: 3px; text-decoration-color: var(--sininen-tumma); }
.arvio + .tiedot { background: var(--harmaa); }
.arvio + .tiedot .tietorivit div { border-color: #cfd8e2; }

.yhteys-alku { padding-bottom: clamp(40px, 5vw, 64px); }
/* Yhteystietosivun käyntikortti: Ronin kuva, nimi, puhelin ja sähköposti */
.kortti { margin-top: 44px; max-width: 820px; display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(24px, 3.4vw, 44px); background: var(--kerma); color: var(--teksti); box-shadow: 0 24px 60px rgba(3,10,22,.4); }
.kortti-kuva { grid-row: 1 / 3; width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: 50% 15%; }
.kortti-nimi { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 0; }
.kortti-otsikko { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(32px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; color: var(--navy); }
.kortti-rooli { margin-top: 6px; color: var(--hento); }
.kortti-tiedot { padding: 18px clamp(20px, 3vw, 36px) clamp(22px, 3vw, 32px) 0; }
.kortti-tiedot div { padding: 14px 0; border-top: 1px solid rgba(12,37,70,.15); }
.kortti-tiedot dt { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--hento); }
.kortti-tiedot dd { margin-top: 2px; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.kortti-tiedot a { color: var(--navy); text-decoration: none; }
.kortti-tiedot a:hover { color: var(--sininen-tumma); }
.kortti-tiedot .kortti-puh { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(36px, 4vw, 52px); line-height: 1; }
@media (max-width: 640px) {
  .kortti { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto; column-gap: 16px; padding: 18px; }
  .kortti-kuva { grid-row: auto; min-height: 0; height: 96px; }
  .kortti-nimi { padding: 0; align-self: center; }
  .kortti-otsikko { font-size: 28px; }
  .kortti-rooli { font-size: 15px; }
  .kortti-tiedot { grid-column: 1 / -1; padding: 16px 0 0; }
}

/* Pyöreä profiilikuva nimen vieressä; ainoa pyöreä elementti sivustolla, koska kyse on henkilöstä */
.yhteys .askeleet li { border-color: #d5dde6; }
.kuvavinkki { margin-top: 20px; font-size: 15px; color: var(--hento); }
.kuvavinkki a { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }

.ukk { padding: clamp(72px, 10vw, 130px) 0; }
.ukk .k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 56px; align-items: start; }
.ukk h2 { font-size: clamp(44px, 6vw, 84px); }
.ukk-lista details { border-top: 2px solid var(--navy); }
.ukk-lista details:last-child { border-bottom: 2px solid var(--navy); }
.ukk-lista summary { position: relative; cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 700; font-size: 19px; }
.ukk-lista summary::-webkit-details-marker { display: none; }
.ukk-lista summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 34px; line-height: 1; color: var(--sininen-tumma); }
.ukk-lista details[open] summary::after { content: "–"; }
.ukk-lista summary:hover { color: var(--navy-2); }
.ukk-lista details p { padding-bottom: 22px; color: var(--hento); max-width: 38em; }
.ukk-lista details a { color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.ukk-etusivu { background: var(--harmaa); }
.ukk-kaikki { display: inline-block; margin-top: 24px; color: var(--navy); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--sininen-tumma); padding-bottom: 2px; }
.ukk-kaikki:hover { border-color: var(--navy); }

/* Arviokaista (yhteystiedot) */
.arvio { background: var(--navy); color: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.arvio .k { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 56px; align-items: center; }
.arvio h2 { font-size: clamp(38px, 4.6vw, 64px); color: var(--kerma); grid-row: span 2; }
.arvio p { font-size: 18px; color: rgba(255,255,255,.85); max-width: 32em; }
.arvio .nappi { justify-self: start; }
.arvio :focus-visible { outline-color: var(--sininen); }
@media (max-width: 1080px) { .arvio .k { grid-template-columns: minmax(0, 1fr); } .arvio h2 { grid-row: auto; } }
@media (max-width: 640px) { .arvio .nappi { justify-self: stretch; } }

/* Tekstisivu: tietosuojaseloste */
.teksti { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 10vw, 130px); }
.teksti .k > * { max-width: 46em; }
.teksti h2 { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(28px, 3vw, 36px); text-transform: uppercase; line-height: 1.05; margin: 44px 0 12px; scroll-margin-top: 96px; }
.teksti p + p, .teksti ul + p, .teksti p + ul { margin-top: 12px; }
.teksti ul { padding-left: 1.2em; display: grid; gap: 8px; }
.teksti li::marker { color: var(--sininen-tumma); }
.teksti a { color: var(--navy-2); font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 3px; }
.paivitetty { font-size: 15px; font-weight: 600; color: var(--hento); }

/* 404 */
.ei-loydy { min-height: 70vh; display: flex; align-items: flex-end; }
.ei-loydy .napit { margin-top: 28px; }

/* Ilmestyminen */
/* Piilotetaan vain, kun JS on käynnissä: muuten sisältö jäisi näkymättömiin. */
.js [data-nayta] { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.js [data-nayta].nakyy { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-nayta] { opacity: 1; transform: none; }
  .hero-kuva, .hero h1 .rivi > * { animation: none; }
  .valikko > * { transition: none; }
  html { scroll-behavior: auto; }
}

@media (max-width: 1080px) {
  .ryhmat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miksi .k, .yhteys .k, .vahennys .k { grid-template-columns: minmax(0, 1fr); }
  .vahennys h2 { grid-row: auto; }
  .ala .k:first-child { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .valikkonappi { display: flex; }
  .puh { margin-left: auto; }
  /* Avoimessa valikossa numero on jo alhaalla; visibility pitää valikkonapin paikallaan */
  .yla.auki .puh { visibility: hidden; }
  /* Koko näytön valikko: z-index -1 pitää logon, puhelimen ja sulkunapin sen päällä */
  .valikko { position: fixed; inset: 0; z-index: -1; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--navy); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 104px var(--sivureuna) 32px; margin: 0; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
  .yla.auki .valikko { opacity: 1; visibility: visible; }
  .valikko > a:not(.valikko-tarjous) { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: clamp(40px, 11vw, 56px); text-transform: uppercase; line-height: 1; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; }
  .valikko > a:not(.valikko-tarjous)::after { content: "→"; font-size: .55em; color: var(--sininen); }
  .valikko > * { opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s; }
  .yla.auki .valikko > * { opacity: 1; transform: none; }
  .yla.auki .valikko > :nth-child(2) { transition-delay: .04s; }
  .yla.auki .valikko > :nth-child(3) { transition-delay: .08s; }
  .yla.auki .valikko > :nth-child(4) { transition-delay: .12s; }
  .yla.auki .valikko > :nth-child(5) { transition-delay: .16s; }
  .yla.auki .valikko > :nth-child(6) { transition-delay: .2s; }
  .valikko-tarjous { display: block; margin-top: 28px; padding: 18px; background: var(--sininen); color: var(--navy); text-align: center; font-weight: 700; font-size: 18px; }
  .valikko-tarjous:hover { color: var(--navy) !important; background: var(--sininen-2); }
  .valikko-ala { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: rgba(255,255,255,.7); }
  .valikko-ala a:first-child { font-family: "Barlow Condensed", "Barlow Condensed Varafontti"; font-weight: 800; font-size: 34px; color: #fff; line-height: 1.1; }
  body.valikko-auki { overflow: hidden; }
}
.valikko-ala { display: none; }
@media (max-width: 900px) { .valikko-ala { display: flex; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .logo img { height: 54px; }
  .yla.kiintea .logo img, .yla.auki .logo img { height: 46px; }
  .puh { padding: 8px 12px; }
  .yla .k { gap: 10px; }
  .hero .k { padding-top: 120px; }
  .hero::after { background: linear-gradient(0deg, rgba(12,37,70,.95) 0%, rgba(12,37,70,.72) 55%, rgba(12,37,70,.3) 100%); }
  .ingressi { padding-left: 14px; }
  .nappi { width: 100%; }
  .hero-edut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; padding-top: 18px; }
  .hero-edut li { padding: 0 12px; }
  .hero-edut li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ryhmat { grid-template-columns: minmax(0, 1fr); }
  .galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .g1 { grid-column: span 2; }
  .g2, .g3 { grid-column: span 1; }
  .g5 { grid-column: span 2; }
  .miksi-kuva::before { inset: 10px -10px -10px 10px; }
  .rivit { grid-template-columns: minmax(0, 1fr); }
  .ala .k:first-child { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .katselin button.selaa { top: auto; bottom: 3vh; transform: none; }
  .katselin p { bottom: calc(3vh + 64px); }
}

/* Alasivujen kapeat näytöt */
@media (max-width: 1080px) {
  .muut .k, .ukk .k, .alue .k { grid-template-columns: minmax(0, 1fr); }
  .muut .nappi { justify-self: start; }
}
@media (max-width: 900px) {
  .palvelu .k, .jaettu .k { grid-template-columns: minmax(0, 1fr); }
  .palvelu.kaanteinen .palvelu-kuva { order: 0; }
  .hyppy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hyppy li:nth-child(3) { border-left: 0; }
  .hyppy li:nth-child(3) a { padding-left: 0; }
  .hyppy li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.25); }
  .hyppy a { padding-bottom: 16px; }
  .alku-kuvat img:last-child { margin-top: 32px; }
}
@media (max-width: 640px) {
  .sivu-alku { padding-top: 116px; }
  .kuvalla::after { background: linear-gradient(0deg, rgba(12,37,70,.96) 0%, rgba(12,37,70,.82) 60%, rgba(12,37,70,.55) 100%); }
  .periaatteet { grid-template-columns: minmax(0, 1fr); }
  .paikat li { font-size: 21px; }
  .muut .nappi { justify-self: stretch; }
}

/* Premium-ilme (premium-luonnoksesta 24.10.2026): hero, kotitalousvähennys ja etusivun yhteysosio.
   Lopussa, jotta korvaa yllä olevat säännöt myös mediakyselyissä. */
:root { --viiva: rgba(12,37,70,.14); }

/* Hero: hieman pienempi otsikko, rauhallisempi liuku, kermanväriset ja ohuemmat napit */
.hero::after { background: linear-gradient(90deg, rgba(8,27,52,.9) 0%, rgba(8,27,52,.62) 48%, rgba(8,27,52,.1) 100%); }
.hero-kuva { animation-duration: 24s; }
.hero h1 { font-size: clamp(50px, 7.4vw, 108px); }
.hero .ingressi { border-left-width: 1px; border-left-color: rgba(255,255,255,.5); color: rgba(255,255,255,.88); }
.hero .nappi { font-size: 16.5px; letter-spacing: .01em; padding: 16px 26px; }
.hero .nappi.vaalea { background: var(--kerma); color: var(--navy); }
.hero .nappi.vaalea:hover { background: #fff; }
.hero .nappi.reuna { border-width: 1px; border-color: rgba(255,255,255,.6); padding: 16px 24px; }

/* Kotitalousvähennys: huomautuslaatikko valkoisella oman värikaistan sijaan */
.vahennys { background: #fff; padding-top: 0; }
.vahennys .k { border: 1px solid var(--viiva); border-left: 3px solid var(--navy); padding: 32px 36px; max-width: calc(1280px - 2 * var(--sivureuna)); grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.vahennys h2 { font-weight: 700; font-size: clamp(28px, 2.6vw, 36px); }
.vahennys p { font-weight: 400; color: var(--hento); font-size: 17px; }
.vahennys a { font-weight: 600; text-underline-offset: 4px; }

/* Etusivun yhteysosio: tumma lopetus, lomake valkoisena paneelina */
.yhteys.tumma { background: var(--navy); color: #fff; }
.yhteys.tumma h2 { color: var(--kerma); font-weight: 700; font-size: clamp(36px, 4.2vw, 58px); }
.yhteys.tumma .yhteys-tiedot > p { color: rgba(255,255,255,.72); }
.yhteys.tumma .isonro { color: var(--kerma); font-weight: 700; }
.yhteys.tumma .isonro:hover { color: #fff; }
.yhteys.tumma .sp { color: rgba(255,255,255,.85); text-underline-offset: 4px; }
.yhteys.tumma .ehdot { gap: 0; margin-top: 34px; max-width: 22em; font-weight: 500; }
.yhteys.tumma .ehdot li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.85); }
.yhteys.tumma .ehdot li::before { content: "—  "; color: var(--sininen); font-weight: 400; }
.yhteys.tumma :focus-visible { outline-color: var(--sininen); }
.yhteys.tumma .lomake { color: var(--teksti); border-top: 0; padding: clamp(24px, 3vw, 44px); }
.yhteys.tumma .lomake :focus-visible { outline-color: var(--sininen-tumma); }
.yhteys.tumma .aiheet span { border-width: 1px; border-color: #c9d1db; font-weight: 500; }
.yhteys.tumma .aiheet input:checked + span::before { content: ""; }
.yhteys.tumma .rivit label { font-weight: 500; font-size: 14px; color: var(--hento); }
.yhteys.tumma .rivit input, .yhteys.tumma .rivit textarea { border-width: 1px; border-color: #c9d1db; background: #fafbfc; padding: 13px 14px; }
.yhteys.tumma .rivit input:focus, .yhteys.tumma .rivit textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(46,107,152,.15); }
.yhteys.tumma .lomake .nappi.vaalea { background: var(--navy); color: var(--kerma); font-size: 16.5px; }
.yhteys.tumma .lomake .nappi.vaalea:hover { background: var(--navy-2); }

/* Alatunniste syvemmällä sävyllä, jotta se erottuu tummasta yhteysosiosta */
.ala { background: var(--navy-3); }

@media (max-width: 1080px) {
  .vahennys .k { grid-template-columns: minmax(0, 1fr); margin: 0 var(--sivureuna); }
}
@media (max-width: 640px) {
  .vahennys .k { padding: 24px 20px; }
  /* Puhelimella teksti on koko kuvan päällä, joten kalvo on tasainen ilman liukua. */
  .hero::after { background: rgba(8,27,52,.8); }
}

/* Luotettava Kumppani -jäsenlogo: Vastuu Groupin virallinen värillinen (vihreä) tiedosto, sellaisenaan.
   Käyttöehdot: aina värillisenä ja kokonaisena, ei muokkauksia. */
.ala .ala-lk { display: block; width: 132px; height: auto; margin-top: 18px; }
.lk-merkki { display: block; width: 150px; height: auto; margin-top: 10px; }