@counter-style video-review-3digit {
    system: numeric;
    symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
    suffix: '';
    pad: 3 '0';
}

body {
    font-family: 'Commissioner', sans-serif;
}

.premium-title,
h1,
h2,
h3 {
    font-family: 'Unbounded', sans-serif;
}

header,
.header {
    background: rgba(6, 16, 30, .85) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

header a,
.header a,
.nav a {
    color: rgba(255, 255, 255, .85) !important;
}

#all_reviews {
    --stage-top: 2.8rem;
    --stage-right: max(1rem, calc((100vw - 1180px) / 2));
    min-height: calc(100svh - var(--premium-header-height));
    padding: clamp(6.5rem, 10vw, 9rem) 0 clamp(5.25rem, 8vw, 7.25rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 16%, rgba(52, 144, 255, .28), transparent 25rem),
        radial-gradient(circle at 88% 8%, rgba(137, 226, 78, .14), transparent 22rem),
        linear-gradient(180deg, rgba(4, 9, 21, .1), rgba(4, 9, 21, .52));
}

#all_reviews::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(4, 9, 21, .72));
}

.reviews-hero {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(300px, .52fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: end;
    margin-bottom: clamp(2.4rem, 5vw, 4.4rem);
    min-width: 0;
}

.reviews-hero-content,
.reviews-hero-proof {
    min-width: 0;
}

.reviews-hero .premium-eyebrow {
    margin-bottom: 1.25rem;
}

.reviews-title {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.1rem, 5.2vw, 5rem);
    line-height: .98;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.reviews-title span {
    display: block;
    color: transparent;
    background: linear-gradient(115deg, #ffffff 0%, #d7eaff 28%, var(--owu-blue) 58%, var(--owu-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.reviews-hero-copy {
    display: grid;
    gap: 1.1rem;
}

.reviews-hero-copy .premium-copy {
    margin: 0;
    max-width: 35rem;
}

.reviews-proof-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

.reviews-proof-item {
    min-width: 0;
    padding: .9rem .85rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .045);
    backdrop-filter: blur(14px);
}

.reviews-proof-item strong {
    display: block;
    margin-bottom: .3rem;
    color: #ffffff;
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1rem, 2vw, 1.34rem);
    line-height: 1.1;
}

.reviews-proof-item span {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.45;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.reviews-grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    counter-reset: video-review;
}

.video-review-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .045);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .18);
    cursor: pointer;
    isolation: isolate;
    counter-increment: video-review;
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.video-review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(137, 226, 78, .38);
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 28px 72px rgba(0, 0, 0, .28);
}

.video-review-card:focus-visible {
    outline: 2px solid rgba(137, 226, 78, .95);
    outline-offset: 5px;
}

.video-review-card.is-featured {
    grid-column: 1 / span 2;
    grid-row: span 2;
}

.video-review-card.is-featured-reverse {
    grid-column: span 2 / -1;
    grid-row: span 2;
}

.video-review-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #07111f;
}

.video-review-card.is-featured .video-review-media,
.video-review-card.is-featured-reverse .video-review-media {
    aspect-ratio: 16 / 10;
}

.video-review-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 17, 31, .02) 0%, rgba(7, 17, 31, .76) 100%),
        radial-gradient(circle at 78% 22%, rgba(52, 144, 255, .28), transparent 32%);
    z-index: 1;
}

.video-review-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform .4s ease, filter .4s ease;
}

.video-review-card:hover .video-review-media img {
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.06);
}

.video-review-play {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: inline-flex;
    width: 3.35rem;
    height: 3.35rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(137, 226, 78, .94), rgba(52, 144, 255, .92));
    box-shadow: 0 16px 34px rgba(52, 144, 255, .28);
}

.video-review-play::before {
    content: '';
    width: 0;
    height: 0;
    margin-left: .18rem;
    border-top: .48rem solid transparent;
    border-bottom: .48rem solid transparent;
    border-left: .72rem solid #07111f;
}

.video-review-index {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 2;
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    padding: 0 .7rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(7, 17, 31, .58);
    color: rgba(255, 255, 255, .84);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
}

.video-review-index::before {
    content: counter(video-review, video-review-3digit);
}

.video-review-body {
    display: grid;
    gap: .65rem;
    padding: 1rem;
}

.video-review-card.is-featured .video-review-body,
.video-review-card.is-featured-reverse .video-review-body {
    padding: 1.35rem;
}

.video-review-label {
    width: fit-content;
    max-width: 100%;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(52, 144, 255, .13);
    color: #9ecfff;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.video-review-body h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(.95rem, 1.4vw, 1.12rem);
    line-height: 1.35;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.video-review-card.is-featured h3,
.video-review-card.is-featured-reverse h3 {
    max-width: 22rem;
    font-size: clamp(1.25rem, 2.4vw, 1.8rem);
    line-height: 1.18;
}

.video-review-body p {
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: .9rem;
    line-height: 1.58;
}

.video-review-card:not(.is-featured):not(.is-featured-reverse) .video-review-body p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

.reviews-footer-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.35rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    line-height: 1.6;
}

.reviews-footer-note strong {
    color: #ffffff;
}

.premium-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}

.premium-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1100px) {
    .reviews-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .video-review-card.is-featured,
    .video-review-card.is-featured-reverse {
        grid-column: span 3;
        grid-row: span 1;
    }

    .video-review-card.is-featured .video-review-media,
    .video-review-card.is-featured-reverse .video-review-media {
        aspect-ratio: 16 / 8;
    }
}

@media (max-width: 860px) {
    .reviews-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .reviews-hero-copy .premium-copy {
        max-width: 44rem;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-review-card.is-featured,
    .video-review-card.is-featured-reverse {
        grid-column: span 2;
    }

    .video-review-card.is-featured .video-review-media,
    .video-review-card.is-featured-reverse .video-review-media {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 640px) {
    #all_reviews {
        --stage-top: 1.2rem;
        --stage-right: -2.5rem;
        padding-top: 5.25rem;
    }

    .reviews-title {
        max-width: 9.4ch;
        font-size: clamp(2rem, 12vw, 3rem);
        line-height: 1.02;
    }

    .reviews-proof-row,
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .video-review-card.is-featured,
    .video-review-card.is-featured-reverse {
        grid-column: auto;
    }

    .video-review-card.is-featured h3,
    .video-review-card.is-featured-reverse h3 {
        max-width: 100%;
    }

    .video-review-body,
    .video-review-card.is-featured .video-review-body,
    .video-review-card.is-featured-reverse .video-review-body {
        padding: 1rem;
    }

    .reviews-footer-note {
        align-items: flex-start;
        flex-direction: column;
    }
}