/* =====================================================================
   MECOTEC Hero Slider (Homepage) – Cinematic Fullscreen
   Template: Resources/Private/Templates/ContentElements/HeroSlider.html
   Prefix: .mh-  |  no dependencies
   ===================================================================== */
.mh{position:relative;isolation:isolate;height:calc(100svh - var(--mh-header,72px));min-height:640px;max-height:1080px;overflow:hidden;background:#0b0f14;color:#fff;font-family:Roboto,system-ui,sans-serif;--mh-accent:#5fd0ff;--mh-dur:7000ms;--mh-nav-h: 0px;--mh-cols:4}
.mh *{box-sizing:border-box}
.mh a{color:inherit;text-decoration:none}

/* Slides */
.mh-slides{position:absolute;inset:0}
.mh-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.3s cubic-bezier(.4,0,.2,1),visibility 0s 1.3s;z-index:1}
.mh-slide.is-active{opacity:1;visibility:visible;transition:opacity 1.3s cubic-bezier(.4,0,.2,1);z-index:2}
.mh-media{position:absolute;inset:0;overflow:hidden}
.mh-media img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.02) translate3d(0,0,0);transform-origin:50% 50%;will-change:transform;filter:saturate(1.05)}
.mh-slide.is-active .mh-media img{animation:mhKenBurns 9s cubic-bezier(.2,.5,.3,1) forwards}
@keyframes mhKenBurns{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.mh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,9,13,.82) 0%,rgba(6,9,13,.55) 38%,rgba(6,9,13,.05) 70%,rgba(6,9,13,0) 100%),linear-gradient(180deg,rgba(6,9,13,.55) 0%,rgba(6,9,13,0) 28%,rgba(6,9,13,0) 55%,rgba(6,9,13,.85) 100%)}
.mh-grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;z-index:3;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Brand tagline (semantic H1, visually small) */
.mh-tagline{position:absolute;z-index:5;left:clamp(24px,8vw,120px);right:clamp(24px,8vw,120px);top:calc(var(--mh-header,72px) + clamp(20px,3vh,40px));display:flex;align-items:center;gap:14px;margin:0;font:500 12px/1.4 Roboto,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.mh-tagline i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--mh-accent);box-shadow:0 0 0 0 rgba(95,208,255,.6);animation:mhPulse 2.4s ease-out infinite}
@keyframes mhPulse{0%{box-shadow:0 0 0 0 rgba(95,208,255,.6)}100%{box-shadow:0 0 0 14px rgba(95,208,255,0)}}

/* Slide content */
.mh-content{position:absolute;z-index:4;left:clamp(24px,8vw,120px);right:clamp(24px,8vw,120px);bottom:calc(var(--mh-nav-h) + clamp(40px,7vh,88px));max-width:960px}
.mh-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;font:300 14px/1 Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.mh-eyebrow b{font-weight:600;color:var(--mh-accent);letter-spacing:.1em}
.mh-eyebrow::after{content:"";width:56px;height:1px;background:rgba(255,255,255,.35)}
.mh-title{margin:0 0 22px;font:600 clamp(36px,4.4vw,64px)/.98 Poppins,sans-serif;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;color:#fff}
.mh-title .l{display:block;overflow:hidden}
.mh-title .l span{display:block}
.mh-sub{margin:0 0 34px;max-width:560px;font:300 clamp(16px,1.25vw,19px)/1.6 Roboto,sans-serif;color:rgba(255,255,255,.82)}
.mh-sub p{margin:0;font:inherit;color:inherit}
.mh-sub p+p{margin-top:.6em}
.mh-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mh-btn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 10px 0 26px;border-radius:999px;background:#fff;color:#0b0f14;font:500 15px/1 Roboto,sans-serif;letter-spacing:.02em;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mh-btn .ic{width:36px;height:36px;border-radius:50%;background:#0b0f14;color:#fff;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mh-btn .ic svg{width:16px;height:16px;display:block}
.mh-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(255,255,255,.35)}
.mh-btn:hover .ic{transform:translateX(3px)}
/* guard against global a/button styles of the site */
.mh .mh-btn,.mh .mh-btn:hover,.mh .mh-btn:focus{color:#0b0f14!important;background:#fff!important;text-decoration:none!important}
.mh .mh-btn .ic{color:#fff!important}

/* staggered text reveal */
.mh-content .mh-eyebrow,.mh-content .mh-sub,.mh-content .mh-actions,.mh-title .l span{opacity:0;transform:translateY(34px)}
.mh-slide.is-active .mh-content .mh-eyebrow,.mh-slide.is-active .mh-content .mh-sub,.mh-slide.is-active .mh-content .mh-actions,.mh-slide.is-active .mh-title .l span{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.mh-slide.is-active .mh-eyebrow{transition-delay:.25s}
.mh-slide.is-active .mh-title .l span{transition-delay:.4s}
.mh-slide.is-active .mh-sub{transition-delay:.65s}
.mh-slide.is-active .mh-actions{transition-delay:.8s}

/* Ghost counter */
.mh-counter{position:absolute;z-index:4;right:clamp(24px,8vw,120px);bottom:calc(var(--mh-nav-h) + clamp(40px,7vh,88px));display:flex;align-items:flex-end;gap:10px;font:300 clamp(64px,9vw,140px)/.8 Poppins,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);user-select:none;pointer-events:none}
.mh-counter small{font:300 16px/1 Poppins,sans-serif;letter-spacing:.2em;color:rgba(255,255,255,.5);-webkit-text-stroke:0;margin-bottom:6px}
.mh-counter .n{display:inline-block;min-width:1.2em;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.mh-counter .n.is-swap{opacity:0;transform:translateY(20px)}

/* Arrows */
.mh-arrows{position:absolute;z-index:6;right:clamp(16px,3vw,48px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.mh .mh-arrow{width:56px;height:56px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.08)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff!important;display:grid;place-items:center;cursor:pointer;transition:background .3s,transform .3s,border-color .3s}
.mh .mh-arrow:hover{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.5)!important;transform:scale(1.06)}
.mh-arrow svg{width:20px;height:20px;display:block}

/* Glass navigation */
.mh-nav{position:absolute;z-index:7;left:0;right:0;bottom:0;height:var(--mh-nav-h);display:grid;grid-template-columns:repeat(var(--mh-cols,4),minmax(0,1fr));background:rgba(8,12,18,.42);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);border-top:1px solid rgba(255,255,255,.12)}
.mh .mh-tab{position:relative;display:flex;align-items:center;gap:18px;min-width:0;padding:0 clamp(16px,2.4vw,36px);border:0;border-left:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent!important;color:rgba(255,255,255,.55);text-align:left;cursor:pointer;font-family:Roboto,sans-serif;transition:color .35s,background .35s}
.mh .mh-tab:first-child{border-left:0}
.mh .mh-tab:hover{background:rgba(255,255,255,.05)!important;color:#fff}
.mh .mh-tab.is-active{color:#fff}
.mh-thumb{flex:0 0 auto;width:72px;height:52px;border-radius:8px;overflow:hidden;position:relative;opacity:.75;transition:opacity .35s,transform .35s}
.mh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mh-tab.is-active .mh-thumb,.mh-tab:hover .mh-thumb{opacity:1;transform:scale(1.04)}
.mh-tab-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.mh-tab-idx{font:500 11px/1 Roboto,sans-serif;letter-spacing:.24em;color:rgba(255,255,255,.45)}
.mh-tab.is-active .mh-tab-idx{color:var(--mh-accent)}
.mh-tab-title{font:500 15px/1.3 Poppins,sans-serif;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-bar{position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(255,255,255,.08)}
.mh-bar i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--mh-accent),#fff);transform-origin:left}
.mh-tab.is-active .mh-bar i{animation:mhFill var(--mh-dur) linear forwards}
.mh.is-paused .mh-tab.is-active .mh-bar i{animation-play-state:paused}
@keyframes mhFill{from{width:0}to{width:100%}}

/* Scroll cue */
.mh-scroll{position:absolute;z-index:5;left:50%;bottom:calc(var(--mh-nav-h) + 18px);transform:translateX(-50%);font:500 10px/1 Roboto,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:8px}
.mh-scroll::after{content:"";width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));animation:mhDrop 2s ease-in-out infinite}
@keyframes mhDrop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Responsive */
@media (max-width:1100px){.mh-counter{display:none}.mh-scroll{display:none}}
@media (max-width:820px){
  .mh{--mh-nav-h: 0px;min-height:520px;max-height:620px}
  .mh-arrows{display:none}
  .mh-tagline{font-size:10px;letter-spacing:.22em;top:72px}
  .mh-content{right:24px;bottom:calc(var(--mh-nav-h) + 36px)}
  .mh-title{font-size:clamp(30px,9vw,46px)}
  .mh-sub{font-size:15px;margin-bottom:26px}
  .mh-btn{height:48px}
  .mh-thumb,.mh-tab-title{display:none}
  .mh .mh-tab{justify-content:center;padding:0}
  .mh-tab-idx{font-size:12px}
  .mh-shade{background:linear-gradient(180deg,rgba(6,9,13,.6) 0%,rgba(6,9,13,.15) 30%,rgba(6,9,13,.35) 55%,rgba(6,9,13,.92) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .mh-slide.is-active .mh-media img{animation:none}
  .mh-slide,.mh-content *,.mh-title .l span{transition-duration:.01ms!important;transition-delay:0s!important}
  .mh-tagline i,.mh-scroll::after{animation:none}
}