/* =============================================
           ARIEL LINKEDIN GROWTH 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-lines {
            position: absolute; left: 69.72%; top: -10.33%;
            width: 50.67%; height: 127.33%;
            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: 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: 405px; max-width: 42%; position: relative; }
        .ar-hero-post {
            width: 100%; height: auto; display: block;
            border: 1.15px solid #E0DFDC; border-radius: 9px;
            box-shadow: 0 5px 11px rgba(0,0,0,0.12);
        }
        .ar-hero-badge { position: absolute; width: 78px; pointer-events: none; }
        .ar-hero-badge.like { top: 59%; left: -38px; }
        .ar-hero-badge.comment { top: 7%; right: -78px; }
        .ar-hero-badge.repost { top: 84%; right: -10px; }

        /* ---------- 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-about-block .body { display: flex; flex-direction: column; gap: 24px; }
        .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; display: flex; flex-direction: column; gap: 16px; }
        .ar-challenge-head h2 { font-size: 40px; font-weight: 600; color: #FCFCFC; line-height: 1.3; margin: 0; }
        .ar-challenge-head p { font-size: 18px; font-weight: 400; color: #D9D9D9; line-height: 1.5; margin: 0; }
        .ar-challenge-head .body { display: flex; flex-direction: column; gap: 24px; }
        .ar-challenge-head .sub { font-weight: 500; }
        .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 18px; transition: color 0.3s ease; }
        .ar-ch-card p { font-size: 18px; font-weight: 400; color: #FCFCFC; 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; }
        .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 p { 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-end; }
        .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-sub { font-size: 18px; font-weight: 400; color: #212529; line-height: 1.5; margin: 0; }
        .ar-approach-grid { display: flex; flex-wrap: wrap; gap: 20px; }
        .ar-ap-card {
            width: 400px; flex: 1 1 360px; min-height: 360px;
            padding: 24px 20px; display: flex; flex-direction: column; gap: 24px;
        }
        .ar-ap-card.blue { background: #CDEFF8; }
        .ar-ap-card.green { background: rgba(191,255,191,0.6); }
        .ar-ap-card.purple { background: #E8E1F4; }
        .ar-ap-card.orange { background: #FEEDE9; }
        .ar-ap-card.gray { background: #F2F2F2; }
        .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; }

        /* ---------- CREATIVES SHOWCASE ---------- */
        .ar-creatives { background: #F2F2F2; display: flex; flex-direction: column; gap: 42px; }
        .ar-creatives .ar-eyebrow { color: #63666A; }
        .ar-creatives h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 6px 0 0; }
        .ar-creatives-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .ar-post {
            background: #ffffff; border: 1px solid #E7E7E7; border-radius: 8px; overflow: hidden;
            display: flex; flex-direction: column;
        }
        .ar-post-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
        .ar-post-actions {
            display: flex; align-items: stretch; justify-content: space-between;
            padding: 6px 4px;
        }
        .ar-post-action {
            flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
            padding: 6px 2px; border: none; background: transparent; cursor: pointer;
            color: #5f6368; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 400;
            text-decoration: none; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease;
        }
        .ar-post-action i { font-size: 16px; line-height: 1; }
        .ar-post-action:hover { background: #f1f1f1; color: #0a66c2; }
        .ar-post-action:active { background: #e4e4e4; }

        /* ---------- IMPACT ---------- */
        .ar-impact { background: #ffffff; display: flex; flex-direction: column; gap: 42px; }
        .ar-impact .ar-eyebrow { color: #63666A; }
        .ar-impact-head { display: flex; flex-direction: column; gap: 24px; }
        .ar-impact-head h2 { font-size: 40px; font-weight: 600; color: #000; line-height: 1.3; margin: 6px 0 0; }
        .ar-impact-head p { font-size: 18px; font-weight: 400; color: #000; line-height: 1.5; margin: 0; }
        .ar-impact-stats { display: flex; flex-wrap: wrap; gap: 20px; }
        .ar-stat { flex: 1 1 0; min-width: 200px; display: flex; flex-direction: column; gap: 24px; }
        .ar-stat-icon { width: 62px; height: 62px; }
        .ar-stat-icon img { width: 62px; height: 62px; display: block; }
        .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.purple { color: #8031A7; }
        .ar-stat .num.orange { color: #F96815; }
        .ar-stat .num.gray { color: #63666A; }
        .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-outcome2 { background: #0F0A0A; display: flex; flex-direction: column; gap: 62px; }
        .ar-outcome2 .ar-eyebrow { color: #F2F2F2; }
        .ar-outcome2-head { display: flex; flex-direction: column; gap: 4px; max-width: 896px; }
        .ar-outcome2-head h2 { font-size: 40px; font-weight: 600; color: #FCFCFC; line-height: 1.3; margin: 0; }
        .ar-outcome2-head p { font-size: 18px; font-weight: 400; color: #FCFCFC; line-height: 1.5; margin: 0; }
        .ar-outcome2-grid { display: flex; flex-wrap: wrap; gap: 20px; }
        .ar-oc-card { width: 400px; flex: 1 1 360px; padding: 20px; display: flex; flex-direction: column; gap: 24px; min-height: 362px; }
        .ar-oc-card.green { background: #D5FFD5; }
        .ar-oc-card.purple { background: #E8E1F4; }
        .ar-oc-card.orange { background: #FEEDE9; }
        .ar-oc-head { display: flex; flex-direction: column; gap: 11px; }
        .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: 56px; }
            .ar-hero-logo, .ar-hero-lines { display: none; }
            .ar-hero-text h1 { font-size: 28px; }
            .ar-hero-media { width: 100%; max-width: 360px; margin: 0 auto; }
            .ar-hero-badge.comment { right: 0; }
            .ar-hero-badge.like { left: 0; }

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

            .ar-challenge, .ar-approach, .ar-creatives, .ar-impact, .ar-outcome2 { gap: 36px; }
            .ar-challenge-head h2, .ar-approach-head h2, .ar-creatives h2,
            .ar-impact-head h2, .ar-outcome2-head 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-creatives-grid { grid-template-columns: 1fr; }

            .ar-approach-head { flex-direction: column; align-items: flex-start; gap: 16px; }
            .ar-ap-card { width: 100%; flex: 1 1 100%; min-height: auto; }
            .ar-ap-card h3 { font-size: 22px; }

            .ar-stat { flex: 1 1 calc(50% - 10px); min-width: 0; }

            .ar-oc-card { width: 100%; flex: 1 1 100%; 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; }
        }