/* ======================================================================
   Front Hero — Design #16 (Progress-bar Auto Slider, lightSlider)
   Library variant. Boxed slider, top progress bar fills per slide +
   numbered counter. Class pattern: front-hero-16-*. Palette adapts via
   --bs-primary / --bs-secondary.
   ====================================================================== */

.front-hero-16-band { padding: 1.75rem 0 0.5rem; }

.front-hero-16-frame {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.09);
}
.front-hero-16-list { list-style: none; margin: 0; padding: 0; }
.front-hero-16-slide {
    position: relative;
    height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.front-hero-16-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(9, 16, 11, 0.74) 0%, rgba(9, 16, 11, 0.42) 46%, transparent 80%);
}
.front-hero-16-content { position: relative; z-index: 2; color: #fff; padding: 0 clamp(1.5rem, 5vw, 4rem); max-width: 560px; }
.front-hero-16-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(var(--bs-secondary-rgb, 255, 122, 69), 0.92);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
.front-hero-16-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
    text-shadow: 0 3px 24px rgba(0, 0, 0, 0.34);
}
.front-hero-16-sub {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1.7rem;
    max-width: 440px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.front-hero-16-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #fff;
    color: #13261c;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.7rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    transition: transform 0.2s ease;
}
.front-hero-16-cta:hover { transform: translateY(-2px); }

/* top progress bar */
.front-hero-16-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.22); z-index: 30; }
.front-hero-16-progress-fill { display: block; height: 100%; width: 0; background: #fff; }
.front-hero-16-progress-fill.is-run { animation: fronthero16fill 5000ms linear forwards; }
@keyframes fronthero16fill { from { width: 0; } to { width: 100%; } }

/* numbered counter */
.front-hero-16-counter { position: absolute; top: 20px; right: 24px; z-index: 30; color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.front-hero-16-counter-cur { font-size: 1.4rem; }
.front-hero-16-counter-sep { opacity: 0.6; margin: 0 0.25rem; }
.front-hero-16-counter-total { opacity: 0.7; }

@media (max-width: 991.98px) { .front-hero-16-slide { height: 400px; } }
@media (max-width: 575.98px) {
    .front-hero-16-slide { height: 360px; }
    .front-hero-16-counter { top: 14px; right: 16px; }
}