body { overflow-x: hidden; }

:root { --enepro-green: #59E000; }

/* Leipätekstin väri. Teeman #767676 jää valkoisella 4.09:1 kontrastiin,
   kun WCAG AA vaatii 4.5:1. #333 antaa 12.6:1 ja on selvästi luettavampi.
   Muuttuja ohjaa bodyn perusväriä sekä `p, .text` -sääntöä, eli koko
   sivuston leipätekstiä. */
:root { --text-color: #333333; }

.sec-title .sub-title { color: var(--theme-color1); }
.list-style-two li i,
.list-style-three li i,
.about-section-four .list-style-two li i { color: var(--enepro-green) !important; }

.main-header .header-lower .logo,
.main-header .header-lower .logo a { display: inline-block; line-height: 1; }
.main-header .header-lower .logo img,
.main-header .sticky-header .logo img { max-height: 75px; width: auto; max-width: none; }
.main-header .mobile-menu .nav-logo img { max-height: 52px; width: auto; }
.main-footer .about-widget .logo-box img { max-height: 64px; width: auto; }
.features-section.style-two + .main-footer .widgets-section { padding-top: 175px; }

.main-header .main-menu .navigation > li > a {
  color: var(--theme-color3, #0f2c49) !important;
  font-weight: 600;
}
.main-header .main-menu .navigation > li.current > a,
.main-header .main-menu .navigation > li > a:hover {
  color: var(--theme-color1, #105188) !important;
}

.main-menu .navigation > li > ul { width: 270px; }

.ep-logos img { max-height: 46px; width: auto; opacity: .7; filter: grayscale(100%); transition: opacity .2s, filter .2s; }
.ep-logos img:hover { opacity: 1; filter: none; }

.ep-deco-host { position: relative; overflow: hidden; isolation: isolate; }

.ep-deco-circle {
  --ep-circle-size: 380px;
  --ep-circle-border: 50px;
  --ep-circle-color: var(--enepro-green, #59E000);
  --ep-circle-top: 20%;
  --ep-circle-offset: -8%;
  position: absolute;
  top: var(--ep-circle-top);
  width: var(--ep-circle-size);
  height: var(--ep-circle-size);
  border: var(--ep-circle-border) solid var(--ep-circle-color);
  border-radius: 50%;
  background-color: transparent;
  z-index: -1;
  pointer-events: none;
  opacity: 0.45;
}

.animated-circle { opacity: 0.45; }
.ep-deco-circle--right { right: var(--ep-circle-offset); left: auto; }
.ep-deco-circle--left  { left: var(--ep-circle-offset); right: auto; }

@media (max-width: 991.98px) {
  .ep-deco-circle { display: none; }
}

.ep-ig-section { display: none; }
.ep-ig-section.is-loaded { display: block; animation: epIgFade .5s ease; }
@keyframes epIgFade { from { opacity: 0; } to { opacity: 1; } }
body.scomediting .ep-ig-section { display: block !important; }

.project-block-two .inner-box .image .icon { background-color: var(--enepro-green, #59E000); }

.theme-btn .btn-title,
.main-header .header-lower .outer-box .theme-btn { text-transform: none !important; }

.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > ul > li > ul > li > a,
.mobile-menu .navigation li > a,
.main-slider-two h2,
.banner-section-two .banner-slider .banner-slide .outer-box .content-box .btn-box .theme-btn,
.contact-form .form-group label.error,
.tab-block .nav-link,
.product-discription .single-comment-box .inner-box h5 span,
.range-slider input[type=submit],
.page-breadcrumb li,
.page-breadcrumb li a { text-transform: none !important; }

@media (min-width: 1200px) {
  .process-section .process-block { flex: 0 0 20%; max-width: 20%; }
}
.process-section { padding-bottom: 90px; }
.process-block .inner-box { margin-bottom: 30px; }

.project-section-two { padding: 0 0 0; }
.project-section-two .home3-project-slider { margin-top: 0; }

.news-block .lower-content { padding-bottom: 55px; }
.news-block .read-more { position: static; opacity: 1; width: auto; background: none; color: var(--theme-color1); padding: 0; margin-top: 6px; display: inline-flex; border-radius: 0; }
.news-block .inner-box:hover .read-more { width: auto; left: 0; }

section.clients-section-two .sec-title h2 { color: #fff; }
section.clients-section-two .sec-title p { color: rgba(255,255,255,.82); }
section.clients-section-two .sec-title .sub-title { color: var(--enepro-green); }

.contact-section { padding-bottom: 90px; }
.contact-section .form-control { margin-bottom: 4px; }
.contact-section form label { margin-bottom: 6px; font-weight: 600; }

.why-choose-us-two .outer-column { margin-bottom: 0; }
.why-choose-us-two .image-column {
  position: relative; right: auto; left: auto; top: auto; bottom: auto;
}
@media (min-width: 1200px) {
  .why-choose-us-two .image-column { width: 50%; }
}
@media (max-width: 1199.98px) {
  .why-choose-us-two .image-column { width: 100%; }
}

.contact-section .content-column .feature-box p { color: rgba(255,255,255,.92); }

.scomediting .wow { visibility: visible !important; animation: none !important; opacity: 1 !important; transform: none !important; }
.scomediting .service-block-two:hover .inner-box,
.scomediting [class*="-block"]:hover { transform: none !important; }

/* =========================================================================
   Dynaaminen blogisyöte (inc/blog_feed.php) — tasaa korttien kuvat ja
   korkeudet, koska otsikoiden pituus vaihtelee artikkelin mukaan.
   ========================================================================= */
.news-section.home6-style .row { align-items: stretch; }
.news-section.home6-style .news-block { display: flex; }
.news-section.home6-style .news-block .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.news-section.home6-style .news-block .lower-content { flex: 1 1 auto; }
.news-section.home6-style .news-block .image-box .image {
  height: 240px;
  overflow: hidden;
  margin-bottom: 0;
}
.news-section.home6-style .news-block .image-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.news-section .news-block.style-two .inner-box,
.news-section .news-block .style-two .inner-box { height: 100%; }
.news-section-imgs-equal .col-lg-4 { display: flex; }
.news-section-imgs-equal .news-block.style-two { width: 100%; display: flex; }
.news-section-imgs-equal .news-block.style-two .inner-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.news-section-imgs-equal .news-block.style-two .lower-content { flex: 1 1 auto; }

/* =========================================================================
   Hero-kartan heijastus (ep-hero-map-glow)
   Sama efekti kuin kiinteistolampopumput.php:n scoped-CSS:ssä, mutta mitat
   suhteellisina, jotta se skaalautuu ilman sivukohtaisia media queryjä.
   Ilman hehkua kartan tummat tekstit ("EnePro Porvoo") hukkuvat taustakuvaan.
   ========================================================================= */
.ep-hero-map-glow {
  position: relative;
  isolation: isolate;
}

.ep-hero-map-glow::after {
  content: "";
  position: absolute;
  right: -5.5%;
  bottom: 5.7%;
  width: 78%;
  height: 27%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    rgba(255, 255, 255, 0.18) 65%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(18px);
  z-index: 0;
  pointer-events: none;
}

.ep-hero-map-glow img {
  position: relative;
  z-index: 1;
  filter: brightness(1.08) contrast(1.12) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
}

@media (max-width: 991px) {
  .ep-hero-map-glow::after { filter: blur(14px); }
}

/* ==========================================================================
   content-visibility: auto — fold-alapuolisten osioiden renderöinti ja
   taustakuvien lataus siirretään siihen hetkeen kun osio lähestyy ruutua.

   MIKSI: etusivu on mobiilissa 8 866 px korkea (12,3 ruutua) ja 11/13 osiota
   eli 96 % korkeudesta on taitteen alapuolella. Selain teki layout- ja
   maalaustyön koko sivulle ennen ensimmäistä maalattua framea (PageSpeed:
   Style & Layout 158 ms, pääsäikeen suurin erä). Lisäksi kolme fold-
   alapuolista CSS-taustakuvaa (155 + 137 + 135 kt) latautui ~2,6 s kohdalla
   eli ENNEN LCP:tä ja kilpaili siitä kaistasta; loading="lazy" ei koske
   taustakuvia, mutta ohitettu maalaus estää myös niiden haun.

   RAJAUKSET:
   - vain mobiili/tabletti: desktop on jo 100/100, siellä ei ole voitettavaa
   - EI hero-osioon (banner-section-*): se sisältää LCP-elementin
   - EI Owl-karuselliosioihin (clients-section-two, project-section-home4,
     testimonial-section): Owl laskee leveyden alustuksessa, ja ohitetussa
     osiossa se voisi olla 0 -> rikkinäinen karuselli
   - EI editointitilassa: editorin on nähtävä kaikki osiot kerralla

   contain-intrinsic-size auto 900px antaa korkeusarvion ennen ensimmäistä
   renderöintiä (ilman sitä osion korkeus olisi 0 ja scrollipalkki hyppisi);
   auto-avainsana saa selaimen muistamaan todellisen korkeuden sen jälkeen.
   ========================================================================== */
@media (max-width: 767px) {
  /* Korkeusarviot mitattu 390 px leveydellä. */
  body:not(.scomediting) > section.about-section-four,
  body:not(.scomediting) > section.why-choose-us-two,
  body:not(.scomediting) > section.process-section,
  body:not(.scomediting) > section.call-to-action,
  body:not(.scomediting) > section.news-section,
  body:not(.scomediting) > section.contact-section-three,
  body:not(.scomediting) > footer.main-footer {
    content-visibility: auto;
  }

  body:not(.scomediting) > section.about-section-four   { contain-intrinsic-size: auto 1688px; }
  body:not(.scomediting) > section.why-choose-us-two    { contain-intrinsic-size: auto 2092px; }
  body:not(.scomediting) > section.process-section      { contain-intrinsic-size: auto 2264px; }
  body:not(.scomediting) > section.call-to-action       { contain-intrinsic-size: auto 546px; }
  body:not(.scomediting) > section.news-section         { contain-intrinsic-size: auto 2460px; }
  body:not(.scomediting) > section.contact-section-three{ contain-intrinsic-size: auto 1196px; }
  body:not(.scomediting) > footer.main-footer           { contain-intrinsic-size: auto 1430px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Korkeusarviot mitattu 768 px leveydellä; osiot ovat leveämmällä matalampia. */
  body:not(.scomediting) > section.about-section-four,
  body:not(.scomediting) > section.why-choose-us-two,
  body:not(.scomediting) > section.process-section,
  body:not(.scomediting) > section.call-to-action,
  body:not(.scomediting) > section.news-section,
  body:not(.scomediting) > section.contact-section-three,
  body:not(.scomediting) > footer.main-footer {
    content-visibility: auto;
  }

  body:not(.scomediting) > section.about-section-four   { contain-intrinsic-size: auto 1664px; }
  body:not(.scomediting) > section.why-choose-us-two    { contain-intrinsic-size: auto 1653px; }
  body:not(.scomediting) > section.process-section      { contain-intrinsic-size: auto 1555px; }
  body:not(.scomediting) > section.call-to-action       { contain-intrinsic-size: auto 555px; }
  body:not(.scomediting) > section.news-section         { contain-intrinsic-size: auto 1786px; }
  body:not(.scomediting) > section.contact-section-three{ contain-intrinsic-size: auto 933px; }
  body:not(.scomediting) > footer.main-footer           { contain-intrinsic-size: auto 918px; }
}

/* Blogiteaserien otsikkokoko.
   Otsikot vaihdettiin h4 -> h3, jotta osion h2:n jälkeen ei tule tasohyppyä
   (Lighthouse: "Otsikkoelementit eivät ole laskevassa järjestyksessä").
   .news-block .title ei aseta font-sizea, joten koko tuli h4-tagin
   oletuksesta (24px); h3:n oletus on 36px. Lukitaan alkuperäinen koko,
   jotta tasokorjaus ei muuta ulkoasua. */
.news-block .title,
.news-block-two .title {
  font-size: 24px;
  line-height: 1.2;
}