/* ============================================================
   HERO SLIDER
   ============================================================ */
.hero { position: relative; overflow: hidden; background: #111; }
.hero__track { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); will-change: transform; }
.hero__slide { flex: 0 0 100%; }
.hero__slide img { width: 100%; height: auto; aspect-ratio: 3960/1395; object-fit: cover; }
.hero__arrow {
    position: absolute; top: 50%; transform: none;
    width: 49px; height: 50px; display: grid; place-items: center;
    background: #fff; color: #2b2b2b; z-index: 3; transition: background .15s;
}
.hero__arrow:hover { background: #f0f0f0; }
.hero__arrow svg { width: 17px; height: 17px; }
.hero__arrow--prev { left: 0; }
.hero__arrow--next { right: 0; }

.dots { display: flex; justify-content: center; align-items: center; gap: 10.5px; padding: 21px 0 0; }
.dots button {
    width: 12px; height: 12px; border-radius: 50%;
    background: #fff; border: 1.5px solid #b5b5b5; padding: 0;
    transition: background .15s, border-color .15s;
}
.dots button:hover { border-color: #7d7d7d; }
.dots button[aria-current="true"] { background: var(--brand-blue); border-color: var(--brand-blue); }

/* Composed slides (text + product photo) */
.hero { background: var(--brand-navy); }
.hero__slide--navy    { background: linear-gradient(120deg, var(--brand-navy) 0%, #13306b 100%); }
.hero__slide--magenta { background: linear-gradient(120deg, #7a0a4a 0%, var(--brand-magenta) 100%); }
.hero__slide--blue    { background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-navy) 100%); }
.hero__inner {
    display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px;
    min-height: clamp(360px, 36vw, 520px); padding-top: 40px; padding-bottom: 40px;
    padding-left: 80px; padding-right: 80px;
}
.hero__copy { color: #fff; }
.hero__eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-yellow); }
.hero__title { margin: 0 0 14px; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.04; font-weight: 900; color: #fff; }
.hero__text { margin: 0 0 26px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { justify-self: center; width: min(100%, 420px); }
.hero__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.25); }