/* Wybrany wariant 3. Kadrowanie i maska tylko w warstwie prezentacji. */
.hero-variant-three{overflow-x:clip}
.hero-variant-three>.header{height:188px;min-height:0;padding:20px 48px 104px;position:relative;z-index:auto;border:0;background:#FBF4F1}
.hero-variant-three>.header .brand-official{position:relative;z-index:10}
.hero-variant-three>.header .brand-official img{width:155px}
.hero-variant-three>.header nav{z-index:10}
.hero-variant-three>.header .menu-toggle{position:relative;z-index:11}
.hero-variant-three .hero{background:#E4C6C7;position:relative;overflow:visible}
.hero-variant-three .hero-inner{display:block;max-width:1440px;width:100%;margin:auto;position:relative;min-height:870px}
.hero-variant-three .hero-copy{position:relative;z-index:4;width:55%;padding:58px 35px 38px 64px}
.hero-variant-three .hero .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:23px}
.hero-variant-three .hero h1{font-size:clamp(46px,4.7vw,68px);line-height:1.05;margin:0 0 30px;letter-spacing:-.02em;text-wrap:balance}
.hero-variant-three .hero-lead{font-size:14px;line-height:1.8;max-width:620px;margin-bottom:16px}
.hero-variant-three .hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin:27px 0 18px}
.hero-variant-three .hero .actions .button{font-size:12px;line-height:1.4;padding:16px 20px}
.hero-variant-three .hero .small{font-size:10px;line-height:1.6;max-width:520px}
.hero-w3-signature{display:flex;flex-direction:column;gap:7px;margin-top:32px;padding-left:25px;border-left:1px solid #A67985}
.hero-w3-signature span{font-family:Alpha,cursive;font-size:36px;line-height:1.2}
.hero-w3-signature small{font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.hero-w3-portrait{position:absolute;right:0;bottom:0;width:46%;height:100%;margin:0;z-index:2;pointer-events:none}
.hero-w3-person{position:absolute;bottom:0;left:0;width:100%;max-width:none;z-index:2;height:calc(100% + 195px);object-fit:cover;object-position:60% center;mask-image:url('/hero-5795-mask-alpha.png');mask-size:cover;mask-position:60% center;mask-repeat:no-repeat;-webkit-mask-image:url('/hero-5795-mask-alpha.png');-webkit-mask-size:cover;-webkit-mask-position:60% center;-webkit-mask-repeat:no-repeat;mask-mode:alpha}
.hero-w3-arch{position:absolute;inset:120px 42px 0 0;border-radius:50% 50% 0 0;background:#F0DDDC;z-index:0}
.hero-w3-ribbon{position:absolute;right:38px;top:52%;width:210px;height:290px;color:#713B4C;z-index:1;transform:rotate(13deg)}
.hero-w3-ribbon svg{display:block;width:100%;height:100%}
@media(min-width:1550px){.hero-variant-three>.header{padding-inline:max(48px,calc((100vw - 1340px)/2))}}
@media(min-width:1101px){.hero-variant-three>.header nav{position:relative}}
@media(max-width:1120px) and (min-width:801px){.hero-variant-three>.header{padding-inline:30px;gap:25px}.hero-variant-three .hero-copy{padding-left:36px;width:56%}.hero-variant-three .hero h1{font-size:48px}.hero-variant-three .hero-lead{font-size:13px}.hero-w3-person{height:calc(100% + 180px)}}
@media(max-width:800px){
 .hero-variant-three>.header{height:96px;min-height:0;padding:14px 22px}
 .hero-variant-three>.header .brand-official img{width:120px}
 .hero-variant-three>.header nav{position:absolute;top:100%;z-index:10}
 .hero-variant-three .hero{padding-top:35px}
 .hero-variant-three .hero-inner{min-height:0;display:flex;flex-direction:column;gap:0}
 .hero-variant-three .hero-copy{width:100%;padding:32px 24px 33px;order:1;background:#E4C6C7;border-top:1px solid #B9949940}
 .hero-variant-three .hero h1{font-size:clamp(26px,8vw,42px);line-height:1.13;margin-bottom:23px;text-wrap:wrap}
 .hero-variant-three .hero h1 br{display:none}
 .hero-variant-three .hero h1 .hero-title-start,.hero-variant-three .hero h1 .hero-title-middle,.hero-variant-three .hero h1 .hero-title-ending{display:block;text-wrap:wrap}
 .hero-variant-three .hero .eyebrow{font-size:9px;margin-bottom:17px}
 .hero-variant-three .hero-lead{font-size:14px;line-height:1.8}
 .hero-variant-three .hero .actions{flex-direction:column;margin-top:25px}
 .hero-variant-three .hero .actions .button{text-align:center;padding:16px 15px;font-size:12px;width:100%}
 .hero-w3-signature{margin-top:25px}
 .hero-w3-signature span{font-size:32px}
 .hero-w3-signature small{font-size:8px}
 .hero-w3-portrait{position:relative;order:0;right:auto;width:100%;height:340px;flex:none;margin-top:10px;overflow:visible}
 .hero-w3-person{height:460px;width:100%;left:0}
 .hero-w3-arch{inset:55px 40px 0 30px}
 .hero-w3-ribbon{right:22px;top:51%;width:118px;height:150px}
}

