*, *::before, *::after { box-sizing: border-box; }

/* Design tokens */
:root{
  --color-petrooli:#1E3D59; --color-coral:#FF6F61; --color-accent:#4ECDC4;
  --color-light:#F5F5F5; --color-dark:#0D0D0D;
  --transition-speed:.4s; --border-radius:10px;
  --shadow-light:0 4px 8px rgba(0,0,0,.1);
  --shadow-medium:0 6px 12px rgba(0,0,0,.15);
  --shadow-hover:0 8px 16px rgba(0,0,0,.2);
  --header-height:120px;
}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:0;background:var(--color-coral);color:var(--color-light);padding:8px 16px;z-index:10000;transition:top .3s;}
.skip-link:focus{top:0;}

html{font-size:clamp(14px,1vw,18px);}
body p{font-size:.85rem;}

body{
  font-family:'Prompt',sans-serif;font-weight:300;line-height:1.6;
  color:var(--color-light);background-color:var(--color-petrooli);
  scroll-behavior:smooth;margin:0;
}

/* Varmista että hero ei mene headerin alle */
#main { padding-top: var(--header-height); }
@media (max-width:480px){ :root{ --header-height: 90px; } }

/* Progress bar */
#progress-bar{position:fixed;top:0;left:0;height:4px;background:var(--color-coral);width:0%;z-index:1100;}

/* Header */
#header{display:flex;align-items:center;padding:0 20px;background:rgba(30,61,89,.85);backdrop-filter:blur(10px);color:var(--color-light);position:fixed;top:0;left:0;width:100%;height:var(--header-height);z-index:1001;transition:all var(--transition-speed) ease;}
header.scrolled{padding:5px 20px;background:var(--color-petrooli);box-shadow:var(--shadow-medium);border-bottom:2px solid var(--color-coral);}

/* Nav */
nav>ul{position:fixed;top:var(--header-height);right:0;width:260px;background:linear-gradient(135deg,rgba(30,61,89,.98),rgba(30,61,89,.90));backdrop-filter:blur(8px);border-radius:var(--border-radius);box-shadow:0 8px 16px rgba(0,0,0,.3);z-index:1002;list-style:none;padding:20px;transform:translateX(110%);transition:transform .35s ease-out;}
nav>ul.active{transform:translateX(0);}
nav li{margin-bottom:12px;position:relative;}
nav a{color:var(--color-light);text-decoration:none;font-size:1.05rem;padding:12px 15px;display:block;transition:background-color .35s ease,transform .35s ease;border-radius:5px;}
nav>ul>li>a:hover,nav>ul>li>a:focus,nav>ul>li>a.active{background-color:var(--color-coral);transform:scale(1.03);color:var(--color-light);}
nav li ul{display:none;position:absolute;top:0;right:110%;width:260px;background:linear-gradient(135deg,rgba(40,70,100,.98),rgba(40,70,100,.90));backdrop-filter:blur(8px);border-radius:var(--border-radius);box-shadow:0 8px 16px rgba(0,0,0,.3);list-style:none;padding:20px;transition:opacity .35s ease,transform .35s ease;opacity:0;transform:translateX(-10px);}
nav li:hover>ul{display:block;opacity:1;transform:translateX(0);}
nav li ul li{margin-bottom:12px;}
nav li ul li a{padding:12px 15px;font-size:1.05rem;transition:background-color .35s ease,transform .35s ease;border-radius:5px;}
nav li ul li a:hover,nav li ul li a:focus{background-color:var(--color-coral);transform:scale(1.03);color:var(--color-light);}
@media (max-width:768px){nav li ul{display:none!important;}}
.menu-toggle{margin-left:auto;margin-right:40px;font-size:1.8rem;background:none;border:none;color:var(--color-light);cursor:pointer;transition:transform var(--transition-speed);}
@media (max-width:768px){.menu-toggle{margin-right:10px;} nav{width:100%;padding:10px;} nav ul{display:block;} nav li ul{display:block;background:none;box-shadow:none;margin-top:5px;padding-left:15px;} nav li>a::after{content:"";}}

/* HERO section – background */
.hero{
  position:relative;display:flex;justify-content:center;align-items:center;height:100vh;
  background-color:var(--color-petrooli);
  background-image:url('/assets/images/hero.webp');
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  text-align:center;padding:20px;background-attachment:fixed;overflow:hidden;
}
/* Overlay ja taustakoristeet venytetään -1px vuotoreunan estämiseksi */
.hero .overlay{position:absolute;inset:-1px;background:rgba(0,0,0,.4);z-index:1;pointer-events:none;}
.hero::before{content:"";position:absolute;inset:-1px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 10px,transparent 10px,transparent 20px);opacity:.3;animation:movePattern 15s linear infinite;z-index:0;}
@keyframes movePattern{from{background-position:0 0;} to{background-position:50px 50px;}}
.hero::after{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(30,61,89,.85),rgba(255,111,97,.85));animation:subtleMove 10s ease-in-out infinite alternate;z-index:0;}
@keyframes subtleMove{from{transform:translateY(0);} to{transform:translateY(-10px);}}

/* HERO base content box */
.hero-content{position:relative;z-index:2;max-width:1100px;color:var(--color-light);text-shadow:2px 2px 5px rgba(0,0,0,.5);padding:20px;}

/* HERO layout */
.hero-inner{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;}
.hero-copy{text-align:center;max-width:680px;margin:0 auto;}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.hero-ctas .cta-button{min-width:220px}
@media (min-width: 992px){
  .hero-content{max-width:1200px;}
  .hero-inner{
    display:grid;
    grid-template-columns: minmax(520px, 1fr) auto;
    gap: 28px;
    align-items: center;
    justify-items: start;
  }
  .hero{ text-align:left; }
  .hero-copy{ text-align:left; max-width:700px; }
  .hero-ctas{
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
  }
}

/* HERO typografia */
.hero-copy h1{margin-bottom:10px;}
.hero-copy p{margin:.5rem 0;line-height:1.5;font-size:.95rem;}
@media (min-width: 992px){ .hero-copy p{max-width:64ch;} }

/* CTA-ikonit: WhatsApp */
.cta--whatsapp::before{
  content:"";display:inline-block;width:20px;height:20px;margin-right:8px;vertical-align:-3px;
  background-image:url('/assets/images/WhatsAppIco.svg');background-size:cover;background-repeat:no-repeat;
  filter:brightness(0) invert(1);
}

/* Motion prefs & mobile performance */
@media (max-width:900px){ .hero{background-attachment:scroll;} }
@media (prefers-reduced-motion:reduce){
  .hero{background-attachment:scroll;}
  .hero::before,.hero::after{animation:none!important;}
}

/* Headings */
h1{font-size:clamp(2rem,4.5vw,2.5rem);font-weight:700;color:var(--color-coral);margin-bottom:20px;}
h2{font-size:clamp(1.75rem,4vw,2rem);font-weight:700;color:var(--color-coral);margin-bottom:20px;}
h3{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;color:var(--color-coral);margin-bottom:20px;}

/* Light section */
.light-section{background-color:var(--color-light);color:var(--color-dark);padding:40px 40px 20px 40px;border-radius:var(--border-radius);margin:0 auto;max-width:1400px;box-shadow:var(--shadow-light);}

/* SERVICES */
.services-grid{display:grid;grid-template-columns:1fr;gap:40px;margin-top:40px;}
.service-block{display:grid;grid-template-columns:300px 1fr;gap:20px;margin-bottom:40px;align-items:stretch;border-radius:var(--border-radius);box-shadow:var(--shadow-light);transition:transform var(--transition-speed);}
.service-block:hover{transform:scale(1.02);}
@media (max-width:768px){.service-block{grid-template-columns:1fr;}}
.service-left{display:flex;flex-direction:column;align-items:center;padding:10px;box-shadow:var(--shadow-light);width:300px;border-radius:var(--border-radius);}
@media (max-width:768px){.service-left{width:100%;}}
.service-left h3{margin-bottom:20px;text-align:center;}
.service-left .cta-button{align-self:center;margin:10px 0;border-radius:var(--border-radius);transition:transform var(--transition-speed);}
.service-left .cta-button:hover{transform:scale(1.03);box-shadow:0 4px 8px rgba(0,0,0,.2);}
.service-right{display:flex;flex-direction:column;gap:20px;}
.service-info,.service-testimonials{background:var(--color-light);padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow-light);}

/* Testimonials */
.testimonial-carousel{position:relative;min-height:140px;height:auto;overflow:hidden;}
.testimonial-carousel .testimonial{position:absolute;top:0;left:0;width:calc(100% - 20px);opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1;margin-left:20px;overflow-wrap:break-word;}
.testimonial-carousel .testimonial.active{opacity:1;pointer-events:auto;z-index:2;}
@media (max-width:600px){.testimonial-carousel .testimonial{margin-left:0;padding:0 10px;font-size:.8rem;}}

/* BENEFITS */
.benefits-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px;}
@media (min-width:768px){.benefits-grid{grid-template-columns:repeat(2,1fr);} }
.benefit-item{background:var(--color-light);padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow-light);transition:transform var(--transition-speed);}
.benefit-item:hover{transform:scale(1.02);}
.benefit-item h3{margin-bottom:10px;display:flex;align-items:center;gap:10px;transition:transform var(--transition-speed);}
.benefit-item h3:hover{transform:scale(1.02);}
.benefit-icon{width:40px;max-width:40px;height:40px;object-fit:contain;}
.testimonial-divider{display:inline-block;vertical-align:middle;border-left:3px solid var(--color-coral);margin-right:8px;height:1em;}

/* CONTACT & team */
.two-column-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px;}
@media (min-width:768px){.two-column-grid{grid-template-columns:1fr 1fr;}}
.contact-info,.contact-team{background:var(--color-light);padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow-light);transition:transform var(--transition-speed);}
.contact-info:hover,.contact-team:hover{transform:scale(1.02);}
.contact-info h2,.contact-team h2{margin-bottom:20px;}
.team-container{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start;}
.team-member{background:var(--color-light);padding:20px;border-radius:var(--border-radius);box-shadow:var(--shadow-light);width:250px;text-align:center;}
.team-member h3{margin-bottom:10px;}
.team-member img{width:100%;height:auto;border-radius:50%;margin-bottom:10px;aspect-ratio:1/1;object-fit:cover;}
.team-member details{border:1px solid var(--color-petrooli);border-radius:var(--border-radius);padding:10px;margin-top:10px;background-color:var(--color-light);color:var(--color-dark);transition:all var(--transition-speed);}
.team-member details summary{cursor:pointer;font-weight:700;padding:5px;list-style:none;}
.team-member details,.team-member details summary,.team-member details p{overflow-wrap:break-word;white-space:normal;}
.team-member details[open]{box-shadow:var(--shadow-light);}

/* CTA button (yleinen) */
.cta-button{
  display:inline-block;
  padding:12px 24px;
  background-color:var(--color-coral);
  color:var(--color-light);
  text-decoration:none;
  border-radius:var(--border-radius);
  transition:transform .4s ease,box-shadow .4s ease, background-color .2s ease;
}
.cta-button:hover{transform:scale(1.03);box-shadow:var(--shadow-hover);background-color:rgba(255,111,97,.9);}
button.cta-button{border:0;cursor:pointer;font:inherit}

/* CTA painotukset herossa */
.hero-ctas .cta--form{ background-color: var(--color-coral); }
.hero-ctas .cta--whatsapp{
  background:transparent; border:2px solid var(--color-light); color:var(--color-light);
}
.hero-ctas .cta--whatsapp:hover{ background:rgba(255,255,255,.1); }

/* Näppäimistöfokus näkyväksi */
.hero-ctas .cta-button:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:2px;
}

/* Footer & icons */
footer .social-media{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;text-align:center;margin:10px 0;}
footer .social-media a{display:flex;align-items:center;justify-content:center;color:var(--color-light);text-decoration:none;font-size:1rem;padding:0;margin:0 10px;}
footer .social-media a::before{content:"";display:inline-block;width:24px;height:24px;background-size:cover;background-repeat:no-repeat;filter:brightness(0) invert(1);margin-right:8px;}
footer .social-media a.instagram::before{background-image:url('../images/InstagramIco.svg');}
footer .social-media a.facebook::before{background-image:url('../images/facebookIco.svg');}
footer .social-media a.whatsapp::before{background-image:url('../images/WhatsAppIco.svg');}
footer{text-align:center;margin-top:20px;padding-top:10px;}
footer p a{color:var(--color-light)!important;}
footer p a:hover{color:var(--color-light)!important;}

/* Contact - pienet ikonit linkkien edessä */
.contact-info a.contact-email::before,
.contact-info a.contact-call::before,
.contact-info a.contact-shop::before{
  content:"";display:inline-block;vertical-align:middle;width:24px;height:24px;margin-right:8px;background-size:cover;background-repeat:no-repeat;
}
.contact-info a.contact-email::before{background-image:url('../images/eMailIco.svg');}
.contact-info a.contact-call::before{background-image:url('../images/CallIco.svg');}
.contact-info a.contact-shop::before{background-image:url('../images/ShopIco.svg');}

/* Back-to-top */
#back-to-top{
  position:fixed;bottom:40px;right:40px;width:40px;height:40px;
  background-color:var(--color-coral);border:none;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:1000;
  transition:transform .3s ease,box-shadow .3s ease, opacity .2s ease;
  opacity:0; pointer-events:none;
}
#back-to-top:hover{transform:scale(1.1);box-shadow:var(--shadow-hover);}
#back-to-top svg{fill:var(--color-light);filter:brightness(100%);}
@media (max-width:768px){#back-to-top{bottom:80px;left:50%;transform:translateX(-50%);}}

/* Cookie banner & modal */
#cookie-consent-banner{position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-petrooli);color:var(--color-light);padding:20px;text-align:center;z-index:10000;font-family:'Prompt',sans-serif;font-size:.85rem;display:none;}
#cookie-consent-banner p{margin:0;padding:0;}
#cookie-consent-banner a{color:var(--color-coral);text-decoration:underline;}
#cookie-consent-banner button{margin-top:10px;padding:10px 20px;border:none;border-radius:var(--border-radius);cursor:pointer;font-family:'Prompt',sans-serif;font-size:.85rem;margin-right:10px;}
#cookie-consent-banner button#accept-cookies{background-color:var(--color-coral);color:var(--color-light);}
#cookie-consent-banner button#decline-cookies{background-color:var(--color-dark);color:var(--color-light);}

.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:2000;justify-content:center;align-items:center;}
.modal.open{display:flex;}
.modal-content{background:var(--color-light);border-radius:var(--border-radius);box-shadow:var(--shadow-medium);padding:20px;width:600px;max-width:90%;max-height:80vh;overflow-y:auto;position:relative;}
.close-button{position:absolute;top:10px;right:10px;font-size:24px;background:transparent;border:none;cursor:pointer;color:var(--color-dark);}
#hubspot-form-container{background:#fff;border:1px solid #ccc;padding:20px;border-radius:var(--border-radius);box-shadow:0 2px 5px rgba(0,0,0,.1);width:100%;min-height:500px;margin-top:20px;}
body button#subscribe-button.cta-button{display:inline-block!important;padding:12px 24px!important;background-color:var(--color-coral)!important;color:var(--color-light)!important;text-decoration:none!important;border-radius:var(--border-radius)!important;border:none!important;font-family:'Prompt',sans-serif!important;font-size:1rem!important;text-transform:uppercase!important;letter-spacing:.05em!important;cursor:pointer!important;transition:transform .4s ease,box-shadow .4s.ease!important;}
body button#subscribe-button.cta-button:hover{transform:scale(1.03)!important;box-shadow:var(--shadow-hover)!important;background-color:rgba(255,111,97,.9)!important;}

/* --- Contact form tweaks --- */
.muted{color:#555;margin:0 0 8px 0;}
.modal-content form{display:grid;gap:14px;}
.form-grid-2{display:grid;gap:14px;}
@media (min-width:640px){ .form-grid-2{grid-template-columns:1fr 1fr;} }
.form-row{display:grid;gap:6px;}
.form-row label{font-weight:700;color:var(--color-dark);}
.form-row input,.form-row textarea{
  padding:10px 12px;border:1px solid #ccc;border-radius:var(--border-radius);
  font:inherit;color:var(--color-dark);background:#fff;
}
.form-row input:focus,.form-row textarea:focus{outline:2px solid var(--color-accent);border-color:var(--color-accent);}
.form-fieldset{border:1px solid #e3e3e3;border-radius:var(--border-radius);padding:12px 12px 8px;background:#fff;color:var(--color-dark);}
.form-fieldset legend{padding:0 6px;font-weight:700;color:var(--color-dark);}
.choice{display:flex;align-items:center;gap:10px;margin:6px 0;}
.form-feedback{margin-top:4px;font-size:.9rem;color:var(--color-dark);}
.form-feedback.is-success{ color:#146c43; }
.form-feedback.is-error{ color:#b42318; }
input.error{ border-color:#b42318; }

/* ==== Fade-in näkyvyysobservointia varten ==== */
.section.fade-in{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; will-change: opacity, transform;}
.section.fade-in.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .section.fade-in{transition:none;}
}