/* Opening campaign: scoped to the first slide; shared slider controls stay intact. */
.hero-opening {
    background-color: #f5f8fc;
    background-image: none;
    background-position: bottom right;
    background-size: auto 90%;
}
.hero-opening::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('img/optimized/hero-uniform-cutout.png') right bottom / auto 108% no-repeat;
    z-index: 1;
    pointer-events: none;
}
.hero-opening::before {
    right: 30%;
    background: linear-gradient(#f5f8fcd4, #f5f8fcd4), url('img/optimized/hero-facade.webp') center 55% / cover no-repeat;
    mask-image: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%);
}
.hero-opening .hero-slide-content {
    left: 7%;
    top: 50%;
    transform: translateY(-50%);
    width: 48%;
    max-width: 690px;
    text-align: left;
    color: #092655;
    opacity: 1;
}
.opening-origin {
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 600;
    letter-spacing: .08em;
    margin-bottom: 25px;
    color: #234674;
}
.hero-opening .hero-slide-content h1 {
    font-size: clamp(40px, 4.6vw, 74px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-shadow: none;
    text-wrap: balance;
    margin-bottom: 25px;
}
.hero-opening h1 span { color: #0064e8; }
.hero-opening .hero-slide-content p {
    max-width: 480px;
    margin: 0 0 30px;
    font-size: clamp(16px, 1.3vw, 20px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    color: #294568;
    text-shadow: none;
}
.hero-opening .hero-cta-button {
    padding: 20px 30px;
    background: #ff8500;
    color: #10274b;
    font-weight: 800;
    font-size: clamp(14px, 1.1vw, 17px);
    letter-spacing: 0;
    border: 0;
    box-shadow: 0 10px 24px #e4770029;
}
.hero-opening .hero-cta-button:hover { background: #ff9b2e; transform: translateY(-2px); }
.hero-opening .hero-cta-button:focus-visible { outline: 3px solid #092655; outline-offset: 5px; }
.opening-assurance { display: flex; gap: 22px; margin-top: 28px; color: #294568; font-size: 12px; font-weight: 600; }
.opening-assurance span::before { content: '✓'; color: #0055bd; margin-right: 7px; }
.hero-slider:has(.hero-opening.active) .hero-arrow { width: 44px; height: 44px; color: #092655; filter: none; background: #ffffffdc; border-radius: 50%; }
@media (min-width: 769px) and (max-width: 1100px) {
    .hero-opening::before { right: 30%; }
}
@media (max-width: 768px) {
    .hero-opening {
        background-image: none;
        background-size: auto 44%;
        background-position: right bottom;
    }
    /* Keep the garment in the lower visual half so the message remains clear. */
    .hero-opening::after { background-size: auto 57%; background-position: right bottom; }
    .hero-opening::before {
        right: 0;
        bottom: 30%;
        background-image: linear-gradient(#f5f8fccf, #f5f8fccf), url('img/optimized/hero-facade-mobile.webp');
        background-position: center, center 48%;
        mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
    }
    .hero-opening .hero-slide-content { top: 128px; left: 8%; width: 84%; transform: none; }
    .opening-origin { font-size: 10px; letter-spacing: .04em; margin-bottom: 17px; }
    .hero-opening .hero-slide-content h1 { font-size: clamp(44px, 12.5vw, 64px); line-height: 1.03; margin-bottom: 19px; }
    .hero-opening .hero-slide-content p { font-size: 16px; line-height: 1.5; max-width: 440px; margin-bottom: 22px; }
    .hero-opening .hero-cta-button { padding: 18px 25px; font-size: 14px; }
    .opening-assurance { gap: 13px; font-size: 11px; margin-top: 21px; flex-wrap: wrap; }
    .hero-slider:has(.hero-opening.active) .hero-arrow { width: 44px; height: 44px; top: auto; bottom: 24px; transform: none; }
}
@media (max-width: 768px) and (max-height: 740px) {
    .hero-slider:has(.hero-opening) { min-height: 740px; }
}
@media (min-width: 769px) and (max-height: 550px) {
    .hero-opening .hero-slide-content { top: 125px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-opening .hero-cta-button { transition: none; }
}