*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#3b3b3b;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:16px;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.hero{height:720px;position:relative;background:url("../images/lamppu.webp") center center/cover no-repeat;color:#fff}
.hero-shade{position:absolute;inset:0;background:rgba(0,0,0,.19)}
.hero-inner{position:relative;z-index:1;max-width:1120px;height:100%;margin:auto;padding:46px 35px;display:flex;flex-direction:column;align-items:center;text-align:center}
.logo{width:300px;max-width:70vw;height:auto;margin:0 auto}
.hero-copy{margin:auto 0;transform:translateY(-25px)}
.eyebrow{font-size:18px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 15px;font-weight:300}
h1,h2,.hero-subtitle{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300}
h1{font-size:74px;line-height:1;margin:0;letter-spacing:-.035em}
.hero-subtitle{font-size:31px;line-height:1.2;margin:12px 0 0;letter-spacing:.01em}
.hero-contact{margin-top:38px;display:flex;justify-content:center;gap:36px;flex-wrap:wrap;font-size:22px}
.hero-contact a{border-bottom:1px solid rgba(255,255,255,.75)}
.narrow{width:min(760px,calc(100% - 50px));margin:auto}
.about{padding:105px 0 110px;text-align:center}
.about h2,.contact h2{font-size:42px;line-height:1.2;letter-spacing:-.02em;margin:0 0 42px;color:#333}
.about p{margin:0 0 24px}
.contact{padding:95px 0 85px;text-align:center;background:#f3f3f1}
.bolt{width:64px;height:auto;margin:0 0 24px}
.contact h2{margin-bottom:30px}
.contact-link{display:block;width:max-content;max-width:100%;margin:2px auto;font-size:24px;font-weight:300}
.contact-link:hover{text-decoration:underline}
.details{margin:32px 0 0;font-size:13px;color:#707070}
.details span{padding:0 8px}
footer{background:#071c22;color:#fff;text-align:center;padding:48px 25px 38px}
footer img{width:210px;height:auto;margin-bottom:22px}
footer p{margin:0;font-size:12px;color:rgba(255,255,255,.68)}
footer p span{padding:0 7px}
footer a{text-decoration:underline}
@media(max-width:700px){
 .hero{height:650px;background-position:48% center}
 .hero-inner{padding:30px 20px}
 .logo{width:225px}
 .hero-copy{transform:translateY(-5px)}
 .eyebrow{font-size:14px}
 h1{font-size:51px}
 .hero-subtitle{font-size:24px}
 .hero-contact{display:block;margin-top:28px;font-size:16px}
 .hero-contact a{display:table;margin:8px auto}
 .about{padding:70px 0 75px}
 .about h2,.contact h2{font-size:34px}
 .contact{padding:70px 0 60px}
 .contact-link{font-size:20px}
 .details span{display:none}
 .details{line-height:1.7}
}