/* Rouse Refresh - "Rouse Group" landing page (/the-rouse-group/).
   Figma: "Rouse Group Page- XLarge" (xJx4A6KpgHnrnTxY1wAzHX).
   Scoped to .rr-group. Built in phases; PHASE 1 = Hero.
   Shared hero layout lives in hero.css; this file only adds the Rouse Group
   decorative background and the page-specific sections. */

.rr-group {
    /* Design tokens (match the existing refresh palette). */
    --rr-group-purple: #6a59fd;
    --rr-group-purple-dark: #5444dd;
    --rr-group-dark-blue: #171245;
    --rr-group-ink: #232323;
    --rr-group-bg-soft: #f9f9f9;
    --rr-group-gutter: 72px;
    --rr-group-heading-font: var(--uat-heading-font, 'Archivo', Arial, sans-serif);

    overflow-x: hidden;
}

/* Shared content width + gutter, reused by every section below the hero. */
.rr-group__container {
    width: 100%;
    max-width: var(--rr-design-width, 1440px);
    margin-inline: auto;
    padding-inline: var(--rr-group-gutter);
}

/* ---- PHASE 1: Hero ----
   Reuses .rr-hero / .rr-hero--square; only the Rouse Group background differs:
   a subtle texture plus the diagonal "swoosh" lines from the design. */
.rr-group .rr-hero--group {
    background-color: var(--rr-group-dark-blue);
    background-image: url('rouse-group-hero-lines.svg'), url('rouse-group-hero-bg.png');
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, center;
    background-size: auto 100%, cover;
}

/* ---- PHASE 2: Intro ("One partner globally connected") ---- */
.rr-group__intro {
    background: #fff;
    padding-top: 80px;
}

.rr-group__intro-head {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

.rr-group__intro-title {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-family: var(--rr-group-heading-font) !important;
    font-weight: 700;
    font-size: clamp(40px, 5.5vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--rr-group-ink);
}

.rr-group__intro-text {
    flex: 1 1 0;
    min-width: 0;
    font-family: var(--rr-group-heading-font);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.2;
    color: rgba(35, 35, 35, 0.8);
}

.rr-group__intro-text p {
    margin: 0;
}

.rr-group__intro-text p + p {
    margin-top: 24px;
}

/* ---- PHASE 2: Bento stats ---- */
.rr-group__bento {
    width: 100%;
    max-width: var(--rr-design-width, 1440px);
    margin: 98px auto 0;
    background: var(--rr-group-bg-soft);
    display: flex;
    gap: 48px;
    align-items: center;
    padding: 80px var(--rr-group-gutter);
}

.rr-group__bento-media {
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
}

.rr-group__bento-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 460px;
    object-fit: cover;
    border-radius: 20px;
}

.rr-group__stats {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.rr-group__stats-row {
    display: flex;
    gap: 24px;
}

.rr-group__stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    min-height: 230px;
    padding: 24px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.rr-group__stat-num {
    font-family: var(--rr-group-heading-font) !important;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.05;
    color: var(--rr-group-dark-blue);
}

.rr-group__stat-label {
    font-family: var(--rr-group-heading-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.05;
    color: var(--rr-group-ink);
}

.rr-group__stat--purple {
    background: var(--rr-group-purple);
    border-color: #fff;
}

.rr-group__stat--purple .rr-group__stat-num,
.rr-group__stat--purple .rr-group__stat-label {
    color: #fff;
}

.rr-group__stat--tier .rr-group__stat-num--tier {
    font-size: 40px;
}

.rr-group__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.rr-group__tag {
    padding: 7px 14px 8px;
    background: var(--rr-group-purple-dark);
    border: 0.5px solid #7767ff;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #fff;
}

/* ---- Responsive gutters (match careers-new.css breakpoints) ---- */
@media (max-width: 991.98px) {
    .rr-group {
        --rr-group-gutter: 40px;
    }

    .rr-group__intro-head {
        flex-direction: column;
        gap: 24px;
    }

    .rr-group__bento {
        flex-direction: column;
        margin-top: 64px;
    }

    .rr-group__bento-media {
        width: 100%;
    }

    .rr-group__bento-media img {
        min-height: 300px;
    }
}

@media (max-width: 575.98px) {
    .rr-group {
        --rr-group-gutter: 20px;
    }

    .rr-group__stats-row {
        flex-direction: column;
    }

    .rr-group__stat {
        min-height: 0;
    }
}