/* ap-sections.css
   Geneeriset section-luokat AI-mod-inlinejen deduplikointiin (aurinkopaneeli).
   EI teeman ydinluokkia. Ladataan main.css/grid-fix.css JÄLKEEN (inc/header.php).
   Luotu 2026-06-10. Lähde: akut.php (hero+contact identtiset akut<->landing).
   HUOM: jos AI-mod editoi sectionin uudelleen, se re-inlinaa oman tyylinsä
   (paranee itsestään); silloin tämän tiedoston vastaava lohko voi jäädä käyttämättä. */

/* ===== HERO (.ap-hero) — oli heroStack-visible-<id> inline akut+landing ===== */
.ap-hero {
               position: relative;
               overflow: hidden;
               background: linear-gradient(145deg, #ffffff 0%, #fff1e0 54%, rgba(255, 106, 0, 0.28) 130%);
            }

            .ap-hero::before {
               content: "";
               position: absolute;
               inset: 0;
               background-image: radial-gradient(circle at 2px 2px, rgba(255, 106, 0, 0.12) 1px, transparent 0);
               background-size: 34px 34px;
               opacity: 0.55;
               z-index: 0;
               pointer-events: none;
            }

            .ap-hero .stackOverlay {
               position: absolute;
               inset: 0;
               width: 100%;
               height: 100%;
               z-index: 0;
               opacity: 0.42;
               pointer-events: none;
               background: radial-gradient(circle at 78% 28%, rgba(255, 212, 0, 0.34) 0%, rgba(255, 212, 0, 0) 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 241, 224, 0.88));
            }

            .ap-hero .tj-hero-section {
               position: relative;
               z-index: 2;
               display: flex;
               align-items: center;
               min-height: 760px;
               padding-top: 140px;
               padding-bottom: 120px;
               background: transparent;
               overflow: hidden;
            }

            .ap-hero .tj-hero-section::before {
               display: none;
            }

            .ap-hero .tj-hero-section .container {
               position: relative;
               z-index: 3;
            }

            .ap-hero .hero-wrapper {
               position: relative;
               z-index: 3;
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 60px;
               width: 100%;
            }

            .ap-hero .hero-content {
               position: relative;
               z-index: 4;
               width: 100%;
               max-width: 620px;
               color: #242424;
            }

            .ap-hero .hero-title {
               color: #242424;
               font-family: "Libre Franklin", sans-serif;
               font-size: clamp(44px, 5vw, 76px);
               line-height: 1.05;
               letter-spacing: -0.04em;
               margin-bottom: 24px;
            }

            .ap-hero .hero-title .active-color {
               color: #ff6a00;
            }

            .ap-hero .desc p {
               color: rgba(36, 36, 36, 0.86);
               font-family: "Lato", sans-serif;
               font-size: 19px;
               line-height: 1.65;
               max-width: 560px;
               margin-bottom: 0;
            }

            .ap-hero .hero-button {
               margin-top: 38px;
               background: linear-gradient(135deg, #ff6a00 0%, #e94b00 100%);
               color: #ffffff;
               box-shadow: 0 18px 38px rgba(255, 106, 0, 0.24);
            }

            .ap-hero .hero-button .btn_icon {
               background: #242424;
               color: #ffffff;
            }

            .ap-hero .hero-images-box {
               position: relative;
               z-index: 3;
               flex: 0 0 auto;
               max-width: 610px;
            }

            .ap-hero .hero-images img {
               max-width: 100%;
               height: auto;
               display: block;
               object-fit: contain;
            }

            .ap-hero .hero-shapes-2,
            .ap-hero .images-shapes {
               pointer-events: none;
            }

            .ap-hero .hero-circle .circle {
               cursor: default;
               display: flex;
               align-items: center;
               justify-content: center;
               overflow: hidden;
            }

            .ap-hero .hero-circle .circle .replaced-icon {
               width: 54%;
               height: 54%;
               max-width: 54%;
               max-height: 54%;
               object-fit: contain;
               display: block;
            }

            .ap-hero .hero_scroll {
               position: absolute;
               z-index: 4;
               color: #242424;
            }

            .ap-hero .hero_scroll a {
               color: rgba(36, 36, 36, 0.82);
            }

            @media (max-width: 1199px) {
               .ap-hero .tj-hero-section {
                  min-height: auto;
                  padding-top: 110px;
                  padding-bottom: 90px;
               }

               .ap-hero .hero-wrapper {
                  gap: 36px;
               }

               .ap-hero .hero-images-box {
                  max-width: 480px;
               }
            }

            @media (max-width: 991px) {
               .ap-hero .tj-hero-section {
                  padding-top: 90px;
                  padding-bottom: 80px;
               }

               .ap-hero .hero-wrapper {
                  flex-direction: column;
                  align-items: flex-start;
               }

               .ap-hero .hero-content {
                  max-width: 100%;
               }

               .ap-hero .hero-images-box {
                  max-width: 100%;
                  margin: 0 auto;
               }
            }

            @media (max-width: 575px) {
               .ap-hero .tj-hero-section {
                  padding-top: 70px;
                  padding-bottom: 70px;
               }

               .ap-hero .hero-title {
                  font-size: 40px;
               }

               .ap-hero .desc p {
                  font-size: 17px;
               }
            }

/* ===== CONTACT CTA (.ap-contact) — oli tj-contact-section-<id> inline akut+landing ===== */
.ap-contact {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
    }
    .ap-contact::before {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(0,0,0,0.82) 0%, rgba(20,20,20,0.70) 100%);
      z-index: 0;
    }
    .ap-contact .container {
      position: relative;
      z-index: 1;
    }
    .ap-contact .contact-left-content .sec-heading .sub-title {
      color: #FFD400 !important;
    }
    .ap-contact .contact-left-content .sec-heading .sub-title::before,
    .ap-contact .contact-left-content .sec-heading .sub-title::after {
      background-color: #FFD400 !important;
    }
    .ap-contact .contact-left-content .sec-title {
      color: #ffffff !important;
      text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    }
    .ap-contact .contact-left-content .desc p {
      color: rgba(255,255,255,0.88) !important;
      font-size: 16px;
      line-height: 1.7;
    }
    .ap-contact .contact-benefit-list {
      display: grid;
      gap: 16px;
      margin: 28px 0 30px 0;
      max-width: 640px;
    }
    .ap-contact .contact-benefit-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 0;
    }
    .ap-contact .contact-benefit-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 106, 0, 0.18);
      color: #FFD400;
      border: 1px solid rgba(255, 212, 0, 0.45);
      margin-top: 2px;
      font-size: 15px;
    }
    .ap-contact .contact-benefit-content h4 {
      color: #ffffff !important;
      font-size: 18px;
      line-height: 1.3;
      margin: 0 0 5px 0;
      font-weight: 700;
    }
    .ap-contact .contact-benefit-content p {
      color: rgba(255,255,255,0.84) !important;
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }
    .ap-contact .contact-form-one {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: 40px 36px 36px 36px;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .ap-contact .contact-form-one .title {
      color: #ffffff !important;
      font-size: 24px;
      line-height: 1.4;
      margin-bottom: 22px;
    }
    .ap-contact .contact-form-one .contact-item {
      margin-bottom: 24px;
    }
    .ap-contact .contact-form-one .contact-text {
      color: rgba(255,255,255,0.90) !important;
    }
    .ap-contact .contact-form-one .contact-text a {
      color: #FFD400 !important;
    }
    .ap-contact .contact-form-one .contact-text a::after {
      background-color: #FFD400 !important;
    }
    .ap-contact .contact-form-one .contact-text i {
      color: #FF6A00 !important;
      margin-right: 8px;
    }
    .ap-contact .contact-form-one .contact-text span {
      color: rgba(255,255,255,0.90) !important;
    }
    .ap-contact .contact-form-one .form-input input,
    .ap-contact .contact-form-one .form-input textarea {
      background: transparent;
      border-bottom: 1.5px solid rgba(255,255,255,0.35) !important;
      color: #ffffff !important;
    }
    .ap-contact .contact-form-one .form-input input::placeholder,
    .ap-contact .contact-form-one .form-input textarea::placeholder {
      color: rgba(255,255,255,0.55) !important;
    }
    .ap-contact .contact-form-one .nice-select {
      color: rgba(255,255,255,0.75) !important;
      border-bottom-color: rgba(255,255,255,0.35) !important;
    }
    .ap-contact .contact-form-one .nice-select::after {
      border-right-color: rgba(255,255,255,0.6) !important;
      border-bottom-color: rgba(255,255,255,0.6) !important;
    }