/* =========================================================
           CELA CASE STUDY — DESIGN TOKENS & GLOBAL RESET
           Matches McKinsey-inspired premium editorial design system.
        ========================================================= */
        :root {
            --mck-navy:      #051C2C;
            --mck-blue:      #007FFF;
            --mck-ice:       #F5F8FB;
            --mck-text:      #0F2942;
            --mck-accent:      #007FFF;
            --mck-accent-lt:   rgba(0,127,255,0.18);
            --font-sans:     'Manrope', sans-serif;
            --font-serif:    'Playfair Display', serif;
            --section-x:     clamp(1.25rem, 6vw, 6rem);
            --section-y:     clamp(4rem, 8vw, 7rem);
            --radius:        4px;
            --radius-lg:     16px;
            --accent:        var(--mck-blue);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; }

        body {
            font-family: var(--font-sans);
            background: #fff;
            color: var(--mck-text);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        img { display: block; max-width: 100%; }
        a   { color: inherit; text-decoration: none; }

        @media (min-width: 769px) { body { cursor: none; } }

        /* ── custom cursor ── */
        .cs-cursor, .cs-cursor-dot {
            position: fixed; top: 0; left: 0;
            pointer-events: none; transform: translate(-50%,-50%);
            z-index: 9999; transition-timing-function: ease;
        }
        .cs-cursor {
            width: 34px; height: 34px;
            border: 1.5px solid var(--mck-blue);
            border-radius: 50%;
            transition: width .3s ease, height .3s ease,
                        background .3s ease, border-color .3s ease;
        }
        .cs-cursor.grow {
            width: 58px; height: 58px;
            background: rgba(0,127,255,.08);
            border-color: var(--mck-accent);
        }
        .cs-cursor-dot {
            width: 6px; height: 6px;
            background: var(--mck-blue);
            border-radius: 50%;
        }
        @media (max-width: 768px) { .cs-cursor, .cs-cursor-dot { display: none; } }

        /* ── eyebrow ── */
        .eyebrow {
            font-size: .75rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: .16em;
            color: var(--mck-blue);
            display: inline-flex; align-items: center; gap: .6rem;
        }
        .eyebrow-line {
            display: inline-block;
            width: 28px; height: 1.5px;
            background: var(--mck-blue);
        }

        /* ── gold separator ── */
        .gold-hr {
            width: 100%; height: 1px;
            background: linear-gradient(90deg,transparent,var(--mck-accent),transparent);
            opacity: .6; border: none;
        }

        /* ── section wrapper ── */
        .section-wrap {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 var(--section-x);
        }

        /* ========================================================
           1. HERO (ARCHITECTURAL SPLIT MONOLITH)
        ======================================================== */
        .cs-hero {
            position: relative;
            background: #007FFF; /* Deep Azure Blue */
            display: flex;
            flex-direction: column;
            min-height: 70vh; /* Shorter vertical height limits dead space */
            overflow: hidden;
        }

        /* Desktop Grid - Favoring horizontal text space */
        @media (min-width: 1024px) {
            .cs-hero {
                display: grid;
                grid-template-columns: 1.25fr 0.75fr;
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }
        }

        /* Subtle Grain Texture Overlay across whole hero */
        .cs-hero::before {
            content: "";
            position: absolute; inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.04;
            pointer-events: none;
            mix-blend-mode: overlay;
            z-index: 5;
        }

        /* --- LEFT PANEL --- */
        .cs-hero__left {
            position: relative;
            padding: clamp(7rem, 10vw, 9rem) var(--section-x) clamp(3rem, 5vw, 5rem);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            text-align: left;
            z-index: 2;
            background: #007FFF; /* Deep Azure Blue */
            border-right: 1px solid rgba(255, 255, 255, 0.08); /* Sharp architectural divider */
        }
        .cs-hero__left::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 28, 44, 0.18) 0%, rgba(5, 28, 44, 0.08) 100%);
            pointer-events: none;
            z-index: 0;
        }
        .cs-hero__left::before {
            /* Architectural grid lines */
            content: '';
            position: absolute; inset: 0;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 80px 80px;
            pointer-events: none;
            z-index: 0;
        }

        .cs-hero__glow {
            position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(circle at 10% 20%, rgba(0, 127, 255, 0.08) 0%, transparent 60%);
            z-index: 0;
        }

        .cs-hero__content {
            position: relative; z-index: 1;
            width: 100%;
            max-width: 900px;
            display: flex;
            flex-direction: column;
            animation: heroFadeUp 1.2s cubic-bezier(.16,1,.3,1) forwards;
            opacity: 0;
            will-change: transform, opacity;
        }

        @keyframes heroFadeUp {
            from { opacity: 0; transform: translateY(40px); }
            to   { opacity: 1; transform: translateY(0);    }
        }

        .cs-hero__breadcrumb {
            display: flex; align-items: center; gap: .75rem; justify-content: flex-start;
            font-size: .65rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .25em;
            color: rgba(255,255,255,.78);
            margin-bottom: clamp(1.5rem,4vw,2.5rem);
        }
        .cs-hero__breadcrumb a { color: rgba(255,255,255,.78); transition: color .3s ease; }
        .cs-hero__breadcrumb a:hover { color: var(--mck-accent); }
        .cs-hero__breadcrumb-sep { opacity: .55; font-size: .5rem; }

        .cs-hero__meta-row {
            display: flex; align-items: center; justify-content: flex-start;
            gap: 1.25rem; flex-wrap: wrap;
            margin-bottom: clamp(2rem,4vw,3rem);
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255,255,255,0.08); /* Strong structural grounding */
            width: 100%; /* Spans the text column width */
        }

        .cs-hero__tag {
            font-size: .65rem; font-weight: 800;
            letter-spacing: .2em; text-transform: uppercase;
            color: #ffffff;
        }

        .cs-hero__divider-dot {
            width: 4px; height: 4px;
            background: rgba(255,255,255,.2);
        }

        .cs-hero__date {
            font-size: .65rem; font-weight: 700;
            letter-spacing: .15em; text-transform: uppercase;
            color: rgba(255,255,255,.82);
        }

        .cs-hero__headline {
            font-family: var(--font-serif);
            font-size: clamp(2.3rem, 3.7vw, 3.6rem);
            font-weight: 600;
            line-height: 1.08;
            letter-spacing: -.02em;
            color: #fff;
            margin-bottom: clamp(1.5rem,3vw,2rem);
            max-width: min(20ch, 46vw);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 5;
            overflow: hidden;
            text-shadow: 0 3px 14px rgba(5, 28, 44, 0.28);
        }
        .cs-hero__headline em {
            font-style: italic;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
            font-weight: 600;
        }

        .cs-hero__summary {
            font-size: clamp(1rem, 1.15vw, 1.15rem);
            font-weight: 400;
            line-height: 1.8;
            color: rgba(255,255,255,.92);
            max-width: 58ch;
            letter-spacing: 0.01em;
        }

        /* Inline KPI Data Board */
        .cs-hero__kpis {
            position: relative; z-index: 3;
            display: flex;
            flex-wrap: wrap;
            gap: clamp(1.5rem, 4vw, 3.5rem);
            width: 100%;
            margin-top: clamp(2.5rem, 5vw, 4rem);
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            animation: fadeIn 1.5s ease 1s forwards;
            opacity: 0;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .cs-hero__kpi {
            display: flex; flex-direction: column; align-items: flex-start; text-align: left;
            position: relative;
        }

        .cs-hero__kpi-value {
            font-family: var(--font-sans);
            font-size: clamp(1.6rem, 2.5vw, 2.4rem);
            font-weight: 700;
            color: #fff;
            line-height: 1;
            margin-bottom: .45rem;
            letter-spacing: -0.02em;
            text-shadow: 0 2px 12px rgba(5, 28, 44, 0.28);
        }
        .cs-hero__kpi-label {
            font-family: var(--font-sans);
            font-size: .58rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .2em;
            color: rgba(255, 255, 255, 0.88);
            opacity: 1;
        }

        /* --- RIGHT PANEL --- */
        .cs-hero__right {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 50vh;
            overflow: hidden;
            display: flex;
            align-items: center; justify-content: center;
            background: #000;
        }

        .cs-hero__image {
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            animation: heroZoomIn 25s linear infinite alternate;
            z-index: 1;
        }

        @keyframes heroZoomIn {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        .cs-hero__mesh {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(5,28,44,.65) 0%, transparent 50%);
            z-index: 2;
            pointer-events: none;
        }

        /* --- RESPONSIVE FALLBACKS --- */
        @media (max-width: 1024px) {
            .cs-hero__left { padding-top: clamp(8rem, 15vw, 10rem); padding-bottom: 5rem; }
            .cs-hero__headline { max-width: 100%; }
        }

        @media (max-width: 768px) {
            .cs-hero__right { min-height: 70vh; }
            .cs-hero__kpis { gap: 1.5rem; }
        }

        /* ========================================================
           2. CONTEXT BAR (Client · Industry · Service · Outcome)
        ======================================================== */
        .cs-context {
            background: var(--mck-ice);
            border-bottom: 1px solid rgba(15,41,66,.06);
        }
        .cs-context__inner {
            display: flex; flex-wrap: wrap;
            gap: .5px;
        }
        .cs-context__cell {
            flex: 1 0 180px;
            padding: 1.25rem 2rem;
            position: relative;
            transition: background .25s;
        }
        .cs-context__cell:hover { background: rgba(0,127,255,.04); }
        .cs-context__cell::after {
            content: '';
            position: absolute; right: 0; top: 20%; bottom: 20%;
            width: 1px;
            background: rgba(15,41,66,.1);
        }
        .cs-context__cell:last-child::after { display: none; }
        .cs-context__label {
            font-size: .68rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .16em;
            color: var(--mck-blue);
            margin-bottom: .45rem;
        }
        .cs-context__value {
            font-size: .95rem; font-weight: 600;
            color: var(--mck-navy);
            line-height: 1.35;
        }

        /* ========================================================
           3. EDITORIAL BODY (ARCHITECTURAL & SHARP)
        ======================================================== */
        .cs-body {
            padding: clamp(3.5rem, 7vw, 5.5rem) var(--section-x);
            background: #ffffff;
            border-top: 1px solid #eee;
            position: relative;
        }
        /* Architectural Grid Background */
        .cs-body::before {
            content: '';
            position: absolute; inset: 0;
            background-image: 
                linear-gradient(to right, rgba(0, 127, 255, 0.02) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 127, 255, 0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }
        .cs-body__grid {
            position: relative; z-index: 1;
            max-width: 1280px; margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: clamp(3rem, 6vw, 5rem);
            align-items: start;
        }

        /* main column */
        .cs-main { min-width: 0; }

        .cs-section {
            margin-bottom: clamp(4rem, 8vw, 6rem);
            position: relative;
        }
        
        /* High-End Editorial Initial Cap */
        .cs-section__body > p:first-of-type::first-letter {
            float: left;
            font-family: var(--font-serif);
            font-size: 4rem;
            line-height: 1;
            padding-right: 1rem;
            padding-top: 0.4rem;
            color: var(--mck-navy);
            font-weight: 400;
        }

        /* Premium Eyebrow - Sharp & Spaced */
        .cs-section__eyebrow {
            font-family: var(--font-sans);
            font-size: .68rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .3em;
            color: var(--mck-blue);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }
        .cs-section__eyebrow::after {
            content: '';
            flex-grow: 1;
            height: 1px;
            background: rgba(0, 127, 255, 0.12);
        }

        /* Architectural Section Heading */
        .cs-section__heading {
            position: relative;
            display: block;
            font-family: var(--font-serif);
            font-size: clamp(2.2rem, 3.5vw, 3rem);
            font-weight: 400;
            line-height: 1.15;
            letter-spacing: -.03em;
            color: var(--mck-navy);
            margin-bottom: 2.5rem;
            border-left: 8px solid var(--mck-blue);
            padding-left: 2rem;
        }

        /* Premium Editorial Paragraphs */
        .cs-section__body {
            font-family: var(--font-sans);
            font-size: clamp(1.05rem, 1.3vw, 1.15rem);
            font-weight: 400;
            line-height: 1.85;
            color: #334155;
            text-align: justify;
            hyphens: auto;
        }
        .cs-section__body p { margin-bottom: 1.75rem; }
        .cs-section__body p:last-child { margin-bottom: 0; }

        /* pull-quote: Sharp Architectural Monolith */
        .cs-pull-quote {
            margin: 4rem 0;
            background: var(--mck-ice);
            border: 1px solid rgba(15, 41, 66, 0.08);
            border-left: 8px solid var(--mck-navy);
            padding: 3rem;
            border-radius: 0; /* Forced sharp */
            position: relative;
        }
        .cs-pull-quote::after {
            content: '\201C';
            position: absolute; top: -1rem; right: 2rem;
            font-family: var(--font-serif);
            font-size: 8rem; color: rgba(0, 127, 255, 0.04);
            line-height: 1;
        }
        .cs-pull-quote__text {
            font-family: var(--font-serif);
            font-size: clamp(1.4rem, 2.2vw, 1.8rem);
            font-style: italic;
            line-height: 1.4;
            color: var(--mck-navy);
            position: relative; z-index: 1;
        }
        .cs-pull-quote__attr {
            display: block; margin-top: 1.5rem;
            font-family: var(--font-sans);
            font-size: .8rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .2em;
            color: var(--mck-blue);
        }

        /* approach pillars: Precision Grid Modules */
        .cs-pillars {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 0; /* Unified grid look */
            margin-top: 3rem;
            border: 1px solid rgba(15, 41, 66, 0.1);
        }
        .cs-pillar {
            background: #fff;
            border: 0.5px solid rgba(15, 41, 66, 0.08);
            border-radius: 0; /* Forced sharp */
            padding: 2.5rem 2rem;
            transition: all .6s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }
        .cs-pillar:hover {
            z-index: 2;
            box-shadow: 0 30px 60px -15px rgba(5, 28, 44, 0.1);
            background: #007FFF;
            transform: scale(1.01);
        }
        .cs-pillar:hover .cs-pillar__title,
        .cs-pillar:hover .cs-pillar__desc {
            color: #fff;
        }
        .cs-pillar:hover .cs-pillar__num {
            color: rgba(255,255,255,0.08);
            transform: scale(1.1);
        }

        .cs-pillar__num {
            font-family: var(--font-sans);
            font-size: 3.5rem; font-weight: 800;
            color: rgba(0,127,255,.05);
            line-height: 1;
            position: absolute; right: 1.5rem; top: 1.5rem;
            transition: all .5s ease;
        }
        .cs-pillar__title {
            font-family: var(--font-serif);
            font-size: 1.4rem; font-weight: 400;
            color: var(--mck-navy);
            margin-bottom: 1rem;
            transition: color .4s ease;
        }
        .cs-pillar__desc {
            font-family: var(--font-sans);
            font-size: .95rem; font-weight: 400;
            line-height: 1.75;
            color: #64748b;
            transition: color .4s ease;
        }

        /* mid-page imagery: Frameless Sharp Edge */
        .cs-image-block {
            position: relative;
            border-radius: 0; /* Forced sharp */
            overflow: hidden;
            margin: clamp(4rem, 8vw, 7rem) 0;
            aspect-ratio: 16/8;
            box-shadow: none;
            border: 1px solid #eee;
        }
        .cs-image-block img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-image-block:hover img { transform: scale(1.1); }
        .cs-image-block__caption {
            position: absolute; bottom: 0; left: 0;
            padding: 1.75rem 3rem;
            background: #007FFF;
            font-family: var(--font-sans);
            font-size: .75rem; font-weight: 800;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: #fff;
        }

        /* outcomes grid: Sleek Sharp Modules */
        .cs-outcomes {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem;
            margin-top: 3rem;
        }
        .cs-outcome {
            background: #fbfcfd;
            border-radius: 0; /* Forced sharp */
            padding: 2.5rem 2rem;
            position: relative;
            overflow: hidden;
            transition: all .6s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(15, 41, 66, 0.08);
            border-top: 1px solid rgba(0, 127, 255, 0.3);
        }
        .cs-outcome::before {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 4px;
            background: var(--mck-blue);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-outcome:hover {
            transform: translateY(-8px);
            background: #fff;
            border-color: rgba(0, 127, 255, 0.2);
            box-shadow: 0 30px 60px -12px rgba(5, 28, 44, 0.08);
        }
        .cs-outcome:hover::before { transform: scaleX(1); }

        .cs-outcome__value {
            font-family: var(--font-sans);
            font-size: clamp(2.5rem, 4vw, 3.2rem);
            font-weight: 800;
            color: var(--mck-navy);
            line-height: 1;
            margin-bottom: 0.75rem;
            letter-spacing: -0.04em;
            transition: color .4s ease;
        }
        .cs-outcome:hover .cs-outcome__value { color: var(--mck-blue); }

        .cs-outcome__label {
            font-family: var(--font-sans);
            font-size: .7rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .25em;
            color: #64748b;
            transition: color .4s ease;
        }
        .cs-outcome:hover .cs-outcome__label { color: var(--mck-navy); }

        .cs-outcome__desc {
            font-family: var(--font-sans);
            font-size: .9rem; font-weight: 400;
            color: #94a3b8;
            margin-top: 1.25rem;
            line-height: 1.6;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(15,41,66,.04);
            transition: color .4s ease;
        }
        .cs-outcome:hover .cs-outcome__desc { color: #475569; }

        /* ========================================================
           4. SIDEBAR (ARCHITECTURAL PRECISION)
        ======================================================== */
        .cs-sidebar {
            position: sticky;
            top: 140px;
        }

        .cs-sidebar__card {
            background: #fff;
            border: 1px solid rgba(15, 41, 66, 0.12);
            border-radius: 0; /* Forced sharp */
            padding: 2.25rem;
            margin-bottom: 2.25rem;
            transition: all .4s ease;
        }
        .cs-sidebar__card:hover { 
            border-color: var(--mck-blue); 
            box-shadow: 0 15px 30px rgba(5, 28, 44, 0.04);
        }

        .cs-sidebar__card-title {
            font-family: var(--font-sans);
            font-size: .7rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .35em;
            color: var(--mck-navy);
            padding-bottom: 1.25rem;
            border-bottom: 3px solid #007FFF;
            margin-bottom: 1.75rem;
        }
        .cs-sidebar__row {
            display: flex; justify-content: space-between;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 0.85rem 0;
            border-bottom: 1px solid rgba(15,41,66,.08);
        }
        .cs-sidebar__row:last-child { border-bottom: none; }
        .cs-sidebar__row-key {
            font-family: var(--font-sans);
            font-size: .68rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .15em;
            color: #94a3b8;
            flex-shrink: 0;
        }
        .cs-sidebar__row-val {
            font-family: var(--font-sans);
            font-size: .88rem; font-weight: 800;
            color: var(--mck-navy);
            text-align: right;
        }

        .cs-sidebar__tags {
            display: flex; flex-wrap: wrap; gap: 0.75rem;
        }
        .cs-sidebar__tag {
            font-family: var(--font-sans);
            font-size: .62rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .2em;
            padding: .6rem 1rem;
            border-radius: 0; /* Forced sharp */
            border: 1px solid rgba(15, 41, 66, 0.12);
            color: var(--mck-navy);
            background: #fff;
            transition: all .4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-sidebar__tag:hover {
            background: var(--mck-navy);
            color: #fff;
            border-color: var(--mck-navy);
            transform: translateY(-2px);
        }

        /* CTA: High-Performance Monolith */
        .cs-sidebar__cta {
            background: #007FFF;
            border-radius: 0; /* Forced sharp */
            padding: 3.5rem 2.25rem;
            color: #fff;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            transition: all .6s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* Technical Point Grid Overlay */
        .cs-sidebar__cta::after {
            content: '';
            position: absolute; inset: 0;
            background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.03) 1px, transparent 0);
            background-size: 24px 24px;
            pointer-events: none;
            z-index: 1;
        }
        .cs-sidebar__cta::before {
            content: '';
            position: absolute; top: 0; left: 0; width: 100%; height: 4px;
            background: #007FFF;
            transition: all .5s ease;
            z-index: 2;
        }
        .cs-sidebar__cta:hover {
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5);
        }
        .cs-sidebar__cta:hover::before {
            background: var(--mck-accent);
            height: 6px;
        }
        
        .cs-sidebar__cta-eyebrow {
            position: relative; z-index: 2;
            font-family: var(--font-sans);
            font-size: .65rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .4em;
            color: #007FFF;
            margin-bottom: 1.5rem;
            display: block;
            opacity: 0.9;
        }
        .cs-sidebar__cta-heading {
            position: relative; z-index: 2;
            font-family: var(--font-serif);
            font-size: clamp(1.6rem, 2vw, 1.85rem);
            font-weight: 400;
            line-height: 1.25;
            color: #fff;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
        }
        .cs-sidebar__cta-text {
            position: relative; z-index: 2;
            font-family: var(--font-sans);
            font-size: .95rem; font-weight: 400;
            line-height: 1.7;
            color: rgba(255,255,255,.88);
            margin-bottom: 2.25rem;
        }
        .cs-sidebar__cta-btn {
            position: relative; z-index: 2;
            display: inline-flex; align-items: center; justify-content: space-between;
            gap: 1rem;
            width: 100%;
            padding: 1.25rem 1.75rem;
            background: #fff;
            color: var(--mck-navy);
            font-family: var(--font-sans);
            font-size: .75rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .25em;
            border-radius: 0; /* Forced sharp */
            transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-sidebar__cta-btn i {
            transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-sidebar__cta-btn:hover { 
            background: #ffffff; 
            color: var(--mck-navy);
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
        }
        .cs-sidebar__cta-btn:hover i {
            transform: translateX(6px);
        }

        /* ========================================================
           5. RELATED INSIGHTS CAROUSEL
        ======================================================== */
        .cs-related {
            background: var(--mck-ice);
            padding: var(--section-y) 0 var(--section-y) var(--section-x);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(15, 41, 66, 0.06);
        }
        .cs-related::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #007FFF, transparent);
            opacity: .8;
        }
        .cs-related__header {
            max-width: 1280px;
            padding-right: var(--section-x);
            margin: 0 auto 3.5rem;
        }
        .cs-related__eyebrow {
            font-family: var(--font-sans);
            font-size: .75rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .2em;
            color: var(--mck-blue);
            display: flex; align-items: center; gap: .6rem;
            margin-bottom: 1rem;
        }
        .cs-related__heading {
            position: relative;
            display: inline-block;
            font-family: var(--font-serif);
            font-size: clamp(2.2rem, 3.5vw, 3rem);
            font-weight: 400;
            line-height: 1.15;
            color: var(--mck-navy);
            margin-bottom: 1.5rem;
        }
        .cs-related__heading::after {
            content: '';
            position: absolute; left: 0; bottom: -12px;
            width: 70px; height: 3px;
            background-color: var(--mck-blue);
        }

        /* scroll track */
        .cs-related__track-wrap {
            overflow: hidden;
            cursor: grab;
        }
        .cs-related__track-wrap.dragging { cursor: grabbing; }
        .cs-related__track {
            display: flex; gap: 2rem;
            transition: transform .55s cubic-bezier(.25,1,.5,1);
            padding-bottom: 2rem;
        }
        .cs-related__slide {
            flex: 0 0 clamp(320px, 42vw, 520px);
            border-radius: 0; /* Forced sharp */
            overflow: hidden;
            background: #ffffff;
            border: 1px solid rgba(15, 41, 66, 0.1);
            border-top: 6px solid var(--mck-blue);
            box-shadow: 0 20px 40px rgba(5, 28, 44, 0.05);
            transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-related__slide:hover {
            box-shadow: 0 40px 80px rgba(5, 28, 44, 0.12);
            transform: translateY(-10px);
        }
        .cs-related__img {
            position: relative;
            aspect-ratio: 16/9; overflow: hidden;
            border-bottom: 1px solid rgba(15, 41, 66, 0.08);
        }
        .cs-related__img img {
            width: 100%; height: 100%;
            object-fit: cover;
            transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        .cs-related__slide:hover .cs-related__img img { transform: scale(1.06); }
        .cs-related__badge {
            position: absolute; top: 1rem; left: 1rem;
            background: rgba(0,127,255,.85);
            backdrop-filter: blur(8px);
            color: #fff;
            font-size: .65rem; font-weight: 700;
            letter-spacing: .14em; text-transform: uppercase;
            padding: .3rem .85rem; border-radius: 4px;
        }
        .cs-related__content { padding: 1.5rem; }
        .cs-related__content-eyebrow {
            font-size: .68rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .14em;
            color: var(--mck-blue); margin-bottom: .5rem;
        }
        .cs-related__title {
            font-family: var(--font-serif);
            font-size: clamp(1.1rem,1.6vw,1.35rem);
            font-weight: 400; line-height: 1.3;
            color: var(--mck-navy); margin-bottom: .65rem;
        }
        .cs-related__excerpt {
            font-size: .85rem; font-weight: 300; line-height: 1.65;
            color: #64748b; margin-bottom: 1rem;
        }
        .cs-related__link {
            display: inline-flex; align-items: center; gap: .5rem;
            font-size: .72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .12em;
            color: var(--mck-navy);
            transition: color .2s gap .2s;
        }
        .cs-related__link:hover { color: var(--mck-blue); gap: .75rem; }
        .cs-related__link i { font-size: .65rem; transition: transform .2s; }
        .cs-related__link:hover i { transform: translateX(4px); }

        /* nav arrows */
        .cs-related__nav {
            max-width: 1280px; margin: 1.5rem auto 0;
            padding-right: var(--section-x);
            display: flex; gap: .75rem;
        }
        .cs-related__arrow {
            width: 44px; height: 44px;
            border-radius: 50%;
            border: 1.5px solid rgba(5,28,44,.15);
            background: transparent;
            display: flex; align-items: center; justify-content: center;
            font-size: .9rem; color: var(--mck-navy);
            cursor: pointer;
            transition: background .25s, border-color .25s, color .25s, transform .25s;
        }
        .cs-related__arrow:hover {
            background: var(--mck-navy);
            border-color: var(--mck-navy);
            color: #fff;
            transform: scale(1.05);
        }

        /* ========================================================
           6. ULTRA-PREMIUM CTA (MINIMALIST)
        ======================================================== */
        .cs-cta-strip {
            position: relative;
            background: #007FFF;
            min-height: 50vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .cs-cta-strip__bg {
            position: absolute; inset: 0;
            background-image: url('/assets/images/index/about-us-background.png');
            background-size: cover;
            background-position: center;
            animation: heroZoom 30s ease-in-out infinite alternate;
            opacity: 0.08;
            mix-blend-mode: soft-light;
            filter: grayscale(100%);
        }

        .cs-cta-strip__inner {
            position: relative; z-index: 10;
            width: 100%; max-width: 800px;
            padding: 4rem var(--section-x);
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: fadeInUp 1s ease forwards;
        }

        .cs-cta-strip__eyebrow {
            font-family: var(--font-sans);
            font-size: .65rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .25em;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            position: relative;
            display: inline-block;
        }
        .cs-cta-strip__eyebrow::after {
            content: '';
            position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px;
            width: 40px; height: 1.5px; background: rgba(255, 255, 255, 0.9);
        }

        .cs-cta-strip__heading {
            font-family: var(--font-serif);
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            font-weight: 400; line-height: 1.15;
            color: #fff;
            margin-bottom: 3rem;
            letter-spacing: -.02em;
        }
        
        .cs-cta-strip__actions {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem;
            align-items: center;
        }

        .cs-cta-btn-primary {
            display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
            padding: 1.25rem 2.5rem;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.35);
            color: #ffffff;
            font-family: var(--font-sans);
            font-size: .85rem; font-weight: 800;
            text-transform: uppercase; letter-spacing: .2em;
            border-radius: 0; /* Forced sharp */
            transition: all .5s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .cs-cta-btn-primary:hover {
            background: #ffffff; color: var(--mck-navy);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .cs-cta-btn-primary i { transition: transform .3s ease; }
        .cs-cta-btn-primary:hover i { transform: translateX(6px); }

        .cs-cta-btn-ghost {
            display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
            font-family: var(--font-sans); font-size: .8rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: .12em;
            color: rgba(255, 255, 255, 0.9);
            transition: all .3s ease;
            position: relative;
        }
        .cs-cta-btn-ghost::after {
            content: ''; position: absolute; left: 0; bottom: -4px;
            width: 0; height: 1px; background: rgba(255, 255, 255, 0.9);
            transition: width .3s ease;
        }
        .cs-cta-btn-ghost:hover { color: #ffffff; }
        .cs-cta-btn-ghost:hover::after { width: 100%; }

        /* ========================================================
           RESPONSIVE
        ======================================================== */
        @media (max-width: 1024px) {
            .cs-body__grid {
                grid-template-columns: 1fr;
            }
            .cs-sidebar { position: static; }
        }

        @media (max-width: 768px) {
            .cs-hero__kpis { flex-direction: column; border-radius: var(--radius); }
            .cs-hero__kpi { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
            .cs-hero__kpi:last-child { border-bottom: none; }
            .cs-hero__headline { font-size: clamp(2rem,8vw,3rem); max-width: 100%; }
            .cs-context__inner { flex-direction: column; gap: 0; }
            .cs-context__cell::after { display: none; }
            .cs-pillars { grid-template-columns: 1fr; }
            .cs-outcomes { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 480px) {
            .cs-outcomes { grid-template-columns: 1fr; }
        }

        /* ── reveal animations ── */
        .reveal {
            opacity: 0; transform: translateY(22px);
            transition: opacity .75s cubic-bezier(.16,1,.3,1),
                        transform .75s cubic-bezier(.16,1,.3,1);
        }
        .reveal.in { opacity: 1; transform: translateY(0); }
        .reveal.delay-1 { transition-delay: .1s; }
        .reveal.delay-2 { transition-delay: .2s; }
        .reveal.delay-3 { transition-delay: .3s; }
        .reveal.delay-4 { transition-delay: .4s; }