/* ZHH staging template; scoped under .zhh-template; source Wklejony tekst(20261019-090350).txt */

    
.zhh-template{
      --navy:#0B1F2A;
      --icon-bg:#ffffff;
      --icon-border:#0B1F2A;
    }


    
.zhh-template *{box-sizing:border-box;}

    
.zhh-template{scroll-behavior:smooth;}

   
.zhh-template{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--navy);
  background:#ffffff;
}



    
.zhh-template .page{
      max-width:1100px;
      margin:0 auto;
      padding:24px 16px 48px;
    }


    
.zhh-template h1{
      font-size:1.8rem;
      margin:0 0 20px;
      text-align:center;
    }


  
/* --- KONTENER NA ZDJĘCIE DOMU --- */


.zhh-template .house-wrap{
  position:relative;
  max-width:920px;      /* desktop / tablet */
  margin:0 auto 56px;
}



.zhh-template .house-img{
  display:block;
  width:100%;
  height:auto;
}



/* MOBILE: full-width (pełny ekran) */


@media  (max-width:600px){

  
.zhh-template .page{
    padding-left:16px;
    padding-right:16px;
  }


  
.zhh-template .house-wrap{
    max-width:none;
    width:100vw;
    margin:0 0 40px;
    left:50%;
    transform:translateX(-50%);  /* wyśrodkowanie full-width w środku strony */
  }


  
.zhh-template .house-img{
    width:100%;
    height:auto;
  }

}



    
/* --- IKONY NA OBRAZKU --- */


    
.zhh-template .house-icon{
      position:absolute;
      width:46px;
      height:46px;
      border-radius:999px;
      background:var(--icon-bg);
      border:2px solid var(--icon-border);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:24px;
      text-decoration:none;
      color:var(--navy);
      box-shadow:0 4px 10px rgba(15,23,42,0.18);
      transition:.15s transform ease,.15s box-shadow ease;
    }


    
.zhh-template .house-icon:hover, .zhh-template .house-icon:focus-visible{
      transform:translateY(-2px);
      box-shadow:0 8px 18px rgba(15,23,42,0.25);
      outline:none;
    }


    
/* Pozycje ikon – procenty od wymiarów zdjęcia */

    
.zhh-template .icon-roof{       top:5%; left:61%; }

	
.zhh-template .icon-window{   top:38%; left:51%; }


    
.zhh-template .icon-ceiling{    top:30%; left:70%; }


    
.zhh-template .icon-bathroom{   top:43%; left:15%; }

    
.zhh-template .icon-kitchen{    top:67%; left:51%; }

    
.zhh-template .icon-water{      top:63%; left:82%; }

	
.zhh-template .icon-monitor{  top:23%; left:32%; }



    
.zhh-template .icon-electric{   top:53%; left:39%; }

    
.zhh-template .icon-walls{      top:67%; left:15%; }

    
.zhh-template .icon-floorheat{  top:82%; left:39%; }


    
.zhh-template .icon-paint{      top:53%; left:70%; }


   
@media  (max-width:600px){
  
.zhh-template .house-icon{
    width:32px;
    height:32px;
    font-size:16px;          /* TU – mniejsze emoji */
    box-shadow:0 2px 6px rgba(15,23,42,0.18);
  }


  
.zhh-template .house-icon svg{
    width:55%;               /* TU – mniejsze SVG */
    height:55%;
  }

}



/* === BLOKI USŁUG (DACH I ELEWACJA) === */



.zhh-template .service-block__header h2{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin:0 0 4px;
}



.zhh-template .service-block__icon{
  font-size:1.4rem;
}



.zhh-template .service-block__lead{
  margin:0;
  font-size:0.95rem;
}



.zhh-template .service-block__toggle{
  margin-top:8px;
  padding:0;
  border:none;
  background:none;
  font-size:0.9rem;
  color:#0B1F2A;
  text-decoration:underline;
  cursor:pointer;
}



.zhh-template .service-block__toggle:hover{
  opacity:0.8;
}



/* więcej „powietrza” między podtytułami w sekcjach typu Sufity, Okna itd. */


.zhh-template .service-block__text h3{
  margin-top: 2rem;   /* np. ok. 32px ponad nagłówkiem */
  margin-bottom: 0.5rem;
}


.zhh-template .service-block__text h3:first-of-type{
  margin-top: 0;      /* pierwszy nagłówek bez dodatkowego odstępu */
}




.zhh-template .service-block__body{
  margin-top:16px;
}



.zhh-template .service-block__grid{
  display:block;
}



.zhh-template .service-block__text ul{
  padding-left:1.1rem;
  margin:0 0 0.75rem;
}



.zhh-template .service-block__text li{
  margin:0 0 0.25rem;
}



/* zdjęcia */


.zhh-template .service-block__photos{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}



.zhh-template .service-block__photos figure{
  margin:0;
  font-size:0.78rem;
  color:#4b5563;
}



.zhh-template .service-block__photos img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
}



/* CTA pod tekstem */


.zhh-template .service-block__cta{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid #e2e8f0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}



.zhh-template .service-block__cta p{
  margin:0;
  font-size:0.9rem;
}



.zhh-template .service-block__cta-btn{
  display:inline-block;
  padding:8px 18px;
  border-radius:999px;
  background:#0B1F2A;
  color:#ffffff;
  font-size:0.9rem;
  text-decoration:none;
}



.zhh-template .service-block__cta-btn:hover{
  opacity:0.9;
}



/* większe ekrany – tekst i zdjęcia obok siebie */


@media  (min-width:768px){
  
.zhh-template .service-block__grid{
    display:flex;
    gap:24px;
    align-items:flex-start;
  }

  
.zhh-template .service-block__text{
    flex:1 1 55%;
  }

  
.zhh-template .service-block__photos{
    flex:1 1 45%;
  }

}



    
/* Proste sekcje docelowe – do rozbudowania później */

    
.zhh-template section{
  max-width:720px;
  margin:0 auto 24px;
  padding:18px 0 24px;     /* więcej miejsca nad i pod sekcją */
  border-bottom:1px solid #e2e8f0;
}



.zhh-template .service-block{
  scroll-margin-top:24px;
}


    
.zhh-template section h2{
      margin:0 0 8px;
      font-size:1.2rem;
    }

    
.zhh-template section p{
      margin:0;
      font-size:.95rem;
    }

	
	
.zhh-template .intro-text{
  max-width:720px;
  margin:0 auto 32px;
  font-size:.98rem;
  line-height:1.7;
}


.zhh-template .intro-text p{
  margin:0 0 10px;
}


  
.zhh-template .top-claim{ 
    max-width:720px;
    margin:24px auto 16px;
    text-align:center;
    font-size:1.05rem;
    color:#4a5563; /* przygaszony ciemnoszary */
    font-weight:bold;
  }

   
.zhh-template .form-alert{
      margin: 0 0 1rem;
      font-size: 0.95rem;
    }


    
.zhh-template .form-alert--success{
      padding: 0.75rem 1rem;
      border-radius: 4px;
      background: #d4edda;
      color: #155724;
    }


    
.zhh-template .form-alert--error{
      padding: 0.75rem 1rem;
      border-radius: 4px;
      background: #f8d7da;
      color: #721c24;
    }


    
.zhh-template .form-alert--sending{
      padding: 0.75rem 1rem;
      border-radius: 4px;
      background: #d1ecf1;
      color: #0c5460;
    }

	
.zhh-template .house-captcha{
  margin:24px 0 16px;
  padding:16px 20px;
  border-radius:16px;
  background:#f9fafb;
  display:flex;
  align-items:center;
  gap:24px;
}



/* lewa kolumna z domkiem */


.zhh-template .house-captcha__icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:140px;
}



/* wrapper na obrazek + metraż */


.zhh-template .house-captcha__picture{
  position:relative;
  display:inline-block;
}



/* sam obrazek domu */


.zhh-template .house-captcha__img{
  display:block;
  width:120px;          /* możesz zwiększyć/zmniejszyć */
  max-width:100%;
  height:auto;
}



/* METRAŻ NA OBRAZKU */


.zhh-template .house-captcha__area{
  position:absolute;
  top:58%;
  left:50%;
  transform:translate(-50%, -50%); /* środek domku */
  padding:2px 10px;
  border-radius:4px;
  background:rgba(255,255,255,0.9);
  font-size:15px;
  font-weight:600;
  color:#1c2833;
  white-space:nowrap;              /* "151 m²" zawsze w jednym wierszu */
  text-align:center;
}




/* prawa kolumna – etykieta + input */


.zhh-template .house-captcha__input label{
  display:block;
  font-size:14px;
  margin-bottom:6px;
}



.zhh-template .house-captcha__input input{
  width:100%;
  max-width:360px;
  padding:8px 10px;
  border:1px solid #d0d7de;
  border-radius:6px;
  font-size:15px;
}



.zhh-template .house-captcha__error{
  margin-top:4px;
  font-size:13px;
  color:#b3261e;
  display:none;
}



/* na mniejszych ekranach dom + input pod sobą */


@media  (max-width:768px){
  
.zhh-template .house-captcha{
    flex-direction:column;
    align-items:flex-start;
  }

}


.zhh-template .back-to-top{
  position:fixed;
  right:20px;
  bottom:20px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  background:#0B1F2A;          /* Twój navy */
  color:#fff;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:999;
}



.zhh-template .back-to-top:hover{
  transform:translateY(0) scale(1.05);
}



.zhh-template .back-to-top--visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}


/* --- PROSTA BELKA COOKIE --- */


.zhh-template .cookie-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  background:#0B1F2A;
  color:#ffffff;
  font-size:0.9rem;
  box-shadow:0 -4px 10px rgba(0,0,0,.25);
  transform:translateY(0);
  transition:transform .25s ease;
}



.zhh-template .cookie-bar--hidden{
  transform:translateY(120%);
}



.zhh-template .cookie-bar p{
  margin:0;
  flex:1 1 auto;
}



.zhh-template .cookie-bar button{
  flex:0 0 auto;
  border:none;
  border-radius:999px;
  padding:6px 16px;
  background:#ffffff;
  color:#0B1F2A;
  font-size:0.9rem;
  cursor:pointer;
}



.zhh-template .cookie-bar button:hover{
  opacity:0.9;
}


.zhh-template .intro-strong{
  text-align:center;
  font-weight:bold;
  margin:25px 0 25px;  /* TU robi odstęp nad i pod trzema liniami */
}



.zhh-template .intro-cta{
  max-width:720px;
  margin:16px auto 40px;
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}



/* wspólna baza dla obu przycisków */


.zhh-template .intro-cta__btn{
  display:inline-block;
  padding:10px 26px;
  border-radius:999px;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid var(--navy);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}



/* główny – Kontakt */


.zhh-template .intro-cta__btn:not(.intro-cta__btn--light){
  background:var(--navy);
  color:#ffffff;
}



/* pomocniczy – O nas */


.zhh-template .intro-cta__btn--light{
  background:#ffffff;
  color:var(--navy);
}



/* hover */


.zhh-template .intro-cta__btn:hover{
  transform:translateY(-1px);
  opacity:0.95;
}



/* mobile: jeden pod drugim */


@media  (max-width:600px){
  
.zhh-template .intro-cta{
    flex-direction:column;
    align-items:center;
  }

}





/* Kontener z ikonami pod tekstem */


.zhh-template .intro-cta{
  max-width:720px;
  margin:24px auto 40px;
}



/* zawsze w rzędzie, także na mobile */


.zhh-template .intro-cta--icons{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center;
  align-items:center;
  gap:16px;
}



/* pojedyncza ikonka – pierścień SZARY */


.zhh-template .intro-cta__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  border:2px solid #a0a0a0;        /* szary pierścień */
  background:#ffffff;
  color:#0B1F2A;
  text-decoration:none;
  font-size:20px;
  box-shadow:0 4px 10px rgba(15,23,42,0.18);
  transition:.15s transform ease,.15s box-shadow ease;
}



/* hover/focus */


.zhh-template .intro-cta__icon:hover, .zhh-template .intro-cta__icon:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(15,23,42,0.25);
  outline:none;
}



/* kolory jak w stopce */


.zhh-template .intro-cta__icon--fb{
  color:#1877F2 !important;   /* niebieskie "f" */
}



.zhh-template .intro-cta__icon--yt{
  color:#E02424 !important;   /* czerwony trójkąt */
}



/* mobilki – trochę mniejsze, ale dalej w rzędzie */


@media  (max-width:600px){
  
.zhh-template .intro-cta--icons{
    gap:12px;
  }

  
.zhh-template .intro-cta__icon{
    width:38px;
    height:38px;
    font-size:18px;
  }

}




/* tylko ludzik – białe tło i ciemny kolor */


.zhh-template .intro-cta__icon--about{
  background:#ffffff !important;
  color:#0B1F2A !important;
}



/* Facebook – niebieskie f, szary pierścień jak w stopce */


.zhh-template .intro-cta__icon--fb{
  background:#ffffff;
  color:#1877F2 !important;
}



/* YouTube – czerwony trójkąt (jak w stopce) */


.zhh-template .intro-cta__icon--yt{
  background:#ffffff;
  color:#E02424;
}




/* === ZHH WhatsApp module - safe mobile version PL === */



.zhh-template .zhh-wa-safe{
  max-width:720px;
  margin:32px auto 40px;
  padding:0 16px;
  box-sizing:border-box;
}



.zhh-template .zhh-wa-safe *{
  box-sizing:border-box;
}



.zhh-template .zhh-wa-safe__inner{
  width:100%;
  border:1px solid #dbe3ea;
  border-radius:18px;
  background:#f9fafb;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-shadow:0 6px 18px rgba(15,23,42,0.08);
}



.zhh-template .zhh-wa-safe__text{
  flex:1 1 auto;
  min-width:0;
}



.zhh-template .zhh-wa-safe__title{
  margin:0 0 8px;
  font-size:1.25rem;
  line-height:1.3;
  color:#0B1F2A;
}



.zhh-template .zhh-wa-safe__desc{
  margin:0 0 10px;
  font-size:0.95rem;
  line-height:1.6;
  color:#4a5563;
}



.zhh-template .zhh-wa-safe__phone{
  margin:0;
  font-size:0.95rem;
  font-weight:bold;
  color:#0B1F2A;
}



.zhh-template .zhh-wa-safe__phone a{
  color:#0B1F2A;
  text-decoration:none;
  border-bottom:1px dashed rgba(11,31,42,0.4);
}



.zhh-template .zhh-wa-safe__phone a:hover{
  border-bottom-style:solid;
}



.zhh-template .zhh-wa-safe__actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:190px;
}



.zhh-template .zhh-wa-safe__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:10px 18px;
  border-radius:999px;
  font-size:0.95rem;
  font-weight:bold;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}



.zhh-template .zhh-wa-safe__btn--whatsapp{
  background:#25D366;
  color:#ffffff;
  box-shadow:0 5px 14px rgba(37,211,102,0.28);
}



.zhh-template .zhh-wa-safe__btn--phone{
  background:#ffffff;
  color:#0B1F2A;
  border-color:#0B1F2A;
}



.zhh-template .zhh-wa-safe__btn:hover, .zhh-template .zhh-wa-safe__btn:focus-visible{
  opacity:0.94;
  outline:none;
}



@media  (max-width:600px){
  
.zhh-template .zhh-wa-safe{
    margin:24px auto 32px;
    padding:0 16px;
  }


  
.zhh-template .zhh-wa-safe__inner{
    display:block;
    padding:18px 16px;
    text-align:center;
  }


  
.zhh-template .zhh-wa-safe__actions{
    width:100%;
    min-width:0;
    margin-top:16px;
  }


  
.zhh-template .zhh-wa-safe__btn{
    width:100%;
  }

}



/* === ZHH trust / process / form note additions PL === */



.zhh-template .zhh-trust-boxes{
  max-width:720px;
  margin:0 auto 40px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}



.zhh-template .zhh-trust-boxes__item{
  padding:16px;
  border:1px solid #dbe3ea;
  border-radius:16px;
  background:#ffffff;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}



.zhh-template .zhh-trust-boxes__item strong{
  display:block;
  margin:0 0 6px;
  font-size:0.98rem;
  color:#0B1F2A;
}



.zhh-template .zhh-trust-boxes__item span{
  display:block;
  font-size:0.9rem;
  line-height:1.5;
  color:#4a5563;
}



.zhh-template .zhh-process{
  max-width:720px;
  margin:32px auto 28px;
  padding:22px 18px;
  border:1px solid #dbe3ea;
  border-radius:18px;
  background:#f9fafb;
}



.zhh-template .zhh-process h2{
  margin:0 0 12px;
  font-size:1.25rem;
  color:#0B1F2A;
}



.zhh-template .zhh-process ol{
  margin:0;
  padding-left:1.2rem;
}



.zhh-template .zhh-process li{
  margin:0 0 8px;
  font-size:0.95rem;
  line-height:1.55;
  color:#4a5563;
}



.zhh-template .zhh-form-note{
  max-width:720px;
  margin:0 auto 18px;
  padding:14px 16px;
  border-left:4px solid #0B1F2A;
  border-radius:10px;
  background:#f9fafb;
  color:#4a5563;
  font-size:0.95rem;
  line-height:1.55;
}



.zhh-template .zhh-language-note{
  max-width:720px;
  margin:0 auto 18px;
  padding:0 16px;
  text-align:center;
  font-size:0.95rem;
  font-weight:bold;
  color:#0B1F2A;
}



@media  (max-width:700px){
  
.zhh-template .zhh-trust-boxes{
    grid-template-columns:1fr;
    margin-bottom:32px;
  }


  
.zhh-template .zhh-process{
    margin:28px 16px 24px;
  }


  
.zhh-template .zhh-form-note{
    margin-left:16px;
    margin-right:16px;
  }

}





.zhh-template .zhh-footer{
  margin-top:40px;
  padding:24px 16px 32px;
  border-top:1px solid #e2e8f0;
  background:#f9fafb;
}



.zhh-template .zhh-footer__inner{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  font-size:0.9rem;
  color:#4a5563;
}



.zhh-template .zhh-footer__brand{
  margin:0 0 4px;
  font-weight:bold;
  color:#0B1F2A;
}



.zhh-template .zhh-footer__contact{
  margin:0 0 6px;
}



.zhh-template .zhh-footer__contact a{
  color:#0B1F2A;
  text-decoration:none;
  border-bottom:1px dashed rgba(11,31,42,0.4);
}



.zhh-template .zhh-footer__contact a:hover{
  border-bottom-style:solid;
}



.zhh-template .zhh-footer__copy{
  margin:0;
  font-size:0.85rem;
  color:#6b7280;
}


.zhh-template .zhh-footer__line{
  margin:0 0 4px;
}



.zhh-template .zhh-footer__credit{
  margin:6px 0 0;
  font-size:0.85rem;
  color:#6b7280;
}



.zhh-template .zhh-footer__credit a{
  color:#0B1F2A;
  text-decoration:none;
  border-bottom:1px dashed rgba(11,31,42,0.4);
}



.zhh-template .zhh-footer__credit a:hover{
  border-bottom-style:solid;
}



/* Social w stopce */


.zhh-template .zhh-footer__social{
  margin:6px 0 10px;
  display:flex;
  justify-content:center;
  gap:12px;
}



.zhh-template .zhh-footer__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid #757272;
  background:#ffffff;
  color:#0B1F2A;
  font-size:18px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(15,23,42,0.18);
  transition:.15s transform ease,.15s box-shadow ease;
}



.zhh-template .zhh-footer__icon:hover, .zhh-template .zhh-footer__icon:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(15,23,42,0.25);
  outline:none;
}



/* Kolory liter/znaku w kółku */


.zhh-template .zhh-footer__icon--fb{
  color:#1877f2;      /* niebieski Facebook */
  font-weight:bold;
}



.zhh-template .zhh-footer__icon--yt{
  color:#ff0000;      /* czerwony trójkąt YouTube */
}



.zhh-template .zhh-footer__copy{
  margin:0;
  font-size:0.85rem;
  color:#6b7280;
}


/* WIDEO / IFRAME – wspólny styl np. dla filmów z Facebooka */


.zhh-template .service-block__video{
  max-width:450px;
  margin:24px auto 0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}



.zhh-template .service-block__video iframe{
  display:block;
  width:100%;
  aspect-ratio:9/16;
  height:auto;
  border:none;
  border-radius:16px;
  overflow:hidden;
}



.zhh-template .service-block__video--wide iframe{
  aspect-ratio:16/9;
}



.zhh-template .service-block__launch{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:220px;
  aspect-ratio:16/9;
  padding:24px;
  border:none;
  border-radius:16px;
  background:#0B1F2A;
  color:#ffffff;
  cursor:pointer;
  text-align:center;
  font:inherit;
}



.zhh-template .service-block__launch:hover, .zhh-template .service-block__launch:focus-visible{
  opacity:0.96;
  outline:none;
}



.zhh-template .service-block__launch-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}



.zhh-template .service-block__launch-play{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:999px;
  background:#ffffff;
  color:#0B1F2A;
  font-size:28px;
  line-height:1;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}



.zhh-template .service-block__launch-text{
  font-size:1rem;
  font-weight:bold;
}



.zhh-template .service-block__launch-subtext{
  font-size:0.9rem;
  opacity:0.85;
}