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

        /* Normalize against global CenturyGothic + display:inline on headings */
        .ar-hero, .ar-section { font-family: 'Poppins', sans-serif; }
        .ar-hero h1, .ar-hero h2, .ar-hero h3,
        .ar-section h1, .ar-section h2, .ar-section 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-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: 708px;
        }
        .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: 46%; position: relative; }
        .ar-hero-media > img { width: 100%; height: auto; display: block; }
        .ar-hero-badge { position: absolute; pointer-events: none; }
        .ar-hero-badge.b1 { width: 65px; top: 41px; left: -26px; }
        .ar-hero-badge.b2 { width: 103px; bottom: 72px; right: -32px; }

        /* ---------- ABOUT + SCOPE ---------- */
        .ar-about { background: #ffffff; }
        .ar-about-row { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1240px; width: 100%; margin: 0 auto; }
        .ar-about-logo { width: 299px; height: auto; flex-shrink: 0; display: block; }
        .ar-about-content { width: 610px; flex-shrink: 1; display: flex; flex-direction: column; gap: 32px; }
        .ar-about-block { display: flex; flex-direction: column; gap: 20px; }
        .ar-h3 { font-size: 32px; font-weight: 600; color: #000; line-height: 1.2; margin: 0; }
        .ar-about p { font-size: 18px; font-weight: 400; color: #63666A; line-height: 1.5; 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-head .sub { font-weight: 500; color: #FFF7F7; margin-top: 24px; }
        .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: 342px; 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; 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; }
        .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 { color: #000; }
        .ar-ch-card:hover .ar-ch-glyph { filter: brightness(0.5); }

        /* ---------- OUR APPROACH ---------- */
        .ar-approach { background: #ffffff; display: flex; flex-direction: column; gap: 42px; }
        .ar-approach .ar-eyebrow { color: #63666A; }
        .ar-approach-head { display: flex; gap: 20px; align-items: flex-start; }
        .ar-approach-head > div { flex: 1; min-width: 0; }
        .ar-approach-head h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 6px 0 0; }
        .ar-approach-lead { font-size: 22px; font-weight: 500; color: #212529; line-height: 1.4; margin: 0 0 12px; }
        .ar-approach-sub { font-size: 18px; font-weight: 400; color: #212529; line-height: 1.5; margin: 0; }
        .ar-approach-cols { display: flex; gap: 20px; align-items: stretch; }
        .ar-approach-left { display: flex; flex-direction: column; gap: 20px; flex: 714; min-width: 0; }
        .ar-approach-right { flex: 504; min-width: 0; display: flex; flex-direction: column; }
        .ar-ap-card { padding: 24px 20px; display: flex; flex-direction: column; gap: 24px; flex: 1 1 auto; }
        .ar-ap-card.blue { background: #CDEFF8; }
        .ar-ap-card.green { background: rgba(191,255,191,0.6); }
        .ar-ap-card.orange { background: #FEEDE9; }
        .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; }
        .ar-ap-card p { font-size: 18px; font-weight: 400; color: #1D1B20; line-height: 1.5; margin: 0; }
        .ar-ap-bullets { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0; }
        .ar-ap-bullet { display: flex; gap: 12px; align-items: center; font-size: 18px; color: #1D1B20; }
        .ar-ap-bullet::before { content: ''; width: 12px; height: 12px; background: #F96815; flex-shrink: 0; }

        /* ---------- CREATIVES SHOWCASE ---------- */
        .ar-creatives { background: #ffffff; padding: 0 100px 20px; }
        .ar-creatives-stack { display: flex; flex-direction: column; gap: 20px; }
        .ar-creatives-stack img { width: 100%; height: auto; display: block; }

        /* ---------- IMPACT ---------- */
        .ar-impact { background: #ffffff; display: flex; flex-direction: column; gap: 42px; position: relative; overflow: hidden; }
        .ar-impact .ar-eyebrow { color: #63666A; }
        .ar-impact-groups { display: flex; flex-direction: column; gap: 62px; position: relative; z-index: 1; }
        .ar-impact-group { display: flex; flex-direction: column; gap: 32px; }
        .ar-impact-group.bordered { border-bottom: 1px solid #DADADA; padding-bottom: 24px; }
        .ar-impact-group.narrow { width: 925px; max-width: 100%; }
        .ar-impact-group h3 { font-size: 24px; font-weight: 600; color: #000; line-height: 1.2; margin: 0; }
        .ar-impact-stats { display: flex; gap: 20px; flex-wrap: wrap; }
        .ar-stat { width: 295px; 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.blue { color: #005EB8; }
        .ar-stat .num.green { color: #00A86B; }
        .ar-stat .num.purple { color: #8031A7; }
        .ar-stat .num.lgreen { color: #77DD77; }
        .ar-stat .num.orange { color: #F96815; }
        .ar-stat .num.lblue { color: #59CBE8; }
        .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; }
        .ar-impact-deco { position: absolute; right: -5px; bottom: -8px; width: 600px; height: auto; z-index: 0; pointer-events: none; }

        /* ---------- OUTCOME ---------- */
        .ar-outcome2 { background: #0F0A0A; display: flex; flex-direction: column; gap: 62px; }
        .ar-outcome2 .ar-eyebrow { color: #F2F2F2; }
        .ar-outcome2 h2 { font-size: 40px; font-weight: 600; color: #FCFCFC; line-height: 1.3; margin: 4px 0 0; }
        .ar-outcome2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .ar-oc-card { padding: 20px; display: flex; flex-direction: column; gap: 24px; min-height: 424px; }
        .ar-oc-card.green { background: #D5FFD5; }
        .ar-oc-card.purple { background: #E8E1F4; }
        .ar-oc-card.blue { background: #CDEFF8; }
        .ar-oc-card.orange { background: #FEEDE9; }
        .ar-oc-icon { width: 40px; height: 40px; padding: 10px; box-sizing: border-box; }
        .ar-oc-icon img { width: 20px; height: 20px; display: block; }
        .ar-oc-card h3 { font-size: 24px; font-weight: 600; color: #000; line-height: 1.3; margin: 0; }
        .ar-oc-card p { font-size: 18px; font-weight: 400; color: #212121; line-height: 1.5; margin: 0; }

        /* ---------- 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: 40px; }
            .ar-hero-logo { display: none; }
            .ar-hero-text h1 { font-size: 28px; }
            .ar-hero-media { width: 100%; max-width: 100%; }
            .ar-hero-badge.b1 { left: 0; }
            .ar-hero-badge.b2 { right: 0; }

            .ar-about-row { flex-direction: column; align-items: flex-start; gap: 32px; }
            .ar-about-content { width: 100%; }

            .ar-challenge, .ar-approach, .ar-impact, .ar-outcome2 { gap: 36px; }
            .ar-challenge-head h2, .ar-approach-head h2, .ar-outcome2 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-head { flex-direction: column; gap: 16px; }
            .ar-approach-cols { flex-direction: column; }
            .ar-ap-card h3 { font-size: 22px; }

            .ar-creatives { padding: 0 20px 10px; }

            .ar-impact-stats { gap: 16px; }
            .ar-stat { width: calc(50% - 8px); }
            .ar-impact-deco { display: none; }

            .ar-outcome2-grid { grid-template-columns: 1fr 1fr; }
            .ar-oc-card { min-height: auto; }

            .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-outcome2-grid { grid-template-columns: 1fr; }
        }