/* Brand Colors for Only One Theme */
:root {
    --oo-burgundy: #4a1616;
    --oo-black: #000000;
    --oo-red-vibrant: #E31E24;
    --oo-red-muted: #B30000;
    --oo-white: #FFFFFF;
}

/* Hero Only One specific tweaks */
.hero-onlyone {
    min-height: 25rem;
    padding: 4rem 0;
    background: radial-gradient(circle at center, var(--oo-burgundy), var(--oo-black));
    color: var(--oo-white);
}

.hero-onlyone h1 span {
    color: var(--oo-red-vibrant);
}

.hero-text {
    font-size: 1.25rem;
    max-width: 50rem;
    margin: 2rem auto 0;
}

/* Common Utilities for onlyone.html */
.text-center {
    text-align: center;
}

.flex-row {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    flex-wrap: wrap;
}

.flex-row-reverse {
    display: flex;
    align-items: flex-start;
    gap: 4rem;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.oo-text {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}

/* Challenges Section */
.section-challenges ul.cards li header::before {
    background: var(--oo-red-muted);
    content: "!";
}

.section-challenges .oo-way {
    color: var(--orange);
}

/* Differentials Section */
.section-differentials {
    padding: 5rem 0;
    background: radial-gradient(circle at center, var(--oo-burgundy), var(--oo-black));
    color: var(--oo-white);
}

.section-differentials h2 {
    color: var(--oo-white);
}

.section-differentials a {
    color: var(--oo-white);
    font-weight: bold;
    text-decoration: none;
}

.section-differentials a:hover {
    color: var(--oo-red-vibrant);
}

.diff-image {
    align-items: center;
    flex: 1;
    min-width: 20rem;
    position: sticky;
    text-align: center;
    top: 9em;
}

.diff-image img {
    max-width: 80%;
    margin: 1rem 0;
    width: 15rem;
}

.diff-image video {
    max-width: 100%;
    margin: 1rem 0;
}

.diff-content {
    flex: 2;
    min-width: 20rem;
}

.subtitle {
    display: block;
    color: var(--oo-red-vibrant);
    letter-spacing: 0.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.check-list {
    list-style: none;
    margin-top: 2rem;
}

.check-list>li {
    position: relative;
    padding-left: 2rem;
    margin: 1rem 0;
    font-weight: 600;
}

.check-list>li::before {
    content: "►";
    position: absolute;
    left: 0;
    color: var(--oo-red-vibrant);
}

.check-list>li>.check-list {
    margin-top: 1rem;
}

.check-list>li>.check-list>li::before {
    color: var(--oo-white);
}

/* Control Section */
.control-image {
    flex: 1;
    min-width: 20rem;
    position: sticky;
    top: 9em;
}

.control-image img {
    width: 100%;
    border-radius: 1.25rem;
    box-shadow: 0 10px 30px rgba(227, 30, 36, 0.2);
}

.control-content {
    flex: 1;
    min-width: 20rem;
}

.control-content h2 {
    margin-bottom: 2rem;
}

.control-content p {
    margin: 1em 0;
}

.control-content ul {
    margin-left: 3em;
}

/* Testimonials Section */
.section-testimonials ul.cards li header::before {
    background: var(--oo-red-muted);
    content: "”";
    font-family: 'Oswald', sans-serif;
    font-size: 7rem;
    height: 4rem;
    line-height: 1.05;
    width: 4rem;
}

.section-testimonials ul.cards footer p {
    text-align: right;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quote-box {
    background-color: #1a1a1a;
    padding: 2.5rem;
    border-radius: 1.25rem;
    border: 2px solid var(--oo-red-vibrant);
    position: relative;
    margin-bottom: 2rem;
    text-align: left;
    width: 100%;
    color: var(--oo-white);
}

.quote-icon {
    width: 2.5rem;
    margin-bottom: 1rem;
    filter: brightness(0) saturate(100%) invert(18%) sepia(87%) fb(151%) rotate(358deg) brightness(94%) contrast(92%);
    /* Turn blue icon into red */
}

/* Manual filter for the blue quote icon to make it red #E31E24 */
.quote-icon {
    filter: invert(15%) sepia(95%) saturate(7483%) hue-rotate(357deg) brightness(95%) contrast(108%);
}

.client-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    border: 4px solid var(--oo-red-vibrant);
    object-fit: cover;
}

.client-info h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Responsive adjustments */
@media (width < 48rem) {

    .flex-row,
    .flex-row-reverse {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .diff-image,
    .control-image {
        position: relative;
        top: initial;
    }

    .check-list {
        display: inline-block;
        text-align: left;
    }

    .testimonial-card {
        margin-bottom: 3rem;
    }
}