/* Liftman Oy — tyylit
   Mobiili ensin. Väripaletti johdettu Liftmanin kaluston sinisestä ja
   valkoisesta. Sinivalkoinen ilme. Ei JavaScriptiä. */

:root{
  --teras:#0E3050;
  --teras-syva:#071726;
  --teras-vaalea:#1B4C79;
  --korostus:#2E7FC2;        /* kirkas sininen, korostusviivat vaaleilla pinnoilla */
  --korostus-vaalea:#8FC4EC;  /* vaalea sininen, korostukset tummilla pinnoilla */
  --toiminto:#FFFFFF;         /* valkoinen, toimintapainikkeet tummalla pohjalla */
  --toiminto-hover:#E8F1F9;
  --paperi:#F5F4F1;
  --valkoinen:#FFFFFF;
  --harmaa:#5A6672;
  --viiva:#DAD8D2;
  --leveys:1140px;
  --palkki:60px;
  --puh-ikoni:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.62;
  color:#1B2630;
  background:var(--paperi);
  padding-bottom:var(--palkki);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
@media (min-width:820px){ body{padding-bottom:0} }

h1,h2,h3{
  font-family:"Barlow Condensed","Barlow Semi Condensed",Barlow,sans-serif;
  font-weight:700;line-height:1.06;margin:0 0 .45em;color:var(--teras-syva);
}
h1{font-size:clamp(2.35rem,9vw,3.9rem);letter-spacing:-.005em}
h2{font-size:clamp(1.85rem,6vw,2.5rem);margin-top:1.9em}
h3{font-size:1.35rem;margin-top:1.6em}
p,li,dd{max-width:64ch}
p{margin:0 0 1.05em}
a{color:var(--teras-vaalea)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.valikko-kytkin:focus-visible + .yla-rivi .valikko-nappi{
  outline:3px solid var(--korostus);outline-offset:2px;border-radius:2px;
}
img{max-width:100%;height:auto;display:block}
ol{padding-left:1.2em}
ol li{margin-bottom:.5em}

.kuori{max-width:var(--leveys);margin:0 auto;padding:0 18px}
@media (min-width:640px){ .kuori{padding:0 28px} }

/* ---------------- Ylätunniste ---------------- */
.yla{background:var(--teras-syva);color:#fff;position:relative;z-index:20}
.yla a{color:#fff;text-decoration:none}

.yla-rivi{
  max-width:var(--leveys);margin:0 auto;padding:10px 18px;
  display:flex;align-items:center;gap:12px;
}
@media (min-width:640px){ .yla-rivi{padding:12px 28px} }

.logo{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.6rem;letter-spacing:.05em;line-height:1;color:#fff;
  padding:6px 0;
}
.logo span{color:var(--korostus-vaalea)}

.yla-puh{
  margin-left:auto;display:flex;align-items:center;gap:9px;
  background:var(--toiminto);color:var(--teras-syva)!important;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;
  padding:10px 15px;border-radius:2px;min-height:44px;white-space:nowrap;
}
.yla-puh::before{
  content:"";width:15px;height:15px;flex:none;background:var(--teras-syva);
  -webkit-mask:var(--puh-ikoni) center/contain no-repeat;
  mask:var(--puh-ikoni) center/contain no-repeat}

.paivystys{
  display:none;border-left:3px solid var(--korostus-vaalea);padding-left:11px;
  font-size:.82rem;line-height:1.25;color:#B9CBDA;margin-left:auto
}
@media (min-width:900px){
  .paivystys{display:block}
  .yla-puh{margin-left:20px;font-size:1.3rem}
}

/* Mobiilivalikon kytkin, ilman JavaScriptiä */
.valikko-kytkin{position:absolute;opacity:0;width:1px;height:1px}
.valikko-nappi{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.1rem;
  color:#fff;padding:10px 13px;min-height:44px;
  border:1px solid rgba(255,255,255,.35);border-radius:2px;
}
.valikko-nappi .viivat{
  display:block;width:19px;height:2px;background:#fff;position:relative}
.valikko-nappi .viivat::before,.valikko-nappi .viivat::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:#fff}
.valikko-nappi .viivat::before{top:-6px}
.valikko-nappi .viivat::after{top:6px}
.valikko-kytkin:checked + .yla-rivi .valikko-nappi{background:rgba(255,255,255,.15)}

nav.valikko{background:var(--teras);border-top:1px solid rgba(255,255,255,.14)}
nav.valikko ul{
  display:none;max-width:var(--leveys);margin:0 auto;padding:6px 0;list-style:none}
.valikko-kytkin:checked ~ nav.valikko ul{display:block}
nav.valikko a{
  display:block;padding:14px 18px;color:#E4EDF4;text-decoration:none;
  font-weight:600;font-size:1.02rem;border-left:4px solid transparent}
nav.valikko a:hover{background:rgba(255,255,255,.08)}
nav.valikko a[aria-current="page"]{
  border-left-color:var(--korostus-vaalea);color:#fff;background:rgba(255,255,255,.06)}

@media (min-width:820px){
  .valikko-nappi{display:none}
  nav.valikko ul{display:flex!important;flex-wrap:wrap;padding:0 20px}
  nav.valikko a{
    padding:14px 15px;border-left:none;border-bottom:3px solid transparent;
    font-size:.97rem}
  nav.valikko a[aria-current="page"]{
    border-bottom-color:var(--korostus-vaalea);background:transparent}
}

/* ---------------- Hero ---------------- */
.hero{display:grid;background:var(--teras-syva);isolation:isolate}
.hero > *{grid-area:1/1}
.hero-kuva{position:relative;overflow:hidden}
.hero-kuva img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-kuva::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,23,38,.40) 0%,rgba(7,23,38,.72) 45%,rgba(7,23,38,.94) 100%)}
@media (min-width:820px){
  .hero-kuva::after{
    background:linear-gradient(95deg,rgba(7,23,38,.94) 0%,rgba(7,23,38,.80) 42%,rgba(7,23,38,.30) 100%)}
  .hero-kuva img{object-position:center 38%}
}
.hero-sisalto{
  position:relative;z-index:1;align-self:end;
  max-width:var(--leveys);width:100%;margin:0 auto;padding:100px 18px 30px}
@media (min-width:640px){ .hero-sisalto{padding:130px 28px 40px} }
@media (min-width:820px){
  .hero{min-height:450px}
  .hero-sisalto{align-self:center;padding:56px 28px}
}
.hero h1{color:#fff;max-width:15ch}
.hero p{color:#D5E2EC;max-width:46ch;font-size:1.08rem;margin-bottom:0}
@media (min-width:820px){ .hero p{font-size:1.15rem} }

/* Faktarivi */
.faktat{
  background:var(--teras);color:#CFDEEA;border-top:3px solid var(--korostus-vaalea);
  font-size:.92rem}
.faktat ul{
  max-width:var(--leveys);margin:0 auto;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr}
@media (min-width:640px){ .faktat ul{grid-template-columns:repeat(3,1fr)} }
.faktat li{
  padding:13px 18px;max-width:none;border-bottom:1px solid rgba(255,255,255,.12)}
@media (min-width:640px){
  .faktat li{
    border-bottom:none;border-right:1px solid rgba(255,255,255,.12);padding:15px 28px}
  .faktat li:last-child{border-right:none}
}
.faktat b{
  display:block;color:#fff;font-family:"Barlow Condensed",sans-serif;
  font-size:1.2rem;font-weight:700;line-height:1.2}

/* ---------------- Napit ---------------- */
.napit{display:flex;gap:10px;flex-wrap:wrap;margin:1.5em 0 0}
.nappi{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 22px;min-height:50px;text-decoration:none;text-align:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;
  font-size:1.2rem;letter-spacing:.015em;border-radius:2px;
  background:var(--toiminto);color:var(--teras-syva);
  border:2px solid var(--toiminto);flex:1 1 auto}
@media (min-width:520px){ .nappi{flex:0 0 auto} }
.nappi:hover{background:var(--toiminto-hover);border-color:var(--toiminto-hover)}
.nappi-reuna{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.nappi-reuna:hover{background:rgba(255,255,255,.12);border-color:#fff}
.nappi-tumma{background:var(--teras);border-color:var(--teras);color:#fff}
.nappi-tumma:hover{background:var(--teras-vaalea);border-color:var(--teras-vaalea)}

/* ---------------- Sisältö ---------------- */
main{padding:6px 0 44px}
.johdanto{font-size:1.12rem;color:#2E3D49;max-width:60ch;margin-top:1.6em}
.murupolku{font-size:.86rem;color:var(--harmaa);padding:16px 0 0;margin:0}
.murupolku a{color:var(--harmaa)}

.palvelut{
  display:grid;gap:1px;background:var(--viiva);border:1px solid var(--viiva);
  grid-template-columns:1fr;margin:1.6em 0}
@media (min-width:620px){.palvelut{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.palvelut{grid-template-columns:repeat(3,1fr)}}
.palvelu{background:var(--valkoinen);display:flex;flex-direction:column}
.palvelu img{width:100%;aspect-ratio:16/10;object-fit:cover}
.palvelu-teksti{padding:17px 19px 21px;flex:1;display:flex;flex-direction:column}
.palvelu h3{margin:0 0 .4em}
.palvelu p{font-size:.97rem;flex:1;margin-bottom:.9em}
.palvelu a.lue{
  font-family:"Barlow Condensed",sans-serif;font-size:1.1rem;font-weight:700;
  text-decoration:none;color:var(--teras);align-self:flex-start;
  border-bottom:3px solid var(--korostus);padding:4px 0 2px}
.palvelu a.lue:hover{color:var(--teras-vaalea)}

.kohteet{list-style:none;padding:0;margin:1.3em 0;max-width:none}
.kohteet li{
  padding:15px 0;border-top:1px solid var(--viiva);max-width:none;
  display:grid;gap:3px 24px}
@media (min-width:720px){.kohteet li{grid-template-columns:250px 1fr;padding:17px 0}}
.kohteet li:last-child{border-bottom:1px solid var(--viiva)}
.kohteet b{
  font-family:"Barlow Condensed",sans-serif;font-size:1.28rem;
  color:var(--teras-syva);font-weight:700;line-height:1.2}
.kohteet span{color:#37454F}

.taulukko-kuori{
  overflow-x:auto;margin:1.5em 0;border:1px solid var(--viiva);
  -webkit-overflow-scrolling:touch}
table{
  border-collapse:collapse;width:100%;min-width:460px;background:#fff;
  font-size:.96rem}
caption{
  text-align:left;padding:13px 15px;background:var(--teras);color:#fff;
  font-family:"Barlow Condensed",sans-serif;font-size:1.2rem;font-weight:700}
th,td{
  padding:12px 15px;text-align:left;border-bottom:1px solid var(--viiva);
  vertical-align:top}
thead th{background:#EBE9E4;font-size:.86rem}
tbody tr:last-child td{border-bottom:none}

.alueet{
  display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;
  margin:1.1em 0;max-width:none}
.alueet li{
  background:#fff;border:1px solid var(--viiva);padding:8px 15px;
  border-radius:2px;font-size:.94rem;max-width:none}

details{background:#fff;border:1px solid var(--viiva);margin-bottom:8px}
summary{
  padding:16px 18px;cursor:pointer;list-style:none;
  font-family:"Barlow Condensed",sans-serif;font-size:1.24rem;font-weight:700;
  color:var(--teras-syva);display:flex;justify-content:space-between;
  align-items:center;gap:14px;min-height:52px}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2.5px solid var(--teras);border-bottom:2.5px solid var(--teras);
  transform:rotate(45deg);margin-top:-5px}
details[open] summary::after{transform:rotate(-135deg);margin-top:3px}
summary:hover{background:#FAF9F7}
details p{padding:0 18px 17px;margin:0;max-width:62ch}

.kehote{
  background:var(--teras);color:#fff;padding:28px 20px 30px;margin:3em 0 0;
  border-left:6px solid var(--korostus-vaalea)}
@media (min-width:640px){ .kehote{padding:36px 32px} }
.kehote h2{color:#fff;margin-top:0}
.kehote p{color:#CDDDE9}
.kehote-puh{
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(2.3rem,10vw,3rem);font-weight:700;color:var(--korostus-vaalea);
  text-decoration:none;display:inline-block;line-height:1.05}
.kehote-puh:hover{text-decoration:underline}

form{max-width:540px}
label{display:block;font-weight:600;margin:18px 0 6px}
input,textarea,select{
  width:100%;padding:13px;font:inherit;font-size:16px;
  border:1px solid #9EA8B2;border-radius:2px;background:#fff;min-height:50px}
textarea{min-height:130px}
.lomake-huom{font-size:.89rem;color:var(--harmaa)}
button.nappi{width:100%;cursor:pointer}
@media (min-width:520px){ button.nappi{width:auto} }

footer{
  background:var(--teras-syva);color:#BCCBD8;padding:36px 0 26px;font-size:.95rem}
footer a{color:#fff}
.footer-ruudukko{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:720px){.footer-ruudukko{grid-template-columns:1.3fr 1fr 1fr}}
footer h2{color:#fff;font-size:1.3rem;margin:0 0 .55em}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:2px;max-width:none}
footer li a{display:inline-block;padding:7px 0}
.footer-alaosa{
  border-top:1px solid rgba(255,255,255,.15);margin-top:26px;padding-top:16px;
  font-size:.87rem;color:#8DA0B0}

.soittopalkki{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  border-top:2px solid var(--teras-syva);
  padding-bottom:env(safe-area-inset-bottom)}
.soittopalkki a{
  flex:1;text-align:center;padding:16px 6px;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.22rem}
.soittopalkki .soita{background:var(--korostus);color:#fff}
.soittopalkki .posti{background:var(--teras);color:#fff}
@media (min-width:820px){.soittopalkki{display:none}}

.huomio{
  background:#EDF4FA;border-left:5px solid var(--korostus);
  padding:15px 18px;margin:1.5em 0;font-size:.95rem}
.huomio p{margin:0;max-width:60ch}

/* Sisältökuvat kuvateksteineen */
figure{margin:1.8em 0;border:1px solid var(--viiva);background:#fff}
figure img{width:100%;aspect-ratio:16/10;object-fit:cover}
figcaption{
  padding:11px 16px;font-size:.92rem;color:var(--harmaa);
  border-top:1px solid var(--viiva);max-width:none}

/* Logo */
.logo img{height:38px;width:auto}
@media (min-width:640px){ .logo img{height:44px} }
.logo{display:flex;align-items:center}

/* Evästesuostumus — analytiikkaa ei ladata ennen hyväksyntää */
.evaste{
  position:fixed;left:0;right:0;bottom:var(--palkki);z-index:70;
  background:var(--teras-syva);color:#DCE7F0;
  border-top:3px solid var(--korostus-vaalea);
  padding:16px 18px calc(16px + env(safe-area-inset-bottom))}
@media (min-width:820px){ .evaste{bottom:0} }
.evaste p{margin:0 0 12px;font-size:.94rem;max-width:70ch}
.evaste a{color:#fff}
.evaste-napit{display:flex;gap:10px;flex-wrap:wrap}
.evaste-napit .nappi{font-size:1.05rem;min-height:46px;padding:11px 18px}

/* Upotettu kartta */
.kartta{border:1px solid var(--viiva);background:#fff;margin:1.4em 0}
.kartta iframe{display:block;width:100%;height:340px;border:0}