:root{--dark:#11100d;--brown:#231a12;--gold:#c7a35b;--gold2:#e8ca7a;--cream:#fbf7ef;--soft:#f3ecdf;--white:#fff;--text:#252119;--muted:#6d6252;--line:rgba(199,163,91,.30);--shadow:0 25px 80px rgba(35,26,13,.14);--radius:28px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--cream),#fff 42%,var(--cream));color:var(--text);line-height:1.65}
a{color:inherit}.topbar{background:var(--dark);color:#fff;text-align:center;padding:10px 18px;font-size:14px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.90);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{max-width:1200px;margin:auto;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:950;letter-spacing:.2px}.logo{width:150px;height:auto;display:flex;align-items:center}
.logo img{width:150px;height:auto;display:block;object-fit:contain}
@media(max-width:560px){.logo{width:118px}.logo img{width:118px}}
.links{display:flex;gap:17px;align-items:center;font-size:14px}.links a{text-decoration:none;color:#463d32;font-weight:800}.links .cta-small{background:var(--dark);color:#fff;padding:10px 16px;border-radius:999px}
.hero{background:radial-gradient(circle at 18% 12%,rgba(232,202,122,.30),transparent 31%),linear-gradient(135deg,#15110c 0%,#2c2319 52%,#0d0b08 100%);color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;opacity:.19}
.hero-inner{max-width:1200px;margin:auto;padding:88px 20px 78px;display:grid;grid-template-columns:1.08fr .92fr;gap:42px;align-items:center;position:relative;z-index:1}
.badge{display:inline-flex;padding:9px 14px;border-radius:999px;border:1px solid rgba(232,202,122,.33);background:rgba(255,255,255,.08);color:var(--gold2);font-size:14px;font-weight:950}
h1{font-size:clamp(38px,5vw,70px);line-height:1.02;margin:22px 0 20px;letter-spacing:-1.8px}.hero p{font-size:18px;color:rgba(255,255,255,.84);max-width:710px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:950;border-radius:999px;min-height:52px;padding:13px 21px;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#18120c;box-shadow:0 18px 40px rgba(199,163,91,.27)}.btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
.hero-card{padding:28px;border-radius:34px;background:rgba(255,255,255,.09);border:1px solid rgba(232,202,122,.25);box-shadow:0 34px 100px rgba(0,0,0,.28);backdrop-filter:blur(18px)}
.formbox{background:#fff;color:var(--text);border-radius:26px;padding:24px;box-shadow:var(--shadow)}.formbox h2{margin:0 0 8px;font-size:27px;line-height:1.1}.formbox p{color:var(--muted);font-size:15px;margin:0 0 16px}
.form-grid{display:grid;gap:10px}input,select,textarea{width:100%;border:1px solid #e5dccb;border-radius:16px;padding:14px;font:inherit;background:#fffdf9}textarea{min-height:92px;resize:vertical}button.submit{border:0;background:var(--dark);color:#fff;border-radius:16px;padding:15px;font-weight:950;font-size:16px;cursor:pointer}
.stats{max-width:1200px;margin:-34px auto 0;padding:0 20px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.stat{background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 12px;text-align:center;box-shadow:0 18px 48px rgba(40,30,15,.08);font-weight:950}.stat small{display:block;color:var(--muted);font-weight:750;margin-top:3px}
section{max-width:1200px;margin:auto;padding:76px 20px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin-bottom:28px}.section-head h2{margin:0;font-size:clamp(30px,4vw,47px);letter-spacing:-1px;line-height:1.08}.section-head p{margin:0;color:var(--muted);max-width:560px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.icon{width:50px;height:50px;border-radius:17px;background:linear-gradient(135deg,#fff4d5,#e7c26f);display:grid;place-items:center;font-size:25px;margin-bottom:15px}.card h3{font-size:22px;margin:0 0 8px}.card p{color:var(--muted);margin:0 0 15px}.price{font-size:20px;font-weight:950;color:#16120d}
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}.panel{background:linear-gradient(135deg,#fff,#fbf2df);border:1px solid var(--line);border-radius:34px;padding:34px;box-shadow:var(--shadow)}.panel h2{margin-top:0;font-size:36px;line-height:1.12}.panel p{color:#554c40}
.checklist{display:grid;gap:12px;padding:0;margin:0;list-style:none}.checklist li{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:13px 15px;font-weight:850}
.pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{background:#fff;border-radius:30px;padding:28px;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow);position:relative;overflow:hidden}.price-card.featured{border-color:rgba(199,163,91,.62);transform:translateY(-8px)}.price-card.featured:before{content:"Suosituin";position:absolute;top:18px;right:18px;background:var(--dark);color:var(--gold2);padding:7px 12px;border-radius:999px;font-size:12px;font-weight:950}.price-card h3{margin:0 0 8px;font-size:27px}.price-card p{color:var(--muted)}.big{font-size:34px;font-weight:950;margin:18px 0;color:#17120d}.price-card ul{padding-left:20px;color:var(--muted)}
.table-wrap{overflow-x:auto;background:#fff;border-radius:24px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);margin:18px 0 30px}.price-table{width:100%;border-collapse:collapse;min-width:720px}.price-table th,.price-table td{padding:13px 14px;border-bottom:1px solid #eee;text-align:left}.price-table th{background:#15110c;color:#fff;font-size:14px}.price-table tr:last-child td{border-bottom:0}.price-table td:not(:first-child){font-weight:850}.table-note{color:var(--muted);font-size:14px;margin-top:-16px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px}.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:11px 16px;font-weight:950;cursor:pointer}.tab.active{background:var(--dark);color:var(--gold2)}
.package{display:none}.package.active{display:block}.package-head{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:18px}
.area{background:linear-gradient(135deg,var(--dark),#2c2319);color:#fff;border-radius:36px;padding:38px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;position:relative;overflow:hidden}.area:before{content:"";position:absolute;right:-120px;top:-150px;width:420px;height:420px;border-radius:50%;background:rgba(199,163,91,.16)}.area h2{margin:0 0 12px;font-size:40px;line-height:1.1}.area p{color:rgba(255,255,255,.78)}.pills{display:flex;gap:10px;flex-wrap:wrap;position:relative}.pill{padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(232,202,122,.27);font-weight:950}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px}details{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:20px;padding:18px 20px;box-shadow:0 12px 34px rgba(40,30,15,.06)}summary{cursor:pointer;font-weight:950}details p{color:var(--muted);margin-bottom:0}
.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px}.side-card{background:#fff;border-radius:28px;padding:24px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06);position:sticky;top:92px}.article{background:#fff;border-radius:34px;padding:34px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}.article h2{font-size:34px;line-height:1.12;margin-top:8px}.article h3{font-size:24px;margin-top:28px}.article p,.article li{color:#544b3e}.breadcrumb{font-size:14px;color:rgba(255,255,255,.66);margin-top:14px}.breadcrumb a{color:rgba(255,255,255,.84);text-decoration:none}
.service-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.service-link{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;text-decoration:none;box-shadow:0 14px 38px rgba(40,30,15,.08)}.service-link strong{display:block;font-size:20px;margin-bottom:6px}.service-link span{color:var(--muted)}
.final-cta{margin-top:76px;padding:58px 20px;background:linear-gradient(135deg,var(--dark),#2c2319);color:#fff;text-align:center}.final-cta h2{max-width:840px;margin:0 auto 12px;font-size:clamp(32px,4vw,52px);line-height:1.08}.final-cta p{max-width:640px;margin:0 auto 25px;color:rgba(255,255,255,.78)}
footer{background:#0f0d0a;color:rgba(255,255,255,.72);text-align:center;padding:28px 20px;font-size:14px}
@media(max-width:980px){.links{display:none}.hero-inner,.split,.area,.content-grid,.package-head{grid-template-columns:1fr}.cards,.pricing-cards,.service-links{grid-template-columns:1fr}.faq{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}.section-head{display:block}.price-card.featured{transform:none}.side-card{position:static}}
@media(max-width:560px){.stats{grid-template-columns:1fr}.hero-inner{padding-top:56px}.hero-card{padding:16px;border-radius:24px}.formbox{padding:18px}h1{letter-spacing:-1px}.panel,.article,.area{padding:24px}.tabs{display:grid}.tab{text-align:center}}


/* OJ Siivous – lisäosiot */
.before-after-grid,.about-photo-grid,.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.about-photo-grid{grid-template-columns:repeat(2,1fr)}
.before-after-card,.about-photo-card,.blog-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.before-after-card img,.about-photo-card img{
  width:100%;
  height:380px;
  object-fit:cover;
  display:block;
}
.about-photo-card img{height:520px;object-position:center top}
.before-after-card .caption,.about-photo-card .caption,.blog-card{
  padding:20px;
}
.before-after-card h3,.about-photo-card h3,.blog-card h3{
  margin:0 0 8px;
  font-size:22px;
}
.before-after-card p,.about-photo-card p,.blog-card p{
  margin:0;
  color:var(--muted);
}
.blog-card a{
  display:inline-block;
  margin-top:14px;
  font-weight:950;
  color:#6b4e12;
}
.hour-note{
  background:#fff;
  border:1px solid rgba(199,163,91,.35);
  border-radius:22px;
  padding:18px 20px;
  color:var(--muted);
  margin-top:18px;
}
@media(max-width:980px){
  .before-after-grid,.about-photo-grid,.blog-grid{grid-template-columns:1fr}
  .before-after-card img,.about-photo-card img{height:auto}
}

/* Mobiilihinnaston korjaus mukana */


/* Lopulliset korjaukset: siisti logo, mobiilihinnasto ja etusivun kortit */
.brand{gap:12px}
.logo{width:150px!important;height:auto!important;display:flex!important;align-items:center!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.logo img{width:150px!important;height:auto!important;display:block!important;object-fit:contain!important}
.pricing-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.summary-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:26px;padding:24px;box-shadow:var(--shadow)}
.summary-card h3{margin:0 0 8px;font-size:23px}
.summary-card p{color:var(--muted);margin:0 0 12px}
.summary-card .big{font-size:28px;font-weight:950;color:var(--dark);margin:8px 0}
.summary-card a{font-weight:950;color:#6b4e12}
@media(max-width:980px){.pricing-summary-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pricing-summary-grid{grid-template-columns:1fr}.logo{width:122px!important}.logo img{width:122px!important}}


/* Lopullinen kuvien ja logon korjaus */
.logo{width:170px!important;height:auto!important;display:flex!important;align-items:center!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.logo img{width:170px!important;height:auto!important;display:block!important;object-fit:contain!important}
.before-after-grid,.about-photo-grid{display:grid;gap:18px}
.before-after-grid{grid-template-columns:repeat(3,1fr)}
.about-photo-grid{grid-template-columns:repeat(2,1fr)}
.before-after-card,.about-photo-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.before-after-card img,.about-photo-card img{width:100%;display:block;object-fit:cover;background:#f4efe5}
.before-after-card img{height:360px}
.about-photo-card img{height:520px;object-position:center top}
.before-after-card .caption,.about-photo-card .caption{padding:20px}
.before-after-card h3,.about-photo-card h3{margin:0 0 8px;font-size:22px}
.before-after-card p,.about-photo-card p{margin:0;color:var(--muted)}
@media(max-width:980px){.before-after-grid,.about-photo-grid{grid-template-columns:1fr}.before-after-card img{height:auto}.about-photo-card img{height:auto}}
@media(max-width:560px){.logo{width:128px!important}.logo img{width:128px!important}}


/* OJ Siivous – logo ja kuvakortit */
.logo{width:170px!important;height:auto!important;display:flex!important;align-items:center!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.logo img{width:170px!important;height:auto!important;display:block!important;object-fit:contain!important}
.before-after-grid,.about-photo-grid{display:grid;gap:18px}
.before-after-grid{grid-template-columns:repeat(3,1fr)}
.about-photo-grid{grid-template-columns:repeat(2,1fr)}
.before-after-card,.about-photo-card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:28px;overflow:hidden;box-shadow:var(--shadow,0 20px 60px rgba(35,26,13,.12))}
.before-after-card img,.about-photo-card img{width:100%;display:block;object-fit:cover;background:#f4efe5}
.before-after-card img{height:360px}
.about-photo-card img{height:520px;object-position:center top}
.before-after-card .caption,.about-photo-card .caption{padding:20px}
.before-after-card h3,.about-photo-card h3{margin:0 0 8px;font-size:22px}
.before-after-card p,.about-photo-card p{margin:0;color:var(--muted,#6d6252)}
@media(max-width:980px){
  .before-after-grid,.about-photo-grid{grid-template-columns:1fr}
  .before-after-card img,.about-photo-card img{height:auto}
}
@media(max-width:560px){
  .logo{width:128px!important}
  .logo img{width:128px!important}
}