.pezy-el-why.pezy-el-why{
--pezy-ink:#0e3a44;
--pezy-text:#1a1a28;
--pezy-muted:#5b5b63;
--pezy-line:#e6e6ea;
--pezy-soft:#f4f1ea;
--pezy-card:#fff;
--pezy-gold:#c5a35a;
width:100% !important;
max-width:1200px;
margin:0 auto !important;
color:var(--pezy-text);
font-family:inherit;
box-sizing:border-box;
overflow-x:hidden !important;
}
.pezy-el-why.pezy-el-why *,
.pezy-el-why.pezy-el-why *::before,
.pezy-el-why.pezy-el-why *::after{ box-sizing:border-box; }
.pezy-el-why.pezy-el-why .pezy-why__kicker{
margin:0 0 18px !important;
color:var(--pezy-ink) !important;
letter-spacing:.02em;
text-transform:none !important;
line-height:1.35;
}
.pezy-el-why.pezy-el-why .pezy-why__head h2{
margin:0 0 .5em !important;
max-width:22ch;
color:var(--pezy-ink) !important;
line-height:1.2;
letter-spacing:-.02em;
}
.pezy-el-why.pezy-el-why .pezy-why__intro{
margin:0 0 1.5em !important;
max-width:54ch;
color:#343231 !important;
line-height:1.55;
}
.pezy-el-why.pezy-el-why .pezy-why__bento{
display:grid !important;
grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .95fr) !important;
grid-template-areas:
"loc photo photo"
"factory years trust" !important;
gap:16px !important;
align-items:stretch !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
overflow:hidden !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-locations,
.pezy-el-why.pezy-el-why .pezy-why__card.is-map{
grid-area:loc !important;
min-height:280px !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-photo{
grid-area:photo !important;
min-height:280px !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-factory{ grid-area:factory !important; }
.pezy-el-why.pezy-el-why .pezy-why__card.is-years{ grid-area:years !important; }
.pezy-el-why.pezy-el-why .pezy-why__card.is-trust{ grid-area:trust !important; }
.pezy-el-why.pezy-el-why .pezy-why__card{
position:relative !important;
background:var(--pezy-card) !important;
border:1px solid var(--pezy-line) !important;
border-radius:24px !important;
padding:28px 26px 24px !important;
margin:0 !important;
box-shadow:none !important;
min-width:0 !important;
max-width:100% !important;
display:flex !important;
flex-direction:column !important;
overflow:visible !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.has-gold{
border-color:var(--pezy-gold) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-photo{
padding:0 !important;
border:0 !important;
background:#d8d4cc !important;
min-height:320px !important;
height:100% !important;
width:100% !important;
max-width:100% !important;
overflow:hidden !important;
}
.pezy-el-why.pezy-el-why .pezy-why__visual-img,
.pezy-el-why.pezy-el-why .pezy-why__card.is-photo img{
display:block !important;
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
max-width:100% !important;
max-height:100% !important;
object-fit:cover !important;
object-position:center center !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__stat,
.pezy-el-why.pezy-el-why .pezy-why__title{
margin:0 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__stat{
margin:0 !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--pezy-ink) !important;
letter-spacing:-.04em;
}
.pezy-el-why.pezy-el-why .pezy-why__title{
margin:0 !important;
padding:0 !important;
border:0 !important;
background:none !important;
color:var(--pezy-ink) !important;
letter-spacing:-.02em;
}
.pezy-el-why.pezy-el-why .pezy-why__caption{
margin:.45em 0 0 !important;
padding:0 !important;
max-width:36ch;
color:#343231 !important;
line-height:1.45 !important;
overflow:visible !important;
white-space:normal !important;
}
.pezy-el-why.pezy-el-why .pezy-why__caption + .pezy-why__visual-slot{
margin-top:14px !important;
}
.pezy-el-why.pezy-el-why .pezy-why__visual-slot{
flex:1 1 auto !important;
position:relative !important;
min-height:120px !important;
margin:14px 0 0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
.pezy-el-why.pezy-el-why .pezy-why__map-card{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
margin:0 !important;
padding:14px 12px 12px !important;
border:1.5px solid var(--pezy-gold) !important;
border-radius:16px !important;
background:var(--pezy-soft) !important;
min-height:0 !important;
overflow:hidden !important;
}
.pezy-el-why.pezy-el-why .pezy-why__map{
flex:1 1 auto !important;
min-height:110px !important;
color:var(--pezy-ink);
}
.pezy-el-why.pezy-el-why .pezy-why__map.is-upload{
min-height:0 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__map-img{
display:block !important;
width:100% !important;
height:auto !important;
max-width:100% !important;
max-height:220px !important;
object-fit:contain !important;
object-position:center !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
border-radius:10px !important;
}
.pezy-el-why.pezy-el-why .pezy-why__map-svg{
display:block !important;
width:100% !important;
height:100% !important;
max-height:150px !important;
overflow:visible !important;
}
.pezy-el-why.pezy-el-why .pezy-why__globe{
fill:rgba(197,163,90,.07) !important;
stroke:var(--pezy-gold) !important;
stroke-width:1.2 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__grid{
fill:none !important;
stroke:currentColor !important;
stroke-width:.45 !important;
opacity:.16;
}
.pezy-el-why.pezy-el-why .pezy-why__land{
fill:currentColor !important;
fill-opacity:.12;
stroke:currentColor !important;
stroke-width:1.05 !important;
stroke-linejoin:round;
stroke-linecap:round;
stroke-opacity:.55;
}
.pezy-el-why.pezy-el-why .pezy-why__pin{
fill:var(--pezy-gold) !important;
stroke:#fff !important;
stroke-width:.8 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__pulse{
fill:var(--pezy-gold) !important;
opacity:.35;
transform-box:fill-box;
transform-origin:center;
animation:pezyWhyPulse 2.4s ease-out infinite;
animation-delay:var(--pezy-pulse-delay, 0s);
}
.pezy-el-why.pezy-el-why .pezy-why__pulse--2{
animation-delay:calc(var(--pezy-pulse-delay, 0s) + 1.2s);
}
.pezy-el-why.pezy-el-why .pezy-why__map-caption{
margin:8px 2px 0 !important;
padding:0 !important;
color:var(--pezy-muted) !important;
font-size:13px !important;
line-height:1.4 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__bars{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
width:100% !important;
}
.pezy-el-why.pezy-el-why .pezy-why__bar{
position:relative !important;
display:flex !important;
align-items:center !important;
overflow:hidden !important;
padding:11px 14px !important;
border:1.5px solid var(--pezy-gold) !important;
border-radius:12px !important;
background:#fff !important;
color:var(--pezy-ink) !important;
font-size:13px !important;
font-weight:600 !important;
letter-spacing:-.01em;
line-height:1.2 !important;
z-index:0;
}
.pezy-el-why.pezy-el-why .pezy-why__bar::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:rgba(197,163,90,.18) !important;
transform:scaleX(0) !important;
transform-origin:left center !important;
animation:pezyWhyBar 4.8s ease-in-out infinite !important;
z-index:-1 !important;
pointer-events:none !important;
}
.pezy-el-why.pezy-el-why .pezy-why__bar:nth-child(1)::before{ animation-delay:0s !important; }
.pezy-el-why.pezy-el-why .pezy-why__bar:nth-child(2)::before{ animation-delay:1.6s !important; }
.pezy-el-why.pezy-el-why .pezy-why__bar:nth-child(3)::before{ animation-delay:3.2s !important; }
.pezy-el-why.pezy-el-why .pezy-why__card.is-factory .pezy-why__visual-slot{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-factory .pezy-why__bars,
.pezy-el-why.pezy-el-why .pezy-why__card.is-factory .pezy-why__bar{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__era{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
gap:4px !important;
width:100% !important;
padding:16px 16px 14px !important;
border:1.5px solid var(--pezy-gold) !important;
border-radius:16px !important;
background:var(--pezy-soft) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__era-kicker{
color:var(--pezy-muted) !important;
font-size:12px !important;
font-weight:400 !important;
letter-spacing:.04em;
text-transform:uppercase !important;
}
.pezy-el-why.pezy-el-why .pezy-why__era-year{
display:block !important;
color:var(--pezy-ink) !important;
font-size:clamp(36px, 5vw, 48px) !important;
font-weight:300 !important;
letter-spacing:-.06em;
line-height:1 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__era-track{
display:block !important;
width:100% !important;
height:2px !important;
margin:8px 0 4px !important;
background:rgba(14,58,68,.16) !important;
border-radius:99px !important;
overflow:hidden !important;
}
.pezy-el-why.pezy-el-why .pezy-why__era-track i{
display:block !important;
width:100% !important;
height:100% !important;
background:var(--pezy-gold) !important;
transform-origin:left center;
animation:pezyWhyEra 3.6s ease-in-out infinite;
}
.pezy-el-why.pezy-el-why .pezy-why__era-now{
color:var(--pezy-ink) !important;
font-size:13px !important;
font-weight:600 !important;
}
.pezy-el-why.pezy-el-why .pezy-why__seal{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
width:100% !important;
padding:12px 8px !important;
}
.pezy-el-why.pezy-el-why .pezy-why__seal-ring{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:84px !important;
height:84px !important;
border:2px solid var(--pezy-gold) !important;
border-radius:50% !important;
box-shadow:inset 0 0 0 6px #fff, inset 0 0 0 8px var(--pezy-gold) !important;
background:var(--pezy-soft) !important;
color:var(--pezy-gold) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__seal-star{
font-size:28px !important;
line-height:1 !important;
color:var(--pezy-gold) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__seal-mark{
color:var(--pezy-ink) !important;
font-size:11px !important;
font-weight:600 !important;
letter-spacing:.14em;
text-transform:uppercase !important;
}
.pezy-el-why.pezy-el-why .pezy-why__box{
--rot:0deg;
--drift-x:3px;
--drift-y:-3px;
position:absolute !important;
border:1.5px solid var(--pezy-ink) !important;
border-radius:10px !important;
background:transparent !important;
transform:rotate(var(--rot));
pointer-events:none;
animation:pezyWhyDrift 7s ease-in-out infinite;
}
.pezy-el-why.pezy-el-why .pezy-why__box.is-fill{
background:var(--pezy-gray, #d4d5d8) !important;
border-color:transparent !important;
}
.pezy-el-why.pezy-el-why .pezy-why__box.is-solid{
background:var(--pezy-ink) !important;
border-color:var(--pezy-ink) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__box:nth-child(1){ --drift-x:3px; --drift-y:-4px; animation-delay:0s; }
.pezy-el-why.pezy-el-why .pezy-why__box:nth-child(2){ --drift-x:-3px; --drift-y:3px; animation-delay:.35s; }
.pezy-el-why.pezy-el-why .pezy-why__box:nth-child(3){ --drift-x:2px; --drift-y:3px; animation-delay:.7s; }
.pezy-el-why.pezy-el-why .pezy-why__box:nth-child(4){ --drift-x:-3px; --drift-y:-2px; animation-delay:.2s; }
.pezy-el-why.pezy-el-why .pezy-why__box:nth-child(5){ --drift-x:3px; --drift-y:2px; animation-delay:.55s; }
@keyframes pezyWhyDrift{
0%, 100%{ transform:rotate(var(--rot)) translate(0, 0); }
50%{ transform:rotate(var(--rot)) translate(var(--drift-x), var(--drift-y)); }
}
@keyframes pezyWhyPulse{
0%{ transform:scale(.35); opacity:.5; }
100%{ transform:scale(2.35); opacity:0; }
}
@keyframes pezyWhyBar{
0%, 14%{ transform:scaleX(0); opacity:0; }
24%, 40%{ transform:scaleX(1); opacity:1; }
54%, 100%{ transform:scaleX(1); opacity:0; }
}
@keyframes pezyWhyEra{
0%{ transform:scaleX(.12); }
55%, 100%{ transform:scaleX(1); }
}
@media (max-width:900px){
.pezy-el-why.pezy-el-why .pezy-why__head h2,
.pezy-el-why.pezy-el-why .pezy-why__intro,
.pezy-el-why.pezy-el-why .pezy-why__caption{
max-width:none !important;
}
}
@media (max-width:720px){
.pezy-el-why.pezy-el-why .pezy-why__bento{
grid-template-columns:minmax(0,1fr) !important;
grid-template-areas:
"loc"
"photo"
"factory"
"years"
"trust" !important;
overflow:hidden !important;
}
.pezy-el-why.pezy-el-why .pezy-why__card.is-photo{
position:relative !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:16/10;
}
}
@media (max-width:640px){
.pezy-el-why.pezy-el-why .pezy-why__card{ padding:22px 20px 20px !important; }
.pezy-el-why.pezy-el-why .pezy-why__map,
.pezy-el-why.pezy-el-why .pezy-why__map-svg{ max-height:120px !important; }
.pezy-el-why.pezy-el-why .pezy-why__map-img{ max-height:160px !important; }
}
@media (prefers-reduced-motion: reduce){
.pezy-el-why.pezy-el-why .pezy-why__card{ transition:none; }
.pezy-el-why.pezy-el-why .pezy-why__box{
animation:none !important;
transform:rotate(var(--rot)) !important;
}
.pezy-el-why.pezy-el-why .pezy-why__pulse,
.pezy-el-why.pezy-el-why .pezy-why__bar::before,
.pezy-el-why.pezy-el-why .pezy-why__era-track i{
animation:none !important;
}
.pezy-el-why.pezy-el-why .pezy-why__bar::before,
.pezy-el-why.pezy-el-why .pezy-why__era-track i{
transform:scaleX(1) !important;
opacity:.35 !important;
}
}