*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#202020} .container{width:min(1180px,92%);margin:auto}
.header{background:#fff}.nav{min-height:120px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:18px;color:#4d9d36;text-decoration:none;font-size:23px}.brand-logo{width:120px;height:76px;object-fit:contain;object-position:left center;display:block}.brand strong{font-family:Georgia,serif;font-style:italic;line-height:1.05}.brand span{display:block;color:#555;font-size:16px;margin-top:10px;font-style:normal;font-weight:400}nav{display:flex;gap:48px}nav a{color:#222;text-decoration:none;font-weight:700;font-size:16px;padding:15px 0}nav a.active,nav a:hover{color:#4d9d36;border-bottom:3px solid #4d9d36}.menu-btn{display:none;background:none;border:0;font-size:30px}
.hero{background:linear-gradient(100deg,#eef7e9,#fff);position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:48% 52%;align-items:center;min-height:510px}.hero h1{font-size:48px;line-height:1.12;color:#4b9d35;margin:0 0 18px}.line{width:55px;height:3px;background:#4d9d36;margin:12px 0 20px}.lead{font-size:22px;line-height:1.55}.address{font-size:19px;margin-top:28px}.phone{display:block;color:#4b9d35;font-size:24px;font-weight:bold;text-decoration:none;margin:12px 0 25px}.btn{display:inline-block;background:#48a82f;color:#fff;text-decoration:none;font-weight:bold;padding:16px 30px;border-radius:5px}.hero-photo{height:510px;overflow:hidden}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.services{padding:55px 0 70px;text-align:center}.services h2,.about h2,.contact h2{color:#4b9d35;font-size:28px;margin-bottom:12px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}.card{padding:25px 25px 28px;border-radius:5px;background:#fff;box-shadow:0 4px 20px #0001}.icon{font-size:48px;color:#4b9d35}.card h3{font-size:19px;min-height:48px}.card strong{display:block;color:#4b9d35;font-size:27px}.card small{display:block;margin:6px 0 16px;color:#555}.card p{line-height:1.5;min-height:75px}.small{padding:10px 25px}
.about{background:#eef7e9;padding:45px 0}.about-grid{display:grid;grid-template-columns:30% 1fr;gap:50px;align-items:center}.about img{width:100%;height:270px;object-fit:cover}.about p{font-size:17px;line-height:1.55}.outline{display:inline-block;color:#4b9d35;border:1px solid #4b9d35;padding:12px 18px;text-decoration:none;font-weight:bold;border-radius:4px}
.contact{background:#42a92f;color:#fff;padding:38px 0}.contact h2{color:#fff}.contact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;align-items:center}.contact p{font-size:18px;line-height:1.7}.map{height:190px;background:linear-gradient(135deg,#dce8db,#fff);display:flex;align-items:center;justify-content:center;text-align:center;color:#555;border-radius:12px}.map div{background:#ffffffdd;padding:20px;border-radius:8px}.booking{text-align:center}.calendar{font-size:55px}.booking p{font-size:18px}.booking a{color:#fff;text-decoration:none;font-weight:bold;font-size:26px}footer{text-align:center;padding:18px;background:#2f8e25;color:#fff}
@media(max-width:800px){.nav{min-height:85px}.brand{font-size:16px;gap:8px}.brand-logo{width:75px;height:52px}.brand span{font-size:11px;margin-top:5px}nav{display:none}.menu-btn{display:block;color:#4b9d35}.hero-grid,.cards,.about-grid,.contact-grid{grid-template-columns:1fr}.hero-copy{padding:45px 0 25px}.hero h1{font-size:37px}.hero-photo{height:360px}.services{padding:40px 0}.about-grid{gap:25px}.about img{height:300px}.contact-grid{gap:20px}}
@media (max-width: 800px) @media (max-width: 800px) {

  .container {
    width: 92%;
  }

  /* YLÄPALKKI */
  .header nav {
    min-height: 85px;
  }

  .brand {
    gap: 10px;
    flex: 1;
  }

  .brand-logo {
    width: 105px;
    height: 70px;
    object-fit: contain;
  }

  .brand strong {
    font-size: 18px;
    line-height: 1.15;
  }

  .brand span {
    font-size: 13px;
    line-height: 1.2;
  }

  .nav {
    gap: 10px;
  }

  .nav a {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  /* HERO */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .hero {
    padding: 45px 0;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.08;
    margin-bottom: 15px;
  }

  .hero p {
    font-size: 18px;
    line-height: 1.5;
  }

  .hero-photo {
    width: 100%;
    height: auto;
    overflow: hidden;
  }

  .hero-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .address {
    font-size: 18px;
  }

  .phone {
    font-size: 25px;
  }

  .btn {
    font-size: 18px;
    padding: 16px 25px;
  }
}