/* =============================================
           ARIEL GROUP CASE STUDY
           ============================================= */
        .ar-section { font-family: 'Poppins', sans-serif; padding: 90px 100px; }

        /* Normalize against global CenturyGothic + display:inline on headings */
        .ar-hero, .ar-outcome { font-family: 'Poppins', sans-serif; }
        .ar-hero h1, .ar-hero h2, .ar-hero h3,
        .ar-section h1, .ar-section h2, .ar-section h3,
        .ar-outcome h1, .ar-outcome h2, .ar-outcome h3,
        .cta-section .cta-headline {
            font-family: 'Poppins', sans-serif;
            display: block;
        }

        /* ---------- HERO ---------- */
        .ar-hero {
            margin-top: 75px;
            background-color: #0F0A0A;
            position: relative;
            overflow: hidden;
            padding: 0 100px;
            min-height: 600px;
            display: flex;
            align-items: center;
        }
        .ar-hero::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 2px;
            background: #ffffff;
            z-index: 5;
        }
        .ar-hero-logo {
            position: absolute;
            top: 49px; left: 37px;
            width: 61px; height: 61px;
            z-index: 3;
        }
        .ar-hero-lines {
            position: absolute;
            left: 69.72%;
            top: -10.33%;
            width: 50.67%;   /* 729.68 / 1440 */
            height: 127.33%; /* 764 / 600 */
            transform: scaleX(-1);
            z-index: 0;
            pointer-events: none;
        }
        .ar-hero-row {
            display: flex;
            align-items: center;
            gap: 30px;
            width: 100%;
            position: relative;
            z-index: 2;
        }
        .ar-hero-text { flex: 1; }
        .ar-hero-text h1 {
            font-family: 'Poppins', sans-serif !important;
            color: #FCFCFC;
            font-size: 40px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0 0 15px;
            max-width: 725px;
        }
        .ar-hero-text p {
            color: #DADADA;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5;
            margin: 0;
        }
        .ar-hero-media {
            flex-shrink: 0;
            width: 505px;
            max-width: 45%;
        }
        .ar-hero-media img,
        .ar-hero-media video { width: 100%; height: auto; display: block; }

        /* ---------- ABOUT + SCOPE ---------- */
        .ar-about { background: #ffffff; }
        .ar-about-row { display: flex; gap: 20px; align-items: flex-start; max-width: 1240px; width: 100%; margin: 0 auto; justify-content: space-between; }
        .ar-about-col { flex: 1 1 0; min-width: 0; max-width: 610px; }
        .ar-about-logo { height: 92px; width: auto; margin-bottom: 62px; display: block; }
        .ar-h3 { font-size: 32px; font-weight: 600; color: #000; line-height: 1.2; margin: 0 0 24px; }
        .ar-h3-tight { margin-bottom: 8px; }
        .ar-about p { font-size: 18px; font-weight: 400; color: #63666A; line-height: 1.5; margin: 0; }
        .ar-scope-tag { font-size: 18px; font-weight: 500; color: #000; line-height: 1.5; margin: 0 0 24px; }
        .ar-scope-meta { display: flex; gap: 24px; margin-top: 24px; }
        .ar-scope-meta .label { font-size: 18px; font-weight: 500; color: #63666A; line-height: 1.5; margin: 0; }
        .ar-scope-meta .value { font-size: 22px; font-weight: 500; color: #000; line-height: 1.4; margin: 0; }

        /* ---------- CHALLENGE ---------- */
        .ar-challenge { background-color: #0F0A0A; display: flex; flex-direction: column; gap: 62px; }
        .ar-eyebrow { font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 2.16px; line-height: 1.3; margin: 0; }
        .ar-challenge .ar-eyebrow { color: #F2F2F2; }
        .ar-challenge-head { max-width: 1038px; }
        .ar-challenge-head h2 { font-size: 40px; font-weight: 600; color: #FCFCFC; line-height: 1.3; margin: 16px 0 24px; }
        .ar-challenge-head p { font-size: 18px; font-weight: 400; color: #D9D9D9; line-height: 1.5; margin: 0; }
        .ar-challenge-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .ar-ch-card {
            border: 1px solid rgba(165,165,165,0.35);
            min-height: 419px;
            padding: 23px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .ar-ch-num { font-size: 16px; font-weight: 500; color: #DADADA; margin: 0 0 13px; transition: color 0.3s ease; }
        .ar-ch-card h3 { font-size: 24px; font-weight: 500; color: #FCFCFC; line-height: 1.3; margin: 0 0 12px; transition: color 0.3s ease; }
        .ar-ch-card p { font-size: 18px; font-weight: 400; color: #E5E5E5; line-height: 1.5; margin: 0; transition: color 0.3s ease; }
        .ar-ch-glyph { position: absolute; bottom: 0; right: 0; width: 80px; height: auto; pointer-events: none; transition: filter 0.3s ease; }

        /* Hover states */
        .ar-ch-card.hover-blue:hover   { background-color: #59CBE8; border-color: #59CBE8; }
        .ar-ch-card.hover-purple:hover { background-color: #C5B4E3; border-color: #C5B4E3; }
        .ar-ch-card.hover-green:hover  { background-color: #77DD77; border-color: #77DD77; }
        .ar-ch-card.hover-yellow:hover { background-color: #FFE399; border-color: #FFE399; }
        .ar-ch-card:hover .ar-ch-num,
        .ar-ch-card:hover h3,
        .ar-ch-card:hover p { color: #000; }
        .ar-ch-card:hover .ar-ch-glyph { filter: brightness(0.5); }

        /* ---------- OUR APPROACH ---------- */
        .ar-approach { background: #ffffff; }
        .ar-approach .ar-eyebrow { color: #63666A; }
        .ar-approach h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 6px 0 0; max-width: 1030px; }
        .ar-approach-lead { font-size: 22px; font-weight: 500; color: #212529; line-height: 1.4; margin: 42px 0 24px; }
        .ar-approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .ar-ap-card { padding: 24px 20px; display: flex; flex-direction: column; gap: 24px; }
        .ar-ap-card.blue { background: #CDEFF8; }
        .ar-ap-card.orange { background: #FEEDE9; }
        .ar-ap-card.purple { background: #E8E1F4; }
        .ar-ap-card.green { background: rgba(191,255,191,0.6); }
        .ar-ap-card .ap-icon { width: 44px; height: 40px; object-fit: contain; display: block; }
        .ar-ap-card h3 { font-size: 28px; font-weight: 600; color: #000; line-height: 1.1; margin: 0 0 24px; }
        .ar-ap-card p { font-size: 18px; font-weight: 400; color: #1D1B20; line-height: 1.5; margin: 0; }

        /* ---------- STRATEGIC IMPROVEMENTS ---------- */
        .ar-strategic { background: #F2F2F2; display: flex; flex-direction: column; gap: 62px; }
        .ar-strategic h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 0; }
        .ar-strat-stack { display: flex; flex-direction: column; gap: 20px; }
        .ar-strat-row { display: flex; gap: 20px; align-items: flex-start; }
        .ar-strat-row img,
        .ar-strat-row video { width: 100%; height: auto; display: block; }
        .ar-strat-row .cell { min-width: 0; }
        .ar-strat-row.equal .cell { flex: 1; }
        .ar-strat-row.split .cell-sm { flex: 400; min-width: 0; }
        .ar-strat-row.split .cell-lg { flex: 820; min-width: 0; }
        .ar-strat-banner img { width: 100%; height: auto; display: block; }

        /* ---------- WHAT CHANGED ---------- */
        .ar-changed { background: #ffffff; }
        .ar-changed h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 0 0 62px; }
        .ar-changed-img { width: 100%; height: auto; display: block; margin-bottom: 42px; box-shadow: 0 4px 66px rgba(0,0,0,0.05); }
        .ar-changed-cols { display: flex; gap: 20px; }
        .ar-changed-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; }
        .ar-changed-item { display: flex; gap: 12px; align-items: center; }
        .ar-changed-item img { width: 21px; height: 21px; flex-shrink: 0; }
        .ar-changed-item p { font-size: 18px; font-weight: 400; color: #000; line-height: 1.3; margin: 0; }

        /* ---------- KEY IMPROVEMENTS ---------- */
        .ar-keyimp { background: #000; display: flex; flex-direction: column; gap: 62px; }
        .ar-keyimp h2 { font-size: 40px; font-weight: 600; color: #FCFCFC; line-height: 1.3; margin: 0 0 8px; }
        .ar-keyimp .sub { font-size: 18px; font-weight: 400; color: #D9D9D9; line-height: 1.5; margin: 0; }
        .ar-keyimp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .ar-ki-card { padding: 12px 16px 16px; display: flex; flex-direction: column; justify-content: center; gap: 11px; min-height: 153px; border-bottom: 1px solid rgba(0,0,0,0.2); }
        .ar-ki-card.green { background: #D5FFD5; }
        .ar-ki-card.purple { background: #E7DFF6; }
        .ar-ki-card.yellow { background: #FFF2D0; }
        .ar-ki-card.blue { background: #C1E1FF; }
        .ar-ki-card.orange { background: #FFD7CC; }
        .ar-ki-icon { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; }
        .ar-ki-icon img { width: 20px; height: 20px; display: block; }
        .ar-ki-card h3 { font-size: 24px; font-weight: 600; color: #000; line-height: 1.3; margin: 0; }

        /* ---------- GROWTH / IMPACT ---------- */
        .ar-growth { background: #ffffff; display: flex; flex-direction: column; gap: 42px; }
        .ar-growth .ar-eyebrow { color: #63666A; }
        .ar-growth h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 0; }
        .ar-growth-sub { font-size: 24px; font-weight: 600; color: #000; line-height: 1.2; margin: 0 0 32px; }
        .ar-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .ar-stat { display: flex; flex-direction: column; gap: 24px; }
        .ar-stat .num { font-size: 48px; font-weight: 700; line-height: 1; margin: 0; }
        .ar-stat .num.yellow { color: #FFB900; }
        .ar-stat .num.purple { color: #8031A7; }
        .ar-stat .num.green { color: #00A86B; }
        .ar-stat .num.orange { color: #F96815; }
        .ar-stat .label { font-size: 18px; font-weight: 500; color: #63666A; text-transform: uppercase; line-height: 1.5; margin: 4px 0 0; }
        .ar-stat .desc { font-size: 18px; font-weight: 400; color: #000; line-height: 1.5; margin: 4px 0 0; }

        /* ---------- OUTCOME ---------- */
        .ar-outcome { background: #ffffff; padding: 0 100px; }
        .ar-outcome-row { background: #F2F2F2; overflow: hidden; display: flex; align-items: center; justify-content: space-between; min-height: 403px; }
        .ar-outcome-text { padding: 70px 40px 70px 48px; max-width: 800px; }
        .ar-outcome-text h2 { font-size: 36px; font-weight: 600; color: #005EB8; line-height: 1.2; margin: 0 0 20px; }
        .ar-outcome-text p { font-size: 18px; font-weight: 400; color: #353739; line-height: 1.5; margin: 0 0 20px; }
        .ar-outcome-text p:last-child { margin-bottom: 0; }
        .ar-outcome-visual { flex-shrink: 0; align-self: flex-end; }
        .ar-outcome-visual img { display: block; height: 403px; width: auto; }

        /* ---------- CTA ---------- */
        .cta-section { background-color: #ffffff; padding: 75px 100px; font-family: "Poppins", sans-serif; }
        .cta-section .cta-headline { font-weight: 600; font-size: 32px; color: #000; margin-bottom: 24px; line-height: 1.2; }
        .cta-section .cta-button {
            background-color: #f7b82a; color: #1c1510; font-weight: 600; font-size: 18px;
            padding: 0.55rem 1rem; border: none; border-radius: 0; text-decoration: none;
            display: inline-block; transition: all 0.3s ease;
        }
        .cta-section .cta-button:hover { background-color: #1c1510; color: #ffffff; }
        .cta-section .cta-image { max-width: 100%; height: auto; }
        .cta-image-wrapper { overflow: hidden; align-self: center; }

        /* =============================================
           RESPONSIVE
           ============================================= */
        @media (max-width: 991px) {
            .ar-section { padding: 50px 20px; }
            .ar-hero { padding: 0 20px; min-height: auto; }
            .ar-hero-row { flex-direction: column; align-items: flex-start; padding: 90px 0 50px; gap: 28px; }
            .ar-hero-logo { display: none; }
            .ar-hero-lines { display: none; }
            .ar-hero-text h1 { font-size: 28px; }
            .ar-hero-media { width: 100%; max-width: 100%; }

            .ar-about-row { flex-direction: column; gap: 40px; }
            .ar-about-col { max-width: 100%; }

            .ar-challenge, .ar-strategic, .ar-keyimp, .ar-growth { gap: 36px; }
            .ar-challenge-head h2, .ar-approach h2, .ar-strategic h2,
            .ar-changed h2, .ar-keyimp h2, .ar-growth h2 { font-size: 28px; }
            .ar-challenge-cards { grid-template-columns: 1fr 1fr; }
            .ar-ch-card { min-height: auto; padding-bottom: 88px; }
            .ar-ch-glyph { width: 64px; }

            .ar-approach-grid { grid-template-columns: 1fr; }
            .ar-ap-card h3 { font-size: 22px; }

            .ar-strat-row { flex-direction: column; }
            .ar-changed-cols { flex-direction: column; gap: 24px; }

            .ar-keyimp-grid { grid-template-columns: 1fr 1fr; }
            .ar-stats { grid-template-columns: 1fr 1fr; }

            .ar-outcome { padding: 40px 20px; }
            .ar-outcome-row { flex-direction: column; align-items: stretch; gap: 0; }
            .ar-outcome-text { padding: 40px 20px 24px; max-width: 100%; }
            .ar-outcome-text h2 { font-size: 28px; }
            .ar-outcome-visual { align-self: center; }
            .ar-outcome-visual img { height: 340px; }

            .cta-section { padding: 50px 20px; }
            .cta-section .cta-headline { font-size: 24px; }
            .cta-image-wrapper { display: none; }
        }

        @media (max-width: 575px) {
            .ar-challenge-cards { grid-template-columns: 1fr; }
            .ar-keyimp-grid { grid-template-columns: 1fr; }
            .ar-stats { grid-template-columns: 1fr; }
        }