/* MZUNI Hero: brand green #199747, crest gold #CCA302, Roboto headlines, Inter text (both already loaded by the theme). */
.mz-hero{--mz-green:#199747;--mz-green-dark:#127a38;--mz-gold:#cca302;--mz-shade:6,28,15;
  position:relative;width:100%;height:var(--mz-h,clamp(560px,82vh,820px));overflow:hidden;isolation:isolate;
  background:#0d3a1f;color:#fff;font-family:Inter,Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}
.elementor-widget-shortcode:has(.mz-hero){width:100%;max-width:100%;flex:1 1 100%}
.mz-hero *,.mz-hero *::before,.mz-hero *::after{box-sizing:border-box}
.mz-hero p{margin:0}

/* slides stack on top of each other and cross-fade */
.mz-hero__slides,.mz-hero__slide,.mz-hero__media,.mz-hero__chrome{position:absolute;inset:0}
.mz-hero__slide{opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.mz-hero__slide.is-active{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}
.mz-hero__media{overflow:hidden}
/* !important: the theme and Elementor both set img{height:auto}, which would stop the photo filling the hero on phones */
.mz-hero .mz-hero__media img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;transform-origin:62% 50%}
/* the one orchestrated moment: photo settles from a slow push-in while the words rise in order */
.mz-hero__slide.is-active .mz-hero__media img{animation:mz-settle calc(var(--mz-int,7000ms) + 1.5s) cubic-bezier(.2,.6,.3,1) both}
@keyframes mz-settle{from{transform:scale(1.09)}to{transform:scale(1)}}
.mz-hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--mz-shade),var(--mz-dark,.86)) 0%,rgba(var(--mz-shade),calc(var(--mz-dark,.86) * .72)) 38%,rgba(var(--mz-shade),calc(var(--mz-dark,.86) * .21)) 72%,rgba(var(--mz-shade),calc(var(--mz-dark,.86) * .35)) 100%),
             linear-gradient(0deg,rgba(var(--mz-shade),calc(var(--mz-dark,.86) * .8)) 0%,rgba(var(--mz-shade),0) 45%)}

.mz-hero__wrap{position:relative;height:100%;max-width:1290px;margin-inline:auto;padding:0 32px 120px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;align-items:end}
.mz-hero__copy{grid-column:1;max-width:760px}
.mz-hero__copy>*{opacity:0;transform:translateY(22px)}
.mz-hero__slide.is-active .mz-hero__copy>*{animation:mz-rise .85s cubic-bezier(.2,.7,.2,1) both}
.mz-hero__slide.is-active .mz-hero__copy>:nth-child(1){animation-delay:.30s}
.mz-hero__slide.is-active .mz-hero__copy>:nth-child(2){animation-delay:.42s}
.mz-hero__slide.is-active .mz-hero__copy>:nth-child(3){animation-delay:.56s}
.mz-hero__slide.is-active .mz-hero__copy>:nth-child(4){animation-delay:.70s}
@keyframes mz-rise{to{opacity:1;transform:none}}

.mz-hero__kicker{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:500;letter-spacing:.01em;line-height:1.3;color:#fff}
.mz-hero__kicker svg{width:26px;height:26px;fill:var(--mz-gold);flex:none}
.mz-hero .mz-hero__title{margin:18px 0 0;font-family:Roboto,Inter,system-ui,sans-serif;font-weight:700;color:#fff;
  font-size:clamp(2.4rem,1.2rem + 3.6vw,4.6rem);line-height:1.04;letter-spacing:-.02em;text-wrap:balance;max-width:15ch}
.mz-hero__text{margin-top:18px!important;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.55;max-width:46ch;color:rgba(255,255,255,.9)}
.mz-hero__cta{margin-top:30px!important}
.mz-hero__btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;background:var(--mz-green);color:#fff!important;
  font-family:Roboto,Inter,sans-serif;font-size:17px;font-weight:500;line-height:1;text-decoration:none!important;border:0;border-radius:0;
  transition:background-color .2s ease}
.mz-hero__btn svg{width:18px;height:18px;fill:currentColor;transition:transform .2s ease}
.mz-hero__btn:hover{background:var(--mz-green-dark)}
.mz-hero__btn:hover svg{transform:translateX(4px)}

/* fixed layer: degree shortcuts + slideshow controls (same grid as the copy, so everything lines up) */
.mz-hero__chrome{z-index:2;pointer-events:none}
.mz-hero__chrome .mz-hero__wrap{padding-bottom:40px}
.mz-hero__quick,.mz-hero__controls{pointer-events:auto}
.mz-hero__quick{grid-column:2;grid-row:1;align-self:end;margin-bottom:80px;display:flex;flex-direction:column}
.mz-hero__quick a{display:block;padding:20px 0 22px;border-bottom:1px solid rgba(255,255,255,.38);color:#fff!important;text-decoration:none!important;transition:border-color .2s ease}
.mz-hero__quick a+a{margin-top:6px}
.mz-hero__quick strong{display:block;font-weight:400;font-size:24px;line-height:1.2}
.mz-hero__quick span{display:block;margin-top:6px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.85)}
.mz-hero__quick a:hover{border-bottom-color:var(--mz-gold)}
.mz-hero__quick a:hover strong{color:var(--mz-gold)}

.mz-hero__controls{grid-column:1;grid-row:1;align-self:end;display:flex;align-items:center;gap:10px}
.mz-hero__segs{display:flex;gap:8px;margin-right:12px}
.mz-hero__seg{position:relative;width:56px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.mz-hero__seg::before,.mz-hero__fill{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px}
.mz-hero__seg::before{background:rgba(255,255,255,.35)}
.mz-hero__fill{background:var(--mz-gold);transform:scaleX(0);transform-origin:left}
.mz-hero__seg.is-active .mz-hero__fill{animation:mz-fill var(--mz-int,7000ms) linear forwards}
.mz-hero__seg:hover::before{background:rgba(255,255,255,.7)}
@keyframes mz-fill{to{transform:scaleX(1)}}
.mz-hero.is-paused .mz-hero__fill{animation-play-state:paused!important}
.mz-hero__btn-ctl{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.45);background:rgba(var(--mz-shade),.25);color:#fff;cursor:pointer;border-radius:0;transition:background-color .2s ease,border-color .2s ease}
.mz-hero__btn-ctl svg{width:20px;height:20px;fill:currentColor}
.mz-hero__btn-ctl:hover{background:rgba(255,255,255,.14);border-color:#fff}
.mz-hero__ico-play{display:none}
.mz-hero__pause[aria-pressed="true"] .mz-hero__ico-pause{display:none}
.mz-hero__pause[aria-pressed="true"] .mz-hero__ico-play{display:block}

.mz-hero a:focus-visible,.mz-hero button:focus-visible{outline:3px solid var(--mz-gold);outline-offset:3px}
.mz-hero .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* settings: height, movement, shortcuts (Hero Slides > Settings) */
.mz-hero--compact{--mz-h:clamp(480px,64vh,640px)}
.mz-hero--tall{--mz-h:clamp(600px,92vh,960px)}
.mz-hero--still .mz-hero__slide.is-active .mz-hero__media img,.mz-hero--still .mz-hero__slide.is-active .mz-hero__copy>*{animation:none}
.mz-hero--still .mz-hero__copy>*{opacity:1;transform:none}
.mz-hero--noquick .mz-hero__wrap{grid-template-columns:minmax(0,1fr)}
.mz-hero:not(.is-playing) .mz-hero__fill,.mz-hero[data-autoplay="0"] .mz-hero__seg.is-active .mz-hero__fill{animation:none;transform:scaleX(1)}

/* tablet and phone: one column; shortcuts sit under the slide text */
@media (max-width:991px){
  .mz-hero{height:auto;min-height:640px}
  .mz-hero__slides{position:relative;min-height:640px}
  .mz-hero__slide{position:absolute}
  .mz-hero__wrap{grid-template-columns:1fr;padding:0 22px 250px}
  .mz-hero--noquick .mz-hero__wrap{padding-bottom:120px}
  .mz-hero__chrome .mz-hero__wrap{padding-bottom:24px;grid-template-rows:auto auto;align-content:end}
  .mz-hero__controls{grid-row:1;margin-bottom:20px}
  .mz-hero__quick{grid-column:1;grid-row:2;margin:0;flex-direction:row;gap:14px}
  .mz-hero__quick a{flex:1;padding:12px 0 14px}
  .mz-hero__quick a+a{margin-top:0}
  .mz-hero__quick strong{font-size:19px}
  .mz-hero__quick span{font-size:14px}
  .mz-hero__media::after{background:linear-gradient(0deg,rgba(var(--mz-shade),.92) 0%,rgba(var(--mz-shade),.55) 55%,rgba(var(--mz-shade),.25) 100%)}
  .mz-hero__seg{width:40px}
}
@media (max-width:480px){
  .mz-hero__quick span{display:none}
  .mz-hero__wrap{padding-bottom:200px}
}

/* people who ask for less motion get a calm fade only, and the slideshow does not auto-advance (see hero.js) */
@media (prefers-reduced-motion:reduce){
  .mz-hero__slide,.mz-hero__slide.is-active{transition-duration:.01s}
  .mz-hero__slide.is-active .mz-hero__media img,.mz-hero__slide.is-active .mz-hero__copy>*{animation:none;opacity:1;transform:none}
  .mz-hero__copy>*{opacity:1;transform:none}
}
