/* Responsive hero slider: same 1920x1080 (16:9) images on every device.
   Images are never cropped; on smaller screens the image comes first and text follows below. */
.hero-slider {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    background: #0C0D32;
}
.hero-slides { position: relative; width: 100%; height: auto !important; }
.hero-slide {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: auto !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity .6s ease, visibility .6s ease;
}
.hero-slide.active {
    position: relative;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}
.hero-slide picture { display:block; width:100%; height:auto !important; line-height:0; }
.hero-slide img {
    display:block;
    width:100%;
    height:auto !important;
    max-width:100%;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
}
.hero-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.15)); }
.hero-content {
    position:absolute; inset:0; z-index:2; box-sizing:border-box;
    width:100%; height:100%; padding:clamp(24px,5vw,72px);
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
.hero-content h1,.hero-content h2 { max-width:800px; margin:0 0 20px; color:#fff; font-size:clamp(30px,4.7vw,68px); line-height:1.08; }
.hero-content p { max-width:650px; margin:0 0 28px; color:#fff; font-size:clamp(14px,1.35vw,18px); line-height:1.5; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(0,0,0,.3); color:#fff; font-size:22px; cursor:pointer; }
.slider-prev { left:16px; } .slider-next { right:16px; }
.slider-dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:5; }
.slider-dot { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.6); cursor:pointer; }
.slider-dot.active { background:#F97316; }
/* Keep text below the full image on tablet and mobile. This guarantees the top of the image is unobstructed. */
@media (max-width:1199px) {
    .hero-slide.active { display:flex; flex-direction:column; }
    .hero-slide picture { order:0; flex:0 0 auto; }
    .hero-overlay { display:none; }
    .hero-content {
        position:relative; inset:auto; order:1; width:100%; height:auto; padding:24px 22px 36px;
        background:#0C0D32; justify-content:flex-start;
    }
    .hero-content h1,.hero-content h2 { font-size:clamp(24px,3.6vw,42px); margin-bottom:12px; }
    .hero-content p { font-size:15px; margin-bottom:18px; }
    .slider-arrow { top:calc((100vw * 0.28125)); width:38px; height:38px; }
    .slider-prev { left:10px; } .slider-next { right:10px; }
    .slider-dots { bottom:auto; top:calc((100vw * 0.5625) - 24px); }
}
@media (max-width:767px) {
    .hero-content { padding:18px 18px 28px; }
    .hero-content h1,.hero-content h2 { font-size:clamp(21px,6vw,30px); }
    .hero-content p { font-size:14px; line-height:1.45; }
    .hero-buttons { gap:8px; }
    .slider-arrow { top:calc(100vw * 0.28125); width:32px; height:32px; font-size:17px; }
    .slider-dots { top:calc((100vw * 0.5625) - 22px); gap:7px; }
    .slider-dot { width:7px; height:7px; }
}
@media (prefers-reduced-motion:reduce) { .hero-slide { transition:none; } }


/* Prevent a white strip above the hero while accounting for the fixed header. */
html, body { margin: 0; padding: 0; }
.hero-slider { margin-top: 0 !important; }
body { padding-top: 100px; }
@media (max-width: 1199px) {
    body { padding-top: 72px; }
}


/* Keep the desktop hero tight to the top, but reserve space for the fixed header
   on tablet/mobile so it cannot cover the top of the slider image. */
html, body { margin: 0 !important; }
body { padding-top: 0 !important; }
.hero-slider { margin-top: 0 !important; }
@media (max-width: 1199px) {
    body { padding-top: 72px !important; }
}
@media (max-width: 767px) {
    body { padding-top: 72px !important; }
}