:root{--logo-green:#4bad2e}
.heading h2 em{font-style:normal;color:var(--green)}
.services{max-width:1180px;margin-left:auto;margin-right:auto}
.header-logo{width:58px;height:58px;object-fit:contain;border-radius:50%;background:white;flex:none}
.brand-copy{display:flex;flex-direction:column;line-height:1.08}
.brand-copy strong{font-size:20px;letter-spacing:-.025em}
.brand-copy small{margin-top:2px;color:#59605a;font-size:15px;font-weight:500;letter-spacing:0}
.work-button{background:var(--logo-green);border-color:var(--logo-green);color:white}
.work-button:hover{background:#3e9425;border-color:#3e9425}
.hero{align-items:stretch;grid-template-columns:1.06fr .94fr}
.hero h1{font-size:clamp(34px,4.4vw,58px)}
.hero>div{min-width:0}
.hero-image.compare{height:auto;min-height:0;aspect-ratio:4/3;border-radius:18px;background:#d8d5ce;position:relative;isolation:isolate}
.compare-before,.compare-after{position:absolute;inset:0;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center}
.compare-after{background-image:url('images/hero-after.jpg')}
.compare-before{background-image:url('images/hero-before-sharp-v3.jpg');clip-path:inset(0 0 0 0);z-index:2}
.compare-label{position:absolute;bottom:12px;z-index:5;padding:5px 8px;border-radius:6px;background:rgba(23,32,25,.75);color:white;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.before-label{right:16px}.after-label{left:16px}
.compare-handle{position:absolute;top:0;bottom:0;left:0;z-index:4;width:2px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.12);pointer-events:none}
.compare-handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:5px;width:34px;height:52px;border-radius:999px;background:rgba(18,26,20,.5);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.55);font-style:normal;box-shadow:0 2px 10px rgba(0,0,0,.2)}
.compare-handle i b{width:7px;height:7px;border-top:2.4px solid #fff;border-right:2.4px solid #fff}
.compare-handle i b:first-child{transform:rotate(-135deg)}
.compare-handle i b:last-child{transform:rotate(45deg)}
.compare-swipe-hint{position:absolute;z-index:5;top:calc(50% + 16px);left:32px;width:31px;line-height:0;pointer-events:none;animation:compare-swipe-hint 4.6s cubic-bezier(.45,.05,.55,.95) infinite}
.compare-swipe-hint img{display:block;width:100%;height:auto;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes compare-swipe-hint{0%{transform:translate3d(0,-50%,0);opacity:0}4%{opacity:1}70%{transform:translate3d(var(--sweep,240px),-50%,0);opacity:1}80%,100%{transform:translate3d(var(--sweep,240px),-50%,0);opacity:0}}
.compare.comparison-started .compare-swipe-hint{display:none}
.compare-range{position:absolute!important;inset:0;z-index:6;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0;cursor:ew-resize}
.steps-band{background:var(--green)}
.steps-band>.container{gap:0}
.steps-band div div{border:0!important;font-size:16px;padding:25px 0;text-align:center}
.contact-email{display:block!important;margin-top:8px;font-size:15px!important;color:#cbe2d3}
.form-actions{display:flex;flex-wrap:wrap;gap:10px}.form-actions .button{flex:1 1 145px;align-items:center;text-align:center}.form-actions .primary{color:var(--ink)}
.sms-button{background:transparent;border-color:var(--green);color:var(--green)}
.whatsapp-button{background:#25d366;border-color:#25d366;color:#102a18}
.whatsapp-button:hover{background:#20bd5a;border-color:#20bd5a}
.message.confirmation{padding:12px 14px;border-radius:8px;background:#e7f3e5;color:#24651f;font-weight:700}
.message.confirmation.pending{background:#fff4e0;color:#8a5a00;font-weight:600;line-height:1.45}
.travel-fee{margin:0;padding-top:4px;color:#4c594f;font-size:11px;line-height:1.5}
.privacy-check{display:flex;align-items:flex-start;gap:8px;line-height:1.35}.privacy-check input[type="checkbox"]{flex:0 0 17px;width:17px!important;height:17px!important;margin:0!important;padding:0!important;transform:translateY(1px);accent-color:var(--green)}.privacy-check span{display:block}
.work-photo.wood-beam-photo{padding:0;background-image:url('images/fa-gerenda-munka.jpg');background-size:cover;background-position:center 55%;color:transparent}
.zoomable-work{width:100%;border:0;cursor:zoom-in}
.photo-lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:14px;background:rgba(7,12,8,.88);opacity:0;transition:opacity 4.6s ease}
.photo-lightbox[hidden]{display:none}
.lightbox-content{position:relative;display:flex;align-items:center;justify-content:center;width:min(1100px,92vw);height:88vh}
.lightbox-image{display:block;width:auto;height:auto;max-width:min(1440px,96vw);max-height:95vh;object-fit:contain;border-radius:12px;box-shadow:0 18px 70px rgba(0,0,0,.45);opacity:0;transform:scale(.86);transition:transform 5.2s cubic-bezier(.65,0,.35,1),opacity 4.6s ease}
.photo-lightbox.open{opacity:1;transition:opacity 2.6s ease}
.photo-lightbox:not(.open){pointer-events:none}
.photo-lightbox.open .lightbox-image{opacity:1;transform:scale(1);transition:transform 4s cubic-bezier(.22,.7,.25,1),opacity 2.6s ease}
@media(max-width:850px){.hero{grid-template-columns:1fr}.hero-image.compare{min-height:0}}
@media(max-width:560px){.header-logo{width:46px;height:46px}.brand-copy strong{font-size:15px}.brand-copy small{font-size:12px;margin-top:3px}.hero-image.compare{height:340px!important;min-height:340px;aspect-ratio:auto}.steps-band div div{text-align:left;font-size:15px}.form-actions{display:grid}.contact-email{overflow-wrap:anywhere}.photo-lightbox{padding:10px}.lightbox-content{width:100%;height:84vh}.privacy-check{font-size:13px;line-height:1.45;gap:9px;align-items:flex-start}
.privacy-check input[type="checkbox"]{flex-basis:17px;width:17px!important;height:17px!important;transform:translateY(1px)}
.privacy-check span{flex:1;min-width:0}}
.intro-szoveg{display:flex;flex-direction:column;gap:18px}
.intro-szoveg p{max-width:520px;margin:0;color:var(--muted);font-size:16px}

/* mobilon nagyobb, jobban olvasható szöveg */
@media(max-width:560px){
  .lead,.article-lead,.tldr p{font-size:21px;line-height:1.55}
  .intro-szoveg p{font-size:19.5px;line-height:1.62}
  .services article p,.works p,.process p{font-size:18px}
  .trust{font-size:16px}
  footer{font-size:14.5px}
  form label,form input,form select,form textarea{font-size:17.5px}
  form input[type="checkbox"],form input[type="radio"]{font-size:13px}
  .privacy-check{font-size:14.5px;line-height:1.45;align-items:flex-start;gap:10px}
  .privacy-check input[type="checkbox"]{flex:0 0 19px;width:19px!important;height:19px!important;transform:translateY(2px)}
  .legal-main p,.legal-main li{font-size:19px;line-height:1.62}
}

/* mobilon legalább 44 px magas érintési felület (a betűméret nem változik) */
@media(max-width:850px){
  .menu-button{min-width:44px;min-height:44px;padding:8px 12px}
  .menu.open{gap:0}
  .menu.open a{display:flex;align-items:center;min-height:44px}
}
@media(max-width:560px){
  .contact-grid>div>a{display:inline-flex;align-items:center;min-height:44px}
  .contact-email{display:flex!important;align-items:center;min-height:44px;margin-top:0}
  .services article a{display:inline-flex;align-items:center;min-height:44px}
  footer span:last-child a{display:inline-flex;align-items:center;min-height:44px}
}

/* Egységes tipográfiai lépték */
.lead,.article-lead,.tldr p{font-size:18px;line-height:1.6}
.intro-szoveg p{font-size:17px;line-height:1.65}
.services article p,.works p,.process p{font-size:15px;line-height:1.6}
.trust{font-size:14px}
footer{font-size:12px}
form label,form input,form select,form textarea{font-size:15px}
.privacy-check{font-size:13px}

/* Kapcsolati űrlap: visszafogottabb feliratok */
form label{font-size:14px!important;line-height:1.35}
form input,form select,form textarea{font-size:16px!important;line-height:1.45}
form input::placeholder,form textarea::placeholder{font-size:16px!important}

@media(min-width:851px){.hero{align-items:start}}

@media(min-width:851px){.hero .eyebrow{margin-top:0}}

@media(min-width:851px){.hero>div:first-child{transform:translateY(-30px)}}

/* A nyitó címke igazítása a fotó tetejéhez */
body main#top .hero>div:first-child{transform:translateY(-30px)!important}

body main#top .hero>div:first-child{transform:translateY(10px)!important}

form select{font-size:14px!important}

/* Az űrlapmezők tartalma egységes, visszafogott méretben */
form input,form select,form textarea,form input::placeholder,form textarea::placeholder{font-size:14px!important;font-weight:500}

form select{height:46px}

/* Előnézeti változat: a bemutatkozó szöveg a cím alatt, szélesebb tördeléssel */
@media(min-width:851px){
  .intro{grid-template-columns:1fr;gap:30px}
  .intro>div:first-child .eyebrow{position:static;margin:0 0 8px}
  .intro-szoveg{max-width:1100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .intro-szoveg p,.intro p:last-child{max-width:none;margin:0!important}
}

/* Előnézet: a bemutatkozó szöveg a cím alatt, teljes szélességben */
@media (min-width: 851px) {
  body .intro {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  body .intro > div:first-child .eyebrow {
    position: static !important;
    margin: 0 0 12px !important;
  }
  body .intro h2 {
    max-width: 760px;
  }
  body .intro-szoveg {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    max-width: 1120px !important;
    gap: 64px !important;
  }
  body .intro-szoveg p {
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Előnézet: egy széles szövegblokk a cím alatt */
@media (min-width: 851px) {
  body .intro-szoveg {
    display: flex !important;
    flex-direction: column !important;
    max-width: 960px !important;
    gap: 22px !important;
  }
}

/* Szolgáltatások bevezetője: a magyarázat a cím alatt */
@media (min-width: 851px) {
  #szolgaltatasok .heading {
    display: block !important;
    margin-bottom: 37px;
  }
  #szolgaltatasok .heading > div:first-child .eyebrow {
    position: static !important;
    margin: 0 0 12px !important;
  }
  #szolgaltatasok .heading h2 {
    margin: 0 !important;
    max-width: 760px;
  }
  #szolgaltatasok .heading > p {
    position: static !important;
    max-width: 960px !important;
    margin: 22px 0 0 !important;
    font-size: 17px !important;
  }
}

/* A főcím második sora */
#rolunk h2 span{display:block;color:var(--green);margin-top:6px}

/* Szolgáltatási főcím kiemelt második sora */
#szolgaltatasok .heading h2 span{display:block;color:var(--green);margin-top:6px}

#szolgaltatasok .heading h2 span{display:block!important;color:#174f35!important;margin-top:6px!important}

.size-field{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px}
@media(max-width:560px){.size-field{grid-template-columns:1fr 118px}}

/* Kapcsolati adatok: a valódi linkek rámutatáskor egyértelmű visszajelzést adnak. */
.contact-grid>div>a{font-weight:600;transition:transform .18s ease,font-weight .18s ease,color .18s ease;text-decoration:none;transform-origin:left center}
.contact-grid>div>a:hover,.contact-grid>div>a:focus-visible{font-weight:800;color:#fff;text-decoration:underline;text-decoration-color:#9ad1ae;text-decoration-thickness:1px;text-underline-offset:5px;transform:scale(1.045);outline:0}

/* A főoldali előtte–utána referencia finom, arculati keretet kap. */
.hero-image.compare{border:2px solid rgba(24,31,27,.92);background-clip:padding-box}.compare-before,.compare-after{border-radius:inherit}


/* Az ajánlatkérő panel a referenciafotóéhoz illő, finom fekete keretet kap. */
#quote-form{border:2px solid rgba(24,31,27,.92);background-clip:padding-box}

/* A telefonszám teljes sora kattintható, ugyanúgy mint az e-mail címé. */
.contact-grid>div>a[href^="tel:"]{display:block;width:100%;padding:3px 0}

/* Finom figyelemfelhívás az ajánlatkérő címén. */
.contact-grid>div>h2{transform-origin:left center;animation:contact-title-pulse 3.8s ease-in-out infinite}
@keyframes contact-title-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.018);opacity:.88}}
@media(prefers-reduced-motion:reduce){.contact-grid>div>h2{animation:none}}

/* Folyamatos, kissé hangsúlyosabb pulzálás visszaugrás nélkül. */
.contact-grid>div>h2{will-change:transform;animation:contact-title-pulse 3.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes contact-title-pulse{from{transform:scale(1);opacity:1}to{transform:scale(1.035);opacity:.96}}