/* Homepage hero banner (v2) - see inc/hero.php */
.sgt-hero { --hero-navy: #12356B; --hero-red: #E12444; position: relative; background: var(--hero-navy); overflow: hidden; }
.sgt-hero__track { margin: 0 !important; }
.sgt-hero__track:not(.slick-initialized) .sgt-hero__slide + .sgt-hero__slide { display: none; }
.sgt-hero__slide { position: relative; height: clamp(440px, 36vw, 620px); }
.sgt-hero__media, .sgt-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sgt-hero__media img { object-fit: cover; object-position: 70% center; }
.sgt-hero__slide::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(18, 53, 107, .94) 0%, rgba(18, 53, 107, .82) 30%, rgba(18, 53, 107, .35) 52%, rgba(18, 53, 107, 0) 68%); }
.sgt-hero__content { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding-bottom: 56px; }
/* Line the text up with the header logo (.container 15px + .header-sec 40px) */
.sgt-hero__content .container { width: 100%; padding-left: 55px; padding-right: 55px; }
.sgt-hero__copy { max-width: 560px; color: #fff; }
.sgt-hero__title { font-family: "Barlow Condensed", "Inter", sans-serif !important; font-weight: 700; font-size: clamp(38px, 3.7vw, 64px); line-height: 1.02; letter-spacing: .2px; color: #fff; margin: 0 0 16px; }
.sgt-hero__text { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 0 0 28px; max-width: 480px; }
.sgt-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sgt-hero__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 6px; font-weight: 600; font-size: 16px; line-height: 1; transition: background .2s, color .2s, border-color .2s; }
.sgt-hero__btn--primary { background: var(--hero-red); color: #fff; border: 2px solid var(--hero-red); }
.sgt-hero__btn--primary:hover { background: #c41b38; border-color: #c41b38; color: #fff; }
.sgt-hero__btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .85); }
.sgt-hero__btn--ghost:hover { background: #fff; color: var(--hero-navy); }
.sgt-hero__btn:focus-visible, .sgt-hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Bottom-left, under the buttons, so the floating WhatsApp button never covers it */
.sgt-hero__controls { position: absolute; z-index: 3; left: max(55px, calc((100% - 1300px) / 2 + 55px)); bottom: 28px; display: flex; align-items: center; gap: 14px; color: #fff; font-weight: 600; font-size: 15px; }
.sgt-hero__arrow { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); background: rgba(18, 53, 107, .55); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.sgt-hero__arrow:hover { background: var(--hero-red); border-color: var(--hero-red); }
.sgt-hero__arrow svg { width: 24px; height: 24px; stroke: #fff; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sgt-hero__counter { min-width: 44px; text-align: center; letter-spacing: 1px; }

/* Phones: image on top, text stacked below on navy */
@media (max-width: 767px) {
    .sgt-hero__slide { height: auto; }
    .sgt-hero__media, .sgt-hero__media img { position: relative; inset: auto; }
    .sgt-hero__media img { aspect-ratio: 4 / 3; height: auto; object-position: center; }
    .sgt-hero__slide::after { display: none; }
    .sgt-hero__content { position: relative; inset: auto; background: var(--hero-navy); padding: 22px 0 84px; }
    .sgt-hero__content .container { padding-left: 16px; padding-right: 16px; }
    .sgt-hero__title { font-size: 32px; margin-bottom: 10px; }
    .sgt-hero__text { font-size: 15px; margin-bottom: 18px; }
    .sgt-hero__actions { gap: 10px; }
    .sgt-hero__btn { flex: 1 1 140px; min-height: 48px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
    .sgt-hero__controls { left: 16px; right: auto; bottom: 20px; gap: 12px; }
    .sgt-hero__arrow { width: 44px; height: 44px; }
}