/* ============================================================
   COMPLIANCE CAROUSEL
   ============================================================ */

.compliance-carousel {
    position: relative;

    width: 100%;
    max-width: 760px;
    margin: 40px auto;
    padding: 28px;
    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #dfe7f0;
    border-radius: 28px;

    box-shadow: 0 15px 40px rgba(30, 50, 80, 0.08);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   SECTION TITLE
   ============================================================ */

.compliance-title {
    margin: 0 0 32px;

    color: #91a4bd;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* ============================================================
   SLIDER AREA

   Keep enough height for the tallest Challenge + Solution
   combination to prevent the rest of the page from jumping.
   ============================================================ */

.compliance-slides {
    position: relative;

    min-height: 246px;

    overflow: hidden;
}


/* ============================================================
   INDIVIDUAL SLIDE
   ============================================================ */

.compliance-slide {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    box-sizing: border-box;

    opacity: 0;

    transform: translateY(28px);

    pointer-events: none;

    /*
     * ANIMATION SPEED
     *
     * 0.45s = 450ms
     *
     * Change this if you want faster/slower movement.
     */
    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}


/* ============================================================
   ACTIVE SLIDE
   ============================================================ */

.compliance-slide.active {
    position: relative;

    opacity: 1;

    transform: translateY(0);

    pointer-events: auto;
}


/* ============================================================
   CHALLENGE BOX
   ============================================================ */

.challenge-box {
    margin-bottom: 30px;
    padding: 23px 28px;

    box-sizing: border-box;

    background: #fff8ef;

    border: 1px solid #ffc98e;
    border-radius: 17px;
}


/* Challenge heading */

.challenge-label {
    margin-bottom: 9px;

    color: #a93400;

    font-size: 20px;
    font-weight: 600;
}


/* Challenge text */

.challenge-text {
    margin: 0;

    color: #071a36;

    font-size: 23px;
    font-weight: 600;

    line-height: 1.35;
}


/* ============================================================
   SOLUTION BOX
   ============================================================ */

.solution-box {
    padding: 23px 28px;

    box-sizing: border-box;

    background: #effcf4;

    border: 1px solid #a9efc5;
    border-radius: 17px;
}


/* Solution heading */

.solution-label {
    margin-bottom: 9px;

    color: #008b45;

    font-size: 20px;
    font-weight: 600;
}


/* Solution text */

.solution-text {
    margin: 0;

    color: #071a36;

    font-size: 23px;
    font-weight: 600;

    line-height: 1.35;
}


/* ============================================================
   CAROUSEL INDICATORS
   ============================================================ */

.carousel-indicators {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 9px;

    margin: 28px 0 40px;
}


/* Individual dot */

.carousel-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #dfe6ef;

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease,
        border-radius 0.3s ease;
}


/* Active dot */

.carousel-dot.active {
    width: 36px;

    border-radius: 10px;

    background: #ed5a00;
}


/* ============================================================
   STATIC FEATURE GRID
   ============================================================ */

.compliance-features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
}


/* Individual feature */

.compliance-feature {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 66px;

    padding: 14px 22px;

    box-sizing: border-box;

    background: #f7f9fc;

    border-radius: 12px;

    color: #394b64;

    font-size: 18px;
    font-weight: 500;
}


/* Feature icon */

.feature-icon {
    flex: 0 0 auto;

    font-size: 22px;
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 700px) {

    .compliance-carousel {
        margin: 25px auto;
        padding: 32px 22px;

        border-radius: 20px;
    }


    .compliance-title {
        margin-bottom: 25px;

        font-size: 17px;
    }


    .compliance-slides {
        min-height: 285px;
    }


    .challenge-box,
    .solution-box {
        padding: 20px;
    }


    .challenge-label,
    .solution-label {
        font-size: 17px;
    }


    .challenge-text,
    .solution-text {
        font-size: 19px;
    }


    .compliance-features {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .compliance-feature {
        min-height: 58px;

        font-size: 16px;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 400px) {

    .compliance-carousel {
        padding: 26px 16px;
    }


    .compliance-slides {
        min-height: 315px;
    }


    .challenge-text,
    .solution-text {
        font-size: 18px;
    }
}


/* ============================================================
   ACCESSIBILITY

   Users who prefer reduced motion will see the content change
   without the slide animation.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .compliance-slide,
    .carousel-dot {
        transition: none;
    }
}

/* ============================================================
   HERO CAROUSEL OVERRIDES
   ============================================================

   These styles position the carousel as the right-hand
   component inside the existing hero section.

   The existing desktop hero image is being replaced by
   this carousel.
   ============================================================ */


/* ============================================================
   HERO CONTAINER WIDTH

   Widens only the hero container (the site default is
   1280px with 64px side padding) while keeping a minimum
   side gutter. Chained with .max-w-container-max so it wins
   over style.css, which loads after this file.
   ============================================================ */

@media (min-width: 1024px) {

    .hero-container.max-w-container-max {
        max-width: 1440px;

        padding-left: var(--spacing-margin-tablet, 32px);
        padding-right: var(--spacing-margin-tablet, 32px);
    }

}


/* ============================================================
   HERO LAYOUT TOP SPACING
   ============================================================ */

.hero-layout {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* ============================================================
   HERO TEXT TOP ALIGNMENT

   The hero heading carries half-leading and ascender space
   above its cap height, so the visible text started lower
   than the carousel card border.

   This trims that space so the top of "Since 1983" sits on
   the same line as the carousel top border.
   ============================================================ */

/* Only where the two columns sit side by side. */
@media (min-width: 1024px) {

    .hero-layout .hero-text > h1:first-child {
        margin-top: calc((1lh - 1cap) / -2);
    }

}


/* ============================================================
   HERO CAROUSEL POSITION
   ============================================================ */

.hero-compliance-carousel {
    /*
     * The carousel now sits INLINE next to the hero text
     * (see .hero-layout in index.html), so it is no longer
     * absolutely positioned over the hero.
     */
    position: relative;

    top: auto;
    right: auto;

    transform: none;

    width: 100%;

    max-width: 500px;

    margin: 0 0 0 auto;

    /*
     * Slightly tighter padding than standalone version so
     * it fits naturally inside the hero.
     */
    padding: 25px 34px 0px;

    box-sizing: border-box;
}


/* ============================================================
   HERO CAROUSEL TITLE
   ============================================================ */

.hero-compliance-carousel .compliance-title {
    margin-bottom: 26px;

    font-size: 18px;
}


/* ============================================================
   HERO SLIDE AREA
   ============================================================ */

.hero-compliance-carousel .compliance-slides {
    min-height: 235px;
}


/* ============================================================
   HERO CHALLENGE / SOLUTION BOXES
   ============================================================ */

.hero-compliance-carousel .challenge-box,
.hero-compliance-carousel .solution-box {
    padding: 19px 26px;
}


.hero-compliance-carousel .challenge-box {
    margin-bottom: 24px;
}


.hero-compliance-carousel .challenge-label,
.hero-compliance-carousel .solution-label {
    font-size: 18px;
}


.hero-compliance-carousel .challenge-text,
.hero-compliance-carousel .solution-text {
    font-size: 21px;
}


/* ============================================================
   HERO INDICATORS
   ============================================================ */

.hero-compliance-carousel .carousel-indicators {
    margin: 24px 0 30px;
}


/* ============================================================
   HERO FEATURE BLOCKS
   ============================================================ */

.hero-compliance-carousel .compliance-features {
    gap: 12px;
}


.hero-compliance-carousel .compliance-feature {
    min-height: 58px;

    padding: 11px 16px;

    gap: 10px;

    font-size: 15px;
}


.hero-compliance-carousel .feature-icon {
    font-size: 19px;
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .hero-compliance-carousel {
        max-width: 620px;
    }

}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media (min-width: 1600px) {

    .hero-compliance-carousel {
        max-width: 660px;
    }

}


/* ============================================================
   IMPORTANT:
   The existing hero carousel is desktop-only because the
   HTML contains "hidden lg:block".

   On mobile/tablet, the existing hero remains clean and
   uncluttered rather than forcing this large carousel
   into the small hero area.
   ============================================================ */