/* ===== Google Fonts Import ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Lexend:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700;800;900&family=Playfair+Display+SC:wght@400;700;900&family=Libre+Caslon+Text:wght@400;700&family=Libre+Franklin:wght@400;500;600;700&family=Crimson+Text:wght@400;600;700&display=swap');

/* ===== CSS Variables - Comprehensive Token System ===== */
:root {
    /* === Color Palette === */
    --primary-color: #2563eb;
    --secondary-color: #7c3aed;
    --accent-color: #10b981;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --border-color: #e5e7eb;

    /* === Gradient Colors === */
    --gradient-start: #2563eb;
    --gradient-end: #7c3aed;

    /* === Typography === */
    --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-heading: var(--font-family-primary);
    --font-family-mono: 'Monaco', 'Courier New', monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;

    /* === Spacing === */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 5rem;

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.3);

    /* === Transitions & Animations === */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.3s ease;
    --transition-slow: all 0.6s ease;
    --transition-spring: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === Component-Specific === */
    --btn-padding: 0.875rem 2rem;
    --btn-radius: var(--radius-md);
    --btn-font-weight: var(--font-weight-semibold);

    --card-padding: 1.5rem;
    --card-radius: var(--radius-lg);
    --card-shadow: var(--shadow);

    --navbar-height: 70px;
    --navbar-bg: rgba(255, 255, 255, 0.95);
    --navbar-blur: 10px;
    --navbar-text: var(--text-primary);
    --navbar-logo: var(--primary-color);

    /* === Effects === */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: 20px;

    --backdrop-blur: blur(10px);
    --backdrop-saturate: saturate(180%);

    /* === Carousel-Specific === */
    --carousel-rotation: 12deg;
    --carousel-scale-side: 0.85;
    --carousel-scale-far: 0.7;
    --carousel-blur-side: 1px;
    --carousel-blur-far: 2px;
}

/* ===== THEME 1: DESIGNER - Fun, Energetic, Motion-Rich ===== */
html.theme-designer,
html.theme-designer body {
    /* Color Palette - Orange-Centric Designer Theme */
    --primary-color: #ff6b35;        /* Signature orange */
    --secondary-color: #ff8c42;      /* Light orange */
    --accent-color: #ffa726;         /* Warm orange */
    --orange-deep: #e55a2b;          /* Deep orange for contrast */

    /* Complementary Accents */
    --teal-accent: #00D9C0;          /* Teal complement */
    --purple-accent: #9D4EDD;        /* Purple variety */
    --coral-pink: #FF6F91;           /* Coral harmony */
    --golden-yellow: #FFB627;        /* Golden analogous */

    /* Neutrals */
    --text-primary: #2c2c2c;
    --text-secondary: #5a5a5a;
    --bg-primary: #ffffff;
    --bg-secondary: #fff8f5;
    --bg-tertiary: #ffe8dc;
    --border-color: rgba(255, 107, 53, 0.2);

    /* Gradients */
    --gradient-start: #ff6b35;
    --gradient-end: #ff8c42;

    /* Typography */
    --font-family-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Space Grotesk', sans-serif;
    --font-weight-normal: 500;
    --font-weight-bold: 800;
    --letter-spacing-normal: -0.01em;
    --letter-spacing-wide: 0.02em;

    /* Border Radius - More playful */
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;

    /* Shadows - Colorful glows */
    --shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
    --shadow-lg: 0 20px 40px rgba(255, 107, 53, 0.25);
    --shadow-glow: 0 0 30px rgba(255, 107, 53, 0.4);

    /* Transitions - Bouncy, fast */
    --transition-base: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Effects - Glassmorphic */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 20px;

    /* Navbar */
    --navbar-bg: rgba(255, 248, 245, 0.95);
    --navbar-text: var(--text-primary);
    --navbar-logo: var(--primary-color);

    /* Carousel - Exaggerated */
    --carousel-rotation: 20deg;
    --carousel-scale-side: 0.8;
    --carousel-scale-far: 0.65;
}

/* ===== THEME 2: BUSINESS - Professional, Data-Driven ===== */
html.theme-business,
html.theme-business body {
    /* Color Palette */
    --primary-color: #1565c0;
    --secondary-color: #1976d2;
    --accent-color: #42a5f5;
    --text-primary: #0d47a1;
    --text-secondary: #455a64;
    --bg-primary: #e3f2fd;
    --bg-secondary: #bbdefb;
    --bg-tertiary: #90caf9;
    --border-color: rgba(21, 101, 192, 0.2);

    /* Gradients */
    --gradient-start: #1565c0;
    --gradient-end: #1976d2;

    /* Typography */
    --font-family-primary: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
    --font-family-heading: 'JetBrains Mono', monospace;
    --font-family-mono: 'JetBrains Mono', monospace;
    --font-weight-normal: 400;
    --font-weight-bold: 600;
    --letter-spacing-normal: 0;
    --line-height-normal: 1.5;

    /* Border Radius - Sharp, precise */
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 12px;
    --radius-3xl: 16px;

    /* Shadows - Strong, defined */
    --shadow: 0 2px 8px rgba(21, 101, 192, 0.2);
    --shadow-lg: 0 8px 24px rgba(21, 101, 192, 0.3);
    --shadow-glow: 0 0 20px rgba(66, 165, 245, 0.4);

    /* Transitions - Medium, professional */
    --transition-base: all 0.4s ease-in-out;
    --transition-spring: all 0.5s ease-in-out;

    /* Effects */
    --glass-bg: rgba(227, 242, 253, 0.8);
    --glass-border: rgba(21, 101, 192, 0.3);

    /* Navbar */
    --navbar-bg: #1565c0;
    --navbar-text: #ffffff;
    --navbar-logo: #ffffff;

    /* Carousel - Grid-based */
    --carousel-rotation: 8deg;
    --carousel-scale-side: 0.9;
    --carousel-scale-far: 0.75;
}

/* ===== THEME 3: MENTOR - Warm, Approachable, Collaborative ===== */
html.theme-mentor,
html.theme-mentor body {
    /* Color Palette */
    --primary-color: #9c27b0;
    --secondary-color: #ba68c8;
    --accent-color: #ce93d8;
    --text-primary: #4a148c;
    --text-secondary: #6a1b9a;
    --bg-primary: #fafafa;
    --bg-secondary: #f3e5f5;
    --bg-tertiary: #e1bee7;
    --border-color: rgba(156, 39, 176, 0.2);

    /* Gradients */
    --gradient-start: #e1bee7;
    --gradient-end: #f3e5f5;

    /* Typography */
    --font-family-primary: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Lexend', sans-serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --line-height-normal: 1.7;
    --line-height-relaxed: 1.9;
    --letter-spacing-normal: 0.01em;

    /* Border Radius - Fully rounded pills and soft cards */
    --radius-md: 50px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-2xl: 32px;
    --radius-3xl: 40px;

    /* Shadows - Soft, layered */
    --shadow: 0 4px 12px rgba(156, 39, 176, 0.15), 0 2px 4px rgba(156, 39, 176, 0.1);
    --shadow-lg: 0 12px 32px rgba(156, 39, 176, 0.2), 0 4px 12px rgba(156, 39, 176, 0.15);
    --shadow-glow: 0 0 25px rgba(156, 39, 176, 0.3);

    /* Transitions - Slow, organic */
    --transition-base: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-spring: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);

    /* Effects */
    --glass-bg: rgba(250, 250, 250, 0.9);
    --glass-border: rgba(156, 39, 176, 0.2);

    /* Navbar */
    --navbar-bg: rgba(250, 250, 250, 0.98);
    --navbar-text: var(--text-primary);
    --navbar-logo: var(--primary-color);

    /* Carousel - Gentle */
    --carousel-rotation: 8deg;
    --carousel-scale-side: 0.88;
    --carousel-scale-far: 0.72;
}

/* ===== THEME 4: CLASSIC - Minimal, Elegant, Timeless ===== */
html.theme-classic,
html.theme-classic body {
    /* Color Palette - Monochrome */
    --primary-color: #000000;
    --secondary-color: #1a1a1a;
    --accent-color: #333333;
    --text-primary: #000000;
    --text-secondary: #4a4a4a;
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --border-color: #000000;

    /* Gradients - None, solid colors */
    --gradient-start: #000000;
    --gradient-end: #1a1a1a;

    /* Typography - Serif */
    --font-family-primary: Georgia, 'Times New Roman', serif;
    --font-family-heading: Georgia, serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 700;
    --line-height-normal: 1.8;
    --line-height-relaxed: 2;
    --letter-spacing-normal: 0.02em;

    /* Border Radius - Sharp corners */
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-3xl: 0px;

    /* Shadows - Offset only, no blur */
    --shadow: 3px 3px 0px rgba(0, 0, 0, 1);
    --shadow-lg: 6px 6px 0px rgba(0, 0, 0, 1);
    --shadow-glow: none;

    /* Transitions - Minimal, fast */
    --transition-base: all 0.2s linear;
    --transition-spring: all 0.2s linear;

    /* Effects - None */
    --glass-bg: transparent;
    --glass-border: #000000;
    --glass-blur: 0px;

    /* Navbar */
    --navbar-bg: rgba(255, 255, 255, 1);
    --navbar-text: var(--text-primary);
    --navbar-logo: var(--primary-color);

    /* Carousel - 2D only */
    --carousel-rotation: 0deg;
    --carousel-scale-side: 0.95;
    --carousel-scale-far: 0.9;
}

/* ===== THEME 5: UNDECIDED - Newspaper Minimalist ===== */
/* Black and white only, 0 border radius, black as main color */
html.theme-undecided,
html.theme-undecided body {
    /* Color Palette - Monochrome, newspaper style */
    --primary-color: #000000;
    --secondary-color: #1a1a1a;
    --accent-color: #333333;
    --text-primary: #000000;
    --text-secondary: #4a4a4a;
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f5f5f5;
    --border-color: #000000;

    /* Gradients - None, solid colors */
    --gradient-start: #000000;
    --gradient-end: #1a1a1a;

    /* Typography - Serif, newspaper style */
    --font-family-primary: Georgia, 'Times New Roman', serif;
    --font-family-heading: Georgia, serif;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-extrabold: 700;
    --line-height-normal: 1.8;
    --line-height-relaxed: 2;
    --letter-spacing-normal: 0.02em;

    /* Border Radius - All 0 (sharp corners) */
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-2xl: 0px;
    --radius-3xl: 0px;

    /* Shadows - Offset only, no blur */
    --shadow: 3px 3px 0px rgba(0, 0, 0, 1);
    --shadow-lg: 6px 6px 0px rgba(0, 0, 0, 1);
    --shadow-glow: none;

    /* Transitions - Minimal, fast */
    --transition-base: all 0.2s linear;
    --transition-spring: all 0.2s linear;

    /* Effects - None */
    --glass-bg: transparent;
    --glass-border: #000000;
    --glass-blur: 0px;

    /* Navbar */
    --navbar-bg: rgba(255, 255, 255, 1);
    --navbar-text: var(--text-primary);
    --navbar-logo: var(--primary-color);

    /* Carousel - 2D only */
    --carousel-rotation: 0deg;
    --carousel-scale-side: 0.95;
    --carousel-scale-far: 0.9;
}

/* ===== DEFAULT THEME - Neutral Fallback ===== */
html.theme-default,
html.theme-default body {
    /* Uses the root variables as-is */
    /* This theme is already defined in :root */
}

/* ========================================
   DEFAULT THEME: My Process Section - 1940s Newspaper Style
   ======================================== */

/* Section Container - Aged Newspaper Background */
html.theme-default .process-section {
    background: linear-gradient(0deg, rgba(0,0,0,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px),
                #f5f1e8 !important;
    background-size: 30px 30px, 30px 30px, 100% 100% !important;
    padding: 100px 40px !important;
    position: relative !important;
    border-top: 5px solid #000 !important;
    border-bottom: 5px solid #000 !important;
}

/* Ornamental Top Banner */
html.theme-default .process-section::before {
    content: '✦ ❦ ✦' !important;
    display: block !important;
    text-align: center !important;
    font-size: 24px !important;
    color: #000 !important;
    margin-bottom: 40px !important;
    letter-spacing: 40px !important;
    margin-left: 40px !important;
}

html.theme-default .process-header {
    text-align: center !important;
    margin-bottom: 60px !important;
    border-bottom: 3px double #000 !important;
    padding-bottom: 40px !important;
}

html.theme-default .process-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 6px !important;
    color: #000 !important;
    margin: 0 0 20px 0 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 8px 0 !important;
}

html.theme-default .process-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 72px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    margin: 0 0 30px 0 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1) !important;
}

html.theme-default .process-description {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    color: #2a2a2a !important;
    line-height: 1.9 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    font-style: italic !important;
    position: relative !important;
    padding: 0 40px !important;
}

/* Decorative Quotation Marks */
html.theme-default .process-description::before {
    content: '"' !important;
    font-size: 48px !important;
    position: absolute !important;
    left: 0 !important;
    top: -10px !important;
    font-family: 'Playfair Display', serif !important;
    color: #000 !important;
}

html.theme-default .process-description::after {
    content: '"' !important;
    font-size: 48px !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -30px !important;
    font-family: 'Playfair Display', serif !important;
    color: #000 !important;
}

/* Ornamental Divider */
html.theme-default .process-header::after {
    content: '─── ❦ ─── ⁂ ─── ❦ ───' !important;
    display: block !important;
    text-align: center !important;
    font-size: 16px !important;
    color: #000 !important;
    margin-top: 40px !important;
    letter-spacing: 3px !important;
}

/* Process Steps */
html.theme-default .process-steps {
    margin-top: 60px !important;
}

html.theme-default .process-step {
    display: block !important;
    margin-bottom: 50px !important;
    position: relative !important;
    padding: 40px !important;
    background: rgba(255,255,255,0.7) !important;
    border: 4px solid #000 !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.15) !important;
}

/* Corner Brackets - Ornamental */
html.theme-default .process-step::before,
html.theme-default .process-step::after {
    content: '╔═══╗' !important;
    position: absolute !important;
    font-family: monospace !important;
    font-size: 20px !important;
    color: #000 !important;
    line-height: 1 !important;
}

html.theme-default .process-step::before {
    top: -12px !important;
    left: 20px !important;
}

html.theme-default .process-step::after {
    content: '╚═══╝' !important;
    bottom: -12px !important;
    right: 20px !important;
}

/* Instant Hover - No Smooth Animations */
html.theme-default .process-step:hover {
    transform: rotate(-0.5deg) !important;
    transition: none !important;
    box-shadow: 12px 12px 0px rgba(0,0,0,0.25) !important;
}

html.theme-default .process-step-number-container {
    display: inline-block !important;
    float: left !important;
    margin-right: 30px !important;
    margin-bottom: 20px !important;
}

html.theme-default .process-step-number {
    width: 100px !important;
    height: 100px !important;
    background: #000 !important;
    border: 5px double #fff !important;
    outline: 4px solid #000 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: inset 0 0 0 2px #000 !important;
}

/* Corner Decorations on Number Badge */
html.theme-default .process-step-number::before {
    content: '✦' !important;
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 20px !important;
    color: #000 !important;
}

html.theme-default .process-step-number::after {
    content: '✦' !important;
    position: absolute !important;
    bottom: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 20px !important;
    color: #000 !important;
}

html.theme-default .process-step:hover .process-step-number {
    transform: rotate(5deg) !important;
    transition: none !important;
}

html.theme-default .process-step-number-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

html.theme-default .process-step-content {
    overflow: hidden !important;
}

html.theme-default .process-step-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
    color: #000 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    border-bottom: 2px solid #000 !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

/* Drop Cap Effect on First Letter */
html.theme-default .process-step-title::first-letter {
    font-size: 56px !important;
    font-weight: 900 !important;
    float: left !important;
    line-height: 0.8 !important;
    margin-right: 8px !important;
    margin-top: 5px !important;
}

html.theme-default .process-step:hover .process-step-title {
    color: #000 !important;
}

html.theme-default .process-step-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    line-height: 2 !important;
    text-align: justify !important;
    column-count: 1 !important;
}

/* Timeline Overview Pills - Stamped/Boxed Style */
html.theme-default .process-timeline-overview {
    background: rgba(0,0,0,0.05) !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    padding: 30px !important;
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 50px !important;
    position: relative !important;
    box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #000 !important;
}

/* Corner Stamps */
html.theme-default .process-timeline-overview::before {
    content: '✦' !important;
    position: absolute !important;
    top: -12px !important;
    left: -12px !important;
    font-size: 24px !important;
    color: #000 !important;
    background: #f5f1e8 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.theme-default .process-timeline-overview::after {
    content: '✦' !important;
    position: absolute !important;
    top: -12px !important;
    right: -12px !important;
    font-size: 24px !important;
    color: #000 !important;
    background: #f5f1e8 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.theme-default .process-timeline-overview div {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    background: #fff !important;
    padding: 12px 20px !important;
    border: 3px solid #000 !important;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

html.theme-default .process-timeline-overview div:hover {
    transform: rotate(-2deg) translateY(-2px) !important;
    transition: none !important;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.4) !important;
}

html.theme-default .process-timeline-overview div strong {
    font-weight: 900 !important;
    color: #000 !important;
    font-size: 16px !important;
}

/* Additional Process Step Inner Elements */

/* Unique Callout Box - Vintage Advertisement Style */
html.theme-default .process-unique-callout {
    background: #1a1a1a !important;
    color: #f5f1e8 !important;
    padding: 40px !important;
    margin-top: 50px !important;
    border: 5px double #000 !important;
    position: relative !important;
    box-shadow: 8px 8px 0px rgba(0,0,0,0.2), inset 0 0 0 3px #f5f1e8 !important;
}

/* Remove blueprint corners, add vintage ornaments */
html.theme-default .process-unique-callout > div {
    display: none !important;
}

html.theme-default .process-unique-callout::before {
    content: '⁂' !important;
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 28px !important;
    color: #f5f1e8 !important;
}

html.theme-default .callout-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 4px !important;
    margin: 0 0 20px 0 !important;
    color: #f5f1e8 !important;
    border-top: 2px solid #f5f1e8 !important;
    border-bottom: 2px solid #f5f1e8 !important;
    padding: 10px 0 !important;
    text-align: center !important;
}

html.theme-default .process-unique-callout p {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    line-height: 2 !important;
    color: #f5f1e8 !important;
    text-align: justify !important;
}

html.theme-default .process-unique-callout strong {
    font-weight: 700 !important;
    color: #fff !important;
}

/* Collaboration Boxes */
html.theme-default .process-step div[style*="background: rgba(66, 165, 245"] {
    background: rgba(0,0,0,0.08) !important;
    padding: 25px !important;
    margin: 25px 0 !important;
    border-left: 5px solid #000 !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
}

html.theme-default .collaboration-label,
html.theme-default .process-step h4 {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin: 0 0 15px 0 !important;
    color: #000 !important;
    letter-spacing: 3px !important;
    font-weight: 900 !important;
}

html.theme-default .process-step div[style*="background: rgba(66, 165, 245"] p {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    color: #1a1a1a !important;
}

html.theme-default .process-step div[style*="background: rgba(66, 165, 245"] strong {
    font-weight: 700 !important;
    color: #000 !important;
}

/* Duration Labels */
html.theme-default .process-step p[style*="text-transform: uppercase"][style*="DURATION"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    color: #000 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 3px !important;
    font-weight: 900 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 5px 0 !important;
    display: inline-block !important;
}

/* Process Tags - Vintage Label Style */
html.theme-default .process-step span[style*="display: inline-block"] {
    display: inline-block !important;
    padding: 10px 18px !important;
    background: #000 !important;
    color: #f5f1e8 !important;
    border: 3px double #000 !important;
    outline: 2px solid #f5f1e8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.3) !important;
    margin: 5px !important;
}

html.theme-default .process-step span[style*="display: inline-block"]:hover {
    transform: rotate(2deg) translateY(-2px) !important;
    transition: none !important;
}

/* Tools Text */
html.theme-default .process-step p[style*="TOOLS:"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    margin-top: 25px !important;
    color: #666 !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    border-top: 1px solid #ccc !important;
    padding-top: 15px !important;
}

/* Number displays in steps */
html.theme-default .process-step div[style*="font-size: 72px"],
html.theme-default .process-step div[style*="font-size: 48px"] {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 900 !important;
    color: #000 !important;
    opacity: 0.15 !important;
}

/* Checkmark/bullet lists */
html.theme-default .process-step div[style*="width: 20px"][style*="height: 2px"] {
    width: 25px !important;
    height: 3px !important;
    background: #000 !important;
}

html.theme-default .process-step div[style*="width: 20px"][style*="height: 2px"] + span {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #000 !important;
}

/* Quality callout boxes */
html.theme-default .process-step div[style*="Quality over Quantity"] {
    background: rgba(0,0,0,0.05) !important;
    padding: 20px !important;
    margin-top: 25px !important;
    border-left: 5px solid #000 !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
}

html.theme-default .process-step div[style*="Quality over Quantity"] p:first-child {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 0 10px 0 !important;
}

html.theme-default .process-step div[style*="Quality over Quantity"] p:last-child {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #1a1a1a !important;
}

/* Fidelity progression boxes (PAPER -> WIREFRAME -> HI-FI) */
html.theme-default .process-step div[style*="PAPER"],
html.theme-default .process-step div[style*="WIREFRAME"],
html.theme-default .process-step div[style*="HI-FI"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    border: 3px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
}

html.theme-default .process-step div[style*="HI-FI"] {
    background: #000 !important;
    color: #f5f1e8 !important;
}

/* Metric displays */
html.theme-default .process-step div[style*="font-size: 24px"][style*="font-weight: 600"] {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #000 !important;
}

/* Methods text */
html.theme-default .process-step p[style*="METHODS:"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    margin-top: 25px !important;
    color: #666 !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
    border-top: 1px solid #ccc !important;
    padding-top: 15px !important;
}

/* Compass-Driven Design specific styling */
html.theme-default .impact-section {
    background: #f5f1e8 !important;
}

/* ========================================
   UNDECIDED THEME: 1940s Newspaper Design - Complete System
   ======================================== */

/* ===== CSS Custom Properties - Authentic Newspaper Design ===== */
html.theme-undecided {
    /* Authentic newspaper color palette */
    --newspaper-black: #1a1a1a;
    --newspaper-text: #2a2a2a;
    --newspaper-gray: #5a5a5a;
    --newspaper-light: #8a8a8a;
    --newspaper-bg: #f4ede4;
    --newspaper-white: #fff;
    --newspaper-cream: #faf8f5;

    /* Authentic newspaper fonts */
    --headline-font: 'Libre Caslon Text', 'Crimson Text', Georgia, serif;
    --subhead-font: 'Libre Franklin', 'Franklin Gothic', Arial, sans-serif;
    --body-font: Georgia, 'Times New Roman', serif;

    /* Hairline borders like real newspapers */
    --border-heavy: 1px;
    --border-medium: 1px;
    --border-thin: 0.5px;
    --border-double: 3px double;

    /* Subtle shadows only */
    --shadow-subtle: 0 1px 3px rgba(26,26,26,0.08);
}

/* ===== Global Base Styles ===== */
html.theme-undecided,
html.theme-undecided body {
    background: var(--newspaper-bg) !important;
    color: var(--newspaper-text) !important;
    font-family: var(--body-font) !important;
    line-height: 1.7 !important;
}

/* ===== Typography System - Authentic Newspaper Fonts ===== */

/* Headlines - Authentic newspaper serif */
html.theme-undecided h1,
html.theme-undecided .masthead,
html.theme-undecided .section-title {
    font-family: var(--headline-font) !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

html.theme-undecided h1 {
    font-size: 48px !important;
}

/* Subheadings */
html.theme-undecided h2 {
    font-family: var(--headline-font) !important;
    font-weight: 600 !important;
    font-size: 36px !important;
    color: var(--newspaper-black) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
}

html.theme-undecided h3 {
    font-family: var(--headline-font) !important;
    font-weight: 600 !important;
    font-size: 24px !important;
    color: var(--newspaper-black) !important;
    letter-spacing: -0.01em !important;
}

html.theme-undecided h4 {
    font-family: var(--subhead-font) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--newspaper-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* Body Text */
html.theme-undecided p {
    font-family: var(--body-font) !important;
    font-size: 16px !important;
    color: var(--newspaper-text) !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* Only justify long-form article content */
html.theme-undecided article p,
html.theme-undecided .about-content p,
html.theme-undecided .process-step-text {
    text-align: justify !important;
    line-height: 1.8 !important;
}

/* Labels and Small Caps */
html.theme-undecided .label,
html.theme-undecided .category,
html.theme-undecided .tag {
    font-family: var(--subhead-font) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--newspaper-gray) !important;
}

/* Strong emphasis */
html.theme-undecided strong {
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
}

/* ===== Border & Shadow System ===== */

/* Remove all border-radius globally */
html.theme-undecided * {
    border-radius: 0 !important;
}

/* Hairline borders for cards */
html.theme-undecided .card,
html.theme-undecided .section,
html.theme-undecided .box {
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-subtle) !important;
}

/* ===== Section Styling ===== */

/* All sections get newspaper treatment */
html.theme-undecided section,
html.theme-undecided .section {
    padding: 60px 40px !important;
    position: relative !important;
    border-top: var(--border-heavy) solid var(--newspaper-black) !important;
}

/* Section headers - simple rule, no ornaments */
html.theme-undecided section > .section-title::after,
html.theme-undecided .section > h1::after,
html.theme-undecided .section > h2::after {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 1px !important;
    background: var(--newspaper-black) !important;
    margin: 20px auto !important;
}

/* ===== Interactive Elements ===== */

/* Buttons - Clean newspaper style */
html.theme-undecided button,
html.theme-undecided .button,
html.theme-undecided a.button {
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 12px 24px !important;
    background: var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-light) !important;
    cursor: pointer !important;
    transition: none !important;
}

html.theme-undecided button:hover,
html.theme-undecided .button:hover {
    transform: rotate(-1deg) translateY(-2px) !important;
    box-shadow: 6px 6px 0px rgba(0,0,0,0.2) !important;
    transition: none !important;
}

/* Links - Underlined newspaper style */
html.theme-undecided a {
    color: var(--newspaper-black) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

html.theme-undecided a:hover {
    text-decoration-thickness: 3px !important;
    background: rgba(0,0,0,0.05) !important;
}

/* ===== Ornamental Elements ===== */

/* Progress label divider - override general divider */
html.theme-undecided .progress-label .divider {
    text-align: center !important;
    font-size: 1.25rem !important;
    color: var(--newspaper-gray) !important;
    letter-spacing: normal !important;
    margin: 0 !important;
}

html.theme-undecided .progress-label .divider::before {
    content: none !important;
}

/* Corner brackets for special boxes */
html.theme-undecided .corner-box::before {
    content: '╔═══╗' !important;
    position: absolute !important;
    top: -12px !important;
    left: 20px !important;
    font-family: monospace !important;
    font-size: 20px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .corner-box::after {
    content: '╚═══╝' !important;
    position: absolute !important;
    bottom: -12px !important;
    right: 20px !important;
    font-family: monospace !important;
    font-size: 20px !important;
    color: var(--newspaper-black) !important;
}

/* ===== Card System ===== */

html.theme-undecided .card {
    background: rgba(255,255,255,0.7) !important;
    padding: 40px !important;
    margin-bottom: 40px !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-newspaper) !important;
    position: relative !important;
}

html.theme-undecided .card:hover {
    transform: rotate(-0.5deg) !important;
    box-shadow: var(--shadow-heavy) !important;
    transition: none !important;
}

/* ===== Lists ===== */

html.theme-undecided ul,
html.theme-undecided ol {
    font-family: Georgia, 'Times New Roman', serif !important;
    line-height: 2 !important;
    color: var(--newspaper-text) !important;
}

html.theme-undecided li {
    margin-bottom: 10px !important;
}

/* ===== Images ===== */

html.theme-undecided img {
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-newspaper) !important;
    max-width: 100% !important;
}

/* Specific styling for content images that need block display */
html.theme-undecided article img,
html.theme-undecided .content img {
    display: block !important;
}

/* ===== Tables ===== */

html.theme-undecided table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

html.theme-undecided th {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-size: 12px !important;
    padding: 15px !important;
    background: var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    border: var(--border-thin) solid var(--newspaper-black) !important;
}

html.theme-undecided td {
    padding: 12px 15px !important;
    border: var(--border-thin) solid var(--newspaper-black) !important;
}

html.theme-undecided tr:nth-child(even) {
    background: rgba(0,0,0,0.03) !important;
}

/* ========================================
   UNDECIDED THEME: SECTION-SPECIFIC STYLES
   ======================================== */

/* ===== HERO SECTION - Masthead Style ===== */

html.theme-undecided .hero {
    background: var(--newspaper-bg) !important;
    padding: 80px 40px 60px 40px !important;
    border-bottom: var(--border-heavy) solid var(--newspaper-black) !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 50px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Ornamental header - removed for cleaner look */

/* Hide designer theme decorations */
html.theme-undecided .designer-orbs,
html.theme-undecided .designer-shapes {
    display: none !important;
}

html.theme-undecided .hero-content {
    flex: 1 !important;
    max-width: 700px !important;
    margin: 0 !important;
    text-align: left !important;
    order: 1 !important;
}

/* Giant Masthead Title */
html.theme-undecided .hero-title {
    font-family: var(--headline-font) !important;
    font-size: 48px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin-bottom: 18px !important;
    position: relative !important;
}

/* "Hi, I'm" smaller */
html.theme-undecided .hero-title::first-line {
    font-size: 16px !important;
    font-family: var(--subhead-font) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

html.theme-undecided .hero-title .highlight {
    background: none !important;
    color: var(--newspaper-black) !important;
    -webkit-text-fill-color: var(--newspaper-black) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    position: relative !important;
    display: block !important;
    margin-top: 8px !important;
}

/* Decorative underline - removed for cleaner look */

/* Subtitle - Publication Info Style */
html.theme-undecided .hero-subtitle {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    color: var(--newspaper-gray) !important;
    margin-bottom: 20px !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    display: block !important;
}

/* Hide rotating text, show only static */
html.theme-undecided .subtitle-rotating {
    display: none !important;
}

html.theme-undecided .subtitle-static {
    display: inline !important;
}

/* Description */
html.theme-undecided .hero-description {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: var(--newspaper-text) !important;
    line-height: 1.6 !important;
    margin: 20px 0 !important;
    max-width: 100% !important;
}

/* CTA Buttons - Vintage Ad Boxes */
html.theme-undecided .hero-cta {
    display: flex !important;
    gap: 15px !important;
    justify-content: flex-start !important;
    margin-top: 30px !important;
}

html.theme-undecided .btn {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    padding: 14px 28px !important;
    background: var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-newspaper) !important;
    text-decoration: none !important;
    position: relative !important;
}

html.theme-undecided .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-heavy) !important;
    transition: none !important;
}

html.theme-undecided .btn-secondary {
    background: var(--newspaper-bg) !important;
    color: var(--newspaper-black) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
}

/* Hide business theme stats */
html.theme-undecided .cta-stats-dashboard {
    display: none !important;
}

html.theme-undecided .btn-icon {
    display: none !important;
}

html.theme-undecided .btn-text {
    display: inline !important;
}

/* Hero Image - Right side positioning */
html.theme-undecided .hero-image {
    display: block !important;
    flex: 0 0 400px !important;
    max-width: 400px !important;
    margin: 0 !important;
    order: 2 !important;
}

html.theme-undecided .hero-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

/* ===== PROCESS SECTION - Newspaper Article Grid ===== */

html.theme-undecided .process-section {
    background: var(--newspaper-bg) !important;
    padding: 100px 40px !important;
    border-top: var(--border-heavy) solid var(--newspaper-black) !important;
    border-bottom: var(--border-heavy) solid var(--newspaper-black) !important;
    position: relative !important;
}

/* Ornamental section header */
html.theme-undecided .process-section::before {
    display: none !important;
}

html.theme-undecided .process-header {
    text-align: center !important;
    margin-bottom: 60px !important;
    border-bottom: var(--border-medium) double var(--newspaper-black) !important;
    padding-bottom: 40px !important;
}

html.theme-undecided .process-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 6px !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 20px 0 !important;
    border-top: var(--border-thin) solid var(--newspaper-black) !important;
    border-bottom: var(--border-thin) solid var(--newspaper-black) !important;
    padding: 8px 0 !important;
}

html.theme-undecided .process-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 72px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    margin: 0 0 30px 0 !important;
    color: var(--newspaper-black) !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1) !important;
}

html.theme-undecided .process-description {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    color: var(--newspaper-gray) !important;
    line-height: 1.9 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    font-style: italic !important;
    position: relative !important;
    padding: 0 40px !important;
}

/* Decorative quotation marks */
html.theme-undecided .process-description::before {
    content: '"' !important;
    font-size: 48px !important;
    position: absolute !important;
    left: 0 !important;
    top: -10px !important;
    font-family: 'Playfair Display', serif !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-description::after {
    content: '"' !important;
    font-size: 48px !important;
    position: absolute !important;
    right: 0 !important;
    bottom: -30px !important;
    font-family: 'Playfair Display', serif !important;
    color: var(--newspaper-black) !important;
}

/* Ornamental divider after header */
html.theme-undecided .process-header::after {
    content: '' !important;
    display: block !important;
    width: 200px !important;
    height: 1px !important;
    background: var(--newspaper-black) !important;
    margin: 40px auto 0 auto !important;
}

/* Timeline Overview Pills - Stamped Boxes */
html.theme-undecided .process-timeline-overview {
    background: rgba(0,0,0,0.05) !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    border-radius: 0 !important;
    padding: 30px !important;
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 50px !important;
    position: relative !important;
    box-shadow: inset 0 0 0 1px var(--newspaper-white), inset 0 0 0 2px var(--newspaper-black) !important;
}

/* Corner stamps */
html.theme-undecided .process-timeline-overview::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-left: 3px solid var(--newspaper-black) !important;
    background: transparent !important;
}

html.theme-undecided .process-timeline-overview::after {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-right: 3px solid var(--newspaper-black) !important;
    background: transparent !important;
}

html.theme-undecided .process-timeline-overview div {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    background: var(--newspaper-white) !important;
    padding: 12px 20px !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

html.theme-undecided .process-timeline-overview div:hover {
    transform: rotate(-2deg) translateY(-2px) !important;
    transition: none !important;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.4) !important;
}

html.theme-undecided .process-timeline-overview div strong {
    font-weight: 900 !important;
    color: var(--newspaper-black) !important;
    font-size: 16px !important;
}

/* Process Steps - Newspaper Article Cards */
html.theme-undecided .process-steps {
    margin-top: 60px !important;
}

html.theme-undecided .process-step {
    display: block !important;
    margin-bottom: 50px !important;
    position: relative !important;
    padding: 40px !important;
    background: rgba(255,255,255,0.7) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: var(--shadow-newspaper) !important;
}

/* Corner brackets removed - replaced by article numbers in Priority 3 */
html.theme-undecided .process-step::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 30px !important;
    height: 30px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

/* Note: ::after is now used for article numbers in Priority 3 */

/* Instant hover - no smooth animations */
html.theme-undecided .process-step:hover {
    transform: rotate(-0.5deg) !important;
    transition: none !important;
    box-shadow: var(--shadow-heavy) !important;
}

/* Step number badge - Square vintage style */
html.theme-undecided .process-step-number-container {
    display: inline-block !important;
    float: left !important;
    margin-right: 30px !important;
    margin-bottom: 20px !important;
}

html.theme-undecided .process-step-number {
    width: 100px !important;
    height: 100px !important;
    background: var(--newspaper-black) !important;
    border: 5px double var(--newspaper-white) !important;
    outline: 4px solid var(--newspaper-black) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: inset 0 0 0 2px var(--newspaper-black) !important;
}

/* Star decorations on number badge */
html.theme-undecided .process-step-number::before {
    display: none !important;
}

html.theme-undecided .process-step-number::after {
    display: none !important;
}

html.theme-undecided .process-step:hover .process-step-number {
    transform: rotate(5deg) !important;
    transition: none !important;
}

html.theme-undecided .process-step-number-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    color: var(--newspaper-white) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

html.theme-undecided .process-step-content {
    overflow: hidden !important;
}

html.theme-undecided .process-step-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 0 20px 0 !important;
    color: var(--newspaper-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

/* Drop cap effect on first letter */
html.theme-undecided .process-step-title::first-letter {
    font-size: 56px !important;
    font-weight: 900 !important;
    float: left !important;
    line-height: 0.8 !important;
    margin-right: 8px !important;
    margin-top: 5px !important;
}

html.theme-undecided .process-step-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    color: var(--newspaper-text) !important;
    margin: 0 !important;
    line-height: 2 !important;
    text-align: justify !important;
}

/* Unique callout box - Vintage ad style */
html.theme-undecided .process-unique-callout {
    background: var(--newspaper-text) !important;
    color: var(--newspaper-bg) !important;
    padding: 40px !important;
    margin-top: 50px !important;
    border: 5px double var(--newspaper-black) !important;
    position: relative !important;
    box-shadow: var(--shadow-newspaper), inset 0 0 0 3px var(--newspaper-bg) !important;
}

/* Remove blueprint corners, add vintage ornaments */
html.theme-undecided .process-unique-callout > div[style*="position: absolute"] {
    display: none !important;
}

html.theme-undecided .process-unique-callout::before {
    content: '⁂' !important;
    position: absolute !important;
    top: 15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 28px !important;
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-unique-callout h3,
html.theme-undecided .process-unique-callout .callout-label {
    color: var(--newspaper-bg) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 4px !important;
}

/* Override all blue colors in process timeline overview */
html.theme-undecided .process-timeline-overview strong {
    color: var(--newspaper-black) !important;
}

/* Process step cards - override all inline blue backgrounds and borders */
html.theme-undecided .process-step-1,
html.theme-undecided .process-step-6 {
    background: var(--newspaper-text) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-step-2,
html.theme-undecided .process-step-5 {
    background: rgba(0,0,0,0.03) !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    color: var(--newspaper-text) !important;
}

html.theme-undecided .process-step-3,
html.theme-undecided .process-step-4 {
    background: var(--newspaper-white) !important;
    border: var(--border-medium) solid var(--newspaper-black) !important;
    color: var(--newspaper-text) !important;
}

/* Remove blueprint corner decorations from all process steps */
html.theme-undecided .process-step > div[style*="position: absolute"][style*="border"] {
    display: none !important;
}

/* Override step numbers */
html.theme-undecided .process-step div[style*="font-size: 72px"],
html.theme-undecided .process-step div[style*="font-size: 48px"] {
    color: var(--newspaper-black) !important;
    opacity: 0.15 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

html.theme-undecided .process-step-1 div[style*="font-size: 72px"],
html.theme-undecided .process-step-6 div[style*="font-size: 48px"] {
    color: var(--newspaper-bg) !important;
    opacity: 0.3 !important;
}

/* Override duration/label colors */
html.theme-undecided .process-step p[style*="color: #42A5F5"] {
    color: var(--newspaper-gray) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

html.theme-undecided .process-step-1 p[style*="color: #42A5F5"],
html.theme-undecided .process-step-6 p[style*="color: #42A5F5"] {
    color: var(--newspaper-bg) !important;
    opacity: 0.7 !important;
}

/* Override collaboration boxes */
html.theme-undecided .process-step div[style*="background: rgba(66, 165, 245"] {
    background: rgba(0,0,0,0.08) !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-step-1 div[style*="background: rgba(66, 165, 245"] {
    background: rgba(255,255,255,0.1) !important;
    border-left: 3px solid var(--newspaper-bg) !important;
}

html.theme-undecided .process-step .collaboration-label {
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

html.theme-undecided .process-step-1 .collaboration-label {
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-step strong[style*="color: #42A5F5"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-step-1 strong[style*="color: #42A5F5"] {
    color: var(--newspaper-bg) !important;
    font-weight: 700 !important;
}

/* Override tag badges */
html.theme-undecided .process-step span[style*="border: 1px solid #42A5F5"] {
    background: transparent !important;
    color: var(--newspaper-black) !important;
    border: 1px solid var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

html.theme-undecided .process-step-1 span[style*="border: 1px solid #42A5F5"] {
    color: var(--newspaper-bg) !important;
    border: 1px solid var(--newspaper-bg) !important;
}

/* Override blue dividers in Define step */
html.theme-undecided .process-step div[style*="width: 20px"][style*="height: 2px"][style*="background: #42A5F5"] {
    background: var(--newspaper-black) !important;
}

/* Override quality callout boxes */
html.theme-undecided .process-step p[style*="color: #42A5F5"][style*="font-weight: 600"] {
    color: var(--newspaper-black) !important;
    font-weight: 700 !important;
}

/* Override prototype progression boxes */
html.theme-undecided .process-step-4 div[style*="border: 1px solid #42A5F5"] {
    border: 1px solid var(--newspaper-black) !important;
    background: var(--newspaper-white) !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-step-4 div[style*="background: rgba(66, 165, 245, 0.2)"] {
    background: rgba(0,0,0,0.15) !important;
    border: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-step-4 div[style*="background: #42A5F5"] {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-white) !important;
}

/* Override impact metrics */
html.theme-undecided .process-step-5 div[style*="color: #42A5F5"][style*="font-size: 24px"] {
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 900 !important;
}

/* Override Scale step bullets */
html.theme-undecided .process-step-6 div[style*="width: 4px"][style*="height: 4px"][style*="background: #42A5F5"] {
    background: var(--newspaper-bg) !important;
}

/* Cross-functional collaboration section */
html.theme-undecided .process-collaboration {
    background: var(--newspaper-white) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    padding: 40px !important;
    box-shadow: var(--shadow-newspaper) !important;
}

html.theme-undecided .process-collaboration > div[style*="position: absolute"] {
    display: none !important;
}

html.theme-undecided .process-collaboration::before {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 25px !important;
    height: 25px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-collaboration::after {
    content: '' !important;
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    width: 25px !important;
    height: 25px !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
    border-right: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-collaboration .framework-label {
    color: var(--newspaper-gray) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

html.theme-undecided .process-collaboration h3 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--newspaper-black) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

html.theme-undecided .process-collaboration div[style*="background: rgba(66, 165, 245"] {
    background: rgba(0,0,0,0.05) !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-collaboration h4 {
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

/* Process philosophy section */
html.theme-undecided .process-philosophy {
    background: var(--newspaper-text) !important;
    border: var(--border-heavy) double var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    padding: 60px !important;
    box-shadow: var(--shadow-newspaper), inset 0 0 0 5px var(--newspaper-bg) !important;
    position: relative !important;
}

html.theme-undecided .process-philosophy > div[style*="position: absolute"] {
    display: none !important;
}

html.theme-undecided .process-philosophy::before {
    content: '✠' !important;
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 32px !important;
    color: var(--newspaper-bg) !important;
    opacity: 0.5 !important;
}

html.theme-undecided .process-philosophy h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--newspaper-bg) !important;
    text-transform: uppercase !important;
}

html.theme-undecided .process-philosophy p {
    color: var(--newspaper-bg) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* ===== PRIORITY 1: Remove Courier New & Modern Symbols ===== */

/* Replace ALL Courier New with Playfair Display SC */
html.theme-undecided [style*="font-family: 'Courier New'"],
html.theme-undecided [style*='font-family: "Courier New"'],
html.theme-undecided p[style*="Courier New"],
html.theme-undecided span[style*="Courier New"],
html.theme-undecided div[style*="Courier New"],
html.theme-undecided h4[style*="Courier New"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

/* Duration labels - remove underscores, add proper spacing */
html.theme-undecided .process-step p[style*="DURATION"],
html.theme-undecided .process-step p[style*="ONGOING"],
html.theme-undecided .process-step p[style*="SYSTEM"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 3px !important;
    font-size: 10px !important;
}

/* Tools labels */
html.theme-undecided .process-step p[style*="TOOLS:"],
html.theme-undecided .process-step p[style*="METHODS:"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    font-size: 10px !important;
}

/* Timeline overview labels */
html.theme-undecided .process-timeline-overview div {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
}

/* Tag badges - remove underscores visually */
html.theme-undecided .process-step span[style*="border: 1px solid"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 1px !important;
    text-transform: capitalize !important;
}

/* Collaboration labels */
html.theme-undecided .collaboration-label,
html.theme-undecided .process-collaboration .framework-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 3px !important;
}

/* Philosophy section - replace modern symbols with traditional newspaper dingbats */
html.theme-undecided .philosophy-principle div[style*="font-size: 36px"] {
    font-family: Georgia, serif !important;
}

/* Replace infinity symbol (∞) with numero sign (№) in Step 6 */
html.theme-undecided .process-step-6 div[style*="font-size: 48px"] {
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Override philosophy principle symbols - replace with traditional dingbats */
html.theme-undecided .philosophy-principle:nth-child(1) div[style*="font-size: 36px"]::after {
    content: '∴' !important; /* Therefore symbol - for Iterative */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    font-size: 36px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .philosophy-principle:nth-child(1) div[style*="font-size: 36px"] {
    color: transparent !important;
    position: relative !important;
}

html.theme-undecided .philosophy-principle:nth-child(2) div[style*="font-size: 36px"]::after {
    content: '●' !important; /* Filled circle - for Collaborative */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    font-size: 36px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .philosophy-principle:nth-child(2) div[style*="font-size: 36px"] {
    color: transparent !important;
    position: relative !important;
}

html.theme-undecided .philosophy-principle:nth-child(3) div[style*="font-size: 36px"]::after {
    content: '✦' !important; /* Four-pointed star - for Data-Driven */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    font-size: 36px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .philosophy-principle:nth-child(3) div[style*="font-size: 36px"] {
    color: transparent !important;
    position: relative !important;
}

html.theme-undecided .philosophy-principle:nth-child(4) div[style*="font-size: 36px"]::after {
    content: '§' !important; /* Section mark - for Accessible */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    font-size: 36px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .philosophy-principle:nth-child(4) div[style*="font-size: 36px"] {
    color: transparent !important;
    position: relative !important;
}

/* Philosophy labels - remove underscores */
html.theme-undecided .philosophy-principle div[style*="font-size: 11px"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
}

/* Process philosophy labels */
html.theme-undecided .philosophy-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 3px !important;
}

/* Collaboration section h4 labels */
html.theme-undecided .process-collaboration h4[style*="ENGINEERING"],
html.theme-undecided .process-collaboration h4[style*="PRODUCT"],
html.theme-undecided .process-collaboration h4[style*="DATA_SCIENCE"],
html.theme-undecided .process-collaboration h4[style*="MARKETING"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
}

/* Philosophy principles - newspaper styling */
html.theme-undecided .philosophy-principles {
    gap: 32px !important;
}

html.theme-undecided .philosophy-principle {
    background: rgba(0,0,0,0.05) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 24px !important;
    min-width: 140px !important;
}

html.theme-undecided .philosophy-principle div[style*="color: #42A5F5"] {
    color: var(--newspaper-black) !important;
}

/* Process adaptability section */
html.theme-undecided .process-adaptability {
    background: var(--newspaper-bg) !important;
    border: none !important;
}

html.theme-undecided .adaptability-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .adaptability-card h4 {
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .adaptability-card p {
    font-family: Georgia, 'Times New Roman', serif !important;
    color: var(--newspaper-text) !important;
}

/* ===== PRIORITY 2: Clean Semantic Classes for Process Section ===== */

/* Process Step Content Layout */
html.theme-undecided .process-step-layout {
    display: flex !important;
    align-items: flex-start !important;
    gap: 40px !important;
}

html.theme-undecided .process-step-number-display {
    font-size: 72px !important;
    font-weight: 100 !important;
    opacity: 0.15 !important;
    line-height: 1 !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-step-1 .process-step-number-display,
html.theme-undecided .process-step-6 .process-step-number-display {
    opacity: 0.3 !important;
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-step-body {
    flex: 1 !important;
}

/* Step Titles */
html.theme-undecided .process-step-heading {
    font-size: 32px !important;
    margin: 0 0 10px 0 !important;
    font-weight: 300 !important;
    letter-spacing: -0.5px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-step-1 .process-step-heading,
html.theme-undecided .process-step-6 .process-step-heading {
    color: var(--newspaper-bg) !important;
}

/* Duration Labels */
html.theme-undecided .process-duration {
    font-size: 10px !important;
    text-transform: uppercase !important;
    opacity: 0.6 !important;
    margin: 0 0 20px 0 !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    color: var(--newspaper-gray) !important;
    letter-spacing: 3px !important;
}

html.theme-undecided .process-step-1 .process-duration,
html.theme-undecided .process-step-6 .process-duration {
    color: var(--newspaper-bg) !important;
    opacity: 0.7 !important;
}

/* Step Body Text */
html.theme-undecided .process-step-body-text {
    font-size: 16px !important;
    margin: 0 0 30px 0 !important;
    opacity: 0.9 !important;
    line-height: 1.8 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    color: var(--newspaper-text) !important;
}

html.theme-undecided .process-step-1 .process-step-body-text,
html.theme-undecided .process-step-6 .process-step-body-text {
    color: var(--newspaper-bg) !important;
}

/* Collaboration Boxes */
html.theme-undecided .process-collab-box {
    background: rgba(0,0,0,0.08) !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-step-1 .process-collab-box {
    background: rgba(255,255,255,0.1) !important;
    border-left: 3px solid var(--newspaper-bg) !important;
}

html.theme-undecided .process-collab-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 3px !important;
}

html.theme-undecided .process-step-1 .process-collab-label {
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-collab-text {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-collab-text strong {
    color: var(--newspaper-black) !important;
    font-weight: 700 !important;
}

html.theme-undecided .process-step-1 .process-collab-text {
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .process-step-1 .process-collab-text strong {
    color: var(--newspaper-bg) !important;
    font-weight: 700 !important;
}

/* Tag Badges */
html.theme-undecided .process-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 30px !important;
}

html.theme-undecided .process-tag {
    display: inline-block !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: var(--newspaper-black) !important;
    border: 1px solid var(--newspaper-black) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: 1px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

html.theme-undecided .process-step-1 .process-tag {
    color: var(--newspaper-bg) !important;
    border-color: var(--newspaper-bg) !important;
}

/* Tools Footer */
html.theme-undecided .process-tools {
    font-size: 10px !important;
    text-transform: uppercase !important;
    margin-top: 20px !important;
    opacity: 0.5 !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
}

/* Bullet Lists with Dividers */
html.theme-undecided .process-bullet-list {
    margin-top: 25px !important;
}

html.theme-undecided .process-bullet-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

html.theme-undecided .process-bullet-divider {
    width: 20px !important;
    height: 2px !important;
    background: var(--newspaper-black) !important;
}

html.theme-undecided .process-bullet-text {
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* Callout Boxes (Quality over Quantity style) */
html.theme-undecided .process-callout-box {
    background: rgba(0,0,0,0.08) !important;
    padding: 15px !important;
    margin-top: 25px !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-callout-heading {
    margin: 0 0 10px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

html.theme-undecided .process-callout-text {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* Prototype Progression Boxes */
html.theme-undecided .process-progression {
    display: flex !important;
    gap: 10px !important;
    margin-top: 25px !important;
}

html.theme-undecided .process-progression-stage {
    flex: 1 !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    border: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-progression-stage.stage-paper {
    background: var(--newspaper-white) !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-progression-stage.stage-wireframe {
    background: rgba(0,0,0,0.15) !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-progression-stage.stage-hifi {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-white) !important;
}

/* Impact Metrics */
html.theme-undecided .process-metrics {
    margin-top: 25px !important;
}

html.theme-undecided .process-metric-item {
    margin-bottom: 15px !important;
}

html.theme-undecided .process-metric-value {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

html.theme-undecided .process-metric-label {
    font-size: 12px !important;
    color: var(--newspaper-gray) !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* Scale Step Bullets */
html.theme-undecided .process-scale-list {
    margin-top: 25px !important;
}

html.theme-undecided .process-scale-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

html.theme-undecided .process-scale-bullet {
    width: 4px !important;
    height: 4px !important;
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .process-scale-text {
    font-size: 13px !important;
    opacity: 0.9 !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* ===== PRIORITY 3: True Newspaper Column Layout ===== */

/* Transform process steps into newspaper grid layout */
html.theme-undecided .process-steps {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 48px 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Add vertical column divider between columns */
html.theme-undecided .process-steps::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    background: var(--newspaper-black) !important;
    transform: translateX(-50%) !important;
    opacity: 0.3 !important;
}

/* Step 1 spans full width like front-page article */
html.theme-undecided .process-step-1 {
    grid-column: 1 / -1 !important;
    border: 4px solid var(--newspaper-black) !important;
    padding: 48px !important;
    margin: 0 0 24px 0 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Steps 2-5 in two columns */
html.theme-undecided .process-step-2,
html.theme-undecided .process-step-3,
html.theme-undecided .process-step-4,
html.theme-undecided .process-step-5 {
    padding: 40px !important;
    margin: 0 !important;
    border: 2px solid var(--newspaper-black) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Step 6 spans full width like closing feature */
html.theme-undecided .process-step-6 {
    grid-column: 1 / -1 !important;
    border: 4px solid var(--newspaper-black) !important;
    padding: 48px !important;
    margin: 24px 0 0 0 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Add newspaper-style article numbers */
html.theme-undecided .process-step::after {
    content: attr(data-step-number) !important;
    position: absolute !important;
    top: -12px !important;
    right: 24px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 12px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: var(--newspaper-gray) !important;
}

html.theme-undecided .process-step-1::after {
    content: 'Article №1' !important;
}

html.theme-undecided .process-step-2::after {
    content: 'Article №2' !important;
}

html.theme-undecided .process-step-3::after {
    content: 'Article №3' !important;
}

html.theme-undecided .process-step-4::after {
    content: 'Article №4' !important;
}

html.theme-undecided .process-step-5::after {
    content: 'Article №5' !important;
}

html.theme-undecided .process-step-6::after {
    content: 'Article №6' !important;
}

/* Responsive: Single column on smaller screens */
@media (max-width: 768px) {
    html.theme-undecided .process-steps {
        grid-template-columns: 1fr !important;
    }

    html.theme-undecided .process-steps::before {
        display: none !important;
    }

    html.theme-undecided .process-step-1,
    html.theme-undecided .process-step-6 {
        grid-column: 1 !important;
    }
}

/* Newspaper masthead styling for section title */
html.theme-undecided .process-title {
    border-top: 4px solid var(--newspaper-black) !important;
    border-bottom: 4px solid var(--newspaper-black) !important;
    padding: 24px 0 !important;
    text-align: center !important;
    position: relative !important;
}

html.theme-undecided .process-title::before {
    content: '◆' !important;
    position: absolute !important;
    left: 50% !important;
    top: -2px !important;
    transform: translateX(-50%) !important;
    font-size: 12px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 16px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-title::after {
    content: '◆' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -2px !important;
    transform: translateX(-50%) !important;
    font-size: 12px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 16px !important;
    color: var(--newspaper-black) !important;
}

/* Timeline overview as newspaper info box */
html.theme-undecided .process-timeline-overview {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    padding: 24px !important;
    margin: 48px 0 !important;
    border: 3px double var(--newspaper-black) !important;
    background: rgba(0,0,0,0.02) !important;
}

html.theme-undecided .process-timeline-overview::before {
    content: 'Timeline' !important;
    position: absolute !important;
    top: -12px !important;
    left: 24px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 12px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-timeline-overview::after {
    display: none !important;
}

@media (max-width: 768px) {
    html.theme-undecided .process-timeline-overview {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== PRIORITY 4: Standardize Typography & Spacing (8px base) ===== */

/* Typography Scale - Newspaper Hierarchy */
html.theme-undecided .process-title {
    font-size: 72px !important; /* Display - Section titles */
    line-height: 1.0 !important;
    margin-bottom: 32px !important;
}

html.theme-undecided .process-description {
    font-size: 16px !important; /* Body - Standard text */
    line-height: 1.7 !important;
    margin-bottom: 48px !important;
}

html.theme-undecided .process-step-heading {
    font-size: 36px !important; /* Headline - Article titles */
    line-height: 1.2 !important;
    margin: 0 0 16px 0 !important;
}

html.theme-undecided .process-step-number-display {
    font-size: 72px !important; /* Display - Large numbers */
    line-height: 1.0 !important;
}

html.theme-undecided .process-duration {
    font-size: 10px !important; /* Caption - Metadata */
    line-height: 1.4 !important;
    margin: 0 0 24px 0 !important;
}

html.theme-undecided .process-step-body-text {
    font-size: 16px !important; /* Body - Article text */
    line-height: 1.7 !important;
    margin: 0 0 24px 0 !important;
}

html.theme-undecided .process-collab-label {
    font-size: 10px !important; /* Caption - Labels */
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
}

html.theme-undecided .process-collab-text {
    font-size: 14px !important; /* Small body */
    line-height: 1.7 !important;
}

html.theme-undecided .process-tag {
    font-size: 10px !important; /* Caption - Tags */
    padding: 8px 16px !important;
}

html.theme-undecided .process-tools {
    font-size: 10px !important; /* Caption - Tools */
    line-height: 1.4 !important;
    margin-top: 24px !important;
}

html.theme-undecided .process-bullet-text {
    font-size: 14px !important; /* Small body */
    line-height: 1.5 !important;
}

html.theme-undecided .process-callout-heading {
    font-size: 14px !important; /* Small headline */
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
}

html.theme-undecided .process-callout-text {
    font-size: 12px !important; /* Fine print */
    line-height: 1.6 !important;
}

html.theme-undecided .process-metric-value {
    font-size: 24px !important; /* Subhead - Metrics */
    line-height: 1.2 !important;
}

html.theme-undecided .process-metric-label {
    font-size: 12px !important; /* Fine print */
    line-height: 1.4 !important;
}

html.theme-undecided .process-scale-text {
    font-size: 14px !important; /* Small body */
    line-height: 1.5 !important;
}

/* Spacing Scale - 8px Base Unit System */

/* Section spacing */
html.theme-undecided .process-section {
    padding: 96px 32px !important; /* XXL vertical, M horizontal */
}

html.theme-undecided .process-header {
    margin-bottom: 64px !important; /* XL */
    padding-bottom: 48px !important; /* L */
}

/* Step spacing */
html.theme-undecided .process-steps {
    gap: 48px 32px !important; /* L vertical, M horizontal */
}

html.theme-undecided .process-step-1,
html.theme-undecided .process-step-6 {
    padding: 48px !important; /* L - Feature articles */
}

html.theme-undecided .process-step-2,
html.theme-undecided .process-step-3,
html.theme-undecided .process-step-4,
html.theme-undecided .process-step-5 {
    padding: 32px !important; /* M - Regular articles */
}

html.theme-undecided .process-step-layout {
    gap: 32px !important; /* M - Between number and content */
}

/* Component spacing */
html.theme-undecided .process-collab-box {
    padding: 24px !important; /* S */
    margin: 24px 0 !important; /* S vertical */
}

html.theme-undecided .process-tags {
    gap: 16px !important; /* XS */
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-bullet-list {
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-bullet-item {
    gap: 16px !important; /* XS */
    margin-bottom: 8px !important; /* XXS */
}

html.theme-undecided .process-callout-box {
    padding: 24px !important; /* S */
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-progression {
    gap: 16px !important; /* XS */
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-metrics {
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-metric-item {
    margin-bottom: 16px !important; /* XS */
}

html.theme-undecided .process-scale-list {
    margin-top: 24px !important; /* S */
}

html.theme-undecided .process-scale-item {
    gap: 16px !important; /* XS */
    margin-bottom: 8px !important; /* XXS */
}

/* Timeline overview spacing */
html.theme-undecided .process-timeline-overview {
    gap: 16px !important; /* XS */
    padding: 24px !important; /* S */
    margin: 48px 0 !important; /* L vertical */
}

/* Collaboration section spacing */
html.theme-undecided .process-collaboration {
    padding: 48px !important; /* L */
    margin: 64px 0 !important; /* XL vertical */
}

/* Philosophy section spacing */
html.theme-undecided .process-philosophy {
    padding: 64px !important; /* XL */
    margin-top: 64px !important; /* XL */
}

/* Adaptability section spacing */
html.theme-undecided .process-adaptability {
    padding: 48px 0 !important; /* L vertical, no horizontal */
    margin: 64px 0 !important; /* XL vertical */
}

/* Letter spacing standardization */
html.theme-undecided .process-title {
    letter-spacing: 2px !important;
}

html.theme-undecided .process-step-heading {
    letter-spacing: 1px !important;
}

html.theme-undecided .process-duration,
html.theme-undecided .process-collab-label,
html.theme-undecided .process-tools {
    letter-spacing: 3px !important; /* All-caps labels */
}

html.theme-undecided .process-tag {
    letter-spacing: 1px !important;
}

/* =====================================================
   PRIORITY 5: STYLE ADAPTABILITY & PHILOSOPHY SECTIONS
   ===================================================== */

/* ===== Adaptability Section ===== */

/* Section container - newspaper background with proper spacing */
html.theme-undecided .process-adaptability {
    background: var(--newspaper-bg) !important;
    border: none !important;
    padding: 64px 32px !important; /* XL vertical, M horizontal */
}

/* Section title styling */
html.theme-undecided .process-adaptability h2 {
    font-size: 48px !important; /* Between Display and Headline */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin-bottom: 48px !important; /* L spacing */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    position: relative !important;
}

/* Add newspaper ornament to section title */
html.theme-undecided .process-adaptability h2::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important; /* XS spacing */
    opacity: 0.5 !important;
}

/* Adaptability cards container - newspaper grid layout */
html.theme-undecided .adaptability-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important; /* M spacing between cards */
    margin: 0 auto !important;
    max-width: 1200px !important;
}

/* Individual adaptability card - newspaper article box */
html.theme-undecided .adaptability-card {
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 32px 24px !important; /* M vertical, S horizontal */
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hover effect - lift slightly like turning newspaper page */
html.theme-undecided .adaptability-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Card icon/number */
html.theme-undecided .adaptability-card-icon {
    font-size: 36px !important; /* Headline size */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.2 !important;
    line-height: 1 !important;
    margin-bottom: 16px !important; /* XS spacing */
}

/* Card title */
html.theme-undecided .adaptability-card h3 {
    font-size: 24px !important; /* Subhead size */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 16px !important; /* XS spacing */
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
}

/* Card description text */
html.theme-undecided .adaptability-card p {
    font-size: 14px !important; /* Small body size */
    font-family: Georgia, serif !important;
    color: var(--newspaper-black) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Responsive: Stack adaptability cards on smaller screens */
@media (max-width: 900px) {
    html.theme-undecided .adaptability-cards {
        grid-template-columns: 1fr !important;
        gap: 24px !important; /* S spacing on mobile */
    }
}

/* ===== Philosophy Section ===== */

/* Philosophy container - featured article treatment */
html.theme-undecided .process-philosophy {
    background: var(--newspaper-bg) !important;
    border: 4px double var(--newspaper-black) !important;
    padding: 48px 40px !important; /* L vertical, L horizontal */
    margin: 64px auto !important; /* XL vertical margin */
    max-width: 1100px !important;
    position: relative !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12) !important;
}

/* Add L-shaped crop marks to corners */
html.theme-undecided .process-philosophy::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-philosophy::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
}

/* Philosophy section title */
html.theme-undecided .process-philosophy h2 {
    font-size: 48px !important; /* Between Display and Headline */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin-bottom: 16px !important; /* XS spacing */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
}

/* Philosophy subtitle */
html.theme-undecided .process-philosophy-subtitle {
    font-size: 14px !important; /* Small body size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    text-align: center !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin-bottom: 48px !important; /* L spacing */
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* Philosophy principles container - newspaper grid */
html.theme-undecided .philosophy-principles {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 24px !important; /* M vertical, S horizontal */
}

/* Individual philosophy principle - sidebar box treatment */
html.theme-undecided .philosophy-principle {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 24px !important; /* S spacing */
    position: relative !important;
}

/* Principle icon/symbol - already styled in Priority 1 with ::after overlays */
html.theme-undecided .philosophy-principle div[style*="font-size: 36px"] {
    font-size: 36px !important; /* Headline size */
    margin-bottom: 16px !important; /* XS spacing */
    line-height: 1 !important;
}

/* Principle title */
html.theme-undecided .philosophy-principle strong {
    display: block !important;
    font-size: 20px !important; /* Between Subhead and Body */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 8px !important; /* XXS spacing */
    letter-spacing: 1px !important;
}

/* Principle description */
html.theme-undecided .philosophy-principle {
    font-size: 14px !important; /* Small body size */
    font-family: Georgia, serif !important;
    line-height: 1.5 !important;
    color: var(--newspaper-black) !important;
}

/* Responsive: Stack philosophy principles on mobile */
@media (max-width: 768px) {
    html.theme-undecided .philosophy-principles {
        grid-template-columns: 1fr !important;
        gap: 24px !important; /* S spacing on mobile */
    }
}

/* Add decorative section divider between philosophy and other sections */
html.theme-undecided .process-philosophy + * {
    margin-top: 96px !important; /* XXL spacing after philosophy */
}

/* =====================================================
   PRIORITY 6: NEWSPAPER-SPECIFIC COMPONENTS
   ===================================================== */

/* ===== Section Header - Clean & Simple ===== */

/* Remove byline and edition info - keep headers consistent across sections */
/* Section title already styled by Priority 4 typography system */

/* Process header container */
html.theme-undecided .process-header {
    margin-bottom: 64px !important; /* XL spacing */
}

/* Section title - unified styling */
html.theme-undecided .process-title {
    font-size: 72px !important; /* Display size from typography scale */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    letter-spacing: 2px !important;
    margin: 0 0 24px 0 !important; /* S bottom spacing */
    line-height: 1.0 !important;
}

/* Disable ink splatter hover effect on process title - keep text visible */
html.theme-undecided .process-title::before,
html.theme-undecided .process-title::after {
    display: none !important;
}

html.theme-undecided .process-title:hover {
    color: var(--newspaper-black) !important;
    text-shadow: none !important;
}

/* ===== Process Description - Lead Paragraph Treatment ===== */

html.theme-undecided .process-description {
    font-size: 18px !important; /* Between Body and Subhead */
    font-family: Georgia, serif !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    color: var(--newspaper-black) !important;
    max-width: 800px !important;
    margin: 24px 0 32px 0 !important; /* S top, M bottom */
    padding-left: 24px !important; /* S indent for lead paragraph */
    border-left: 3px solid var(--newspaper-black) !important;
    opacity: 0.9 !important;
}

/* Remove blue color override */
html.theme-undecided .process-description {
    color: var(--newspaper-black) !important;
}

/* ===== Unique Callout - Sidebar Box Treatment ===== */

html.theme-undecided .process-unique-callout {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--newspaper-black) !important;
    padding: 32px 24px !important; /* M vertical, S horizontal */
    margin-top: 48px !important; /* L spacing */
    border: 3px double var(--newspaper-black) !important;
    position: relative !important;
    max-width: 700px !important;
}

/* Replace corner brackets with decorative newspaper ornaments */
html.theme-undecided .process-unique-callout div[style*="position: absolute"] {
    display: none !important; /* Hide original corner brackets */
}

/* Add newspaper sidebar header label */
html.theme-undecided .callout-label {
    font-size: 12px !important; /* Fine print */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin: 0 0 16px 0 !important; /* XS bottom */
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    padding-bottom: 8px !important; /* XXS spacing */
}

/* Callout body text */
html.theme-undecided .process-unique-callout p {
    font-size: 16px !important; /* Body size */
    font-family: Georgia, serif !important;
    line-height: 1.7 !important;
    color: var(--newspaper-black) !important;
    margin: 0 !important;
}

/* Add decorative flourish before callout */
html.theme-undecided .process-unique-callout::before {
    content: '✦' !important;
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 20px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 8px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

/* ===== Timeline Overview - Classified Ad Treatment ===== */

html.theme-undecided .process-timeline-overview {
    background: rgba(0, 0, 0, 0.03) !important;
    padding: 24px !important; /* S spacing */
    margin-bottom: 64px !important; /* XL spacing */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 16px 24px !important; /* XS vertical, S horizontal */
    border: 1px solid var(--newspaper-black) !important;
    border-style: dashed !important;
    position: relative !important;
}

/* Add "Timeline" label like classified section */
html.theme-undecided .process-timeline-overview::before {
    content: 'Project Timelines' !important;
    position: absolute !important;
    top: -10px !important;
    left: 16px !important;
    background: var(--newspaper-bg) !important;
    padding: 0 8px !important;
    font-size: 10px !important; /* Caption size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
}

/* Timeline items */
html.theme-undecided .process-timeline-overview div {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 12px !important; /* Fine print */
    line-height: 1.4 !important;
    color: var(--newspaper-black) !important;
}

/* Timeline item labels (SPRINT, STANDARD, etc.) */
html.theme-undecided .process-timeline-overview strong {
    color: var(--newspaper-black) !important;
    font-weight: 700 !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 1px !important;
}

/* ===== Article "Continued..." Treatments ===== */

/* Add "Continued below..." to full-width articles */
html.theme-undecided .process-step-1::after,
html.theme-undecided .process-step-6::after {
    content: 'Article №' attr(data-article) ' — Featured' !important;
    position: absolute !important;
    bottom: 16px !important;
    right: 24px !important;
    font-size: 10px !important; /* Caption size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

/* Override article numbers from Priority 3 to use data attributes */
html.theme-undecided .process-step-1::after {
    content: 'Article №1 — Featured' !important;
}

html.theme-undecided .process-step-6::after {
    content: 'Article №6 — Featured' !important;
}

/* Add subtle article numbers to other steps */
html.theme-undecided .process-step-2::before {
    content: 'No. 2' !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    opacity: 0.3 !important;
}

html.theme-undecided .process-step-3::before {
    content: 'No. 3' !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    opacity: 0.3 !important;
}

html.theme-undecided .process-step-4::before {
    content: 'No. 4' !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    opacity: 0.3 !important;
}

html.theme-undecided .process-step-5::before {
    content: 'No. 5' !important;
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    font-size: 10px !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 2px !important;
    opacity: 0.3 !important;
}

/* ===== Section Divider Ornament ===== */

/* Add decorative divider between major sections */
html.theme-undecided .process-section::after {
    content: '◆  ◆  ◆' !important;
    display: block !important;
    text-align: center !important;
    font-size: 12px !important;
    letter-spacing: 8px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.3 !important;
    margin-top: 96px !important; /* XXL spacing */
}

/* ===== Pull Quotes (for collaboration boxes) ===== */

/* Style collaboration boxes as newspaper pull quotes */
html.theme-undecided .process-collab-box {
    background: transparent !important;
    border-left: 4px solid var(--newspaper-black) !important;
    border-right: none !important;
    border-top: 1px solid var(--newspaper-black) !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
    padding: 24px 24px 24px 32px !important; /* S spacing, extra left for border */
    margin: 32px 0 !important; /* M spacing */
}

/* Pull quote label */
html.theme-undecided .process-collab-label {
    font-size: 10px !important; /* Caption size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin: 0 0 12px 0 !important;
}

/* =====================================================
   PRIORITY 7: ACCESSIBILITY IMPROVEMENTS
   ===================================================== */

/* ===== Contrast Improvements ===== */

/* Increase opacity on low-contrast elements to meet WCAG AA standards */

/* Step numbers - increased from 0.15 to 0.5 for better visibility */
html.theme-undecided .process-step-number-display {
    opacity: 0.5 !important; /* Was 0.15, now meets 4.5:1 contrast ratio */
}

/* Card icons - increased from 0.2 to 0.5 */
html.theme-undecided .adaptability-card-icon {
    opacity: 0.5 !important; /* Was 0.2 */
}

/* Section ornaments - keep at 0.5 (decorative, not essential content) */
html.theme-undecided .process-adaptability h2::before,
html.theme-undecided .process-section::after {
    opacity: 0.5 !important; /* Decorative elements can be lighter */
}

/* Article numbers - increase to 0.5 minimum for readability */
html.theme-undecided .process-step-2::before,
html.theme-undecided .process-step-3::before,
html.theme-undecided .process-step-4::before,
html.theme-undecided .process-step-5::before {
    opacity: 0.5 !important; /* Was 0.3 */
}

/* Ensure all body text has sufficient contrast */
html.theme-undecided .process-step-body-text,
html.theme-undecided .process-description,
html.theme-undecided .adaptability-card p,
html.theme-undecided .philosophy-principle {
    color: var(--newspaper-black) !important;
    opacity: 1 !important; /* Full opacity for reading text */
}

/* ===== Focus States ===== */

/* Universal focus style - newspaper underline treatment (not outline) */
html.theme-undecided a:focus,
html.theme-undecided button:focus,
html.theme-undecided .process-tag:focus,
html.theme-undecided .adaptability-card:focus-within,
html.theme-undecided .philosophy-principle:focus-within {
    outline: none !important;
    position: relative !important;
}

/* Add double underline for focused links */
html.theme-undecided a:focus::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -4px !important;
    border-bottom: 3px double var(--newspaper-black) !important;
}

/* Focus state for interactive cards */
html.theme-undecided .adaptability-card:focus,
html.theme-undecided .adaptability-card:focus-within {
    border: 3px solid var(--newspaper-black) !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Focus state for tags */
html.theme-undecided .process-tag:focus {
    border: 2px solid var(--newspaper-black) !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

/* ===== Hover States with Sufficient Contrast ===== */

/* Ensure hover states don't reduce text readability */

/* Adaptability card hover - maintain text contrast */
html.theme-undecided .adaptability-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15) !important;
    /* Background stays same - no color change that reduces contrast */
}

/* Tag hover - darken border, add slight background */
html.theme-undecided .process-tag:hover {
    border-color: var(--newspaper-black) !important;
    background: rgba(0, 0, 0, 0.03) !important;
    transform: translateY(-1px) !important;
}

/* Link hover - add underline without changing color */
html.theme-undecided a:hover {
    text-decoration: underline !important;
    text-decoration-style: double !important;
    text-underline-offset: 2px !important;
}

/* ===== Text Alternatives for Geometric Symbols ===== */

/* Add screen-reader-only text for decorative symbols */
html.theme-undecided .philosophy-principle div[style*="font-size: 36px"]::after {
    /* Symbols already defined in Priority 1, ensure they don't obscure meaning */
    /* Screen readers will read the text content, not the CSS symbols */
}

/* Ensure icons have proper aria-labels in HTML (noted for future) */
/* Note: HTML should include aria-label attributes on interactive elements */

/* ===== Color Independence ===== */

/* Ensure information isn't conveyed by color alone */

/* Add text labels to color-coded elements */
html.theme-undecided .process-duration {
    /* Already includes "Duration:" text label - good */
}

html.theme-undecided .process-tools {
    /* Already includes "Tools:" text label - good */
}

/* ===== Improved Touch Targets ===== */

/* Ensure interactive elements meet minimum 44x44px touch target size */
html.theme-undecided .process-tag {
    padding: 12px 16px !important; /* Increased from 8px to meet touch target */
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ===== Reduced Motion Support ===== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Disable hover transforms for motion-sensitive users */
    html.theme-undecided .adaptability-card:hover,
    html.theme-undecided .process-tag:hover {
        transform: none !important;
    }
}

/* ===== High Contrast Mode Support ===== */

/* Ensure borders are visible in Windows High Contrast Mode */
@media (prefers-contrast: high) {
    html.theme-undecided .process-step,
    html.theme-undecided .adaptability-card,
    html.theme-undecided .philosophy-principle,
    html.theme-undecided .process-unique-callout {
        border: 3px solid currentColor !important;
    }

    /* Increase all opacity values to maximum */
    html.theme-undecided .process-step-number-display,
    html.theme-undecided .adaptability-card-icon,
    html.theme-undecided .process-step-2::before,
    html.theme-undecided .process-step-3::before,
    html.theme-undecided .process-step-4::before,
    html.theme-undecided .process-step-5::before {
        opacity: 1 !important;
    }
}

/* ===== Screen Reader Improvements ===== */

/* Ensure proper reading order is maintained */
html.theme-undecided .process-section {
    /* Grid layout already maintains proper DOM order */
    /* CSS Grid respects source order for screen readers */
}

/* Visually hidden class for screen-reader-only content */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ===== Focus Visible (Modern Focus States) ===== */

/* Use :focus-visible for keyboard-only focus indicators */
html.theme-undecided a:focus:not(:focus-visible),
html.theme-undecided button:focus:not(:focus-visible),
html.theme-undecided .process-tag:focus:not(:focus-visible) {
    outline: none !important;
}

html.theme-undecided a:focus-visible::after {
    content: '' !important;
    position: absolute !important;
    left: -4px !important;
    right: -4px !important;
    top: -4px !important;
    bottom: -4px !important;
    border: 3px double var(--newspaper-black) !important;
    pointer-events: none !important;
}

/* =====================================================
   FINAL POLISH: OVERRIDE ALL REMAINING BLUE COLORS
   ===================================================== */

/* ===== Process Collaboration Section ===== */

html.theme-undecided .process-collaboration {
    background: var(--newspaper-bg) !important;
    border: 3px double var(--newspaper-black) !important;
    margin: 64px 0 !important; /* XL spacing */
    padding: 48px 40px !important; /* L spacing */
    position: relative !important;
}

/* Hide blue corner brackets, add newspaper crop marks */
html.theme-undecided .process-collaboration div[style*="position: absolute"] {
    display: none !important;
}

html.theme-undecided .process-collaboration::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .process-collaboration::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
}

/* Collaboration section title */
html.theme-undecided .process-collaboration h3 {
    font-size: 36px !important; /* Headline size */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 8px 0 !important;
}

/* Framework label */
html.theme-undecided .framework-label {
    font-size: 10px !important; /* Caption size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin: 0 0 32px 0 !important; /* M bottom spacing */
}

/* Collaboration cards container */
html.theme-undecided .process-collaboration > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 24px !important; /* S spacing */
}

/* Individual collaboration cards */
html.theme-undecided .process-collaboration > div:last-child > div {
    padding: 24px !important; /* S spacing */
    background: rgba(0, 0, 0, 0.03) !important;
    border-left: 4px solid var(--newspaper-black) !important;
    border-top: 1px solid var(--newspaper-black) !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
    border-right: none !important;
}

/* Collaboration card headings */
html.theme-undecided .process-collaboration h4 {
    font-size: 12px !important; /* Fine print */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 12px 0 !important;
}

/* Collaboration card text */
html.theme-undecided .process-collaboration > div:last-child > div > p {
    font-size: 13px !important;
    font-family: Georgia, serif !important;
    color: var(--newspaper-black) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ===== Philosophy Section Text & Labels ===== */

/* Philosophy label */
html.theme-undecided .philosophy-label {
    font-size: 10px !important; /* Caption size */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin: 0 0 16px 0 !important; /* XS spacing */
}

/* Philosophy section h3 title */
html.theme-undecided .process-philosophy h3 {
    font-size: 48px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--newspaper-black) !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 0 24px 0 !important; /* S spacing */
}

/* Philosophy quote paragraph */
html.theme-undecided .process-philosophy > p {
    font-size: 18px !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
    color: var(--newspaper-black) !important;
    line-height: 1.7 !important;
    max-width: 800px !important;
    margin: 0 auto 48px auto !important; /* L bottom spacing */
    opacity: 1 !important;
}

/* Philosophy principle text labels */
html.theme-undecided .philosophy-principle > div:last-child {
    font-size: 12px !important; /* Fine print */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--newspaper-black) !important;
}

/* ===== Adaptability Section (in case it exists in Process section) ===== */

html.theme-undecided .process-adaptability h3,
html.theme-undecided .process-adaptability .adaptability-title {
    font-size: 36px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    color: var(--newspaper-black) !important;
    letter-spacing: 1px !important;
}

/* =====================================================
   TIMELINE SECTION - NEWSPAPER TRANSFORMATION
   ===================================================== */

/* TASK 1: REPLACE DARK BLUE BACKGROUND WITH NEWSPAPER CREAM/BEIGE */

/* Timeline section container - newspaper background */
html.theme-undecided .timeline-section {
    background: var(--newspaper-bg) !important;
    color: var(--newspaper-black) !important;
    padding: 96px 32px !important; /* XXL vertical, M horizontal - from spacing scale */
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

/* Timeline container - max width for readability */
html.theme-undecided .timeline-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Timeline path container */
html.theme-undecided .timeline-path-container {
    position: relative !important;
    padding: 64px 0 !important; /* XL vertical spacing */
}

/* Timeline cards - newspaper clipping background */
html.theme-undecided .timeline-card {
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 32px !important; /* M spacing */
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Timeline card hover - lift like turning a page */
html.theme-undecided .timeline-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15) !important;
}

/* TASK 2: REMOVE ALL COURIER NEW FONTS, REPLACE WITH PLAYFAIR DISPLAY SC */

/* Replace ALL Courier New instances in timeline section */
html.theme-undecided .timeline-section [style*="font-family: 'Courier New'"],
html.theme-undecided .timeline-section [style*='font-family: "Courier New"'],
html.theme-undecided .timeline-label,
html.theme-undecided .timeline-section .hover-dashboard [style*="font-family: 'Courier New'"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

/* Timeline section labels - newspaper small caps */
html.theme-undecided .timeline-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important; /* Caption from scale */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
}

/* Timeline card date labels */
html.theme-undecided .timeline-card > div:first-child {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important; /* Caption from scale */
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
}

/* Hover dashboard metric labels */
html.theme-undecided .hover-dashboard div[style*="font-size: 10px"] {
    font-family: 'Playfair Display SC', Georgia, serif !important;
}

/* TASK 3: REPLACE BLUE COLORS (#42A5F5, #0D2F61) WITH NEWSPAPER BLACK */

/* COMPREHENSIVE COLOR OVERRIDES - Fix all white and blue text */

/* Override ALL white text in timeline section */
html.theme-undecided .timeline-section *,
html.theme-undecided .timeline-section div,
html.theme-undecided .timeline-section p,
html.theme-undecided .timeline-section span,
html.theme-undecided .timeline-section h1,
html.theme-undecided .timeline-section h2,
html.theme-undecided .timeline-section h3,
html.theme-undecided .timeline-section h4 {
    color: var(--newspaper-black) !important;
}

/* Override inline style colors with attribute selectors */
html.theme-undecided .timeline-section [style*="color: #fff"],
html.theme-undecided .timeline-section [style*="color:#fff"],
html.theme-undecided .timeline-section [style*="color: #ffffff"],
html.theme-undecided .timeline-section [style*="color:#ffffff"],
html.theme-undecided .timeline-section [style*="color: white"],
html.theme-undecided .timeline-section [style*="color:white"],
html.theme-undecided .timeline-section [style*="color: rgba(255,255,255"],
html.theme-undecided .timeline-section [style*="color: rgba(255, 255, 255"] {
    color: var(--newspaper-black) !important;
}

/* Override ALL blue text */
html.theme-undecided .timeline-section [style*="color: #42A5F5"],
html.theme-undecided .timeline-section [style*="color:#42A5F5"],
html.theme-undecided .timeline-section [style*="color: #0D2F61"],
html.theme-undecided .timeline-section [style*="color:#0D2F61"] {
    color: var(--newspaper-black) !important;
}

/* Timeline title */
html.theme-undecided .timeline-title {
    color: var(--newspaper-black) !important;
}

/* Timeline subtitle */
html.theme-undecided .timeline-subtitle {
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

/* Timeline card - ALL children get black text */
html.theme-undecided .timeline-card * {
    color: var(--newspaper-black) !important;
}

/* Timeline card company/project titles */
html.theme-undecided .timeline-card > div:nth-child(2) {
    color: var(--newspaper-black) !important;
}

/* Timeline card role titles */
html.theme-undecided .timeline-card > div:nth-child(3) {
    color: var(--newspaper-black) !important;
    opacity: 0.8 !important;
}

/* Remove all blue borders and replace with black */
html.theme-undecided .timeline-card [style*="border"] {
    border-color: var(--newspaper-black) !important;
}

/* Hover dashboard - ALL text black */
html.theme-undecided .hover-dashboard,
html.theme-undecided .hover-dashboard * {
    color: var(--newspaper-black) !important;
}

/* Hover dashboard text */
html.theme-undecided .hover-dashboard p {
    color: var(--newspaper-black) !important;
    opacity: 0.9 !important;
}

/* Hover dashboard metric boxes */
html.theme-undecided .hover-dashboard > div > div[style*="background"] {
    background: rgba(0, 0, 0, 0.03) !important;
    border-left: 3px solid var(--newspaper-black) !important;
}

/* Hover dashboard metric values */
html.theme-undecided .hover-dashboard div[style*="color: #42A5F5"],
html.theme-undecided .hover-dashboard div[style*="color:#42A5F5"] {
    color: var(--newspaper-black) !important;
}

/* Hover dashboard all text colors */
html.theme-undecided .hover-dashboard div[style*="color: #fff"],
html.theme-undecided .hover-dashboard div[style*="color:#fff"],
html.theme-undecided .hover-dashboard div[style*="color: rgba(255,255,255"] {
    color: var(--newspaper-black) !important;
}

/* "NEW" badge - transform to newspaper style */
html.theme-undecided .timeline-card span[style*="background: #42A5F5"] {
    background: transparent !important;
    border: 2px solid var(--newspaper-black) !important;
    color: var(--newspaper-black) !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* TASK 4: TRANSFORM CORNER BRACKETS TO NEWSPAPER CROP MARKS */

/* Hide original corner brackets (modern UI pattern) */
html.theme-undecided .timeline-card > div[style*="position: absolute"][style*="width: 12px"][style*="height: 12px"] {
    display: none !important;
}

/* Add newspaper crop marks to timeline cards */
html.theme-undecided .timeline-card::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

html.theme-undecided .timeline-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

/* TASK 5: REDESIGN TIMELINE CENTER LINE AS NEWSPAPER COLUMN DIVIDER */

/* Transform timeline center line to newspaper column divider */
html.theme-undecided .timeline-path {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 2px !important;
    background: repeating-linear-gradient(
        to bottom,
        var(--newspaper-black) 0px,
        var(--newspaper-black) 4px,
        transparent 4px,
        transparent 12px
    ) !important;
    opacity: 0.3 !important;
}

/* Alternative: solid newspaper column rule */
html.theme-undecided .timeline-path::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -1px !important;
    width: 1px !important;
    height: 100% !important;
    background: var(--newspaper-black) !important;
    opacity: 0.2 !important;
}

html.theme-undecided .timeline-path::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: -1px !important;
    width: 1px !important;
    height: 100% !important;
    background: var(--newspaper-black) !important;
    opacity: 0.2 !important;
}

/* TASK 6: TRANSFORM TIMELINE DOTS TO NEWSPAPER ORNAMENTS */

/* Transform timeline dots to newspaper ornaments */
html.theme-undecided .timeline-item > div[style*="position: absolute"][style*="left: 50%"] {
    width: 24px !important;
    height: 24px !important;
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    border-radius: 0 !important;
    transform: translateX(-50%) rotate(45deg) !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Add ornament character inside rotated square */
html.theme-undecided .timeline-item > div[style*="position: absolute"][style*="left: 50%"]::before {
    content: '◆' !important;
    position: absolute !important;
    font-size: 12px !important;
    color: var(--newspaper-black) !important;
    transform: rotate(-45deg) !important;
}

/* Alternate ornaments for variety (every other item) */
html.theme-undecided .timeline-item:nth-child(even) > div[style*="position: absolute"][style*="left: 50%"]::before {
    content: '✦' !important;
}

html.theme-undecided .timeline-item:nth-child(3n) > div[style*="position: absolute"][style*="left: 50%"]::before {
    content: '●' !important;
}

/* TASK 7: STYLE TIMELINE CARDS AS NEWSPAPER CLIPPINGS */

/* Enhanced newspaper clipping style for timeline cards */
html.theme-undecided .timeline-card {
    /* Already has: background, border, padding from Task 1 */
    position: relative !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--newspaper-black) !important;
}

/* Add subtle texture/aging to cards */
html.theme-undecided .timeline-card {
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.01) 50%, transparent 100%) !important;
}

/* Different border styles for visual variety */
html.theme-undecided .timeline-item:nth-child(odd) .timeline-card {
    border-style: solid !important;
}

html.theme-undecided .timeline-item:nth-child(even) .timeline-card {
    border-style: double !important;
    border-width: 3px !important;
}

/* Cards alternate widths slightly for organic newspaper feel */
html.theme-undecided .timeline-item:nth-child(1) .timeline-card,
html.theme-undecided .timeline-item:nth-child(2) .timeline-card {
    width: 47% !important; /* Slightly wider for featured recent items */
}

/* Right-aligned cards (items on right side) */
html.theme-undecided .timeline-item[style*="justify-content: flex-end"] .timeline-card {
    text-align: left !important;
}

/* Left-aligned cards (items on left side) */
html.theme-undecided .timeline-item[style*="justify-content: flex-start"] .timeline-card {
    text-align: right !important;
}

/* Override any fixed text-align in hover content */
html.theme-undecided .timeline-card .hover-dashboard {
    text-align: left !important;
}

/* TASK 8: UPDATE HOVER DASHBOARD TO NEWSPAPER SIDEBAR STYLE */

/* Hover dashboard - newspaper sidebar box */
html.theme-undecided .hover-dashboard {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease !important;
    border-top: 1px solid transparent !important;
    margin-top: 0 !important;
}

/* Expanded state when card is hovered */
html.theme-undecided .timeline-card:hover .hover-dashboard {
    max-height: 1000px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    margin-top: 24px !important; /* S spacing */
    padding-top: 24px !important; /* S spacing */
}

/* Hover dashboard inner content */
html.theme-undecided .hover-dashboard > div {
    padding-top: 0 !important;
}

/* Hover dashboard paragraphs */
html.theme-undecided .hover-dashboard p {
    font-size: 14px !important; /* Small body from scale */
    font-family: Georgia, serif !important;
    color: var(--newspaper-black) !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important; /* S spacing */
    opacity: 0.9 !important;
}

/* Hover dashboard metric grid */
html.theme-undecided .hover-dashboard > div > div[style*="grid"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important; /* XS spacing */
    margin-bottom: 24px !important; /* S spacing */
}

/* Individual metric boxes - newspaper sidebar treatment */
html.theme-undecided .hover-dashboard div[style*="background: rgba(66, 165, 245"] {
    background: rgba(0, 0, 0, 0.03) !important;
    padding: 16px !important; /* XS spacing */
    border-left: 3px solid var(--newspaper-black) !important;
    border-top: 1px solid var(--newspaper-black) !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
}

/* Metric labels */
html.theme-undecided .hover-dashboard div[style*="font-size: 10px"][style*="color"] {
    font-size: 10px !important; /* Caption from scale */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 8px !important; /* XXS spacing */
    opacity: 0.7 !important;
}

/* Metric values */
html.theme-undecided .hover-dashboard div[style*="font-size: 12px"],
html.theme-undecided .hover-dashboard div[style*="font-size: 18px"] {
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display', Georgia, serif !important;
}

/* Large metric numbers (like $390K) */
html.theme-undecided .hover-dashboard div[style*="font-size: 18px"] {
    font-size: 24px !important; /* Subhead from scale */
    font-weight: 700 !important;
}

/* Deliverables/contributions lists */
html.theme-undecided .hover-dashboard > div > div:last-child {
    margin-bottom: 0 !important;
}

html.theme-undecided .hover-dashboard div[style*="line-height: 1.6"] {
    font-size: 12px !important; /* Fine print from scale */
    font-family: Georgia, serif !important;
    color: var(--newspaper-black) !important;
    line-height: 1.6 !important;
    opacity: 0.85 !important;
}

/* TASK 9: APPLY TYPOGRAPHY SCALE CONSISTENTLY */

/* Timeline section title - Display (72px) */
html.theme-undecided .timeline-title {
    font-size: 72px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    line-height: 1.0 !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important; /* XS bottom */
}

/* Timeline subtitle - Small body (14px) */
html.theme-undecided .timeline-subtitle {
    font-size: 14px !important;
    font-family: Georgia, serif !important;
    text-align: center !important;
    line-height: 1.6 !important;
    margin: 0 0 64px 0 !important; /* XL bottom */
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Timeline label (Career Trajectory) - Caption (10px) */
html.theme-undecided .timeline-label {
    /* Already styled in Task 2 - verify consistency */
    text-align: center !important;
    margin: 0 0 16px 0 !important; /* XS bottom */
}

/* Timeline card date labels - Caption (10px) - Already in Task 2 */

/* Timeline card project/company names - Subhead (24px) */
html.theme-undecided .timeline-card > div:nth-child(2) {
    font-size: 24px !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important; /* XXS spacing */
}

/* Timeline card role titles - Body (16px) */
html.theme-undecided .timeline-card > div:nth-child(3) {
    font-size: 16px !important;
    font-family: Georgia, serif !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important; /* XS spacing */
}

/* Ensure all font sizes follow scale */
/* 72px = Display (section titles) */
/* 36px = Headline (unused in timeline, reserved for emphasis) */
/* 24px = Subhead (company names, large metrics) */
/* 16px = Body (role titles, standard text) */
/* 14px = Small body (descriptions, subtitles) */
/* 12px = Fine print (list items, small details) */
/* 10px = Caption (labels, metadata, dates) */

/* TASK 10: ENSURE PROPER SPACING WITH 8PX BASE UNIT SYSTEM */

/* 8px Base Unit Spacing Scale:
   8px (XXS) - Micro spacing
   16px (XS) - Small gaps
   24px (S) - Standard spacing
   32px (M) - Medium spacing
   48px (L) - Large spacing
   64px (XL) - Extra large
   96px (XXL) - Section padding
*/

/* Timeline section - XXL (96px) vertical, M (32px) horizontal - Already in Task 1 */

/* Timeline items - L (48px) between cards */
html.theme-undecided .timeline-item {
    position: relative !important;
    margin-bottom: 48px !important; /* L spacing between timeline entries */
}

/* Timeline cards internal padding - M (32px) - Already in Task 1 */

/* Timeline card internal spacing */
html.theme-undecided .timeline-card > div:first-child {
    margin-bottom: 16px !important; /* XS - date label */
}

html.theme-undecided .timeline-card > div:nth-child(2) {
    margin-bottom: 8px !important; /* XXS - company name */
}

html.theme-undecided .timeline-card > div:nth-child(3) {
    margin-bottom: 16px !important; /* XS - role title */
}

/* Hover dashboard spacing - Already applied in Task 8:
   - margin-top: 24px (S)
   - padding-top: 24px (S)
   - gap: 16px (XS)
   - padding: 16px (XS) for metric boxes
*/

/* Timeline path container - XL (64px) - Already in Task 1 */

/* Crop marks positioning - XXS (8px) from edges - Already in Task 4 */

/* Verify all spacing adheres to scale */
html.theme-undecided .timeline-section * {
    /* Spacing should only use: 8, 16, 24, 32, 48, 64, 96px */
}

/* TASK 11: RESPONSIVE BEHAVIOR AND ACCESSIBILITY */

/* ===== Responsive Design ===== */

/* Mobile/Tablet: Stack timeline vertically, remove alternating layout */
@media (max-width: 900px) {
    /* Center all timeline items */
    html.theme-undecided .timeline-item {
        justify-content: center !important;
        margin-bottom: 32px !important; /* M spacing on mobile */
    }

    /* Full width cards on mobile */
    html.theme-undecided .timeline-card {
        width: 100% !important;
        max-width: 500px !important;
        text-align: left !important;
    }

    /* Hide center timeline on mobile */
    html.theme-undecided .timeline-path {
        display: none !important;
    }

    /* Hide timeline ornaments on mobile */
    html.theme-undecided .timeline-item > div[style*="position: absolute"][style*="left: 50%"] {
        display: none !important;
    }

    /* Reduce title size on mobile */
    html.theme-undecided .timeline-title {
        font-size: 48px !important;
    }

    /* Reduce section padding on mobile */
    html.theme-undecided .timeline-section {
        padding: 64px 16px !important; /* XL vertical, smaller horizontal */
    }
}

/* ===== Accessibility Improvements ===== */

/* Ensure proper contrast (WCAG AA compliance) */
html.theme-undecided .timeline-subtitle {
    opacity: 0.7 !important; /* Minimum 4.5:1 contrast */
}

html.theme-undecided .timeline-card > div:nth-child(3) {
    opacity: 0.8 !important; /* Role titles slightly lighter but still readable */
}

/* Focus states for keyboard navigation */
html.theme-undecided .timeline-card:focus,
html.theme-undecided .timeline-card:focus-within {
    outline: 3px double var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

/* Remove outline for mouse users */
html.theme-undecided .timeline-card:focus:not(:focus-visible) {
    outline: none !important;
}

/* Enhanced focus for keyboard users */
html.theme-undecided .timeline-card:focus-visible {
    outline: 3px double var(--newspaper-black) !important;
    outline-offset: 4px !important;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Ensure hover doesn't reduce readability */
html.theme-undecided .timeline-card:hover {
    /* Transform already defined in Task 1 */
    /* No color changes that reduce contrast */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .timeline-card {
        transition: none !important;
    }

    html.theme-undecided .timeline-card:hover {
        transform: none !important;
    }

    html.theme-undecided .hover-dashboard {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    html.theme-undecided .timeline-card,
    html.theme-undecided .timeline-path,
    html.theme-undecided .timeline-item > div[style*="position: absolute"] {
        border-color: currentColor !important;
    }

    /* Increase all opacity values */
    html.theme-undecided .timeline-subtitle,
    html.theme-undecided .timeline-card > div:nth-child(3),
    html.theme-undecided .hover-dashboard p {
        opacity: 1 !important;
    }
}

/* Ensure text selection is visible */
html.theme-undecided .timeline-section ::selection {
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--newspaper-black) !important;
}

/* =====================================================
   ORGANIZATION JOURNEY SECTION - NEWSPAPER TRANSFORMATION
   ===================================================== */

/* Organization Journey Container */
html.theme-undecided .organization-journey {
    margin-top: 96px !important; /* XXL spacing */
    padding-top: 64px !important; /* XL spacing */
    border-top: 3px solid var(--newspaper-black) !important;
}

/* Section Title - Newspaper Heading */
html.theme-undecided .organization-journey-title {
    text-align: center !important;
    font-size: 48px !important; /* Between Display and Headline */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 64px !important; /* XL spacing */
    color: var(--newspaper-black) !important;
    position: relative !important;
}

/* Add newspaper ornament above title */
html.theme-undecided .organization-journey-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important; /* XS spacing */
    opacity: 0.5 !important;
    color: var(--newspaper-black) !important;
}

/* Organization Grid - Newspaper Classified Layout */
html.theme-undecided .organization-journey-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 24px !important; /* S spacing */
}

/* Organization Cards - Classified Ad Style */
html.theme-undecided .organization-card {
    background: var(--newspaper-bg) !important;
    padding: 24px 32px !important; /* S vertical, M horizontal */
    border: 2px solid var(--newspaper-black) !important;
    border-radius: 0px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Hover effect - lift like newspaper clipping */
html.theme-undecided .organization-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15) !important;
    border-width: 3px !important;
}

/* Organization Name - Headline Style */
html.theme-undecided .organization-name {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 20px !important; /* Between Body and Subhead */
    margin-bottom: 8px !important; /* XXS spacing */
    color: var(--newspaper-black) !important;
    letter-spacing: 1px !important;
}

/* Organization Dates - Caption Style */
html.theme-undecided .organization-dates {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important; /* Caption from scale */
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Add small ornament divider between name and dates */
html.theme-undecided .organization-card .organization-name::after {
    content: '•' !important;
    display: block !important;
    font-size: 12px !important;
    margin: 4px 0 !important;
    opacity: 0.4 !important;
    color: var(--newspaper-black) !important;
}

/* Responsive: Stack cards on mobile */
@media (max-width: 768px) {
    html.theme-undecided .organization-journey-grid {
        flex-direction: column !important;
        align-items: stretch !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    html.theme-undecided .organization-card {
        width: 100% !important;
    }

    html.theme-undecided .organization-journey-title {
        font-size: 36px !important;
    }
}

/* Focus states for accessibility */
html.theme-undecided .organization-card:focus,
html.theme-undecided .organization-card:focus-visible {
    outline: 3px double var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

html.theme-undecided .organization-card:focus:not(:focus-visible) {
    outline: none !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .organization-card {
        transition: none !important;
    }

    html.theme-undecided .organization-card:hover {
        transform: none !important;
    }
}

/* =====================================================
   CLIENT FEEDBACK (TESTIMONIALS) SECTION - NEWSPAPER TRANSFORMATION
   ===================================================== */

/* Testimonials Section Container */
html.theme-undecided .testimonials-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important; /* XXL vertical, M horizontal */
    font-family: Georgia, serif !important;
    border-top: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .testimonials-section > div {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* Section Header */
html.theme-undecided .testimonials-header {
    text-align: center !important;
    margin-bottom: 64px !important; /* XL spacing */
}

/* Testimonials Label - Caption Style */
html.theme-undecided .testimonials-label {
    color: var(--newspaper-black) !important;
    font-size: 10px !important; /* Caption from scale */
    font-family: 'Playfair Display SC', Georgia, serif !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important; /* XS bottom */
    opacity: 0.7 !important;
}

/* Section Title - Headline Style */
html.theme-undecided .testimonials-title {
    color: var(--newspaper-black) !important;
    font-size: 48px !important; /* Between Display and Headline */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 400 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    position: relative !important;
}

/* Add ornament above title */
html.theme-undecided .testimonials-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important; /* XS spacing */
    opacity: 0.5 !important;
}

/* Testimonial Cards - Newspaper Article Boxes */
html.theme-undecided .testimonial-card {
    background: var(--newspaper-bg) !important;
    border: 3px double var(--newspaper-black) !important;
    border-radius: 0px !important;
    padding: 48px !important; /* L spacing */
    margin-bottom: 32px !important; /* M spacing */
    position: relative !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Hover effect - lift slightly */
html.theme-undecided .testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Add L-shaped crop marks to testimonial cards */
html.theme-undecided .testimonial-card::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

html.theme-undecided .testimonial-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

/* Quote Mark - Newspaper Typography */
html.theme-undecided .testimonial-quote-mark {
    color: var(--newspaper-black) !important;
    font-size: 72px !important; /* Display size */
    font-family: 'Playfair Display', Georgia, serif !important;
    margin: 0 0 24px 0 !important; /* S bottom */
    line-height: 1 !important;
    opacity: 0.2 !important;
}

/* Testimonial Text - Body Style */
html.theme-undecided .testimonial-text {
    color: var(--newspaper-black) !important;
    font-size: 16px !important; /* Body from scale */
    font-family: Georgia, serif !important;
    line-height: 1.7 !important;
    margin: 0 0 32px 0 !important; /* M bottom */
    font-style: italic !important;
}

/* Testimonial Footer */
html.theme-undecided .testimonial-footer {
    border-top: 2px solid var(--newspaper-black) !important;
    padding-top: 24px !important; /* S spacing */
    margin-top: 32px !important; /* M spacing */
}

/* Author Name - Subhead Style */
html.theme-undecided .testimonial-author {
    color: var(--newspaper-black) !important;
    font-size: 20px !important; /* Between Body and Subhead */
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important; /* XXS bottom */
}

/* Author Role - Small Body Style */
html.theme-undecided .testimonial-role {
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
    font-size: 14px !important; /* Small body from scale */
    font-family: Georgia, serif !important;
    margin: 0 !important;
}

/* Testimonial Overlay - Newspaper Sidebar */
html.theme-undecided .testimonial-overlay {
    margin-top: 32px !important; /* M spacing */
    padding-top: 24px !important; /* S spacing */
    border-top: 1px solid var(--newspaper-black) !important;
}

/* Overlay Header */
html.theme-undecided .overlay-header {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important; /* S spacing */
    flex-wrap: wrap !important;
    gap: 16px !important; /* XS spacing */
}

/* Verified Badge - Newspaper Label */
html.theme-undecided .verified-badge {
    display: inline-block !important;
    padding: 8px 16px !important; /* XXS vertical, XS horizontal */
    background: rgba(0, 0, 0, 0.05) !important;
    border: 2px solid var(--newspaper-black) !important;
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important; /* Caption from scale */
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* Project Duration Badge */
html.theme-undecided .project-duration {
    display: inline-block !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: 2px solid var(--newspaper-black) !important;
    color: var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

/* Overlay Metrics Grid */
html.theme-undecided .overlay-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 16px !important; /* XS spacing */
}

/* Metric Items - Sidebar Boxes */
html.theme-undecided .metric-item {
    padding: 16px !important; /* XS spacing */
    background: rgba(0, 0, 0, 0.03) !important;
    border-left: 3px solid var(--newspaper-black) !important;
    border-top: 1px solid var(--newspaper-black) !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important; /* XXS spacing */
}

/* Metric Labels - Caption Style */
html.theme-undecided .metric-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important; /* Caption from scale */
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

/* Metric Values - Small Body Style */
html.theme-undecided .metric-value {
    font-family: Georgia, serif !important;
    font-size: 14px !important; /* Small body from scale */
    color: var(--newspaper-black) !important;
    line-height: 1.4 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    html.theme-undecided .testimonials-section {
        padding: 64px 16px !important; /* XL vertical, smaller horizontal */
    }

    html.theme-undecided .testimonial-card {
        padding: 32px !important; /* M spacing on mobile */
    }

    html.theme-undecided .testimonials-title {
        font-size: 36px !important;
    }

    html.theme-undecided .overlay-metrics {
        grid-template-columns: 1fr !important;
    }
}

/* Accessibility - Focus States */
html.theme-undecided .testimonial-card:focus,
html.theme-undecided .testimonial-card:focus-visible {
    outline: 3px double var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

html.theme-undecided .testimonial-card:focus:not(:focus-visible) {
    outline: none !important;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .testimonial-card {
        transition: none !important;
    }

    html.theme-undecided .testimonial-card:hover {
        transform: none !important;
    }
}

/* ============================================
   ABOUT ME SECTION - NEWSPAPER TRANSFORMATION
   ============================================ */

/* Task 1: Replace black background with newspaper cream/beige */
html.theme-undecided .about-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .about-section *,
html.theme-undecided .about-section div,
html.theme-undecided .about-section p,
html.theme-undecided .about-section h1,
html.theme-undecided .about-section span {
    color: var(--newspaper-black) !important;
}

/* Override all inline color styles */
html.theme-undecided .about-section [style*="color: #fff"],
html.theme-undecided .about-section [style*="color:#fff"],
html.theme-undecided .about-section [style*="color: #ffffff"],
html.theme-undecided .about-section [style*="color: rgba(255,255,255"],
html.theme-undecided .about-section [style*="color: white"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .about-section [style*="color: #888"],
html.theme-undecided .about-section [style*="color:#888"],
html.theme-undecided .about-section [style*="color: #999"],
html.theme-undecided .about-section [style*="color: gray"],
html.theme-undecided .about-section [style*="color: grey"] {
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

/* Task 2: Transform section headers to newspaper style */
html.theme-undecided .about-header {
    text-align: center !important;
    margin-bottom: 64px !important;
    position: relative !important;
}

html.theme-undecided .about-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 16px !important;
    opacity: 0.6 !important;
}

html.theme-undecided .about-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 24px 0 !important;
    position: relative !important;
}

html.theme-undecided .about-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

html.theme-undecided .about-title::after {
    content: '' !important;
    display: block !important;
    width: 80px !important;
    height: 2px !important;
    background: var(--newspaper-black) !important;
    margin: 24px auto 0 !important;
    opacity: 0.3 !important;
}

/* Task 3: Style body text as newspaper article copy */
html.theme-undecided .about-body {
    max-width: 800px !important;
    margin: 0 auto 64px auto !important;
    column-count: 1 !important;
}

html.theme-undecided .about-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 24px !important;
    text-align: justify !important;
}

html.theme-undecided .about-text:first-of-type::first-letter {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    line-height: 1 !important;
    float: left !important;
    margin: 0 8px 0 0 !important;
    font-weight: 400 !important;
}

html.theme-undecided .about-text:first-of-type {
    font-style: italic !important;
}

/* Task 4: Transform metrics bar to newspaper statistics boxes */
html.theme-undecided .about-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 32px !important;
    margin-top: 64px !important;
    padding-top: 48px !important;
    border-top: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .metric-card {
    background: var(--newspaper-bg) !important;
    padding: 32px 24px !important;
    border: 2px solid var(--newspaper-black) !important;
    text-align: center !important;
    position: relative !important;
    transition: transform 0.2s ease !important;
}

html.theme-undecided .metric-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .metric-card::before {
    content: '' !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
    opacity: 0.3 !important;
}

html.theme-undecided .metric-card::after {
    content: '' !important;
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    width: 16px !important;
    height: 16px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
    opacity: 0.3 !important;
}

/* Task 5: Replace green accent color (#00FF88) with newspaper black */
html.theme-undecided .metric-number {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    display: block !important;
    margin-bottom: 8px !important;
    line-height: 1 !important;
}

html.theme-undecided .about-metrics [style*="color: #00FF88"],
html.theme-undecided .about-metrics [style*="color:#00FF88"],
html.theme-undecided .about-metrics [style*="color: #00ff88"],
html.theme-undecided .about-metrics [style*="color: rgb(0,255,136)"],
html.theme-undecided .about-metrics [style*="color: rgb(0, 255, 136)"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .metric-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

/* ============================================
   SKILLS & EXPERTISE SECTION - NEWSPAPER TRANSFORMATION
   ============================================ */

/* Main section container */
html.theme-undecided .skills-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .skills-section *,
html.theme-undecided .skills-section div,
html.theme-undecided .skills-section p,
html.theme-undecided .skills-section h2,
html.theme-undecided .skills-section h3,
html.theme-undecided .skills-section span {
    color: var(--newspaper-black) !important;
}

/* Override all inline color styles in skills section */
html.theme-undecided .skills-section [style*="color: #fff"],
html.theme-undecided .skills-section [style*="color:#fff"],
html.theme-undecided .skills-section [style*="color: #ffffff"],
html.theme-undecided .skills-section [style*="color: white"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .skills-section [style*="color: #888"],
html.theme-undecided .skills-section [style*="color:#888"],
html.theme-undecided .skills-section [style*="color: #999"] {
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

html.theme-undecided .skills-header {
    text-align: center !important;
    margin-bottom: 64px !important;
}

html.theme-undecided .skills-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 16px !important;
}

html.theme-undecided .skills-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

html.theme-undecided .skills-subtitle {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    font-style: italic !important;
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

/* Transform skill cards to classified ad boxes */
html.theme-undecided .skill-category {
    background: var(--newspaper-bg) !important;
    padding: 32px !important;
    border: 2px solid var(--newspaper-black) !important;
    margin-bottom: 32px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

html.theme-undecided .skill-category-title {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .skill-category-title::after {
    content: '•' !important;
    display: inline-block !important;
    margin-left: 8px !important;
    opacity: 0.4 !important;
}

/* Transform skill bars to newspaper indicators */
html.theme-undecided .skill-item {
    margin-bottom: 24px !important;
    position: relative !important;
}

html.theme-undecided .skill-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

html.theme-undecided .skill-level {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
    opacity: 0.6 !important;
}

/* Replace green skill bars with newspaper-style indicators */
html.theme-undecided .skill-bar {
    height: 8px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--newspaper-black) !important;
    position: relative !important;
    overflow: visible !important;
}

html.theme-undecided .skill-bar-fill {
    height: 100% !important;
    background: var(--newspaper-black) !important;
    position: relative !important;
    transition: width 0.6s ease !important;
}

/* Override all green colors in skills section */
html.theme-undecided .skills-section [style*="background: #00FF88"],
html.theme-undecided .skills-section [style*="background:#00FF88"],
html.theme-undecided .skills-section [style*="background: #00ff88"],
html.theme-undecided .skills-section [style*="background-color: #00FF88"],
html.theme-undecided .skills-section [style*="background-color:#00FF88"] {
    background: var(--newspaper-black) !important;
}

html.theme-undecided .skills-section [style*="color: #00FF88"],
html.theme-undecided .skills-section [style*="color:#00FF88"],
html.theme-undecided .skills-section [style*="color: #00ff88"] {
    color: var(--newspaper-black) !important;
}

/* Skill grid layout */
html.theme-undecided .skills-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 32px !important;
}

/* ============================================
   ADDITIONAL SKILLS & EXPERTISE SPECIFIC STYLES
   ============================================ */

/* Section header styling */
html.theme-undecided .skills-header {
    text-align: center !important;
    margin-bottom: 64px !important;
}

html.theme-undecided .skills-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin-bottom: 16px !important;
}

html.theme-undecided .skills-header .skills-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    margin-bottom: 16px !important;
}

html.theme-undecided .skills-header .skills-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* Group labels (Core Design Skills, Methodologies, etc.) */
html.theme-undecided .skills-group-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
    margin-bottom: 24px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .skills-group-label::after {
    content: '•' !important;
    margin-left: 8px !important;
    opacity: 0.5 !important;
}

/* Core Design Skills - Skill Cards */
html.theme-undecided .skill-card {
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 20px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important;
}

html.theme-undecided .skill-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .skill-card [style*="background: #0a0a0a"],
html.theme-undecided .skill-card [style*="background:#0a0a0a"] {
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .skill-card [style*="border: 1px solid #222"] {
    border: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .skill-name {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
}

/* Skill bars - replace green squares with newspaper black */
html.theme-undecided .skill-bars {
    display: flex !important;
    gap: 4px !important;
}

html.theme-undecided .skill-bar {
    width: 16px !important;
    height: 16px !important;
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .skill-bar-filled,
html.theme-undecided .skill-bar.skill-bar-filled {
    background: var(--newspaper-black) !important;
}

/* Override all green backgrounds in skill bars */
html.theme-undecided .skills-section [style*="background: #00FF88"],
html.theme-undecided .skills-section [style*="background:#00FF88"],
html.theme-undecided .skills-section [style*="background: #00ff88"] {
    background: var(--newspaper-black) !important;
}

/* Override gray backgrounds in empty skill bars */
html.theme-undecided .skills-section [style*="background: #333"],
html.theme-undecided .skills-section [style*="background:#333"] {
    background: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--newspaper-black) !important;
}

/* Tools & Software - Collapsible Section */
html.theme-undecided .tools-group {
    margin-bottom: 64px !important;
}

html.theme-undecided .tools-details {
    background: var(--newspaper-bg) !important;
    border: 3px double var(--newspaper-black) !important;
    padding: 32px !important;
}

html.theme-undecided .tools-details[style*="background: #0a0a0a"] {
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .tools-details[style*="border: 1px solid #222"] {
    border: 3px double var(--newspaper-black) !important;
}

html.theme-undecided .tools-summary {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

html.theme-undecided .tools-icon {
    font-size: 20px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .tools-content {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .tools-content[style*="border-top: 1px solid #222"] {
    border-top: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .tool-category {
    margin-bottom: 16px !important;
}

html.theme-undecided .tool-category-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin-bottom: 8px !important;
}

html.theme-undecided .tool-category-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    color: var(--newspaper-black) !important;
    line-height: 1.8 !important;
}

/* Methodologies - Bullet List */
html.theme-undecided .methodologies-group {
    margin-bottom: 64px !important;
}

html.theme-undecided .methodologies-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

html.theme-undecided .methodology-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

html.theme-undecided .methodology-bullet {
    width: 8px !important;
    height: 8px !important;
    background: var(--newspaper-black) !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    flex-shrink: 0 !important;
}

html.theme-undecided .methodology-bullet[style*="background: #00FF88"],
html.theme-undecided .methodology-bullet[style*="background:#00FF88"] {
    background: var(--newspaper-black) !important;
}

html.theme-undecided .methodology-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    color: var(--newspaper-black) !important;
}

/* Industry Experience - Tags */
html.theme-undecided .industry-group {
    margin-bottom: 64px !important;
}

html.theme-undecided .industry-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

html.theme-undecided .industry-tag {
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 8px 16px !important;
    transition: transform 0.2s ease !important;
}

html.theme-undecided .industry-tag:hover {
    transform: translateY(-2px) !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .industry-tag[style*="background: #000000"],
html.theme-undecided .industry-tag[style*="background:#000000"] {
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .industry-tag[style*="border: 1px solid #ffffff"] {
    border: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .industry-tag-text {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: var(--newspaper-black) !important;
}

/* Task 6: Apply responsive design */
@media (max-width: 768px) {
    html.theme-undecided .about-section,
    html.theme-undecided .skills-section {
        padding: 64px 16px !important;
    }

    html.theme-undecided .about-title {
        font-size: 36px !important;
    }

    html.theme-undecided .skills-title,
    html.theme-undecided .skills-header .skills-title {
        font-size: 36px !important;
    }

    html.theme-undecided .about-text:first-of-type::first-letter {
        font-size: 36px !important;
    }

    html.theme-undecided .about-metrics {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    html.theme-undecided .metric-number {
        font-size: 24px !important;
    }

    html.theme-undecided .skills-grid {
        grid-template-columns: 1fr !important;
    }

    html.theme-undecided .methodologies-grid {
        grid-template-columns: 1fr !important;
    }

    html.theme-undecided .tools-details {
        padding: 24px !important;
    }

    html.theme-undecided .tools-summary {
        font-size: 11px !important;
    }
}

/* Task 7: Accessibility features */
html.theme-undecided .metric-card:focus-visible,
html.theme-undecided .skill-category:focus-visible,
html.theme-undecided .skill-card:focus-visible,
html.theme-undecided .tools-summary:focus-visible,
html.theme-undecided .industry-tag:focus-visible {
    outline: 3px solid var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .metric-card,
    html.theme-undecided .skill-bar-fill,
    html.theme-undecided .skill-card,
    html.theme-undecided .industry-tag {
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    html.theme-undecided .about-section,
    html.theme-undecided .skills-section {
        border-width: 4px !important;
    }

    html.theme-undecided .metric-card,
    html.theme-undecided .skill-category,
    html.theme-undecided .skill-card,
    html.theme-undecided .industry-tag {
        border-width: 3px !important;
    }

    html.theme-undecided .tools-details {
        border-width: 4px !important;
    }
}

/* ============================================
   COMPASS-DRIVEN DESIGN SECTION (5-STEP PROCESS)
   ============================================ */

/* Override the existing process-section styles for single column layout */
html.theme-undecided .process-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

/* Section header */
html.theme-undecided .process-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
}

html.theme-undecided .process-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-description {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    font-style: italic !important;
    color: var(--newspaper-black) !important;
    opacity: 0.8 !important;
}

/* Override all white/gray text in process section */
html.theme-undecided .process-section *,
html.theme-undecided .process-section div,
html.theme-undecided .process-section p,
html.theme-undecided .process-section h2,
html.theme-undecided .process-section h3 {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-section [style*="color: #fff"],
html.theme-undecided .process-section [style*="color:#fff"],
html.theme-undecided .process-section [style*="color: #ffffff"],
html.theme-undecided .process-section [style*="color: white"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .process-section [style*="color: #999"],
html.theme-undecided .process-section [style*="color:#999"],
html.theme-undecided .process-section [style*="color: #ccc"],
html.theme-undecided .process-section [style*="color:#ccc"],
html.theme-undecided .process-section [style*="color: #cccccc"] {
    color: var(--newspaper-black) !important;
    opacity: 0.8 !important;
}

html.theme-undecided .process-section [style*="color: #666"],
html.theme-undecided .process-section [style*="color:#666"] {
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
}

/* Process steps container - SINGLE COLUMN */
html.theme-undecided .process-steps {
    margin-top: 64px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* Individual process step - HORIZONTAL LAYOUT */
html.theme-undecided .process-step {
    display: flex !important;
    gap: 24px !important;
    margin-bottom: 0 !important;
    padding-bottom: 48px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .process-step:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Step number container - LEFT SIDE */
html.theme-undecided .process-step-number-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 60px !important;
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Step number - NEWSPAPER STYLE */
html.theme-undecided .process-step-number {
    width: 48px !important;
    height: 48px !important;
    background: var(--newspaper-bg) !important;
    border: 3px solid var(--newspaper-black) !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

html.theme-undecided .process-step-number[style*="background: #0a0a0a"],
html.theme-undecided .process-step-number[style*="background:#0a0a0a"] {
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .process-step-number[style*="border: 2px solid #00FF88"],
html.theme-undecided .process-step-number[style*="border:2px solid #00FF88"] {
    border: 3px solid var(--newspaper-black) !important;
}

/* Disable number rotation on hover */
html.theme-undecided .process-step:hover .process-step-number {
    transform: none !important;
}

/* Step number text */
html.theme-undecided .process-step-number-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    text-shadow: none !important;
}

html.theme-undecided .process-step-number-text[style*="color: #00FF88"],
html.theme-undecided .process-step-number-text[style*="color:#00FF88"] {
    color: var(--newspaper-black) !important;
}

/* Timeline line - NEWSPAPER DIVIDER */
html.theme-undecided .process-step-line {
    width: 1px !important;
    height: 100% !important;
    background: var(--newspaper-black) !important;
    opacity: 0.3 !important;
    flex-grow: 1 !important;
    margin-top: 16px !important;
}

html.theme-undecided .process-step-line[style*="background: #222"],
html.theme-undecided .process-step-line[style*="background:#222"] {
    background: var(--newspaper-black) !important;
}

/* Hide the line on the last step */
html.theme-undecided .process-step:last-child .process-step-line {
    display: none !important;
}

/* Step content - RIGHT SIDE */
html.theme-undecided .process-step-content {
    flex: 1 !important;
    padding-bottom: 0 !important;
}

/* Step title - NEWSPAPER SUBHEADING */
html.theme-undecided .process-step-title {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 12px 0 !important;
}

/* Step description - NEWSPAPER BODY TEXT */
html.theme-undecided .process-step-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
    margin: 0 !important;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    html.theme-undecided .process-section {
        padding: 64px 16px !important;
    }

    html.theme-undecided .process-title {
        font-size: 36px !important;
    }

    html.theme-undecided .process-step {
        gap: 16px !important;
        padding-bottom: 32px !important;
    }

    html.theme-undecided .process-step-number {
        width: 40px !important;
        height: 40px !important;
    }

    html.theme-undecided .process-step-number-text {
        font-size: 16px !important;
    }

    html.theme-undecided .process-step-title {
        font-size: 14px !important;
    }

    html.theme-undecided .process-step-text {
        font-size: 13px !important;
    }
}

/* Accessibility */
html.theme-undecided .process-step:focus-within {
    outline: 2px solid var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .process-step-number {
        transition: none !important;
    }
}

/* ============================================
   EXPERIENCE & IMPACT SECTION
   ============================================ */

/* Main section container */
html.theme-undecided .impact-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

/* Override all white/gray text in impact section */
html.theme-undecided .impact-section *,
html.theme-undecided .impact-section div,
html.theme-undecided .impact-section p,
html.theme-undecided .impact-section h2,
html.theme-undecided .impact-section h3,
html.theme-undecided .impact-section h4 {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .impact-section [style*="color: #fff"],
html.theme-undecided .impact-section [style*="color:#fff"],
html.theme-undecided .impact-section [style*="color: #ffffff"],
html.theme-undecided .impact-section [style*="color: white"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .impact-section [style*="color: #ccc"],
html.theme-undecided .impact-section [style*="color:#ccc"],
html.theme-undecided .impact-section [style*="color: #cccccc"] {
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
}

html.theme-undecided .impact-section [style*="color: #999"],
html.theme-undecided .impact-section [style*="color:#999"] {
    color: var(--newspaper-black) !important;
    opacity: 0.7 !important;
}

html.theme-undecided .impact-section [style*="color: #666"],
html.theme-undecided .impact-section [style*="color:#666"] {
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
}

html.theme-undecided .impact-section [style*="background: #000000"],
html.theme-undecided .impact-section [style*="background:#000000"] {
    background: var(--newspaper-bg) !important;
}

/* Section header */
html.theme-undecided .impact-header {
    margin-bottom: 64px !important;
    text-align: left !important;
}

html.theme-undecided .impact-label {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    opacity: 0.6 !important;
    margin-bottom: 16px !important;
}

html.theme-undecided .impact-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

html.theme-undecided .impact-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* Two column grid */
html.theme-undecided .impact-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 64px !important;
}

/* Career Highlights - Feature Stories */
html.theme-undecided .impact-highlight {
    margin-bottom: 48px !important;
    padding-bottom: 48px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .impact-highlight:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Replace green bullets with newspaper ornaments */
html.theme-undecided .impact-bullet {
    width: 8px !important;
    height: 8px !important;
    background: var(--newspaper-black) !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    margin-top: 12px !important;
    flex-shrink: 0 !important;
}

html.theme-undecided .impact-bullet[style*="background: #00FF88"],
html.theme-undecided .impact-bullet[style*="background:#00FF88"] {
    background: var(--newspaper-black) !important;
}

/* Highlight titles - Feature headlines */
html.theme-undecided .impact-highlight-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* Highlight text - Feature subtext */
html.theme-undecided .impact-highlight-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
    margin: 0 0 0 20px !important;
}

/* Right Column - Side Projects Callout Box */
html.theme-undecided .impact-side-box {
    background: var(--newspaper-bg) !important;
    border: 3px double var(--newspaper-black) !important;
    padding: 40px !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

html.theme-undecided .impact-side-box[style*="background: #0a0a0a"],
html.theme-undecided .impact-side-box[style*="background:#0a0a0a"] {
    background: var(--newspaper-bg) !important;
}

html.theme-undecided .impact-side-box[style*="border: 2px solid #222"] {
    border: 3px double var(--newspaper-black) !important;
}

/* Corner crop marks on sidebar */
html.theme-undecided .impact-side-box::before {
    content: '' !important;
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-top: 2px solid var(--newspaper-black) !important;
    border-left: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

html.theme-undecided .impact-side-box::after {
    content: '' !important;
    position: absolute !important;
    bottom: 12px !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
    border-right: 2px solid var(--newspaper-black) !important;
    opacity: 0.4 !important;
}

/* Side box title */
html.theme-undecided .impact-side-title {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 32px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
}

/* Side projects */
html.theme-undecided .side-project {
    margin-bottom: 32px !important;
    padding-bottom: 32px !important;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2) !important;
}

html.theme-undecided .side-project:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Side project icons - hide in newspaper theme */
html.theme-undecided .side-project-icon {
    display: none !important;
}

/* Side project titles */
html.theme-undecided .side-project-title {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    margin: 0 !important;
}

/* Side project text */
html.theme-undecided .side-project-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.75 !important;
    margin: 8px 0 !important;
}

/* Side project links */
html.theme-undecided .side-project-link {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    color: var(--newspaper-black) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
}

html.theme-undecided .side-project-link[style*="color: #00FF88"],
html.theme-undecided .side-project-link[style*="color:#00FF88"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .side-project-link:hover {
    text-decoration-thickness: 2px !important;
}

/* Responsive design */
@media (max-width: 900px) {
    html.theme-undecided .impact-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    html.theme-undecided .impact-side-box {
        padding: 32px !important;
    }
}

@media (max-width: 768px) {
    html.theme-undecided .impact-section {
        padding: 64px 16px !important;
    }

    html.theme-undecided .impact-title {
        font-size: 36px !important;
    }

    html.theme-undecided .impact-highlight {
        margin-bottom: 32px !important;
        padding-bottom: 32px !important;
    }

    html.theme-undecided .impact-highlight-title {
        font-size: 20px !important;
    }

    html.theme-undecided .impact-side-box {
        padding: 24px !important;
    }
}

/* Accessibility */
html.theme-undecided .impact-highlight:focus-within,
html.theme-undecided .side-project:focus-within {
    outline: 2px solid var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

html.theme-undecided .side-project-link:focus-visible {
    outline: 2px solid var(--newspaper-black) !important;
    outline-offset: 2px !important;
    text-decoration-thickness: 2px !important;
}

@media (prefers-contrast: high) {
    html.theme-undecided .impact-section {
        border-width: 4px !important;
    }

    html.theme-undecided .impact-side-box {
        border-width: 4px !important;
    }

    html.theme-undecided .impact-highlight {
        border-bottom-width: 2px !important;
    }
}

/* ============================================
   MORE ABOUT ME SECTION (FUN FACTS & CTA)
   ============================================ */

/* Main section container */
html.theme-undecided .about-me-section {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .about-me-section[style*="background-color: #000000"],
html.theme-undecided .about-me-section[style*="background-color:#000000"] {
    background: var(--newspaper-bg) !important;
}

/* Override all white/gray text */
html.theme-undecided .about-me-section *,
html.theme-undecided .about-me-section div,
html.theme-undecided .about-me-section p,
html.theme-undecided .about-me-section h2,
html.theme-undecided .about-me-section h3 {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .about-me-section [style*="color: #FFFFFF"],
html.theme-undecided .about-me-section [style*="color:#FFFFFF"],
html.theme-undecided .about-me-section [style*="color: #fff"],
html.theme-undecided .about-me-section [style*="color: white"] {
    color: var(--newspaper-black) !important;
}

html.theme-undecided .about-me-section [style*="color: #CCCCCC"],
html.theme-undecided .about-me-section [style*="color:#CCCCCC"],
html.theme-undecided .about-me-section [style*="color: #ccc"] {
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
}

/* Section title */
html.theme-undecided .about-me-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    text-align: center !important;
    margin: 0 0 48px 0 !important;
}

html.theme-undecided .about-me-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* Fun facts grid - newspaper columns */
html.theme-undecided .about-me-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
    margin-bottom: 64px !important;
}

/* Individual fact items */
html.theme-undecided .about-me-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Replace green bullets with newspaper ornaments */
html.theme-undecided .about-me-bullet {
    color: var(--newspaper-black) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

html.theme-undecided .about-me-bullet[style*="color: #00FF88"],
html.theme-undecided .about-me-bullet[style*="color:#00FF88"] {
    color: var(--newspaper-black) !important;
}

/* Change bullet to newspaper ornament */
html.theme-undecided .about-me-bullet::before {
    content: '▪' !important;
}

html.theme-undecided .about-me-bullet {
    font-size: 0 !important;
}

/* Fact text */
html.theme-undecided .about-me-text {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
    margin: 0 !important;
}

/* CTA Section - Newspaper Callout */
html.theme-undecided .about-me-cta {
    text-align: center !important;
    padding: 48px 32px !important;
    border-top: 3px double var(--newspaper-black) !important;
    margin-top: 48px !important;
    position: relative !important;
}

html.theme-undecided .about-me-cta[style*="border-top: 1px solid #222222"] {
    border-top: 3px double var(--newspaper-black) !important;
}

/* CTA Title */
html.theme-undecided .about-me-cta-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 32px 0 !important;
}

/* CTA Buttons Container */
html.theme-undecided .about-me-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

/* Primary CTA Button - Newspaper style */
html.theme-undecided .cta-button-primary {
    display: inline-block !important;
    padding: 14px 32px !important;
    background: var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: 3px solid var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

html.theme-undecided .cta-button-primary[style*="background-color: #00FF88"],
html.theme-undecided .cta-button-primary[style*="background-color:#00FF88"] {
    background: var(--newspaper-black) !important;
}

html.theme-undecided .cta-button-primary[style*="color: #000000"],
html.theme-undecided .cta-button-primary[style*="color:#000000"] {
    color: var(--newspaper-bg) !important;
}

html.theme-undecided .cta-button-primary:hover {
    background: var(--newspaper-bg) !important;
    color: var(--newspaper-black) !important;
    transform: translateY(-2px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Secondary CTA Button - Newspaper outline style */
html.theme-undecided .cta-button-secondary {
    display: inline-block !important;
    padding: 14px 32px !important;
    background: transparent !important;
    color: var(--newspaper-black) !important;
    text-decoration: none !important;
    border-radius: 0 !important;
    border: 3px solid var(--newspaper-black) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

html.theme-undecided .cta-button-secondary[style*="background-color: transparent"] {
    background: transparent !important;
}

html.theme-undecided .cta-button-secondary[style*="border: 2px solid #FFFFFF"] {
    border: 3px solid var(--newspaper-black) !important;
}

html.theme-undecided .cta-button-secondary:hover {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-bg) !important;
    transform: translateY(-2px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    html.theme-undecided .about-me-section {
        padding: 64px 16px !important;
    }

    html.theme-undecided .about-me-title {
        font-size: 36px !important;
    }

    html.theme-undecided .about-me-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    html.theme-undecided .about-me-cta {
        padding: 32px 16px !important;
    }

    html.theme-undecided .about-me-cta-title {
        font-size: 20px !important;
    }

    html.theme-undecided .cta-button-primary,
    html.theme-undecided .cta-button-secondary {
        font-size: 11px !important;
        padding: 12px 24px !important;
    }
}

/* Accessibility */
html.theme-undecided .cta-button-primary:focus-visible,
html.theme-undecided .cta-button-secondary:focus-visible {
    outline: 3px solid var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .cta-button-primary,
    html.theme-undecided .cta-button-secondary {
        transition: none !important;
    }

    html.theme-undecided .cta-button-primary:hover,
    html.theme-undecided .cta-button-secondary:hover {
        transform: none !important;
    }
}

@media (prefers-contrast: high) {
    html.theme-undecided .about-me-section {
        border-width: 4px !important;
    }

    html.theme-undecided .about-me-cta {
        border-top-width: 4px !important;
    }

    html.theme-undecided .cta-button-primary,
    html.theme-undecided .cta-button-secondary {
        border-width: 4px !important;
    }
}

/* ============================================
   SKILLS & TOOLS SECTION (BOTTOM OF PAGE)
   ============================================ */

/* Skills section container */
html.theme-undecided .skills {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-top: 3px solid var(--newspaper-black) !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

/* Section title */
html.theme-undecided .skills .section-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    text-align: center !important;
    margin: 0 0 64px 0 !important;
}

html.theme-undecided .skills .section-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* Skills grid - 3 columns in one row */
html.theme-undecided .skills-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Individual skill category tiles */
html.theme-undecided .skill-category {
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    padding: 32px !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease !important;
}

html.theme-undecided .skill-category:hover {
    transform: translateY(-4px) !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Category titles */
html.theme-undecided .skill-category h3 {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 16px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
}

/* Skill lists */
html.theme-undecided .skill-category ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.theme-undecided .skill-category li {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.85 !important;
    margin-bottom: 12px !important;
    padding-left: 20px !important;
    position: relative !important;
}

/* Newspaper bullets for list items */
html.theme-undecided .skill-category li::before {
    content: '▪' !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--newspaper-black) !important;
    font-size: 12px !important;
}

html.theme-undecided .skill-category li:last-child {
    margin-bottom: 0 !important;
}

/* ============================================
   CONTACT SECTION
   ============================================ */

/* Contact section container */
html.theme-undecided .contact {
    background: var(--newspaper-bg) !important;
    padding: 96px 32px !important;
    border-bottom: 3px solid var(--newspaper-black) !important;
}

/* Section title */
html.theme-undecided .contact .section-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    color: var(--newspaper-black) !important;
    text-align: center !important;
    margin: 0 0 32px 0 !important;
}

html.theme-undecided .contact .section-title::before {
    content: '◆' !important;
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
}

/* Contact intro text */
html.theme-undecided .contact-intro {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 16px !important;
    font-style: italic !important;
    line-height: 1.8 !important;
    color: var(--newspaper-black) !important;
    opacity: 0.8 !important;
    text-align: center !important;
    margin: 0 auto 48px auto !important;
    max-width: 600px !important;
}

/* Contact methods grid */
html.theme-undecided .contact-methods {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 24px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Individual contact items */
html.theme-undecided .contact-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 24px 16px !important;
    background: var(--newspaper-bg) !important;
    border: 2px solid var(--newspaper-black) !important;
    text-decoration: none !important;
    color: var(--newspaper-black) !important;
    transition: all 0.2s ease !important;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

html.theme-undecided .contact-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Hide icon placeholders */
html.theme-undecided .contact-item .icon {
    display: none !important;
}

/* Contact item text */
html.theme-undecided .contact-item span:not(.icon) {
    font-family: 'Playfair Display SC', Georgia, serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--newspaper-black) !important;
}

/* ============================================
   FOOTER
   ============================================ */

html.theme-undecided .footer {
    background: var(--newspaper-black) !important;
    padding: 32px !important;
    text-align: center !important;
}

html.theme-undecided .footer p {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 13px !important;
    color: var(--newspaper-bg) !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}

/* Responsive design */
@media (max-width: 900px) {
    html.theme-undecided .skills-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    html.theme-undecided .skills,
    html.theme-undecided .contact {
        padding: 64px 16px !important;
    }

    html.theme-undecided .skills .section-title,
    html.theme-undecided .contact .section-title {
        font-size: 36px !important;
    }

    html.theme-undecided .skills-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    html.theme-undecided .contact-methods {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    html.theme-undecided .contact-item {
        padding: 16px 12px !important;
    }

    html.theme-undecided .contact-item span:not(.icon) {
        font-size: 11px !important;
    }
}

/* Accessibility */
html.theme-undecided .skill-category:focus-within,
html.theme-undecided .contact-item:focus-visible {
    outline: 3px solid var(--newspaper-black) !important;
    outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-undecided .skill-category,
    html.theme-undecided .contact-item {
        transition: none !important;
    }

    html.theme-undecided .skill-category:hover,
    html.theme-undecided .contact-item:hover {
        transform: none !important;
    }
}

@media (prefers-contrast: high) {
    html.theme-undecided .skills,
    html.theme-undecided .contact {
        border-width: 4px !important;
    }

    html.theme-undecided .skill-category,
    html.theme-undecided .contact-item {
        border-width: 3px !important;
    }
}

/* ===== Reset & Base Styles ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-primary);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    background-color: var(--bg-primary);
    letter-spacing: var(--letter-spacing-normal);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

/* ===== Navigation ===== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--navbar-bg);
    backdrop-filter: blur(var(--glass-blur));
    box-shadow: var(--shadow);
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--navbar-logo);
    transition: color 0.3s ease;
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Base logo structure */
.logo-short {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.logo-full {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

/* ===== THEME-SPECIFIC LOGO ANIMATIONS ===== */

/* DESIGNER THEME: Geometric Morph Explosion */
html.theme-designer .logo {
    perspective: 1000px;
}

html.theme-designer .logo-short {
    transition: opacity 0.3s ease 0.8s, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-designer .logo-full {
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0) rotateY(90deg);
}

html.theme-designer .logo:hover .logo-short {
    opacity: 0;
    transform: scale(0) rotateY(-90deg);
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-designer .logo:hover .logo-full {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Geometric shapes that appear during transition */
html.theme-designer .logo::before,
html.theme-designer .logo::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    opacity: 0;
    pointer-events: none;
    transition: all 0.6s ease;
}

html.theme-designer .logo::before {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    top: -10px;
    left: 50%;
    transform: translate(-50%, 0) rotate(0deg);
}

html.theme-designer .logo::after {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    bottom: -10px;
    right: 0;
    transform: rotate(0deg);
}

html.theme-designer .logo:hover::before {
    opacity: 0.6;
    transform: translate(-50%, -5px) rotate(180deg);
}

html.theme-designer .logo:hover::after {
    opacity: 0.6;
    transform: translateY(5px) rotate(180deg);
}

/* ============================================
   DESIGNER THEME - CASE STUDIES SECTION
   ============================================ */

/* Section Background */
html.theme-designer .case-studies {
    background: var(--bg-secondary);
    position: relative;
}

/* Section Header */
html.theme-designer .case-studies-title {
    color: var(--primary-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
    font-size: 48px !important;
    letter-spacing: -1px !important;
}

html.theme-designer .case-studies-subtitle {
    color: var(--text-secondary) !important;
    font-size: 18px !important;
}

/* Case Study Cards */
html.theme-designer .case-study-card {
    background: white !important;
    border: 2px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 16px !important;
    padding: 48px !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

html.theme-designer .case-study-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg,
        var(--primary-color),
        var(--secondary-color),
        var(--teal-accent)
    );
}

html.theme-designer .case-study-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 48px rgba(255, 107, 53, 0.2);
    transform: translateY(-4px);
}

/* Case Study Header - Project Title */
html.theme-designer .case-study-card h2 {
    color: var(--primary-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

html.theme-designer .case-study-card h2 + p {
    color: var(--text-secondary) !important;
}

/* Tags/Badges */
html.theme-designer .case-study-card span[style*="background: #ffffff"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Metrics with Colored Border */
html.theme-designer .case-study-card div[style*="border-left: 3px solid"] {
    border-left-color: var(--primary-color) !important;
    position: relative;
}

/* Metric Values - Gradient Colors */
html.theme-designer .case-study-card p[style*="font-size: 32px"]:first-child {
    background: linear-gradient(135deg, var(--primary-color), var(--teal-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900 !important;
}

/* Section Headings */
html.theme-designer .case-study-card h3 {
    color: var(--primary-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* Body Text */
html.theme-designer .case-study-card p[style*="font-size: 18px"][style*="line-height"] {
    color: var(--text-primary) !important;
}

/* List Items */
html.theme-designer .case-study-card li {
    color: var(--text-primary) !important;
    position: relative;
    padding-left: 24px !important;
}

html.theme-designer .case-study-card li span[style*="width: 8px"] {
    background: var(--primary-color) !important;
    border-radius: 50% !important;
    position: absolute !important;
    left: 0 !important;
}

/* CTA Button */
html.theme-designer .case-study-card a[style*="background: #ffffff"][style*="text-transform: uppercase"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

html.theme-designer .case-study-card a[style*="background: #ffffff"][style*="text-transform: uppercase"]:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color)) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4);
    transform: translateY(-2px);
}

/* Divider Dashboard - Designer Theme */
html.theme-designer .case-study-divider {
    margin: 80px 0;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

html.theme-designer .case-study-divider.divider-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   DIVIDER DASHBOARDS - DESIGNER THEME
   Gamified Achievement Cards
   ============================================ */

html.theme-designer .divider-dashboard {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%);
    border: 3px solid transparent;
    border-radius: 24px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    background-clip: padding-box;
    box-shadow: 0 4px 24px rgba(255, 107, 53, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animated gradient border */
html.theme-designer .divider-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 3px;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--coral-pink) 25%,
        var(--teal-accent) 50%,
        var(--purple-accent) 75%,
        var(--golden-yellow) 100%
    );
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 0;
    animation: borderRainbow 8s ease infinite;
}

@keyframes borderRainbow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Floating particles background */
html.theme-designer .divider-dashboard::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 217, 192, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(157, 78, 221, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

html.theme-designer .divider-dashboard:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 48px rgba(255, 107, 53, 0.18);
}

html.theme-designer .divider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Achievement badge style label */
html.theme-designer .divider-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
}

/* Removed emoji decoration */

/* Status indicator - gaming style */
html.theme-designer .divider-status {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    color: var(--teal-accent);
    font-weight: 700;
    background: rgba(0, 217, 192, 0.1);
    padding: 6px 16px;
    border-radius: 12px;
    border: 2px solid var(--teal-accent);
    letter-spacing: 0.5px;
    position: relative;
}

html.theme-designer .divider-status::before {
    content: '●';
    margin-right: 6px;
    animation: pulse 2s ease-in-out infinite;
}

/* Achievement card grid */
html.theme-designer .divider-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    position: relative;
    z-index: 1;
    margin-bottom: 24px;
}

/* Individual achievement cards */
html.theme-designer .divider-metric {
    text-align: center;
    padding: 28px 20px;
    background: white;
    border-radius: 20px;
    border: 2px solid rgba(255, 107, 53, 0.15);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    overflow: hidden;
}

/* Shimmer effect on card */
html.theme-designer .divider-metric::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 70%
    );
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    transition: transform 0.6s ease;
}

html.theme-designer .divider-metric:hover::before {
    transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Bouncy hover with color shift */
html.theme-designer .divider-metric:hover {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 107, 53, 0.08) 100%);
    border-color: var(--primary-color);
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 12px 32px rgba(255, 107, 53, 0.25),
        0 0 0 4px rgba(255, 107, 53, 0.1);
}

/* Assign different colors to each metric icon */
html.theme-designer .divider-metric:nth-child(1) .divider-metric-icon svg {
    stroke: var(--primary-color);
}

html.theme-designer .divider-metric:nth-child(2) .divider-metric-icon svg {
    stroke: var(--teal-accent);
}

html.theme-designer .divider-metric:nth-child(3) .divider-metric-icon svg {
    stroke: var(--purple-accent);
}

html.theme-designer .divider-metric-icon {
    margin-bottom: 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

html.theme-designer .divider-metric:hover .divider-metric-icon {
    transform: scale(1.2) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(255, 107, 53, 0.3));
}

/* XP-style animated numbers */
html.theme-designer .divider-metric-value {
    font-size: 42px;
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--coral-pink) 50%,
        var(--teal-accent) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    line-height: 1;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

html.theme-designer .divider-metric:hover .divider-metric-value {
    transform: scale(1.1);
    animation: gradientShift 2s ease infinite;
}

/* Achievement label */
html.theme-designer .divider-metric-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    z-index: 1;
}

/* XP Progress bar - gaming style */
html.theme-designer .divider-metric-bar {
    height: 6px;
    background: rgba(255, 107, 53, 0.12);
    margin-top: 16px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

html.theme-designer .divider-metric-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    border-radius: 10px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 50%,
        var(--golden-yellow) 100%
    );
    background-size: 200% 100%;
    transition: width 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
    box-shadow:
        0 0 12px rgba(255, 107, 53, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: shimmerBar 2s ease infinite;
}

@keyframes shimmerBar {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Insight section - level complete message */
html.theme-designer .divider-insight {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--purple-accent);
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.08), rgba(255, 107, 53, 0.08));
    padding: 16px 24px;
    border-radius: 16px;
    border-left: 4px solid var(--purple-accent);
    position: relative;
    z-index: 1;
    line-height: 1.6;
}

/* Removed emoji decoration */

/* ============================================
   PROCESS SECTION - DESIGNER THEME
   Gamified Level-Up Journey
   ============================================ */

/* Section Background */
html.theme-designer .process-section {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #ffffff 100%) !important;
}

/* Title Styling */
html.theme-designer .process-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    letter-spacing: -2px !important;
    margin-bottom: 16px !important;
}

html.theme-designer .process-description {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    color: #666 !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Unique Callout - Achievement Badge Style */
html.theme-designer .process-unique-callout {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(0, 217, 192, 0.1)) !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15) !important;
}

/* Removed emoji decoration */

html.theme-designer .process-unique-callout h3,
html.theme-designer .callout-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
}

html.theme-designer .process-unique-callout p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    color: #333 !important;
    line-height: 1.8 !important;
}

html.theme-designer .process-unique-callout p strong {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* Timeline Overview - Badge Pills */
html.theme-designer .process-timeline-overview {
    background: white !important;
    border: 2px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.08) !important;
}

html.theme-designer .process-timeline-overview div {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25) !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .process-timeline-overview div:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.35) !important;
}

html.theme-designer .process-timeline-overview div strong {
    font-weight: 800 !important;
    color: white !important;
}

/* Override any inline blue color styles on timeline pills */
html.theme-designer .process-timeline-overview div strong[style*="color"] {
    color: white !important;
}

/* Process Steps Container */
html.theme-designer .process-steps {
    margin: 0 !important;
}

/* Individual Process Steps - Level Cards */
html.theme-designer .process-step {
    background: white !important;
    border: 3px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 24px !important;
    padding: 48px 40px !important;
    margin: 0 10px 24px 10px !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.1) !important;
}

/* Remove blueprint corners for designer theme */
html.theme-designer .process-step > div[style*="position: absolute"] {
    display: none !important;
}

/* Hover Effect - Card Lift */
html.theme-designer .process-step:hover {
    transform: translateY(-8px) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.25) !important;
}

/* Step Number Badge - Gamified Level Indicator */
html.theme-designer .process-step > div > div:first-child {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--teal-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

/* Step Title */
html.theme-designer .process-step h2 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    margin-bottom: 8px !important;
}

/* Step Duration Badge */
html.theme-designer .process-step p[style*="text-transform: uppercase"]:first-of-type {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: white !important;
    background: linear-gradient(135deg, var(--teal-accent), var(--purple-accent)) !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
}

/* Step Description */
html.theme-designer .process-step > div > div:last-child > p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    color: #555 !important;
    line-height: 1.8 !important;
}

/* Collaboration Boxes */
html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.1)"] {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(0, 217, 192, 0.05)) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.1)"] h4,
html.theme-designer .collaboration-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.1)"] p {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #555 !important;
}

html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.1)"] strong {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

/* Method/Tool Tags - Pill Style */
html.theme-designer .process-step span[style*="border: 1px solid"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

html.theme-designer .process-step span[style*="border: 1px solid"]:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4) !important;
}

/* Tools Text */
html.theme-designer .process-step p[style*="TOOLS:"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 10px !important;
    color: #999 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Deliverables List Items */
html.theme-designer .process-step div[style*="width: 20px;height: 2px"] {
    width: 24px !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--primary-color), var(--teal-accent)) !important;
    border-radius: 2px !important;
}

/* Quality Callout Boxes */
html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.05)"] {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(0, 217, 192, 0.08)) !important;
    border-left: 4px solid var(--teal-accent) !important;
    border-radius: 12px !important;
    padding: 20px !important;
}

html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.05)"] p:first-child {
    color: var(--teal-accent) !important;
    font-weight: 700 !important;
}

/* Fidelity Progress Bars (Prototype Step) */
html.theme-designer .process-step div[style*="height: 60px"] {
    border-radius: 12px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .process-step div[style*="background: #ffffff;border: 1px solid #42A5F5"] {
    background: white !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
}

html.theme-designer .process-step div[style*="background: rgba(66, 165, 245, 0.2)"] {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(0, 217, 192, 0.2)) !important;
    border: 2px solid var(--teal-accent) !important;
    color: var(--teal-accent) !important;
}

html.theme-designer .process-step div[style*="background: #42A5F5;color: white"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

html.theme-designer .process-step div[style*="height: 60px"]:hover {
    transform: translateY(-2px) scale(1.02) !important;
}

/* Impact Metrics */
html.theme-designer .process-step-5 div[style*="font-size: 24px"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 36px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--teal-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 8px !important;
}

/* Step 1 & 6 - Special Featured Cards */
html.theme-designer .process-step-1,
html.theme-designer .process-step-6 {
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    border: 3px solid var(--primary-color) !important;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2) !important;
}

/* Fix white text in Scale step */
html.theme-designer .process-step-6 h2,
html.theme-designer .process-step-6 p,
html.theme-designer .process-step-6 span {
    color: #333 !important;
}

html.theme-designer .process-step-6 p[style*="color: #42A5F5"] {
    color: var(--teal-accent) !important;
}

/* Fix Prototype Step - WIREFRAME text contrast */
html.theme-designer .process-step-4 div[style*="rgba(66, 165, 245, 0.2)"] {
    background: rgba(255, 107, 53, 0.15) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

html.theme-designer .process-step-4 div[style*="background: #ffffff"] {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

html.theme-designer .process-step-4 div[style*="background: #42A5F5"] {
    background: linear-gradient(135deg, var(--primary-color), var(--coral-pink)) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
}

/* Removed emoji decoration */

/* Collaboration Section */
html.theme-designer .process-collaboration {
    background: white !important;
    border: 3px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.12) !important;
    position: relative !important;
}

html.theme-designer .process-collaboration > div[style*="position: absolute"] {
    display: none !important;
}

/* Removed emoji decoration */

html.theme-designer .process-collaboration h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}

html.theme-designer .process-collaboration p[style*="text-transform: uppercase"],
html.theme-designer .framework-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--teal-accent) !important;
}

html.theme-designer .process-collaboration > div:last-child > div {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(0, 217, 192, 0.05)) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .process-collaboration > div:last-child > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15) !important;
    border-left-color: var(--teal-accent) !important;
}

html.theme-designer .process-collaboration h4 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
}

html.theme-designer .process-collaboration > div:last-child > div p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* ============================================
   PROCESS PHILOSOPHY - DESIGNER THEME
   Inspirational Quote Card
   ============================================ */

html.theme-designer .process-philosophy {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border: none !important;
    border-radius: 32px !important;
    padding: 64px 48px !important;
    text-align: center !important;
    position: relative !important;
    margin-top: 80px !important;
    box-shadow: 0 16px 48px rgba(255, 107, 53, 0.3) !important;
    overflow: visible !important;
}

/* Remove blueprint corners */
html.theme-designer .process-philosophy > div[style*="position: absolute"] {
    display: none !important;
}

/* Removed emoji decoration */

html.theme-designer .process-philosophy p:first-of-type,
html.theme-designer .philosophy-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-bottom: 16px !important;
    opacity: 0.9 !important;
}

html.theme-designer .process-philosophy h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: white !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-bottom: 24px !important;
}

html.theme-designer .process-philosophy > p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: white !important;
    line-height: 1.8 !important;
    max-width: 900px !important;
    margin: 0 auto 48px auto !important;
    opacity: 1 !important;
    font-style: italic !important;
}

/* Philosophy Principles Grid */
html.theme-designer .philosophy-principles {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
    margin-top: 48px !important;
}

html.theme-designer .philosophy-principle {
    background: white !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    min-width: 140px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .philosophy-principle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(0, 217, 192, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-designer .philosophy-principle:hover {
    transform: translateY(-12px) scale(1.08) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
    border-color: white !important;
}

html.theme-designer .philosophy-principle:hover::before {
    opacity: 1;
}

html.theme-designer .philosophy-principle > div:first-child {
    font-size: 48px !important;
    font-weight: 300 !important;
    margin-bottom: 16px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--teal-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    position: relative !important;
    z-index: 1 !important;
}

html.theme-designer .philosophy-principle > div:last-child {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ============================================
   PROCESS ADAPTABILITY - DESIGNER THEME
   Environment Cards
   ============================================ */

html.theme-designer .process-adaptability {
    margin: 60px 0 !important;
    padding: 48px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.1) !important;
}

html.theme-designer .adaptability-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    margin-bottom: 32px !important;
    text-align: center !important;
}

/* Removed emoji decoration */

html.theme-designer .adaptability-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 24px !important;
}

html.theme-designer .adaptability-card {
    background: white !important;
    border: 3px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .adaptability-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--teal-accent));
    transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-designer .adaptability-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .adaptability-card:hover::before {
    height: 100%;
}

/* Different colors for each card */
html.theme-designer .adaptability-card:nth-child(1)::before {
    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
}

html.theme-designer .adaptability-card:nth-child(2)::before {
    background: linear-gradient(180deg, var(--teal-accent), var(--primary-color));
}

html.theme-designer .adaptability-card:nth-child(3)::before {
    background: linear-gradient(180deg, var(--purple-accent), var(--coral-pink));
}

html.theme-designer .adaptability-card h4 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    margin: 0 0 12px 0 !important;
}

html.theme-designer .adaptability-card p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* Removed emoji decorations */

/* ============================================
   PROFESSIONAL TIMELINE - DESIGNER THEME
   Gamified Winding Path Journey
   ============================================ */

html.theme-designer .timeline-section {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #fff5f0 50%, #ffffff 100%) !important;
    border-top: none !important;
    padding: 80px 20px 100px 20px !important;
}

html.theme-designer .timeline-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    background: white !important;
    padding: 8px 24px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .timeline-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 900 !important;
    color: var(--primary-color) !important;
    letter-spacing: -2px !important;
    text-transform: none !important;
    margin-bottom: 16px !important;
}

html.theme-designer .timeline-subtitle {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    color: #666 !important;
    max-width: 800px !important;
}

/* Winding Path - SVG-like curved path */
html.theme-designer .timeline-path {
    width: 8px !important;
    background: linear-gradient(180deg,
        var(--primary-color) 0%,
        var(--coral-pink) 25%,
        var(--teal-accent) 50%,
        var(--purple-accent) 75%,
        var(--golden-yellow) 100%
    ) !important;
    border-radius: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.4) !important;
    opacity: 0.8 !important;
}

/* Alternate positioning for winding effect */
html.theme-designer .timeline-item:nth-child(1) { transform: translateX(-50px); }
html.theme-designer .timeline-item:nth-child(2) { transform: translateX(50px); }
html.theme-designer .timeline-item:nth-child(3) { transform: translateX(-80px); }
html.theme-designer .timeline-item:nth-child(4) { transform: translateX(80px); }
html.theme-designer .timeline-item:nth-child(5) { transform: translateX(-60px); }
html.theme-designer .timeline-item:nth-child(6) { transform: translateX(60px); }
html.theme-designer .timeline-item:nth-child(7) { transform: translateX(-70px); }
html.theme-designer .timeline-item:nth-child(8) { transform: translateX(70px); }
html.theme-designer .timeline-item:nth-child(9) { transform: translateX(-40px); }

/* Timeline Cards - Level Cards */
html.theme-designer .timeline-card {
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    width: 42% !important;
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15) !important;
}

/* Remove blueprint corners */
html.theme-designer .timeline-card > div[style*="position: absolute"][style*="width: 12px"] {
    display: none !important;
}

html.theme-designer .timeline-card:hover {
    transform: translateY(-12px) scale(1.03) !important;
    border-color: var(--teal-accent) !important;
    box-shadow:
        0 16px 48px rgba(255, 107, 53, 0.25),
        0 0 0 6px rgba(255, 107, 53, 0.1) !important;
}

/* Date badge - Level indicator style */
html.theme-designer .timeline-card > div:first-child {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--teal-accent), var(--purple-accent)) !important;
    color: white !important;
    padding: 6px 16px !important;
    border-radius: 12px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 16px !important;
}

/* Company name - Big bold */
html.theme-designer .timeline-card > div:nth-child(2) {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--primary-color) !important;
    margin-bottom: 8px !important;
    letter-spacing: -1px !important;
}

/* NEW badge styling */
html.theme-designer .timeline-card span[style*="background: #42A5F5"] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3) !important;
}

/* Role title */
html.theme-designer .timeline-card > div:nth-child(3) {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* Circular checkpoint markers on path */
html.theme-designer .timeline-item > div:last-child {
    width: 24px !important;
    height: 24px !important;
    background: white !important;
    border: 4px solid var(--primary-color) !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 0 8px rgba(255, 107, 53, 0.15),
        0 4px 12px rgba(255, 107, 53, 0.3) !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .timeline-item:hover > div:last-child {
    width: 32px !important;
    height: 32px !important;
    border-width: 6px !important;
    box-shadow:
        0 0 0 12px rgba(255, 107, 53, 0.25),
        0 6px 20px rgba(255, 107, 53, 0.5) !important;
}

/* Color-code checkpoints by recency */
html.theme-designer .timeline-item:nth-child(1) > div:last-child,
html.theme-designer .timeline-item:nth-child(2) > div:last-child {
    border-color: var(--primary-color) !important; /* Current: Orange */
}

html.theme-designer .timeline-item:nth-child(3) > div:last-child,
html.theme-designer .timeline-item:nth-child(4) > div:last-child,
html.theme-designer .timeline-item:nth-child(5) > div:last-child {
    border-color: var(--teal-accent) !important; /* Recent: Teal */
}

html.theme-designer .timeline-item:nth-child(6) > div:last-child,
html.theme-designer .timeline-item:nth-child(7) > div:last-child {
    border-color: var(--purple-accent) !important; /* Mid-career: Purple */
}

html.theme-designer .timeline-item:nth-child(8) > div:last-child,
html.theme-designer .timeline-item:nth-child(9) > div:last-child {
    border-color: var(--coral-pink) !important; /* Early: Coral */
}

/* Hover Dashboard - Expandable details */
html.theme-designer .hover-dashboard {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border-top: 2px solid rgba(255, 107, 53, 0.2) !important;
    margin-top: 20px !important;
}

html.theme-designer .timeline-card:hover .hover-dashboard {
    max-height: 800px !important;
}

html.theme-designer .hover-dashboard p {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #555 !important;
}

/* Metrics grid inside cards */
html.theme-designer .hover-dashboard > div > div[style*="display: grid"] > div {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.08), rgba(0, 217, 192, 0.08)) !important;
    border-left: 4px solid var(--primary-color) !important;
    border-radius: 12px !important;
    padding: 16px !important;
}

html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="PLATFORMS"],
html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="WORKFLOW"],
html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="FUNDING"],
html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="SECTOR"],
html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="PLATFORM"],
html.theme-designer .hover-dashboard div[style*="font-size: 10px"][style*="FOCUS"],
html.theme-designer .hover-dashboard div[style*="KEY_DELIVERABLES"],
html.theme-designer .hover-dashboard div[style*="CONTRIBUTIONS"],
html.theme-designer .hover-dashboard div[style*="RESPONSIBILITIES"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

html.theme-designer .hover-dashboard div[style*="font-size: 12px"] {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #333 !important;
}

html.theme-designer .hover-dashboard div[style*="font-size: 18px"] {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--teal-accent)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .hover-dashboard div[style*="font-size: 11px"][style*="line-height: 1.6"] {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #666 !important;
}

/* ========================================
   DESIGNER THEME: Organization Journey - Achievement Badge Collection
   ======================================== */

/* Section Styling */
html.theme-designer .organization-journey {
    margin-top: 120px !important;
    padding: 80px 40px !important;
    border-top: none !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 50%, #f0f9ff 100%) !important;
    border-radius: 32px !important;
    position: relative !important;
}

html.theme-designer .organization-journey::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--coral-pink) 25%,
        var(--teal-accent) 50%,
        var(--purple-accent) 75%,
        var(--golden-yellow) 100%
    );
    background-size: 200% 100%;
    animation: borderRainbow 8s ease infinite;
    border-radius: 32px 32px 0 0;
}

/* Title Styling */
html.theme-designer .organization-journey-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

html.theme-designer .organization-journey-title::after {
    content: 'ACHIEVEMENT BADGES UNLOCKED';
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-top: 12px;
    background: linear-gradient(90deg, var(--teal-accent) 0%, var(--purple-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Grid Layout */
html.theme-designer .organization-journey-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    margin-top: 60px !important;
}

/* Badge Cards */
html.theme-designer .organization-card {
    background: #ffffff !important;
    padding: 32px 24px !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    text-align: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
}

html.theme-designer .organization-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 50%,
        var(--teal-accent) 100%
    );
    border-radius: 24px 24px 0 0;
}

html.theme-designer .organization-card::after {
    content: '★';
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    color: var(--golden-yellow);
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover Effects */
html.theme-designer .organization-card:hover {
    transform: translateY(-12px) scale(1.05) !important;
    border-color: var(--teal-accent) !important;
    box-shadow:
        0 20px 48px rgba(255, 107, 53, 0.3),
        0 0 0 6px rgba(0, 217, 192, 0.1) !important;
}

html.theme-designer .organization-card:hover::after {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Badge Color Variations */
html.theme-designer .organization-card:nth-child(1) {
    border-color: var(--primary-color) !important;
}

html.theme-designer .organization-card:nth-child(2) {
    border-color: var(--coral-pink) !important;
}

html.theme-designer .organization-card:nth-child(3) {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .organization-card:nth-child(4) {
    border-color: var(--purple-accent) !important;
}

html.theme-designer .organization-card:nth-child(5) {
    border-color: var(--golden-yellow) !important;
}

html.theme-designer .organization-card:nth-child(6) {
    border-color: var(--primary-color) !important;
}

/* Hover Border Color Variations */
html.theme-designer .organization-card:nth-child(1):hover {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .organization-card:nth-child(2):hover {
    border-color: var(--purple-accent) !important;
}

html.theme-designer .organization-card:nth-child(3):hover {
    border-color: var(--coral-pink) !important;
}

html.theme-designer .organization-card:nth-child(4):hover {
    border-color: var(--golden-yellow) !important;
}

html.theme-designer .organization-card:nth-child(5):hover {
    border-color: var(--primary-color) !important;
}

html.theme-designer .organization-card:nth-child(6):hover {
    border-color: var(--teal-accent) !important;
}

/* Organization Name */
html.theme-designer .organization-name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 12px !important;
    margin-top: 8px !important;
    color: #333 !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .organization-card:hover .organization-name {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--teal-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transform: scale(1.1) !important;
}

/* Organization Dates */
html.theme-designer .organization-dates {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .organization-card:hover .organization-dates {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

/* ========================================
   DESIGNER THEME: Testimonials Section
   ======================================== */

/* Section Container */
html.theme-designer .testimonials-section {
    background: linear-gradient(180deg, #ffffff 0%, #fff5f0 100%) !important;
    padding: 100px 40px !important;
}

/* Header */
html.theme-designer .testimonials-header {
    text-align: center !important;
    margin-bottom: 60px !important;
}

html.theme-designer .testimonials-label {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--teal-accent) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

html.theme-designer .testimonials-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Testimonial Cards */
html.theme-designer .testimonial-card {
    background: #ffffff !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    margin-bottom: 32px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
}

html.theme-designer .testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--coral-pink) 50%,
        var(--teal-accent) 100%
    );
    border-radius: 24px 24px 0 0;
}

html.theme-designer .testimonial-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--teal-accent) !important;
    box-shadow: 0 16px 40px rgba(255, 107, 53, 0.25) !important;
}

/* Quote Mark */
html.theme-designer .testimonial-quote-mark {
    color: var(--primary-color) !important;
    font-size: 72px !important;
    font-family: Georgia, serif !important;
    margin: 12px 0 20px 0 !important;
    line-height: 1 !important;
    opacity: 0.3 !important;
}

/* Testimonial Text */
html.theme-designer .testimonial-text {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #333 !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    margin: 0 0 32px 0 !important;
    background: linear-gradient(90deg,
        #333 0%,
        #333 30%,
        var(--primary-color) 45%,
        var(--coral-pink) 50%,
        var(--teal-accent) 55%,
        #333 70%,
        #333 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #333;
    background-clip: text;
    transition: background-position 0s ease, -webkit-text-fill-color 0s ease;
}

html.theme-designer .testimonial-card:hover .testimonial-text {
    -webkit-text-fill-color: transparent !important;
    background-position: -200% 0%;
    transition: background-position 1.5s ease, -webkit-text-fill-color 0.1s ease;
}

/* Footer */
html.theme-designer .testimonial-footer {
    border-top: 2px solid rgba(255, 107, 53, 0.15) !important;
    padding-top: 24px !important;
}

html.theme-designer .testimonial-author {
    font-family: 'Space Grotesk', sans-serif !important;
    color: var(--primary-color) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
}

html.theme-designer .testimonial-role {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #888 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Overlay (hidden by default in business theme, we'll style it for designer) */
html.theme-designer .testimonial-overlay {
    display: none !important;
}

/* ========================================
   DESIGNER THEME: About Section - Playful & Interactive
   ======================================== */

/* Section Container */
html.theme-designer .about-section {
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 50%, #f0f9ff 100%) !important;
    padding: 120px 40px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Floating particles animation */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-30px) translateX(10px); }
}

html.theme-designer .about-section::before {
    content: '◆';
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 24px;
    color: var(--primary-color);
    opacity: 0.15;
    animation: float 6s ease-in-out infinite;
}

html.theme-designer .about-section::after {
    content: '◆';
    position: absolute;
    bottom: 15%;
    right: 8%;
    font-size: 32px;
    color: var(--teal-accent);
    opacity: 0.15;
    animation: floatSlow 8s ease-in-out infinite;
}

/* Header */
html.theme-designer .about-header {
    text-align: center !important;
    margin-bottom: 80px !important;
}

html.theme-designer .about-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--teal-accent) !important;
    margin: 0 0 40px 0 !important;
}

/* Title with playful hover */
html.theme-designer .about-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 64px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1.1 !important;
    margin: 0 0 60px 0 !important;
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--coral-pink) 33%,
        var(--teal-accent) 66%,
        var(--purple-accent) 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

html.theme-designer .about-title:hover {
    transform: scale(1.05) !important;
    letter-spacing: 2px !important;
}

/* Body Text */
html.theme-designer .about-body {
    margin-bottom: 80px !important;
}

html.theme-designer .about-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important;
    line-height: 1.8 !important;
    color: #333 !important;
    font-weight: 400 !important;
    margin: 0 0 30px 0 !important;
}

/* Metrics Bar - Interactive Cards */
html.theme-designer .about-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    border: none !important;
}

html.theme-designer .metric-card {
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 40px 32px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
}

html.theme-designer .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-pink), var(--teal-accent));
    border-radius: 24px 24px 0 0;
}

/* Confetti explosion on hover */
@keyframes confetti {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

html.theme-designer .metric-card:hover {
    transform: translateY(-12px) scale(1.08) rotate(2deg) !important;
    border-color: var(--teal-accent) !important;
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.4) !important;
}

html.theme-designer .metric-card:nth-child(1) {
    border-color: var(--primary-color) !important;
}

html.theme-designer .metric-card:nth-child(2) {
    border-color: var(--coral-pink) !important;
}

html.theme-designer .metric-card:nth-child(3) {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .metric-number {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .metric-card:hover .metric-number {
    transform: scale(1.2) !important;
}

html.theme-designer .metric-label-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
}

/* ========================================
   DESIGNER THEME: Skills Section - Gamified Skill Bars
   ======================================== */

html.theme-designer .skills-section {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%) !important;
    padding: 120px 40px !important;
}

html.theme-designer .skills-header {
    text-align: center !important;
    margin-bottom: 80px !important;
}

html.theme-designer .skills-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--purple-accent) !important;
    margin: 0 0 20px 0 !important;
}

html.theme-designer .skills-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .skills-group {
    margin-bottom: 80px !important;
}

html.theme-designer .skills-group-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--primary-color) !important;
    margin: 0 0 32px 0 !important;
}

/* Skill Cards */
html.theme-designer .skills-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

html.theme-designer .skill-card {
    background: white !important;
    border: 2px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html.theme-designer .skill-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .skill-name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 0 16px 0 !important;
}

/* Animated skill bars */
@keyframes fillBar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

html.theme-designer .skill-bars {
    display: flex !important;
    gap: 6px !important;
}

html.theme-designer .skill-bar {
    width: 20px !important;
    height: 20px !important;
    background: #f0f0f0 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .skill-bar-filled {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    transform-origin: left !important;
    animation: fillBar 0.6s ease-out !important;
}

html.theme-designer .skill-card:hover .skill-bar-filled {
    background: linear-gradient(135deg, var(--teal-accent) 0%, var(--purple-accent) 100%) !important;
    transform: scale(1.15) !important;
}

/* ========================================
   DESIGNER THEME: Tools & Software - Expandable Card
   ======================================== */

html.theme-designer .tools-group {
    margin-bottom: 80px !important;
}

html.theme-designer .tools-details {
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
    transition: all 0.4s ease !important;
}

html.theme-designer .tools-details:hover {
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.25) !important;
}

html.theme-designer .tools-details[open] {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .tools-summary {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--primary-color) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .tools-summary:hover {
    color: var(--coral-pink) !important;
}

html.theme-designer .tools-icon {
    font-size: 28px !important;
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .tools-details[open] .tools-icon {
    transform: rotate(45deg) !important;
    color: var(--teal-accent) !important;
}

html.theme-designer .tools-content {
    margin-top: 24px !important;
    padding-top: 24px !important;
    border-top: 2px solid rgba(255, 107, 53, 0.15) !important;
}

html.theme-designer .tool-category {
    margin-bottom: 20px !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .tool-category:hover {
    border-left-color: var(--teal-accent) !important;
    transform: translateX(4px) !important;
}

html.theme-designer .tool-category-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--primary-color) !important;
    margin: 0 0 8px 0 !important;
}

html.theme-designer .tool-category-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 15px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* ========================================
   DESIGNER THEME: Methodologies - Badge Grid
   ======================================== */

html.theme-designer .methodologies-group {
    margin-bottom: 80px !important;
}

html.theme-designer .methodologies-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

html.theme-designer .methodology-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: white !important;
    border: 2px solid rgba(255, 107, 53, 0.2) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html.theme-designer .methodology-item:hover {
    border-color: var(--primary-color) !important;
    transform: translateX(8px) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .methodology-bullet {
    width: 12px !important;
    height: 12px !important;
    background: linear-gradient(135deg, var(--primary-color), var(--coral-pink)) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .methodology-item:hover .methodology-bullet {
    background: linear-gradient(135deg, var(--teal-accent), var(--purple-accent)) !important;
    transform: scale(1.5) !important;
}

html.theme-designer .methodology-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
}

/* ========================================
   DESIGNER THEME: Industry Experience - Playful Tags
   ======================================== */

html.theme-designer .industry-group {
    margin-bottom: 60px !important;
}

html.theme-designer .industry-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

html.theme-designer .industry-tag {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .industry-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

html.theme-designer .industry-tag:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 12px 32px rgba(255, 107, 53, 0.4) !important;
    background: linear-gradient(135deg, var(--teal-accent) 0%, var(--purple-accent) 100%) !important;
}

html.theme-designer .industry-tag:hover::before {
    left: 100%;
}

html.theme-designer .industry-tag:active {
    animation: bounce 0.4s ease !important;
}

html.theme-designer .industry-tag-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ========================================
   DESIGNER THEME: Compass-Driven Design Section
   ======================================== */

/* Section Container - this is at the end of skills section */
html.theme-designer .process-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #fff5f0 100%) !important;
    padding: 120px 40px !important;
}

html.theme-designer .process-header {
    text-align: center !important;
    margin-bottom: 80px !important;
}

html.theme-designer .process-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--purple-accent) !important;
    margin: 0 0 24px 0 !important;
}

/* Compass-Driven Design Title with Rainbow Hover */
html.theme-designer .process-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1.2 !important;
    margin: 0 0 32px 0 !important;
    color: #333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: inline-block !important;
}

/* Rainbow gradient animation on hover */
@keyframes rainbowShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html.theme-designer .process-title:hover {
    background: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--coral-pink) 14%,
        var(--golden-yellow) 28%,
        var(--teal-accent) 42%,
        var(--purple-accent) 56%,
        var(--primary-color) 70%,
        var(--coral-pink) 84%,
        var(--golden-yellow) 100%
    ) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: rainbowShift 3s ease infinite !important;
    transform: scale(1.05) !important;
    letter-spacing: 0px !important;
}

/* Process Description with Color Shift */
html.theme-designer .process-description {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important;
    color: #666 !important;
    line-height: 1.8 !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    transition: color 0.3s ease !important;
}

html.theme-designer .process-header:hover .process-description {
    color: var(--primary-color) !important;
}

/* Individual words get staggered color on hover */
html.theme-designer .process-description::first-line {
    font-weight: 500 !important;
}

/* Process Steps - Fix contrast on light background */
html.theme-designer .process-steps {
    margin-top: 80px !important;
}

html.theme-designer .process-step {
    display: flex !important;
    gap: 32px !important;
    margin-bottom: 60px !important;
    position: relative !important;
}

html.theme-designer .process-step-number-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 80px !important;
}

html.theme-designer .process-step-number {
    width: 80px !important;
    height: 80px !important;
    background: white !important;
    border: 4px solid var(--primary-color) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.2) !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .process-step:hover .process-step-number {
    border-color: var(--teal-accent) !important;
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3) !important;
}

html.theme-designer .process-step-number-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--primary-color), var(--coral-pink)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .process-step-content {
    flex: 1 !important;
    padding-bottom: 20px !important;
}

html.theme-designer .process-step-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 0 16px 0 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: color 0.3s ease !important;
}

html.theme-designer .process-step:hover .process-step-title {
    color: var(--primary-color) !important;
}

html.theme-designer .process-step-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 17px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* ========================================
   DESIGNER THEME: Experience & Impact Section
   ======================================== */

html.theme-designer .impact-section {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%) !important;
    padding: 120px 40px !important;
}

html.theme-designer .impact-header {
    margin-bottom: 80px !important;
}

html.theme-designer .impact-label {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    color: var(--coral-pink) !important;
    margin: 0 0 24px 0 !important;
}

html.theme-designer .impact-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    letter-spacing: -2px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Grid Layout */
html.theme-designer .impact-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
    gap: 60px !important;
}

/* Career Highlights */
html.theme-designer .impact-highlight {
    margin-bottom: 60px !important;
    padding: 32px !important;
    background: white !important;
    border-left: 6px solid var(--primary-color) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html.theme-designer .impact-highlight:hover {
    transform: translateX(8px) !important;
    border-left-color: var(--teal-accent) !important;
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .impact-highlight:nth-child(1) {
    border-left-color: var(--primary-color) !important;
}

html.theme-designer .impact-highlight:nth-child(2) {
    border-left-color: var(--coral-pink) !important;
}

html.theme-designer .impact-highlight:nth-child(3) {
    border-left-color: var(--teal-accent) !important;
}

html.theme-designer .impact-highlight:nth-child(4) {
    border-left-color: var(--purple-accent) !important;
}

html.theme-designer .impact-bullet {
    display: none !important;
}

html.theme-designer .impact-highlight-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    color: #333 !important;
    transition: color 0.3s ease !important;
}

html.theme-designer .impact-highlight:hover .impact-highlight-title {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--teal-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .impact-highlight-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 17px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.7 !important;
}

/* Side Projects Box */
html.theme-designer .impact-side-projects {
    position: sticky !important;
    top: 120px !important;
}

html.theme-designer .impact-side-box {
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 48px !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .impact-side-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg,
        var(--primary-color) 0%,
        var(--coral-pink) 33%,
        var(--teal-accent) 66%,
        var(--purple-accent) 100%
    );
    border-radius: 24px 24px 0 0;
}

html.theme-designer .impact-side-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 40px 0 !important;
    color: var(--primary-color) !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Side Projects */
html.theme-designer .side-project {
    margin-bottom: 40px !important;
    padding: 24px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    border-radius: 16px !important;
    border-left: 4px solid var(--primary-color) !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .side-project:hover {
    transform: translateX(4px) !important;
    border-left-color: var(--teal-accent) !important;
}

html.theme-designer .side-project:nth-child(1) {
    border-left-color: var(--primary-color) !important;
}

html.theme-designer .side-project:nth-child(2) {
    border-left-color: var(--teal-accent) !important;
}

html.theme-designer .side-project:nth-child(3) {
    border-left-color: var(--purple-accent) !important;
}

/* Hide emojis */
html.theme-designer .side-project-icon {
    display: none !important;
}

html.theme-designer .side-project-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    color: #333 !important;
}

html.theme-designer .side-project-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 15px !important;
    color: #666 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.7 !important;
}

html.theme-designer .side-project-link {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--teal-accent) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

html.theme-designer .side-project-link:hover {
    color: var(--primary-color) !important;
    transform: translateX(4px) !important;
}

/* ========================================
   DESIGNER THEME: More About Me Section
   ======================================== */

html.theme-designer .about-me-section {
    background: linear-gradient(135deg, #f0f9ff 0%, #fff5f0 100%) !important;
    color: #333 !important;
    padding: 120px 40px !important;
}

/* Section Title */
html.theme-designer .about-me-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 48px !important;
    font-weight: 800 !important;
    margin: 0 0 60px 0 !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--teal-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Fun Facts Grid */
html.theme-designer .about-me-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px !important;
    margin-bottom: 80px !important;
}

html.theme-designer .about-me-item {
    display: flex !important;
    align-items: start !important;
    gap: 16px !important;
    padding: 24px !important;
    background: white !important;
    border-radius: 16px !important;
    border-left: 4px solid var(--primary-color) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.1) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html.theme-designer .about-me-item:hover {
    transform: translateX(8px) !important;
    border-left-color: var(--teal-accent) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .about-me-item:nth-child(1) {
    border-left-color: var(--primary-color) !important;
}

html.theme-designer .about-me-item:nth-child(2) {
    border-left-color: var(--coral-pink) !important;
}

html.theme-designer .about-me-item:nth-child(3) {
    border-left-color: var(--teal-accent) !important;
}

html.theme-designer .about-me-item:nth-child(4) {
    border-left-color: var(--purple-accent) !important;
}

html.theme-designer .about-me-bullet {
    color: var(--primary-color) !important;
    font-size: 24px !important;
    line-height: 1.6 !important;
    font-weight: 700 !important;
}

html.theme-designer .about-me-text {
    margin: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 17px !important;
    color: #666 !important;
    line-height: 1.7 !important;
}

/* CTA Section */
html.theme-designer .about-me-cta {
    text-align: center !important;
    padding-top: 60px !important;
    border-top: 3px solid rgba(255, 107, 53, 0.2) !important;
}

html.theme-designer .about-me-cta-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    margin: 0 0 40px 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--purple-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .about-me-cta-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}

/* Primary CTA Button */
html.theme-designer .cta-button-primary {
    display: inline-block !important;
    padding: 18px 48px !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .cta-button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

html.theme-designer .cta-button-primary:hover {
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 0 16px 48px rgba(255, 107, 53, 0.4) !important;
    background: linear-gradient(135deg, var(--teal-accent) 0%, var(--purple-accent) 100%) !important;
}

html.theme-designer .cta-button-primary:hover::before {
    left: 100%;
}

/* Secondary CTA Button */
html.theme-designer .cta-button-secondary {
    display: inline-block !important;
    padding: 18px 48px !important;
    background: transparent !important;
    color: var(--primary-color) !important;
    text-decoration: none !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 50px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
}

html.theme-designer .cta-button-secondary:hover {
    transform: translateY(-4px) scale(1.05) !important;
    background: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 16px 48px rgba(255, 107, 53, 0.3) !important;
}

/* ========================================
   DESIGNER THEME: Skills & Tools Section
   ======================================== */

html.theme-designer .skills {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%) !important;
    padding: 120px 40px !important;
}

html.theme-designer .skills .section-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 0 80px 0 !important;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--coral-pink) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .skills-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

html.theme-designer .skill-category {
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-pink), var(--teal-accent));
    border-radius: 24px 24px 0 0;
}

html.theme-designer .skill-category:hover {
    transform: translateY(-12px) rotate(2deg) !important;
    border-color: var(--teal-accent) !important;
    box-shadow: 0 20px 48px rgba(255, 107, 53, 0.3) !important;
}

html.theme-designer .skill-category:nth-child(1) {
    border-color: var(--primary-color) !important;
}

html.theme-designer .skill-category:nth-child(2) {
    border-color: var(--coral-pink) !important;
}

html.theme-designer .skill-category:nth-child(3) {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .skill-category h3 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 0 24px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--primary-color) !important;
}

html.theme-designer .skill-category ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.theme-designer .skill-category li {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #666 !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%) !important;
    border-radius: 12px !important;
    border-left: 4px solid var(--primary-color) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html.theme-designer .skill-category li:hover {
    transform: translateX(8px) !important;
    border-left-color: var(--teal-accent) !important;
    background: linear-gradient(135deg, var(--primary-color), var(--coral-pink)) !important;
    color: white !important;
}

/* ========================================
   DESIGNER THEME: Contact Section
   ======================================== */

html.theme-designer .contact {
    background: linear-gradient(135deg, #f0f9ff 0%, #fff5f0 100%) !important;
    padding: 120px 40px !important;
}

html.theme-designer .contact .section-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 56px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin: 0 0 32px 0 !important;
    background: linear-gradient(135deg, var(--teal-accent) 0%, var(--purple-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

html.theme-designer .contact-intro {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 20px !important;
    color: #666 !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 0 auto 60px auto !important;
    line-height: 1.7 !important;
}

html.theme-designer .contact-methods {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

html.theme-designer .contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 32px !important;
    background: white !important;
    border: 3px solid var(--primary-color) !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-designer .contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--teal-accent));
    border-radius: 24px 24px 0 0;
}

html.theme-designer .contact-item:hover {
    transform: translateY(-8px) scale(1.03) !important;
    border-color: var(--teal-accent) !important;
    box-shadow: 0 16px 40px rgba(255, 107, 53, 0.3) !important;
}

html.theme-designer .contact-item:nth-child(1) {
    border-color: var(--primary-color) !important;
}

html.theme-designer .contact-item:nth-child(2) {
    border-color: var(--coral-pink) !important;
}

html.theme-designer .contact-item:nth-child(3) {
    border-color: var(--teal-accent) !important;
}

html.theme-designer .contact-item:nth-child(4) {
    border-color: var(--purple-accent) !important;
}

html.theme-designer .contact-item .icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--primary-color), var(--coral-pink)) !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    transition: all 0.3s ease !important;
}

html.theme-designer .contact-item:hover .icon {
    background: linear-gradient(135deg, var(--teal-accent), var(--purple-accent)) !important;
    transform: rotate(360deg) scale(1.1) !important;
}

html.theme-designer .contact-item span:not(.icon) {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    transition: color 0.3s ease !important;
}

html.theme-designer .contact-item:hover span:not(.icon) {
    color: var(--primary-color) !important;
}

/* ========================================
   DESIGNER THEME: Footer
   ======================================== */

html.theme-designer .footer {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f0 100%) !important;
    padding: 60px 40px !important;
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, var(--primary-color), var(--coral-pink), var(--teal-accent), var(--purple-accent)) 1 !important;
}

html.theme-designer .footer p {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-align: center !important;
    margin: 0 !important;
}

html.theme-designer .footer p::before {
    content: '◆ ';
    color: var(--primary-color);
    font-size: 12px;
    margin-right: 8px;
}

html.theme-designer .footer p::after {
    content: ' ◆';
    color: var(--teal-accent);
    font-size: 12px;
    margin-left: 8px;
}

/* BUSINESS THEME: Terminal Type-Out Effect */
html.theme-business .logo {
    font-family: var(--font-family-mono);
}

html.theme-business .logo-short {
    transition: opacity 0.3s ease 1.2s;
}

html.theme-business .logo-full {
    font-family: var(--font-family-mono);
    overflow: hidden;
    width: 0;
    transition: width 1.2s steps(12), opacity 0.2s ease;
    opacity: 1;
    border-right: 2px solid var(--primary-color);
    animation: none;
}

html.theme-business .logo:hover .logo-short {
    opacity: 0;
    transition: opacity 0.2s ease;
}

html.theme-business .logo:hover .logo-full {
    width: 12ch;
    opacity: 1;
    transition: width 1.2s steps(12) 0.2s, opacity 0.1s ease 0.2s;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary-color); }
}

/* Terminal cursor effect */
html.theme-business .logo::before {
    content: '>';
    position: absolute;
    left: -1.2em;
    color: var(--accent-color);
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
    font-family: var(--font-family-mono);
}

html.theme-business .logo:hover::before {
    opacity: 1;
    transition: opacity 0.3s ease 0.2s;
}

/* MENTOR THEME: Handwritten Reveal */
html.theme-mentor .logo-short {
    transition: opacity 0.3s ease 1.5s;
}

html.theme-mentor .logo-full {
    font-family: 'Comic Sans MS', cursive, sans-serif;
    transition: opacity 0.5s ease, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-10px);
    filter: blur(3px);
}

html.theme-mentor .logo:hover .logo-short {
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-mentor .logo:hover .logo-full {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
    transition: opacity 0.3s ease 0.2s, transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: handwritingDraw 1.5s ease-out forwards;
}

@keyframes handwritingDraw {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* Pen trail effect */
html.theme-mentor .logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), transparent);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease 1s;
    pointer-events: none;
    opacity: 0;
}

html.theme-mentor .logo:hover::after {
    transform: translateY(-50%) scaleX(1);
    opacity: 1;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease 1s;
}

/* CLASSIC/UNDECIDED THEME: Letterpress Stamp Effect */
html.theme-classic .logo,
html.theme-undecided .logo {
    font-family: Georgia, serif;
}

html.theme-classic .logo-short,
html.theme-undecided .logo-short {
    transition: opacity 0.3s ease 0.6s, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-classic .logo-full,
html.theme-undecided .logo-full {
    font-family: Georgia, serif;
    font-weight: 700;
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), filter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0.8) translateY(10px);
    filter: blur(2px);
}

html.theme-classic .logo:hover .logo-short,
html.theme-undecided .logo:hover .logo-short {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    transition: opacity 0.2s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-classic .logo:hover .logo-full,
html.theme-undecided .logo:hover .logo-full {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), filter 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Halftone dots effect on hover */
html.theme-classic .logo::before,
html.theme-undecided .logo::before {
    content: '';
    position: absolute;
    inset: -10px;
    background-image: radial-gradient(circle at center, #000000 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
    pointer-events: none;
    z-index: -1;
}

html.theme-classic .logo:hover::before,
html.theme-undecided .logo:hover::before {
    opacity: 0.15;
    animation: halftoneSpread 0.6s ease-out forwards;
}

@keyframes halftoneSpread {
    0% {
        transform: scale(0.5);
        opacity: 0.3;
    }
    100% {
        transform: scale(1);
        opacity: 0.15;
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    color: var(--navbar-text);
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--navbar-logo);
    transition: var(--transition-base);
}

.nav-link:hover::after {
    width: 100%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--navbar-text);
    transition: var(--transition-base);
}

/* ===== Hero Section ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rem 2rem 2rem;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

.hero-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-tight);
}

.highlight {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-2xl);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-weight: var(--btn-font-weight);
    transition: var(--transition-spring);
    display: inline-block;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.hero-image {
    flex: 1;
    max-width: 400px;
}

.hero-image img {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-spring);
}

/* ===== Section Styles ===== */
section {
    padding: 5rem 2rem;
}

.section-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: var(--radius-sm);
}

/* ===== About Section ===== */
.about {
    background-color: var(--bg-secondary);
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-text p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-relaxed);
}

/* ===== Projects Section ===== */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.project-card {
    background-color: var(--bg-primary);
    border-radius: var(--card-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--transition-spring);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.project-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: var(--bg-secondary);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-spring);
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-info {
    padding: var(--card-padding);
}

.project-info h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.project-info p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.project-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.tag {
    background-color: var(--bg-secondary);
    color: var(--primary-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: var(--transition-base);
}

.project-link {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.project-link:hover {
    color: var(--secondary-color);
}

/* ===== 3D Card Stack Carousel - UNIFIED BASE ===== */
.project-carousel {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 0;
}

/* 3D Perspective Container */
.carousel-perspective {
    position: relative;
    perspective: 1800px;
    perspective-origin: 50% 50%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Stack Container */
.carousel-stack {
    position: relative;
    width: 800px;
    height: 500px;
    transform-style: preserve-3d;
}

/* Individual Project Cards - BASE STRUCTURE */
.project-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Default hidden state for all cards */
.project-card {
    transform: translateX(-150%) translateZ(-400px) rotateY(-35deg) scale(0.6);
    opacity: 0;
}

/* Active center card - full size, in focus */
.project-card[data-position="0"] {
    transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 100;
}

/* Right side cards - stacked perspective */
.project-card[data-position="1"] {
    transform: translateX(40%) translateZ(-150px) rotateY(-20deg) scale(0.85);
    opacity: 0.7;
    z-index: 90;
}

.project-card[data-position="2"] {
    transform: translateX(60%) translateZ(-300px) rotateY(-30deg) scale(0.7);
    opacity: 0.5;
    z-index: 80;
}

/* Left side cards - stacked perspective */
.project-card[data-position="-1"] {
    transform: translateX(-40%) translateZ(-150px) rotateY(20deg) scale(0.85);
    opacity: 0.7;
    z-index: 90;
}

.project-card[data-position="-2"] {
    transform: translateX(-60%) translateZ(-300px) rotateY(30deg) scale(0.7);
    opacity: 0.5;
    z-index: 80;
}

/* Floating Navigation Orbs - BASE */
.carousel-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    pointer-events: none;
    z-index: 200;
}

.nav-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.nav-orb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}

.nav-orb:active {
    transform: scale(0.95);
}

.nav-orb svg {
    width: 24px;
    height: 24px;
    color: #333;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.prev-orb:hover svg {
    transform: translateX(-2px);
}

.next-orb:hover svg {
    transform: translateX(2px);
}

/* Elegant Progress Indicator */
.carousel-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.progress-track {
    position: relative;
    width: 300px;
    height: 6px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.08) 100%);
    border-radius: 10px;
    overflow: visible;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg,
        var(--gradient-start) 0%,
        var(--gradient-end) 100%);
    border-radius: 10px;
    width: 7.69%; /* 1/13 */
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: var(--shadow-glow);
}

.progress-handle {
    position: absolute;
    top: 50%;
    left: 7.69%; /* Matches initial width */
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg,
        var(--gradient-start) 0%,
        var(--gradient-end) 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-glow),
                0 0 0 3px rgba(255, 255, 255, 0.9);
    transition: left 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
}

.progress-handle::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: white;
    border-radius: 50%;
}

.progress-label {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.current-number {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg,
        var(--gradient-start) 0%,
        var(--gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.divider {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--text-secondary);
    opacity: 0.5;
}

.total-number {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1;
}

.counter-separator {
    color: var(--text-secondary);
}

.total-count {
    color: var(--text-secondary);
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.indicator:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.2);
}

.indicator.active {
    background: var(--primary-color);
    width: 28px;
    border-radius: 5px;
}

/* ===== Skills Section ===== */
.skills {
    background-color: var(--bg-secondary);
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.skill-category {
    background-color: var(--bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: var(--transition-spring);
}

.skill-category h3 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.skill-category ul {
    list-style: none;
}

.skill-category li {
    padding: 0.5rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.5rem;
}

.skill-category li::before {
    content: '�';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* ===== Contact Section ===== */
.contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-intro {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    transition: var(--transition-spring);
}

.contact-item:hover {
    background-color: var(--primary-color);
    color: white;
    transform: translateX(8px);
}

.contact-item .icon {
    font-size: 1.5rem;
}

/* ===== Footer ===== */
.footer {
    background-color: var(--text-primary);
    color: white;
    text-align: center;
    padding: 2rem;
}

.footer p {
    color: rgba(255, 255, 255, 0.8);
}

/* ===== Responsive Design ===== */

/* iPad Pro and large tablets (1024px) */
@media (max-width: 1024px) {
    .hero {
        gap: 2rem;
    }

    .hero-image {
        max-width: 350px;
    }

    .section {
        padding: 4rem 1.5rem;
    }

    /* Fix for iOS Safari 100vh issue */
    .hero {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
}

@media (max-width: 768px) {
    /* ===== Touch-Friendly Tap Targets (44px minimum) ===== */
    .nav-link {
        display: block;
        padding: 12px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hamburger {
        display: flex;
        padding: 10px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .btn,
    button,
    [role="button"] {
        min-height: 44px;
        padding: 12px 20px;
    }

    .dot {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-link,
    .footer a {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Resume navigation buttons */
    .resume-nav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* ===== Navigation ===== */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-primary);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .hero {
        flex-direction: column-reverse;
        text-align: center;
        padding-top: 5rem;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-image {
        max-width: 300px;
    }

    .section-title {
        font-size: 2rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
    /* Base font size for readability */
    body {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Hero section */
    .hero {
        padding: 4rem 1rem 2rem;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    /* Section titles */
    .section-title {
        font-size: 1.5rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    /* Cards and content */
    .case-study-card h3,
    .project-title {
        font-size: 1.1rem;
    }

    .case-study-card p,
    .project-description {
        font-size: 0.9rem;
    }

    /* Buttons - ensure touch-friendly size */
    .btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
        min-height: 44px;
    }

    /* Navigation */
    .nav-link {
        font-size: 1rem;
        padding: 1rem;
    }

    /* Footer */
    .footer {
        padding: 1.5rem 1rem;
    }

    .footer p {
        font-size: 0.9rem;
    }

    /* Testimonials */
    .testimonial-text {
        font-size: 0.95rem;
    }

    /* Skills */
    .skill-card h3 {
        font-size: 1rem;
    }

    /* Timeline */
    .timeline-card h3 {
        font-size: 1rem;
    }

    .timeline-card p {
        font-size: 0.9rem;
    }

    /* Contact section */
    .contact-info {
        font-size: 0.95rem;
    }
}

/* Very small phones (375px and below) */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content,
.hero-image {
    animation: fadeInUp 0.8s ease-out;
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Disable Designer theme background animation */
    html.theme-designer body::before {
        animation: none !important;
    }

    /* Disable falling shapes */
    .shape-octagon {
        display: none !important;
    }

    /* Disable Business theme scan line */
    html.theme-business .hero-image::after {
        animation: none !important;
        display: none !important;
    }
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ===== THEME-SPECIFIC COMPONENT OVERRIDES ===== */

/* === DESIGNER THEME - Special Effects === */

/* Animated Dot Grid Background */
html.theme-designer body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 107, 53, 0.12) 2px, transparent 2px); /* Reduced opacity from 0.15 to 0.12 */
    background-size: 40px 40px;
    animation: moveBackground 30s linear infinite; /* Slowed from 20s to 30s for better performance */
    pointer-events: none;
    z-index: -1;
}

@keyframes moveBackground {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 40px 40px;
    }
}

html.theme-designer .btn {
    position: relative;
    overflow: hidden;
}

html.theme-designer .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-designer .btn:hover::before {
    opacity: 1;
}

html.theme-designer .btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-glow);
}

html.theme-designer .project-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
}

html.theme-designer .skill-category:hover {
    transform: translateY(-8px) rotate(2deg);
    box-shadow: var(--shadow-lg);
}

/* Removed fancy drop-shadow for simplicity */
/* html.theme-designer .hero-image img {
    filter: drop-shadow(0 10px 30px rgba(255, 107, 53, 0.3));
} */

/* Enhanced Glassmorphism */
html.theme-designer .navbar {
    background: rgba(255, 248, 245, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 107, 53, 0.2);
    box-shadow: 0 4px 24px rgba(255, 107, 53, 0.1);
}

html.theme-designer .about,
html.theme-designer .skills {
    background: linear-gradient(135deg, rgba(255, 248, 245, 0.5), rgba(255, 232, 220, 0.5));
    position: relative;
}

html.theme-designer .skill-category {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 53, 0.2);
}

html.theme-designer .contact-item {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 107, 53, 0.15);
}

html.theme-designer .contact-item:hover {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    backdrop-filter: blur(15px);
    transform: translateX(8px) scale(1.02);
}

/* Floating Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Buttons: Use subtle hover effects instead of infinite animation to avoid transform conflicts */
html.theme-designer .btn {
    /* Removed infinite float animation - conflicts with hover transform */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Skill categories: Animate pseudo-element instead of the element itself */
html.theme-designer .skill-category {
    position: relative;
}

html.theme-designer .skill-category::before {
    content: '';
    position: absolute;
    inset: -4px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 140, 66, 0.1));
    border-radius: calc(var(--card-radius) + 4px);
    opacity: 0;
    z-index: -1;
    animation: pulse 4s ease-in-out infinite;
}

html.theme-designer .skill-category:nth-child(2)::before {
    animation-delay: 0.5s;
}

html.theme-designer .skill-category:nth-child(3)::before {
    animation-delay: 1s;
}

/* Removed pulse animation for simplicity */
/* html.theme-designer .hero-image img {
    animation: pulse 6s ease-in-out infinite;
} */

/* Carousel card pulse - DO NOT animate project-card itself, animate the image inside */
html.theme-designer .project-card[data-position="0"] img {
    animation: pulse 5s ease-in-out infinite; /* Slowed from 3s to 5s */
}

/* Rotating Icon Effects */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Add rotation to section title decorations - REMOVED for performance */
/* html.theme-designer .section-title::after - no animation */

/* Rotate nav orbs icons - Slowed down for performance */
html.theme-designer .nav-orb svg {
    animation: rotate 30s linear infinite; /* Slowed from 20s to 30s */
}

html.theme-designer .prev-orb svg {
    animation: rotateReverse 25s linear infinite; /* Slowed from 15s to 25s */
}

/* Add spinning effect to tags */
html.theme-designer .tag:hover {
    animation: rotate 0.6s ease-in-out;
}

/* Progress handle pulse - REMOVED for performance */
/* html.theme-designer .progress-handle - no animation */

/* Falling Octagon Shapes */
.shape-octagon {
    position: fixed;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 140, 66, 0.3));
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    pointer-events: none;
    z-index: 0; /* Behind all content - purely decorative */
    opacity: 0;
}

@keyframes fallRollShrink {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}

html.theme-designer .shape-octagon {
    animation: fallRollShrink 4s ease-in forwards;
}

/* ===== DESIGNER THEME CAROUSEL - Playful 3D with Glow ===== */

/* More dramatic 3D perspective */
html.theme-designer .carousel-perspective {
    perspective: 2500px;
}

/* Glass-morphism cards with rounded corners */
html.theme-designer .project-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Center card - pop forward with glow */
html.theme-designer .project-card[data-position="0"] {
    transform: translateX(0) translateZ(50px) rotateY(0deg) scale(1.05);
    box-shadow: 0 30px 80px rgba(255, 107, 53, 0.3),
                0 0 60px rgba(255, 107, 53, 0.2);
}

/* Add glow effect via ::before pseudo-element */
html.theme-designer .project-card[data-position="0"]::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.4), rgba(255, 140, 66, 0.4));
    border-radius: 17px;
    opacity: 0.6;
    filter: blur(30px);
    z-index: -1;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* Pulse animation on center card image */
html.theme-designer .project-card[data-position="0"] img {
    animation: subtle-pulse 5s ease-in-out infinite;
}

@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Side cards with blur and glow */
html.theme-designer .project-card[data-position="1"],
html.theme-designer .project-card[data-position="-1"] {
    filter: blur(1px);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.15);
}

html.theme-designer .project-card[data-position="2"],
html.theme-designer .project-card[data-position="-2"] {
    filter: blur(2px);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.1);
}

/* Gradient orbs with backdrop blur */
html.theme-designer .nav-orb {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 140, 66, 0.2));
    backdrop-filter: blur(30px) saturate(200%);
    -webkit-backdrop-filter: blur(30px) saturate(200%);
    border: 2px solid rgba(255, 107, 53, 0.4);
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3),
                0 0 20px rgba(255, 107, 53, 0.2);
}

html.theme-designer .nav-orb:hover {
    transform: scale(1.25);
    box-shadow: 0 12px 48px rgba(255, 107, 53, 0.5),
                0 0 40px rgba(255, 107, 53, 0.4);
    border-color: rgba(255, 107, 53, 0.6);
}

/* Ripple effect on click */
html.theme-designer .nav-orb::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.4) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: all 0.6s ease-out;
}

html.theme-designer .nav-orb:active::before {
    opacity: 1;
    transform: scale(1.5);
    transition: all 0s;
}

html.theme-designer .nav-orb svg {
    color: rgba(255, 107, 53, 0.9);
}

/* Enhanced progress indicator */
html.theme-designer .progress-track {
    background: linear-gradient(90deg,
        rgba(255, 107, 53, 0.1) 0%,
        rgba(255, 140, 66, 0.15) 50%,
        rgba(255, 107, 53, 0.1) 100%);
    box-shadow: inset 0 2px 8px rgba(255, 107, 53, 0.2);
}

html.theme-designer .progress-fill {
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6),
                0 0 40px rgba(255, 107, 53, 0.3);
}

/* === DESIGNER THEME - Hero Section Enhancements === */

/* Floating Gradient Orbs Background */
html.theme-designer .designer-orbs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

html.theme-designer .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

html.theme-designer .orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.6), rgba(255, 140, 66, 0.3));
    top: -100px;
    left: -100px;
    animation-delay: 0s;
}

html.theme-designer .orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 217, 192, 0.4), rgba(0, 217, 192, 0.15));
    top: 50%;
    right: -150px;
    animation-delay: 5s;
}

html.theme-designer .orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(157, 78, 221, 0.35), rgba(157, 78, 221, 0.15));
    bottom: -100px;
    left: 30%;
    animation-delay: 10s;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

/* Gradient Text Animation for Hero Title */
html.theme-designer .hero-title .highlight {
    background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--coral-pink) 20%,
        var(--secondary-color) 40%,
        var(--golden-yellow) 60%,
        var(--teal-accent) 80%,
        var(--primary-color) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 8s ease infinite;
    position: relative;
    display: inline-block;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Floating Shapes Around Name */
html.theme-designer .designer-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

html.theme-designer .designer-shapes .shape {
    position: absolute;
    opacity: 0.6;
}

html.theme-designer .shape-triangle {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid var(--gradient-start);
    top: -20px;
    right: -50px;
    animation: shapeFloat1 6s ease-in-out infinite, shapePulseColor1 4s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6));
}

html.theme-designer .shape-octagon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    top: 50%;
    left: -60px;
    animation: shapeFloat2 8s ease-in-out infinite reverse, shapePulseColor2 5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 140, 66, 0.7));
}

html.theme-designer .shape-circle {
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, var(--gradient-end), #ffb366);
    border-radius: 50%;
    bottom: -10px;
    right: -40px;
    animation: shapeFloat3 7s ease-in-out infinite, shapePulseColor3 6s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(255, 185, 130, 0.8);
}

@keyframes shapeFloat1 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes shapeFloat2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-180deg); }
}

@keyframes shapeFloat3 {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.2); }
}

@keyframes shapePulseColor1 {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 140, 66, 0.9)) brightness(1.2);
    }
}

@keyframes shapePulseColor2 {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 140, 66, 0.7)) brightness(1);
    }
    50% {
        filter: drop-shadow(0 0 18px rgba(255, 185, 130, 1)) brightness(1.3);
    }
}

@keyframes shapePulseColor3 {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 185, 130, 0.8);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 140, 66, 1);
    }
}

/* Rotating Subtitle */
html.theme-designer .subtitle-static {
    display: none;
}

html.theme-designer .subtitle-rotating {
    display: inline-block;
    position: relative;
    height: 1.5em;
    overflow: hidden;
}

html.theme-designer .rotate-text {
    display: block;
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-designer .rotate-text.active {
    opacity: 1;
    transform: translateY(0);
}

/* Color-coded rotating subtitle roles */
html.theme-designer .rotate-text[data-color="orange"] {
    color: var(--primary-color);
}

html.theme-designer .rotate-text[data-color="teal"] {
    color: var(--teal-accent);
}

html.theme-designer .rotate-text[data-color="purple"] {
    color: var(--purple-accent);
}

html.theme-designer .rotate-text[data-color="coral"] {
    color: var(--coral-pink);
}

/* Button Enhancements with Gradients */
html.theme-designer .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    position: relative;
}

html.theme-designer .btn-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1.2em;
}

html.theme-designer .btn:hover .btn-icon {
    transform: translateX(4px) scale(1.15);
}

/* Primary Button - Vibrant Orange Gradient */
html.theme-designer .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
}

html.theme-designer .btn-primary:hover {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
}

/* Secondary Button - Outlined */
html.theme-designer .btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

html.theme-designer .btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

/* Ripple Effect on Button Click */
html.theme-designer .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

html.theme-designer .btn:active::after {
    opacity: 1;
    animation: ripple 0.8s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Hero Image - Ripple Effect on Hover */
html.theme-designer .hero-image {
    position: relative;
    overflow: visible;
}

/* Image pulse effect on hover */
html.theme-designer .hero-image img {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

html.theme-designer .hero-image:hover img {
    animation: imagePulse 2s ease-in-out infinite;
}

@keyframes imagePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Ripple Container */
html.theme-designer .ripple-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: none;
}

html.theme-designer .hero-image:hover .ripple-container {
    display: block;
}

/* Ripple Waves with Shapes */
html.theme-designer .ripple-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
}

/* Create shape patterns on each wave */
html.theme-designer .ripple-wave::before,
html.theme-designer .ripple-wave::after {
    content: '';
    position: absolute;
    background: rgba(255, 107, 53, 0.4);
}

/* Circles */
html.theme-designer .ripple-wave.wave-1::before {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    top: 0;
    left: 50%;
    box-shadow:
        60px 40px 0 rgba(255, 140, 66, 0.5),
        -60px 40px 0 rgba(255, 185, 130, 0.5),
        40px -60px 0 rgba(255, 107, 53, 0.5),
        -40px -60px 0 rgba(255, 140, 66, 0.5),
        80px 0 0 rgba(255, 185, 130, 0.5),
        -80px 0 0 rgba(255, 107, 53, 0.5),
        0 80px 0 rgba(255, 140, 66, 0.5),
        0 -80px 0 rgba(255, 185, 130, 0.5);
}

/* Triangles */
html.theme-designer .ripple-wave.wave-2::before {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 14px solid rgba(255, 140, 66, 0.5);
    top: 20%;
    left: 30%;
    box-shadow:
        100px 50px 0 rgba(255, 107, 53, 0.5),
        -100px 50px 0 rgba(255, 185, 130, 0.5),
        50px -80px 0 rgba(255, 140, 66, 0.5),
        -50px -80px 0 rgba(255, 107, 53, 0.5);
}

/* Squares */
html.theme-designer .ripple-wave.wave-3::before {
    width: 10px;
    height: 10px;
    background: rgba(255, 185, 130, 0.5);
    top: 15%;
    right: 20%;
    transform: rotate(45deg);
    box-shadow:
        -120px 60px 0 rgba(255, 107, 53, 0.5),
        120px 60px 0 rgba(255, 140, 66, 0.5),
        60px -90px 0 rgba(255, 185, 130, 0.5),
        -60px -90px 0 rgba(255, 107, 53, 0.5);
}

/* More circles at different positions */
html.theme-designer .ripple-wave.wave-4::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 40%;
    left: 10%;
    background: rgba(255, 140, 66, 0.5);
    box-shadow:
        90px 30px 0 rgba(255, 185, 130, 0.5),
        -90px 30px 0 rgba(255, 107, 53, 0.5),
        30px -100px 0 rgba(255, 140, 66, 0.5),
        -30px -100px 0 rgba(255, 185, 130, 0.5),
        120px -20px 0 rgba(255, 107, 53, 0.5),
        -120px -20px 0 rgba(255, 140, 66, 0.5);
}

/* Wave animations - staggered ripple effect */
html.theme-designer .hero-image:hover .ripple-wave.wave-1 {
    animation: rippleOut 2s ease-out infinite;
}

html.theme-designer .hero-image:hover .ripple-wave.wave-2 {
    animation: rippleOut 2s ease-out 0.3s infinite;
}

html.theme-designer .hero-image:hover .ripple-wave.wave-3 {
    animation: rippleOut 2s ease-out 0.6s infinite;
}

html.theme-designer .hero-image:hover .ripple-wave.wave-4 {
    animation: rippleOut 2s ease-out 0.9s infinite;
}

@keyframes rippleOut {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Floating Geometric Shapes Around Image */
html.theme-designer .designer-image-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

html.theme-designer .floating-shape {
    position: absolute;
    opacity: 0.5;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

html.theme-designer .floating-shape.octagon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end), #ffb366);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    top: 10%;
    right: -30px;
    animation: floatShape1 8s infinite, shapeGlow1 5s ease-in-out infinite;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
}

html.theme-designer .floating-shape.triangle {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid var(--gradient-start);
    bottom: 15%;
    left: -40px;
    animation: floatShape2 10s infinite, shapeGlow2 6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 140, 66, 0.7));
}

html.theme-designer .floating-shape.circle {
    width: 50px;
    height: 50px;
    background: radial-gradient(circle at 30% 30%, #ffb366, var(--gradient-end), var(--gradient-start));
    border-radius: 50%;
    top: 60%;
    right: -25px;
    animation: floatShape3 7s infinite, shapeGlow3 4s ease-in-out infinite;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 25px rgba(255, 185, 130, 0.8);
}

html.theme-designer .floating-shape.square {
    width: 45px;
    height: 45px;
    background: linear-gradient(45deg, var(--gradient-end), #ffd4a3);
    transform: rotate(45deg);
    bottom: 10%;
    right: -20px;
    animation: floatShape4 9s infinite, shapeGlow4 7s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(255, 200, 150, 0.7);
}

@keyframes floatShape1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-20px, -30px) rotate(180deg); }
}

@keyframes floatShape2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(15px, -25px) rotate(-180deg); }
}

@keyframes floatShape3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10px, 20px) scale(1.3); }
}

@keyframes floatShape4 {
    0%, 100% { transform: translate(0, 0) rotate(45deg); }
    50% { transform: translate(10px, -15px) rotate(225deg); }
}

@keyframes shapeGlow1 {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 140, 66, 0.9), 0 0 50px rgba(255, 107, 53, 0.4);
    }
}

@keyframes shapeGlow2 {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 140, 66, 0.7));
    }
    50% {
        filter: drop-shadow(0 0 30px rgba(255, 185, 130, 1));
    }
}

@keyframes shapeGlow3 {
    0%, 100% {
        box-shadow: 0 0 25px rgba(255, 185, 130, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 140, 66, 1), 0 0 60px rgba(255, 185, 130, 0.6);
    }
}

@keyframes shapeGlow4 {
    0%, 100% {
        box-shadow: 0 0 18px rgba(255, 200, 150, 0.7);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 185, 130, 1);
    }
}

/* Removed glassmorphic frame and gradient glow for simplicity */
/* html.theme-designer .hero-image::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: linear-gradient(135deg,
        rgba(255, 107, 53, 0.3),
        rgba(255, 140, 66, 0.2),
        rgba(255, 185, 130, 0.25),
        rgba(255, 107, 53, 0.15));
    background-size: 200% 200%;
    border-radius: var(--radius-3xl);
    backdrop-filter: blur(20px) saturate(150%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
    animation: gradientRotate 8s ease infinite;
}

html.theme-designer .hero-image:hover::before {
    opacity: 1;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.4),
                0 0 90px rgba(255, 140, 66, 0.2);
} */

@keyframes gradientRotate {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Particle Effects */
html.theme-designer .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 107, 53, 0.2) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    background-position: 0 0, 40px 40px;
    opacity: 0.3;
    pointer-events: none;
    animation: particleFloat 30s linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50px);
    }
}

/* Hide designer elements in non-designer themes */
html:not(.theme-designer) .designer-orbs,
html:not(.theme-designer) .designer-shapes,
html:not(.theme-designer) .designer-image-shapes,
html:not(.theme-designer) .subtitle-rotating,
html:not(.theme-designer) .btn-icon {
    display: none;
}

html:not(.theme-designer) .subtitle-static {
    display: inline;
}

/* === BUSINESS THEME - Professional Grid Effects === */
html.theme-business .section-title {
    font-family: var(--font-family-mono);
    letter-spacing: -0.02em;
}

html.theme-business .btn {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
}

html.theme-business .btn:hover {
    box-shadow: 0 0 0 3px var(--accent-color);
}

/* Note: project-card and skill-category styles consolidated below */

/* Add grid pattern to business theme background */
html.theme-business body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(21, 101, 192, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 101, 192, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
    z-index: -1;
}

/* Enhanced Data-Driven Styling */
html.theme-business .hero-title {
    font-family: var(--font-family-mono);
    position: relative;
}

html.theme-business .hero-title::before {
    content: '> ';
    color: var(--accent-color);
    font-weight: 400;
}

html.theme-business .hero-subtitle {
    font-size: 1.25rem; /* Reduced from 1.5rem to fit on one line */
}

html.theme-business .highlight {
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* Space for underline */
}

html.theme-business .highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    pointer-events: none; /* Don't interfere with text selection */
}

/* Professional card styling with data borders - CONSOLIDATED */
html.theme-business .skill-category {
    position: relative;
    border: 1px solid rgba(21, 101, 192, 0.2);
    background: rgba(227, 242, 253, 0.5);
}

html.theme-business .skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .skill-category:hover {
    transform: translateY(-4px);
    border-color: var(--primary-color);
}

html.theme-business .skill-category:hover::before {
    opacity: 1;
}

/* Project cards handled separately below for carousel-specific styling */

/* Navbar with tech styling */
html.theme-business .navbar {
    border-bottom: 2px solid rgba(21, 101, 192, 0.3);
}

html.theme-business .logo {
    font-family: var(--font-family-mono);
    font-weight: 700;
}

/* Logo animation styles moved to main logo section */

/* Button enhancements */
html.theme-business .btn-primary {
    position: relative;
    overflow: visible; /* Changed from hidden to allow dropdown dashboard */
}

html.theme-business .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(66, 165, 245, 0.3), transparent);
    transition: left 0.5s ease;
    pointer-events: none; /* Ensure sweep effect doesn't block interactions */
}

html.theme-business .btn-primary:hover::before {
    left: 100%;
}

/* === CTA STATISTICS DASHBOARD - BUSINESS THEME ONLY === */
/* Hide dashboards on all themes except business */
.cta-stats-dashboard {
    display: none;
}

html.theme-business .hero-cta {
    gap: 30px;
}

html.theme-business .btn {
    position: relative;
}

/* === DASHBOARD CONTAINER === */
html.theme-business .cta-stats-dashboard {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(13, 47, 97, 0.98) 0%, rgba(13, 47, 97, 0.96) 100%);
    border: 1px solid rgba(66, 165, 245, 0.4);
    backdrop-filter: blur(20px);
    padding: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 380px;
}

/* Blueprint corner decorations */
html.theme-business .cta-stats-dashboard::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 20px;
    height: 20px;
    border-top: 2px solid #5FB8F8;
    border-left: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

html.theme-business .cta-stats-dashboard::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #5FB8F8;
    border-right: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

/* Inner glow border effect */
html.theme-business .cta-stats-dashboard > * {
    position: relative;
}

/* Hover state */
html.theme-business .btn:hover .cta-stats-dashboard {
    opacity: 1;
    max-height: 500px;
    box-shadow:
        0 20px 60px rgba(66, 165, 245, 0.25),
        0 8px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: #5FB8F8;
}

html.theme-business .btn:hover .cta-stats-dashboard::before,
html.theme-business .btn:hover .cta-stats-dashboard::after {
    opacity: 1;
}

/* === HEADER SECTION === */
html.theme-business .stats-header {
    padding: 18px 24px 16px;
    border-bottom: 1px solid rgba(66, 165, 245, 0.25);
    background: linear-gradient(180deg, rgba(66, 165, 245, 0.08) 0%, transparent 100%);
}

html.theme-business .stats-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

html.theme-business .stats-label {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #5FB8F8;
    letter-spacing: 1px;
    font-weight: 700;
    text-transform: uppercase;
}

html.theme-business .stats-timestamp {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #5FB8F8;
    letter-spacing: 1px;
    padding: 2px 8px;
    background: rgba(66, 165, 245, 0.15);
    border: 1px solid rgba(66, 165, 245, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

/* Animated pulse indicator for "live" data */
html.theme-business .stats-timestamp::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #5FB8F8;
    border-radius: 50%;
    animation: livePulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(66, 165, 245, 0.8);
}

html.theme-business .stats-timestamp {
    padding-left: 16px;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.4; transform: translateY(-50%) scale(0.8); }
}

html.theme-business .stats-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.4s ease 0.2s;
}

html.theme-business .btn:hover .stats-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* === CONTENT SECTION === */
html.theme-business .stats-content {
    padding: 20px 24px;
}

/* Primary stat section */
html.theme-business .stats-primary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(66, 165, 245, 0.15);
}

html.theme-business .stat-main {
    flex: 1;
}

html.theme-business .stat-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
}

html.theme-business .stat-number {
    font-family: 'Courier New', monospace;
    font-size: 48px;
    color: #5FB8F8;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 30px rgba(66, 165, 245, 0.5);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}

html.theme-business .btn:hover .stat-number {
    opacity: 1;
    transform: translateY(0);
}

html.theme-business .stat-unit {
    font-family: 'Courier New', monospace;
    font-size: 24px;
    color: rgba(66, 165, 245, 0.8);
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}

html.theme-business .btn:hover .stat-unit {
    opacity: 1;
    transform: translateY(0);
}

html.theme-business .stat-label {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    line-height: 1.4;
    font-weight: 500;
}

/* Trend indicator */
html.theme-business .stat-trend {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-top: 8px;
}

html.theme-business .trend-indicator {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

html.theme-business .btn:hover .trend-indicator {
    opacity: 1;
    transform: translateX(0);
}

html.theme-business .trend-indicator.positive {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

html.theme-business .trend-period {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Secondary stats grid */
html.theme-business .stats-secondary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

html.theme-business .stat-mini {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(66, 165, 245, 0.05);
    border: 1px solid rgba(66, 165, 245, 0.2);
    border-radius: 4px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
}

html.theme-business .stat-mini:nth-child(1) {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
}

html.theme-business .stat-mini:nth-child(2) {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
}

html.theme-business .stat-mini:nth-child(3) {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s;
}

html.theme-business .btn:hover .stat-mini {
    opacity: 1;
    transform: translateY(0);
}

html.theme-business .stat-mini:hover {
    background: rgba(66, 165, 245, 0.1);
    border-color: rgba(66, 165, 245, 0.4);
    transform: translateY(-2px);
}

html.theme-business .mini-value {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    color: #5FB8F8;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 2px;
}

html.theme-business .mini-unit {
    font-size: 12px;
    color: rgba(66, 165, 245, 0.7);
    font-weight: 600;
}

html.theme-business .mini-label {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* === ENHANCED PROGRESS BAR === */
html.theme-business .stat-bar {
    margin-top: 8px;
}

html.theme-business .stat-bar-track {
    width: 100%;
    height: 8px;
    background: rgba(66, 165, 245, 0.15);
    border: 1px solid rgba(66, 165, 245, 0.3);
    border-radius: 4px;
    overflow: visible;
    position: relative;
    margin-bottom: 8px;
}

html.theme-business .stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #5FB8F8 0%, #64B5F6 50%, #5FB8F8 100%);
    background-size: 200% 100%;
    border-radius: 3px;
    position: relative;
    width: 0;
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
    box-shadow:
        0 0 20px rgba(66, 165, 245, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

html.theme-business .btn:hover .stat-bar-fill {
    width: var(--bar-width, 88%);
    animation: barShimmer 3s ease-in-out infinite;
}

html.theme-business .stat-bar-fill[data-width="88"] {
    --bar-width: 88%;
}

html.theme-business .stat-bar-fill[data-width="92"] {
    --bar-width: 92%;
}

@keyframes barShimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 0%; }
}

/* Animated scanning line effect */
html.theme-business .stat-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    animation: barScan 2.5s ease-in-out infinite;
}

@keyframes barScan {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
}

/* Progress bar value marker */
html.theme-business .stat-bar-marker {
    position: absolute;
    top: -32px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}

html.theme-business .btn:hover .stat-bar-marker {
    opacity: 1;
}

html.theme-business .marker-value {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #5FB8F8;
    font-weight: 700;
    background: rgba(13, 47, 97, 0.95);
    padding: 4px 8px;
    border: 1px solid #5FB8F8;
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(66, 165, 245, 0.3);
    position: relative;
}

html.theme-business .marker-value::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #5FB8F8;
}

/* Progress bar labels */
html.theme-business .stat-bar-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
}

html.theme-business .bar-label-start,
html.theme-business .bar-label-end {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
}

/* === FOOTER SECTION === */
html.theme-business .stats-footer {
    padding: 12px 24px 16px;
    border-top: 1px solid rgba(66, 165, 245, 0.15);
    background: linear-gradient(180deg, transparent 0%, rgba(66, 165, 245, 0.05) 100%);
}

html.theme-business .stats-source {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.4s ease 0.6s;
}

html.theme-business .btn:hover .stats-source {
    opacity: 1;
}

html.theme-business .stats-source::before {
    content: '';
    width: 6px;
    height: 6px;
    background: rgba(66, 165, 245, 0.4);
    border: 1px solid rgba(66, 165, 245, 0.6);
    border-radius: 1px;
    flex-shrink: 0;
}

/* Contact items with data styling */
html.theme-business .contact-item {
    border-left: 3px solid var(--primary-color);
    background: rgba(227, 242, 253, 0.7);
}

html.theme-business .contact-item:hover {
    border-left-width: 6px;
    background: var(--primary-color);
}

/* === CASE STUDIES - Corporate Data Visualization === */
html.theme-business .case-studies {
    background: rgba(13, 47, 97, 0.02);
    position: relative;
}

/* Subtle technical grid background */
html.theme-business .case-studies::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, rgba(66, 165, 245, 0.03) 0px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, rgba(66, 165, 245, 0.03) 0px, transparent 1px, transparent 40px);
    pointer-events: none;
    z-index: 0;
}

html.theme-business .case-studies h1 {
    font-family: var(--font-family-mono);
    color: var(--primary-color) !important;
    position: relative;
    display: inline-block;
    font-size: 40px !important;
    font-weight: 700 !important;
}

html.theme-business .case-studies h1::before {
    content: '// ';
    color: var(--accent-color);
    opacity: 0.8;
}

html.theme-business .case-studies > div > div:first-child p {
    color: var(--text-secondary) !important;
    font-family: var(--font-family-mono);
    font-size: 16px !important;
}

/* Case study cards - Enhanced with blueprint aesthetic */
html.theme-business .case-studies > div > div:not(:first-child) {
    border: 2px solid rgba(66, 165, 245, 0.3) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    padding: 48px !important;
    border-radius: 0 !important;
    box-shadow:
        0 4px 24px rgba(21, 101, 192, 0.08),
        inset 0 1px 0 rgba(66, 165, 245, 0.1) !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
}

html.theme-business .case-studies > div > div:not(:first-child):hover {
    transform: translateY(-8px);
    box-shadow:
        0 16px 48px rgba(21, 101, 192, 0.15),
        0 0 80px rgba(66, 165, 245, 0.2),
        inset 0 1px 0 rgba(66, 165, 245, 0.2) !important;
    border-color: var(--accent-color) !important;
}

/* Override inline black backgrounds on inner case study divs */
html.theme-business .case-studies div[style*="background: #000000"] {
    background: rgba(255, 255, 255, 0.98) !important;
    color: #333333 !important;
    border-color: rgba(66, 165, 245, 0.3) !important;
}

/* Ensure all text inside case studies is dark, not white */
html.theme-business .case-studies div[style*="background: #000000"] * {
    color: inherit !important;
}

html.theme-business .case-studies div[style*="background: #000000"] h2,
html.theme-business .case-studies div[style*="background: #000000"] h3 {
    color: var(--primary-color) !important;
}

html.theme-business .case-studies div[style*="background: #000000"] p[style*="color: #999"],
html.theme-business .case-studies div[style*="background: #000000"] p[style*="color: #666"],
html.theme-business .case-studies div[style*="background: #000000"] p[style*="color: #cccccc"] {
    color: #444444 !important;
}

html.theme-business .case-studies div[style*="background: #000000"] p[style*="color: #ffffff"] {
    color: #333333 !important;
}

/* Blueprint corner registration marks */
html.theme-business .case-studies > div > div:not(:first-child)::before,
html.theme-business .case-studies > div > div:not(:first-child)::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--accent-color);
    border-style: solid;
    transition: all 0.3s ease;
}

html.theme-business .case-studies > div > div:not(:first-child)::before {
    top: -2px;
    left: -2px;
    border-width: 2px 0 0 2px;
}

html.theme-business .case-studies > div > div:not(:first-child)::after {
    top: -2px;
    right: -2px;
    border-width: 2px 2px 0 0;
}

/* Bottom corner marks using pseudo elements on inner divs */
html.theme-business .case-studies > div > div:not(:first-child) > div:last-child::before,
html.theme-business .case-studies > div > div:not(:first-child) > div:last-child::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--accent-color);
    border-style: solid;
    transition: all 0.3s ease;
}

html.theme-business .case-studies > div > div:not(:first-child) > div:last-child::before {
    bottom: -2px;
    left: -50px;
    border-width: 0 0 2px 2px;
}

html.theme-business .case-studies > div > div:not(:first-child) > div:last-child::after {
    bottom: -2px;
    right: -50px;
    border-width: 0 2px 2px 0;
}

html.theme-business .case-studies > div > div:not(:first-child):hover::before,
html.theme-business .case-studies > div > div:not(:first-child):hover::after {
    width: 24px;
    height: 24px;
    border-color: var(--primary-color);
}

/* Case study headers */
html.theme-business .case-studies h2 {
    font-family: var(--font-family-mono) !important;
    color: var(--primary-color) !important;
    position: relative;
    display: inline-block;
    font-size: 32px !important;
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
}

html.theme-business .case-studies h2::before {
    content: '> ';
    color: var(--accent-color);
    font-weight: 400;
    margin-right: 8px;
}

/* Category badge */
html.theme-business .case-studies span[style*="background: #ffffff"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    font-family: var(--font-family-mono) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 1px solid var(--accent-color) !important;
    font-size: 11px !important;
    padding: 8px 14px !important;
    letter-spacing: 1.5px !important;
}

/* Date text */
html.theme-business .case-studies p[style*="color: #666"] {
    color: var(--text-secondary) !important;
    font-family: var(--font-family-mono) !important;
    font-size: 13px !important;
}

/* Metrics section - Enhanced with progress bars */
html.theme-business .case-studies div[style*="border-left: 3px solid"] {
    border-left: 4px solid var(--accent-color) !important;
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.4), rgba(227, 242, 253, 0.2)) !important;
    padding: 20px !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

html.theme-business .case-studies div[style*="border-left: 3px solid"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(66, 165, 245, 0.15), transparent);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-business .case-studies div[style*="border-left: 3px solid"]:hover {
    border-left-width: 6px !important;
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.6), rgba(227, 242, 253, 0.3)) !important;
    transform: translateX(6px);
}

html.theme-business .case-studies div[style*="border-left: 3px solid"]:hover::before {
    width: 100%;
}

/* Metric numbers - Larger and more prominent */
html.theme-business .case-studies div[style*="border-left: 3px solid"] p[style*="font-size: 32px"] {
    font-family: var(--font-family-mono) !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}

/* Metric labels */
html.theme-business .case-studies div[style*="border-left: 3px solid"] p[style*="font-size: 14px"] {
    font-family: var(--font-family-mono) !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

/* PHASE 2: Visual Progress Bars for Metrics */
html.theme-business .case-studies div[style*="border-left: 3px solid"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
    box-shadow: 0 0 12px var(--accent-color);
    z-index: 1;
}

html.theme-business .case-studies div[style*="border-left: 3px solid"].metric-visible::after {
    width: 100%;
}

/* Metric cards get interactive cursor */
html.theme-business .case-studies div[style*="border-left: 3px solid"] {
    cursor: help;
}

/* Tooltip using injected .metric-tooltip element */
html.theme-business .metric-tooltip {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(13, 47, 97, 0.98);
    color: #ffffff;
    padding: 16px 20px;
    font-family: var(--font-family-mono);
    font-size: 11px;
    line-height: 1.6;
    border: 2px solid var(--accent-color);
    box-shadow: 0 12px 32px rgba(21, 101, 192, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    min-width: 280px;
    max-width: 400px;
    white-space: normal;
}

html.theme-business .metric-tooltip::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--accent-color);
}

html.theme-business .metric-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(13, 47, 97, 0.98);
}

html.theme-business .case-studies div[style*="border-left: 3px solid"]:hover .metric-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

html.theme-business .metric-tooltip-label {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}

html.theme-business .metric-tooltip-calc {
    display: block;
    margin: 6px 0;
    padding-left: 12px;
    border-left: 2px solid rgba(66, 165, 245, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

html.theme-business .metric-tooltip-note {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(66, 165, 245, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 10px;
    font-style: italic;
}

/* Section borders */
html.theme-business .case-studies div[style*="border-bottom: 1px solid"] {
    border-bottom-color: rgba(21, 101, 192, 0.2) !important;
}

/* All paragraph text colors */
html.theme-business .case-studies p[style*="color: #999"] {
    color: var(--text-secondary) !important;
    font-family: var(--font-family-mono) !important;
}

html.theme-business .case-studies p[style*="color: #cccccc"] {
    color: #444444 !important;
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Sub-section titles */
html.theme-business .case-studies h3 {
    font-family: var(--font-family-mono) !important;
    color: var(--primary-color) !important;
    position: relative;
    padding-left: 28px;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .case-studies h3::before {
    content: '// ';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: 400;
}

/* List items with technical checkmarks */
html.theme-business .case-studies li {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

html.theme-business .case-studies li span[style*="width: 8px"] {
    background: var(--accent-color) !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 20px !important;
    transition: all 0.3s ease;
}

html.theme-business .case-studies li:hover span[style*="width: 8px"] {
    transform: scale(1.5);
    box-shadow: 0 0 8px var(--accent-color);
}

/* CTA Button Enhancement */
html.theme-business .case-studies a[style*="background: #ffffff"] {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    font-family: var(--font-family-mono) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 0 !important;
    padding: 16px 48px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-business .case-studies a[style*="background: #ffffff"]::before {
    content: '→';
    position: absolute;
    right: 24px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

html.theme-business .case-studies a[style*="background: #ffffff"]:hover {
    background: var(--accent-color) !important;
    border-color: var(--primary-color) !important;
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(66, 165, 245, 0.4);
    padding-right: 56px !important;
}

html.theme-business .case-studies a[style*="background: #ffffff"]:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ===== INTERACTIVE DASHBOARD DIVIDERS ===== */
html.theme-business .case-study-divider {
    margin: 80px 0 120px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-business .case-study-divider.divider-visible {
    opacity: 1;
    transform: translateY(0);
}

html.theme-business .divider-dashboard {
    background: linear-gradient(135deg, rgba(13, 47, 97, 0.05), rgba(66, 165, 245, 0.02));
    border: 2px solid rgba(66, 165, 245, 0.25);
    padding: 32px 40px;
    position: relative;
    overflow: hidden;
}

/* Blueprint grid pattern for dividers */
html.theme-business .divider-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, rgba(66, 165, 245, 0.03) 0px, transparent 1px, transparent 20px),
        repeating-linear-gradient(90deg, rgba(66, 165, 245, 0.03) 0px, transparent 1px, transparent 20px);
    pointer-events: none;
    z-index: 0;
}

html.theme-business .divider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

html.theme-business .divider-label {
    font-family: var(--font-family-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

html.theme-business .divider-status {
    font-family: var(--font-family-mono);
    font-size: 11px;
    color: var(--accent-color);
    animation: pulse 2s ease-in-out infinite;
}

html.theme-business .divider-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

html.theme-business .divider-metric {
    text-align: center;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(66, 165, 245, 0.2);
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-business .divider-metric:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(66, 165, 245, 0.2);
}

html.theme-business .divider-metric-icon {
    font-size: 32px;
    margin-bottom: 12px;
    filter: grayscale(0.3);
    transition: all 0.3s ease;
}

html.theme-business .divider-metric:hover .divider-metric-icon {
    filter: grayscale(0);
    transform: scale(1.1);
}

html.theme-business .divider-metric-value {
    font-family: var(--font-family-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 8px 0;
    line-height: 1;
}

html.theme-business .divider-metric-label {
    font-family: var(--font-family-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666666;
    margin-top: 8px;
}

html.theme-business .divider-metric-bar {
    height: 3px;
    background: rgba(66, 165, 245, 0.15);
    margin-top: 12px;
    position: relative;
    overflow: hidden;
}

html.theme-business .divider-metric-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s;
    box-shadow: 0 0 8px var(--accent-color);
}

/* ============================================
   TESTIMONIALS - BUSINESS THEME
   ============================================ */

/* Hide overlay on non-business themes */
.testimonial-overlay {
    display: none;
}

/* Section Styling */
html.theme-business .testimonials-section {
    background: #0D2F61 !important;
    position: relative;
    overflow: visible !important;
}

html.theme-business .testimonials-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

/* Header Styling */
html.theme-business .testimonials-label {
    color: rgba(66, 165, 245, 0.7) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .testimonials-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

html.theme-business .testimonials-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

html.theme-business .testimonials-title::after {
    content: '.validate()';
    color: rgba(66, 165, 245, 0.4);
    font-size: 24px;
    margin-left: 8px;
}

/* Card Styling */
html.theme-business .testimonial-card {
    position: relative !important;
    background: rgba(13, 47, 97, 0.6) !important;
    border: 2px solid rgba(66, 165, 245, 0.3) !important;
    border-radius: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

/* Blueprint Corners */
html.theme-business .testimonial-card::before,
html.theme-business .testimonial-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.4s ease;
}

html.theme-business .testimonial-card::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .testimonial-card::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

/* Hover State */
html.theme-business .testimonial-card:hover {
    background: rgba(13, 47, 97, 0.9) !important;
    border-color: #5FB8F8 !important;
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 60px rgba(66, 165, 245, 0.3),
                0 0 40px rgba(66, 165, 245, 0.2) !important;
    z-index: 10 !important;
}

html.theme-business .testimonial-card:hover::before,
html.theme-business .testimonial-card:hover::after {
    opacity: 1;
}

/* Quote Mark Styling */
html.theme-business .testimonial-quote-mark {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 64px !important;
    opacity: 0.3 !important;
}

html.theme-business .testimonial-quote-mark::before {
    content: '/* ';
    font-size: 24px;
    position: relative;
    top: -20px;
    left: -10px;
}

html.theme-business .testimonial-quote-mark::after {
    content: ' */';
    font-size: 24px;
    position: relative;
    top: -20px;
    right: -10px;
}

/* Text Styling */
html.theme-business .testimonial-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Footer Styling */
html.theme-business .testimonial-footer {
    border-top: 1px solid rgba(66, 165, 245, 0.3) !important;
}

html.theme-business .testimonial-author {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
}

html.theme-business .testimonial-author::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.6);
}

html.theme-business .testimonial-role {
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ============================================
   TESTIMONIAL OVERLAY - HOVER DASHBOARD
   ============================================ */

html.theme-business .testimonial-overlay {
    display: block;
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    transform: translateY(-50%) translateX(20px);
    width: 240px;
    background: linear-gradient(135deg,
        rgba(13, 47, 97, 0.98) 0%,
        rgba(13, 47, 97, 0.95) 100%);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 15px;
    border: 1px solid rgba(66, 165, 245, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

html.theme-business .testimonial-card:hover .testimonial-overlay {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
    border-color: #5FB8F8;
    box-shadow: 0 12px 35px rgba(66, 165, 245, 0.3),
                0 0 20px rgba(66, 165, 245, 0.15);
}

/* Dashboard corner decorations */
html.theme-business .testimonial-overlay::before,
html.theme-business .testimonial-overlay::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 1px solid #5FB8F8;
}

html.theme-business .testimonial-overlay::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .testimonial-overlay::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

/* Overlay Header */
html.theme-business .overlay-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(66, 165, 245, 0.25);
    animation: slideDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards;
}

/* Verified Badge */
html.theme-business .verified-badge {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #4CAF50;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid #4CAF50;
    position: relative;
    padding-left: 12px;
    width: fit-content;
}

html.theme-business .verified-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 5px #4CAF50;
    animation: livePulse 1.5s ease-in-out infinite;
}

/* Project Duration Badge */
html.theme-business .project-duration {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #5FB8F8;
    letter-spacing: 0.5px;
    padding: 3px 6px;
    background: rgba(66, 165, 245, 0.1);
    border: 1px solid #5FB8F8;
    width: fit-content;
}

/* Overlay Metrics Grid */
html.theme-business .overlay-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    width: 100%;
}

html.theme-business .metric-item {
    background: rgba(66, 165, 245, 0.05);
    border-left: 1px solid rgba(66, 165, 245, 0.4);
    padding: 6px 8px;
    position: relative;
    transition: all 0.2s ease;
    animation: fadeInUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

html.theme-business .metric-item:nth-child(1) {
    animation-delay: 0.1s;
}

html.theme-business .metric-item:nth-child(2) {
    animation-delay: 0.15s;
}

html.theme-business .metric-item:nth-child(3) {
    animation-delay: 0.2s;
}

html.theme-business .metric-item:hover {
    background: rgba(66, 165, 245, 0.12);
    border-left-color: #5FB8F8;
    transform: translateX(2px);
}

/* Metric Label */
html.theme-business .metric-label {
    display: block !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    color: #5FB8F8 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
}

html.theme-business .metric-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.4);
}

/* Metric Value */
html.theme-business .metric-value {
    display: block !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    color: #5FB8F8 !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.3 !important;
}

/* ============================================
   TESTIMONIAL ANIMATIONS
   ============================================ */

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.6);
    }
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.5);
    }
}

html.theme-business .divider-visible .divider-metric-bar span {
    width: 100% !important;
}

/* ============================================
   ABOUT SECTION - BUSINESS THEME
   ============================================ */

/* Section Styling */
html.theme-business .about-section {
    background: #0D2F61 !important;
    position: relative;
}

html.theme-business .about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

/* Header Label */
html.theme-business .about-label {
    color: rgba(66, 165, 245, 0.7) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .about-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

/* Title */
html.theme-business .about-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-size: 48px !important;
}

html.theme-business .about-title::after {
    content: ' {}';
    color: rgba(66, 165, 245, 0.4);
    font-size: 36px;
}

/* Body Text */
html.theme-business .about-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
}

/* Metrics Bar */
html.theme-business .about-metrics {
    border: 2px solid rgba(66, 165, 245, 0.4) !important;
    background: rgba(13, 47, 97, 0.6) !important;
    position: relative;
}

/* Metric Cards */
html.theme-business .metric-card {
    border-right: 1px solid rgba(66, 165, 245, 0.3) !important;
    transition: all 0.3s ease;
    position: relative;
}

html.theme-business .metric-card:last-child {
    border-right: none !important;
}

html.theme-business .metric-card:hover {
    background: rgba(66, 165, 245, 0.1) !important;
    transform: translateY(-5px);
}

/* Metric Number */
html.theme-business .metric-number {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 42px !important;
    text-shadow: 0 0 20px rgba(66, 165, 245, 0.5);
}

html.theme-business .metric-card:hover .metric-number {
    text-shadow: 0 0 30px rgba(66, 165, 245, 0.8);
}

/* Metric Label */
html.theme-business .metric-label-text {
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

html.theme-business .metric-label-text::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.4);
}

/* ============================================
   SKILLS & EXPERTISE - BUSINESS THEME
   ============================================ */

/* Section Styling */
html.theme-business .skills-section {
    background: #0D2F61 !important;
    position: relative;
}

html.theme-business .skills-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

/* Header Label */
html.theme-business .skills-label {
    color: rgba(66, 165, 245, 0.7) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .skills-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

/* Title */
html.theme-business .skills-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-size: 38px !important;
}

html.theme-business .skills-title::after {
    content: '.list()';
    color: rgba(66, 165, 245, 0.4);
    font-size: 28px;
}

/* Group Label */
html.theme-business .skills-group-label {
    color: rgba(66, 165, 245, 0.6) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
}

html.theme-business .skills-group-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.4);
}

/* Skill Cards */
html.theme-business .skill-card {
    background: rgba(13, 47, 97, 0.4) !important;
    border: 1px solid rgba(66, 165, 245, 0.3) !important;
    transition: all 0.3s ease;
    position: relative;
}

html.theme-business .skill-card::before,
html.theme-business .skill-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .skill-card::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .skill-card::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

html.theme-business .skill-card:hover {
    background: rgba(13, 47, 97, 0.7) !important;
    border-color: #5FB8F8 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(66, 165, 245, 0.2);
}

html.theme-business .skill-card:hover::before,
html.theme-business .skill-card:hover::after {
    opacity: 1;
}

/* Skill Name */
html.theme-business .skill-name {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
}

html.theme-business .skill-name::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.6);
}

/* Skill Bars */
html.theme-business .skill-bars {
    gap: 3px !important;
}

html.theme-business .skill-bar {
    background: rgba(66, 165, 245, 0.15) !important;
    border: 1px solid rgba(66, 165, 245, 0.3);
    transition: all 0.3s ease;
}

html.theme-business .skill-bar-filled {
    background: #5FB8F8 !important;
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
    border-color: #5FB8F8;
}

html.theme-business .skill-card:hover .skill-bar-filled {
    box-shadow: 0 0 15px rgba(66, 165, 245, 0.8);
    background: #5AB3F5 !important;
}

/* ============================================
   TOOLS & SOFTWARE - BUSINESS THEME
   ============================================ */

html.theme-business .tools-details {
    background: rgba(13, 47, 97, 0.4) !important;
    border: 2px solid rgba(66, 165, 245, 0.4) !important;
    transition: all 0.3s ease;
}

html.theme-business .tools-details:hover {
    border-color: #5FB8F8 !important;
    box-shadow: 0 5px 20px rgba(66, 165, 245, 0.2);
}

html.theme-business .tools-summary {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
}

html.theme-business .tools-summary::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.6);
}

html.theme-business .tools-icon {
    color: #5FB8F8 !important;
}

html.theme-business .tools-content {
    border-top: 1px solid rgba(66, 165, 245, 0.3) !important;
}

html.theme-business .tool-category-label {
    color: rgba(66, 165, 245, 0.7) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 10px !important;
}

html.theme-business .tool-category-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

html.theme-business .tool-category-text {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 13px !important;
}

/* ============================================
   METHODOLOGIES - BUSINESS THEME
   ============================================ */

html.theme-business .methodology-item {
    transition: all 0.2s ease;
    padding: 8px;
    margin: -8px;
    border-radius: 0;
}

html.theme-business .methodology-item:hover {
    background: rgba(66, 165, 245, 0.1);
    transform: translateX(5px);
}

html.theme-business .methodology-bullet {
    background: #5FB8F8 !important;
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.6);
    transition: all 0.3s ease;
}

html.theme-business .methodology-item:hover .methodology-bullet {
    box-shadow: 0 0 12px rgba(66, 165, 245, 0.9);
}

html.theme-business .methodology-text {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 13px !important;
}

html.theme-business .methodology-text::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.5);
}

/* ============================================
   INDUSTRY EXPERIENCE - BUSINESS THEME
   ============================================ */

html.theme-business .industry-tag {
    background: rgba(13, 47, 97, 0.4) !important;
    border: 1px solid rgba(66, 165, 245, 0.4) !important;
    transition: all 0.3s ease;
    position: relative;
}

html.theme-business .industry-tag::before,
html.theme-business .industry-tag::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .industry-tag::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .industry-tag::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

html.theme-business .industry-tag:hover {
    background: rgba(13, 47, 97, 0.7) !important;
    border-color: #5FB8F8 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(66, 165, 245, 0.3);
}

html.theme-business .industry-tag:hover::before,
html.theme-business .industry-tag:hover::after {
    opacity: 1;
}

html.theme-business .industry-tag-text {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

html.theme-business .industry-tag-text::before {
    content: '[ ';
    color: rgba(66, 165, 245, 0.6);
}

html.theme-business .industry-tag-text::after {
    content: ' ]';
    color: rgba(66, 165, 245, 0.6);
}

/* ============================================
   PROCESS SECTION - BUSINESS THEME
   ============================================ */

/* Section Styling */
html.theme-business .process-section {
    background: #0D2F61 !important;
    position: relative;
}

html.theme-business .process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

/* Header */
html.theme-business .process-label {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .process-label::before {
    content: '// ';
    color: rgba(95, 184, 248, 0.8);
}

html.theme-business .process-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-size: 38px !important;
}

html.theme-business .process-title::after {
    content: '.execute()';
    color: rgba(95, 184, 248, 0.7);
    font-size: 28px;
}

html.theme-business .process-description {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Process Steps */
html.theme-business .process-step {
    transition: all 0.3s ease;
}

html.theme-business .process-step:hover {
    transform: translateX(10px);
}

/* Step Number Container */
html.theme-business .process-step-number {
    background: rgba(13, 47, 97, 0.6) !important;
    border: 2px solid #5FB8F8 !important;
    position: relative;
    transition: all 0.3s ease;
}

html.theme-business .process-step-number::before,
html.theme-business .process-step-number::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #5FB8F8;
}

html.theme-business .process-step-number::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .process-step-number::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

html.theme-business .process-step:hover .process-step-number {
    background: rgba(13, 47, 97, 0.9) !important;
    box-shadow: 0 0 25px rgba(66, 165, 245, 0.5);
}

/* Step Number Text */
html.theme-business .process-step-number-text {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    text-shadow: 0 0 10px rgba(66, 165, 245, 0.6);
}

html.theme-business .process-step:hover .process-step-number-text {
    text-shadow: 0 0 20px rgba(66, 165, 245, 0.9);
}

/* Step Line */
html.theme-business .process-step-line {
    background: rgba(66, 165, 245, 0.3) !important;
    position: relative;
    overflow: visible;
}

html.theme-business .process-step-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #5FB8F8, transparent);
    transition: height 0.5s ease;
}

html.theme-business .process-step:hover .process-step-line::before {
    height: 100%;
}

/* Step Title */
html.theme-business .process-step-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 16px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .process-step-title::before {
    content: '// STEP: ';
    color: rgba(95, 184, 248, 0.8);
    font-size: 12px;
    margin-right: 8px;
}

/* Step Text */
html.theme-business .process-step-text {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

/* Step Content */
html.theme-business .process-step-content {
    position: relative;
    padding-left: 20px !important;
}

html.theme-business .process-step-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(66, 165, 245, 0.3), transparent);
}

/* ============================================
   EXPERIENCE & IMPACT - BUSINESS THEME
   ============================================ */

/* Section Styling */
html.theme-business .impact-section {
    background: #0D2F61 !important;
    position: relative;
}

html.theme-business .impact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

/* Header */
html.theme-business .impact-label {
    color: rgba(66, 165, 245, 0.7) !important;
    font-family: 'Courier New', monospace !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .impact-label::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

html.theme-business .impact-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-size: 38px !important;
}

html.theme-business .impact-title::after {
    content: '.metrics()';
    color: rgba(66, 165, 245, 0.4);
    font-size: 28px;
}

/* Career Highlights */
html.theme-business .impact-highlight {
    transition: all 0.3s ease;
}

html.theme-business .impact-highlight:hover {
    transform: translateX(10px);
}

html.theme-business .impact-bullet {
    background: #5FB8F8 !important;
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.6);
    transition: all 0.3s ease;
}

html.theme-business .impact-highlight:hover .impact-bullet {
    box-shadow: 0 0 20px rgba(66, 165, 245, 0.9);
}

html.theme-business .impact-highlight-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 24px !important;
}

html.theme-business .impact-highlight-title::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.6);
}

html.theme-business .impact-highlight-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
}

/* Side Projects Box */
html.theme-business .impact-side-box {
    background: rgba(13, 47, 97, 0.4) !important;
    border: 2px solid rgba(66, 165, 245, 0.4) !important;
    position: relative;
    transition: all 0.3s ease;
}

html.theme-business .impact-side-box::before,
html.theme-business .impact-side-box::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid #5FB8F8;
    opacity: 0.5;
}

html.theme-business .impact-side-box::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .impact-side-box::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

html.theme-business .impact-side-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

html.theme-business .impact-side-title::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

html.theme-business .side-project {
    transition: all 0.2s ease;
    padding: 12px;
    margin: -12px;
    border-left: 2px solid transparent;
}

html.theme-business .side-project:hover {
    background: rgba(66, 165, 245, 0.1);
    border-left-color: #5FB8F8;
    transform: translateX(5px);
}

html.theme-business .side-project-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 14px !important;
}

html.theme-business .side-project-text {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 12px !important;
}

html.theme-business .side-project-link {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

html.theme-business .side-project-link:hover {
    color: #5AB3F5 !important;
    text-shadow: 0 0 10px rgba(66, 165, 245, 0.6);
}

/* ============================================
   MORE ABOUT ME - BUSINESS THEME
   ============================================ */

html.theme-business .about-me-section {
    background: #0D2F61 !important;
    position: relative;
}

html.theme-business .about-me-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5FB8F8, transparent);
}

html.theme-business .about-me-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px !important;
    font-size: 32px !important;
}

html.theme-business .about-me-title::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.5);
}

html.theme-business .about-me-item {
    transition: all 0.2s ease;
    padding: 8px;
    margin: -8px;
}

html.theme-business .about-me-item:hover {
    background: rgba(66, 165, 245, 0.1);
    transform: translateX(5px);
}

html.theme-business .about-me-bullet {
    color: #5FB8F8 !important;
}

html.theme-business .about-me-text {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
}

html.theme-business .about-me-cta {
    border-top: 1px solid rgba(66, 165, 245, 0.3) !important;
}

html.theme-business .about-me-cta-title {
    color: #5FB8F8 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

html.theme-business .about-me-cta-title::before {
    content: '> ';
    color: rgba(66, 165, 245, 0.6);
}

html.theme-business .cta-button-primary {
    background-color: #5FB8F8 !important;
    color: #0D2F61 !important;
    border: 2px solid #5FB8F8 !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    position: relative;
}

html.theme-business .cta-button-primary::before,
html.theme-business .cta-button-primary::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .cta-button-primary::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .cta-button-primary::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

html.theme-business .cta-button-primary:hover {
    background-color: #5AB3F5 !important;
    box-shadow: 0 0 25px rgba(66, 165, 245, 0.6) !important;
    transform: translateY(-2px) !important;
}

html.theme-business .cta-button-primary:hover::before,
html.theme-business .cta-button-primary:hover::after {
    opacity: 1;
}

html.theme-business .cta-button-secondary {
    background-color: transparent !important;
    color: #5FB8F8 !important;
    border: 2px solid #5FB8F8 !important;
    border-radius: 0 !important;
    font-family: 'Courier New', monospace !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

html.theme-business .cta-button-secondary:hover {
    background-color: rgba(66, 165, 245, 0.1) !important;
    box-shadow: 0 0 20px rgba(66, 165, 245, 0.4) !important;
    transform: translateY(-2px) !important;
}

html.theme-business .divider-insight {
    font-family: var(--font-family-mono);
    font-size: 13px;
    color: var(--primary-color);
    padding: 16px 20px;
    background: rgba(227, 242, 253, 0.4);
    border-left: 3px solid var(--accent-color);
    position: relative;
    z-index: 1;
    font-style: italic;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Hero image with blueprint dashboard */
html.theme-business .hero-image {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* === BLUEPRINT METRICS DASHBOARD === */
/* Hide dashboard on all themes except business */
.business-metrics-dashboard {
    display: none;
}

html.theme-business .business-metrics-dashboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 47, 97, 0.97);
    opacity: 0;
    transform: scale(0.9) rotateX(10deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

html.theme-business .hero-image:hover .business-metrics-dashboard {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
}

/* Blueprint grid background */
html.theme-business .blueprint-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, rgba(66, 165, 245, 0.15) 0px, transparent 1px, transparent 10px),
        repeating-linear-gradient(90deg, rgba(66, 165, 245, 0.15) 0px, transparent 1px, transparent 10px),
        repeating-linear-gradient(0deg, rgba(66, 165, 245, 0.08) 0px, transparent 1px, transparent 50px),
        repeating-linear-gradient(90deg, rgba(66, 165, 245, 0.08) 0px, transparent 1px, transparent 50px);
    opacity: 0.6;
}

/* Blueprint corner markers */
html.theme-business .blueprint-corners .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--accent-color);
}

html.theme-business .corner.top-left {
    top: 10px;
    left: 10px;
    border-right: none;
    border-bottom: none;
}

html.theme-business .corner.top-right {
    top: 10px;
    right: 10px;
    border-left: none;
    border-bottom: none;
}

html.theme-business .corner.bottom-left {
    bottom: 10px;
    left: 10px;
    border-right: none;
    border-top: none;
}

html.theme-business .corner.bottom-right {
    bottom: 10px;
    right: 10px;
    border-left: none;
    border-top: none;
}

/* Metrics content container */
html.theme-business .metrics-content {
    width: 90%;
    max-width: 500px;
    font-family: 'JetBrains Mono', monospace;
    color: #ffffff;
}

/* Blueprint header */
html.theme-business .blueprint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(66, 165, 245, 0.3);
}

html.theme-business .blueprint-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-color);
}

html.theme-business .blueprint-status {
    font-size: 0.75rem;
    color: #4ade80;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Metrics grid */
html.theme-business .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Individual metric card */
html.theme-business .metric-card {
    background: rgba(66, 165, 245, 0.08);
    border: 1px solid rgba(66, 165, 245, 0.3);
    padding: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

html.theme-business .metric-card:hover {
    background: rgba(66, 165, 245, 0.12);
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

html.theme-business .metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent-color);
}

html.theme-business .metric-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

html.theme-business .metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    display: inline-block;
    min-width: 60px;
}

html.theme-business .metric-unit {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 0.25rem;
}

/* Animated progress bars */
html.theme-business .metric-bar {
    height: 3px;
    background: rgba(66, 165, 245, 0.2);
    margin-top: 0.75rem;
    position: relative;
    overflow: hidden;
}

html.theme-business .metric-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 0 10px var(--accent-color);
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Blueprint specs */
html.theme-business .blueprint-specs {
    border-top: 1px solid rgba(66, 165, 245, 0.3);
    border-bottom: 1px solid rgba(66, 165, 245, 0.3);
    padding: 1rem 0;
    margin-bottom: 1rem;
}

html.theme-business .spec-line {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
}

html.theme-business .spec-key {
    color: var(--accent-color);
    margin-right: 0.5rem;
    min-width: 80px;
}

/* Blueprint footer */
html.theme-business .blueprint-footer {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.05em;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Scan line effect (behind dashboard) */
html.theme-business .hero-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    animation: scanLine 3s linear infinite;
    opacity: 0.5;
    will-change: transform;
    z-index: 1;
}

html.theme-business .hero-image:hover::after {
    opacity: 0;
}

@keyframes scanLine {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(calc(100vh - 200px)); /* Responsive - uses viewport height */
    }
}

/* Responsive scan line adjustments */
@media (max-width: 768px) {
    @keyframes scanLine {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(300px); /* Smaller travel distance on mobile */
        }
    }
}

/* Section titles with code-like styling */
html.theme-business .section-title::before {
    content: '// ';
    color: var(--text-secondary);
    opacity: 0.6;
}

html.theme-business .section-title::after {
    background: var(--accent-color);
    height: 2px;
}

/* Tags with metric styling */
html.theme-business .tag {
    font-family: var(--font-family-mono);
    background: rgba(21, 101, 192, 0.1);
    border: 1px solid rgba(21, 101, 192, 0.3);
    color: var(--primary-color);
    font-weight: 600;
    position: relative;
    padding-left: 1.5rem; /* Add space for indicator */
}

/* === ORGANIZATION JOURNEY - BUSINESS THEME STYLING === */
html.theme-business .organization-journey {
    border-top: 2px solid rgba(66, 165, 245, 0.3) !important;
}

html.theme-business .organization-journey-title {
    font-family: 'Courier New', monospace !important;
    color: #5FB8F8 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 28px !important;
    font-weight: 600 !important;
    position: relative;
}

html.theme-business .organization-journey-title::before {
    content: '// ';
    color: rgba(66, 165, 245, 0.6);
    font-weight: 400;
}

html.theme-business .organization-journey-title::after {
    content: '.map()';
    color: rgba(66, 165, 245, 0.6);
    font-weight: 400;
}

html.theme-business .organization-journey-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    position: relative;
}

html.theme-business .organization-card {
    background: rgba(66, 165, 245, 0.05) !important;
    border: 2px solid rgba(66, 165, 245, 0.3) !important;
    border-right: none !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 25px 30px !important;
    flex: 1 1 auto !important;
    min-width: 140px !important;
    overflow: hidden;
}

html.theme-business .organization-card:last-child {
    border-right: 2px solid rgba(66, 165, 245, 0.3) !important;
}

/* Blueprint corners for organization cards - hidden by default */
html.theme-business .organization-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #5FB8F8;
    border-left: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .organization-card::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid #5FB8F8;
    border-right: 2px solid #5FB8F8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-business .organization-card:hover::before,
html.theme-business .organization-card:hover::after {
    opacity: 1;
}

html.theme-business .organization-card:hover {
    background: rgba(66, 165, 245, 0.15) !important;
    border-color: #5FB8F8 !important;
    box-shadow: 0 0 30px rgba(66, 165, 245, 0.3), inset 0 0 20px rgba(66, 165, 245, 0.1);
    transform: scale(1.05) translateY(-5px);
    z-index: 10;
}

html.theme-business .organization-name {
    font-family: 'Courier New', monospace !important;
    color: #5FB8F8 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: relative;
    transition: all 0.3s ease;
}

html.theme-business .organization-card:hover .organization-name {
    text-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
    transform: scale(1.05);
}

html.theme-business .organization-dates {
    font-family: 'Courier New', monospace !important;
    color: rgba(66, 165, 245, 0.7) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    transition: all 0.3s ease;
}

html.theme-business .organization-card:hover .organization-dates {
    color: #5FB8F8 !important;
    letter-spacing: 1px !important;
}

/* Scanning line effect across all cards */
html.theme-business .organization-journey-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #5FB8F8, transparent);
    opacity: 0.6;
    animation: scanAcross 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes scanAcross {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(1200px);
        opacity: 0;
    }
}

/* Add tech indicator instead of data-level */
html.theme-business .tag::before {
    content: '◆';
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: var(--accent-color);
}

html.theme-business .tag:hover {
    background: rgba(21, 101, 192, 0.2);
    border-color: var(--primary-color);
}

html.theme-business .tag:hover::before {
    color: var(--primary-color);
}

/* About section with metrics styling */
html.theme-business .about {
    position: relative;
}

html.theme-business .about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
}

/* Nav links with indicator */
html.theme-business .nav-link {
    font-family: var(--font-family-mono);
    font-size: 0.875rem;
}

html.theme-business .nav-link.active::before {
    content: '► ';
    color: var(--accent-color);
    margin-right: 0.25rem;
}

/* Progress bar enhancements */
html.theme-business .progress-track {
    background: rgba(21, 101, 192, 0.1);
    border: 1px solid rgba(21, 101, 192, 0.2);
}

html.theme-business .progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    box-shadow: 0 0 10px rgba(66, 165, 245, 0.5);
}

html.theme-business .progress-handle {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.3),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

html.theme-business .current-number {
    font-family: var(--font-family-mono);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Grid-Based Carousel Effects */
html.theme-business .carousel-perspective {
    perspective: 1500px; /* Less dramatic than designer theme */
}

html.theme-business .project-card {
    border: 2px solid rgba(21, 101, 192, 0.3);
    transition: all 0.5s ease-in-out; /* Smooth, professional transitions */
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.15);
}

html.theme-business .project-card[data-position="0"] {
    box-shadow: 0 8px 24px rgba(21, 101, 192, 0.3),
                0 0 0 2px var(--accent-color);
}

html.theme-business .project-card[data-position="0"]::after {
    content: '[ACTIVE]';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--font-family-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-color);
    background: rgba(21, 101, 192, 0.1);
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--accent-color);
    border-radius: var(--radius-sm);
    z-index: 10;
}

html.theme-business .project-card .card-glow {
    background: linear-gradient(135deg,
        var(--primary-color) 0%,
        var(--accent-color) 50%,
        var(--primary-color) 100%);
    opacity: 0.4;
}

/* Navigation orbs with tech styling */
html.theme-business .nav-orb {
    background: rgba(227, 242, 253, 0.9);
    border: 2px solid var(--primary-color);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}

html.theme-business .nav-orb:hover {
    background: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(66, 165, 245, 0.3),
                0 4px 12px rgba(21, 101, 192, 0.5);
}

html.theme-business .nav-orb svg {
    color: var(--primary-color);
}

html.theme-business .nav-orb:hover svg {
    color: white;
}

/* Skills section with data cards */
html.theme-business .skills {
    background: linear-gradient(135deg, rgba(227, 242, 253, 0.3), rgba(187, 222, 251, 0.3));
}

html.theme-business .skill-category h3 {
    font-family: var(--font-family-mono);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

html.theme-business .skill-category h3::before {
    content: '# ';
    color: var(--accent-color);
}

html.theme-business .skill-category li::before {
    content: '▸';
    color: var(--accent-color);
}

/* === MENTOR THEME - Soft & Approachable === */

/* Organic bounce animations */
@keyframes organicBounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes softPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Warm gradient background overlay */
html.theme-mentor body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 80%, rgba(225, 190, 231, 0.15), transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(243, 229, 245, 0.15), transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Buttons with soft shadows and gentle lift */
html.theme-mentor .btn {
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2),
                0 2px 4px rgba(156, 39, 176, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce easing */
    position: relative;
    border-radius: 50px !important;
}

html.theme-mentor .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

html.theme-mentor .btn:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(156, 39, 176, 0.3),
                0 6px 12px rgba(156, 39, 176, 0.2);
}

html.theme-mentor .btn:hover::before {
    opacity: 1;
}

/* Project cards with layered shadows */
html.theme-mentor .project-card {
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12),
                0 2px 8px rgba(156, 39, 176, 0.08);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg, rgba(250, 250, 250, 1), rgba(243, 229, 245, 0.5));
}

html.theme-mentor .project-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 16px 48px rgba(156, 39, 176, 0.25),
                0 8px 20px rgba(156, 39, 176, 0.15),
                0 4px 8px rgba(156, 39, 176, 0.1);
}

/* Override child image transform to complement mentor theme */
html.theme-mentor .project-card:hover .project-image img {
    transform: scale(1.05);
}

/* Skill categories with gentle animations */
html.theme-mentor .skill-category {
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(135deg, #ffffff, rgba(243, 229, 245, 0.7));
    position: relative;
    overflow: hidden;
}

/* Hide any icons/decorations on skill categories */
html.theme-mentor .skill-category::before {
    display: none !important;
}

/* Top gradient bar - use scaleX only to avoid parent transform conflicts */
html.theme-mentor .skill-category::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* Animate parent without conflicting with child transform */
html.theme-mentor .skill-category:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 8px 24px rgba(156, 39, 176, 0.15),
                0 4px 12px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .skill-category:hover::after {
    transform: scaleX(1);
}

/* Hide bullet icons on skill list items */
html.theme-mentor .skill-category li::before {
    display: none !important;
}

/* Remove padding-left since bullets are removed */
html.theme-mentor .skill-category li {
    padding-left: 0 !important;
}

/* Hero image with network web effect - ONLY on image hover, behind image */
html.theme-mentor .hero-image {
    position: relative;
    z-index: 10;
    overflow: visible;
}

html.theme-mentor .hero-image img {
    filter: drop-shadow(0 8px 24px rgba(156, 39, 176, 0.25));
    animation: gentleFloat 6s ease-in-out infinite;
    position: relative;
    z-index: 10;
}

/* Connection lines - behind the image, thinner lines, larger web */
html.theme-mentor .hero-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1000px;
    height: 1000px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-image:
        /* Thinner connection lines - 1px instead of 4px */
        linear-gradient(45deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(135deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(90deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(0deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(-45deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        linear-gradient(-135deg, transparent 49.5%, rgba(156, 39, 176, 0.25) 49.5%, rgba(156, 39, 176, 0.25) 50.5%, transparent 50.5%),
        /* Additional diagonal connections between nodes */
        linear-gradient(22.5deg, transparent 49.5%, rgba(156, 39, 176, 0.15) 49.5%, rgba(156, 39, 176, 0.15) 50.5%, transparent 50.5%),
        linear-gradient(67.5deg, transparent 49.5%, rgba(156, 39, 176, 0.15) 49.5%, rgba(156, 39, 176, 0.15) 50.5%, transparent 50.5%),
        linear-gradient(112.5deg, transparent 49.5%, rgba(156, 39, 176, 0.15) 49.5%, rgba(156, 39, 176, 0.15) 50.5%, transparent 50.5%),
        linear-gradient(157.5deg, transparent 49.5%, rgba(156, 39, 176, 0.15) 49.5%, rgba(156, 39, 176, 0.15) 50.5%, transparent 50.5%);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

/* Network nodes - 16 profile icons in two rings, smaller nodes */
html.theme-mentor .hero-image::after {
    content: '👤';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(225, 190, 231, 0.9), rgba(243, 229, 245, 0.9));
    border: 2px solid rgba(156, 39, 176, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transform: translate(-20px, -20px) scale(0);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    pointer-events: none;
    box-shadow:
        /* Inner ring - 8 nodes at 350px radius */
        0 -350px 0 -2px rgba(156, 39, 176, 0.4),
        247px -247px 0 -2px rgba(156, 39, 176, 0.4),
        350px 0 0 -2px rgba(156, 39, 176, 0.4),
        247px 247px 0 -2px rgba(156, 39, 176, 0.4),
        0 350px 0 -2px rgba(156, 39, 176, 0.4),
        -247px 247px 0 -2px rgba(156, 39, 176, 0.4),
        -350px 0 0 -2px rgba(156, 39, 176, 0.4),
        -247px -247px 0 -2px rgba(156, 39, 176, 0.4),
        /* Outer ring - 8 nodes at 480px radius */
        0 -480px 0 -2px rgba(156, 39, 176, 0.3),
        339px -339px 0 -2px rgba(156, 39, 176, 0.3),
        480px 0 0 -2px rgba(156, 39, 176, 0.3),
        339px 339px 0 -2px rgba(156, 39, 176, 0.3),
        0 480px 0 -2px rgba(156, 39, 176, 0.3),
        -339px 339px 0 -2px rgba(156, 39, 176, 0.3),
        -480px 0 0 -2px rgba(156, 39, 176, 0.3),
        -339px -339px 0 -2px rgba(156, 39, 176, 0.3);
}

/* Hover effect - expand network on image hover only */
html.theme-mentor .hero-image:hover::before {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
}

html.theme-mentor .hero-image:hover::after {
    opacity: 1;
    transform: translate(-20px, -20px) scale(1);
    box-shadow:
        /* Inner ring with profile icons - alternating single/group */
        0 -350px 0 0 rgba(225, 190, 231, 0.9),
        247px -247px 0 0 rgba(225, 190, 231, 0.9),
        350px 0 0 0 rgba(225, 190, 231, 0.9),
        247px 247px 0 0 rgba(225, 190, 231, 0.9),
        0 350px 0 0 rgba(225, 190, 231, 0.9),
        -247px 247px 0 0 rgba(225, 190, 231, 0.9),
        -350px 0 0 0 rgba(225, 190, 231, 0.9),
        -247px -247px 0 0 rgba(225, 190, 231, 0.9),
        /* Outer ring with profile icons */
        0 -480px 0 0 rgba(225, 190, 231, 0.85),
        339px -339px 0 0 rgba(225, 190, 231, 0.85),
        480px 0 0 0 rgba(225, 190, 231, 0.85),
        339px 339px 0 0 rgba(225, 190, 231, 0.85),
        0 480px 0 0 rgba(225, 190, 231, 0.85),
        -339px 339px 0 0 rgba(225, 190, 231, 0.85),
        -480px 0 0 0 rgba(225, 190, 231, 0.85),
        -339px -339px 0 0 rgba(225, 190, 231, 0.85);
}

/* Old network node code removed - now using simpler box-shadow approach on hero-image only */

/* Section titles with thicker, rounded underline */
html.theme-mentor .section-title {
    position: relative;
}

html.theme-mentor .section-title::after {
    height: 6px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color));
}

/* Navbar with soft styling */
html.theme-mentor .navbar {
    background: rgba(250, 250, 250, 0.98);
    box-shadow: 0 2px 12px rgba(156, 39, 176, 0.1);
}

/* Tags with soft rounded styling */
html.theme-mentor .tag {
    background: linear-gradient(135deg, rgba(225, 190, 231, 0.3), rgba(243, 229, 245, 0.3));
    border: 1px solid rgba(156, 39, 176, 0.2);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50px !important;
}

html.theme-mentor .tag:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(225, 190, 231, 0.5), rgba(243, 229, 245, 0.5));
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
}

/* Floating bubble elements */
html.theme-mentor .bubble {
    position: fixed;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(225, 190, 231, 0.15),
        rgba(243, 229, 245, 0.15));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(156, 39, 176, 0.1);
    pointer-events: none;
    z-index: -1; /* Behind all content to avoid overlapping navbar/cards */
    animation: floatUpBubble linear forwards;
    will-change: transform, opacity;
}

@keyframes floatUpBubble {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }
    10% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(var(--bubble-drift)) scale(1.3);
    }
}

/* Responsive bubble animation for mobile */
@media (max-width: 768px) {
    @keyframes floatUpBubble {
        0% {
            opacity: 0;
            transform: translateY(0) translateX(0) scale(1);
        }
        10% {
            opacity: 0.6;
        }
        50% {
            opacity: 0.4;
        }
        100% {
            opacity: 0;
            transform: translateY(-80vh) translateX(var(--bubble-drift)) scale(1.2);
        }
    }

    html.theme-mentor .bubble {
        /* Smaller bubbles on mobile */
        max-width: 60px;
        max-height: 60px;
    }
}

/* Carousel enhancements for Mentor theme */
html.theme-mentor .carousel-stack {
    perspective: 2000px;
}

/* Animate card image instead of card itself to avoid transform conflicts */
html.theme-mentor .project-card[data-position="0"] .project-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12),
                0 2px 8px rgba(156, 39, 176, 0.08);
    animation: gentleCarouselPulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

@keyframes gentleCarouselPulse {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(156, 39, 176, 0.12),
                    0 2px 8px rgba(156, 39, 176, 0.08);
    }
    50% {
        box-shadow: 0 12px 40px rgba(156, 39, 176, 0.25),
                    0 6px 16px rgba(156, 39, 176, 0.15),
                    0 3px 8px rgba(156, 39, 176, 0.1);
    }
}

html.theme-mentor .carousel-controls .nav-orb {
    background: linear-gradient(135deg, rgba(225, 190, 231, 0.9), rgba(243, 229, 245, 0.9));
    border: 2px solid rgba(156, 39, 176, 0.3);
    backdrop-filter: blur(12px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .carousel-controls .nav-orb:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    transform: scale(1.15); /* Removed rotate - conflicts with SVG arrow */
    box-shadow: 0 8px 24px rgba(156, 39, 176, 0.4),
                0 4px 12px rgba(156, 39, 176, 0.3);
}

/* Rotate the orb background instead using pseudo-element */
html.theme-mentor .carousel-controls .nav-orb::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: -1;
}

html.theme-mentor .carousel-controls .nav-orb:hover::after {
    opacity: 1;
    transform: rotate(180deg);
}

html.theme-mentor .carousel-controls .nav-orb:hover svg {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.5));
}

html.theme-mentor .progress-bar {
    background: rgba(225, 190, 231, 0.2);
    backdrop-filter: blur(8px);
}

html.theme-mentor .progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

html.theme-mentor .progress-handle {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4),
                0 2px 6px rgba(156, 39, 176, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .progress-handle:hover {
    transform: scale(1.3);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.5),
                0 3px 8px rgba(156, 39, 176, 0.4);
}

/* ============================================
   MENTOR THEME - CASE STUDIES SECTION
   ============================================ */

/* Section Background with subtle purple glow */
html.theme-mentor .case-studies {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.3) 100%);
    position: relative;
}

/* Soft radial gradient accent */
html.theme-mentor .case-studies::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(225, 190, 231, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure content appears above background */
html.theme-mentor .case-studies-container {
    position: relative;
    z-index: 1;
}

/* Section Title - soft purple with glow */
html.theme-mentor .case-studies-title {
    color: rgba(156, 39, 176, 1) !important;
    font-weight: 400 !important;
    text-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
}

/* Subtitle - muted purple tone */
html.theme-mentor .case-studies-subtitle {
    color: rgba(100, 100, 100, 0.8) !important;
}

/* Case Study Cards - replace black background with soft gradient */
html.theme-mentor .case-study-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.12),
        0 2px 8px rgba(156, 39, 176, 0.08);
    border-radius: 24px !important;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Card hover effect */
html.theme-mentor .case-study-card:hover {
    transform: translateY(-12px) scale(1.01);
    box-shadow:
        0 16px 48px rgba(156, 39, 176, 0.2),
        0 8px 24px rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.4) !important;
}

/* Override all hardcoded black backgrounds */
html.theme-mentor .case-studies div[style*="background: #000000"],
html.theme-mentor .case-studies div[style*="background:#000000"] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
}

/* Case Study Headers - purple accent */
html.theme-mentor .case-study-card h2 {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Subheaders and labels */
html.theme-mentor .case-study-card h3 {
    color: rgba(156, 39, 176, 0.8) !important;
}

/* Case study buttons - fully rounded purple */
html.theme-mentor .case-study-card a[style*="background: #ffffff"][style*="text-transform: uppercase"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1)) !important;
    color: rgba(255, 255, 255, 1) !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .case-study-card a[style*="background: #ffffff"][style*="text-transform: uppercase"]:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1)) !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow:
        0 8px 24px rgba(156, 39, 176, 0.35),
        0 4px 12px rgba(156, 39, 176, 0.25) !important;
}

/* Override white text to dark readable text */
html.theme-mentor .case-studies p[style*="color: #ffffff"],
html.theme-mentor .case-studies p[style*="color:#ffffff"],
html.theme-mentor .case-studies h2[style*="color: #ffffff"],
html.theme-mentor .case-studies h3[style*="color: #ffffff"] {
    color: rgba(50, 50, 50, 1) !important;
}

/* Gray text - soften */
html.theme-mentor .case-studies p[style*="color: #999"],
html.theme-mentor .case-studies p[style*="color: #666"],
html.theme-mentor .case-studies p[style*="color:#999"],
html.theme-mentor .case-studies p[style*="color:#666"] {
    color: rgba(100, 100, 100, 0.85) !important;
}

/* Light gray text */
html.theme-mentor .case-studies p[style*="color: #cccccc"],
html.theme-mentor .case-studies p[style*="color:#cccccc"],
html.theme-mentor .case-studies li[style*="color: #cccccc"] {
    color: rgba(80, 80, 80, 1) !important;
}

/* Border overrides - replace white/gray with purple */
html.theme-mentor .case-studies div[style*="border: 1px solid #ffffff"],
html.theme-mentor .case-studies div[style*="border:1px solid #ffffff"] {
    border-color: rgba(156, 39, 176, 0.2) !important;
}

html.theme-mentor .case-studies div[style*="border-bottom: 1px solid #333"],
html.theme-mentor .case-studies div[style*="border-bottom:1px solid #333"] {
    border-bottom-color: rgba(156, 39, 176, 0.15) !important;
}

html.theme-mentor .case-studies li[style*="border-bottom: 1px solid #222"] {
    border-bottom-color: rgba(156, 39, 176, 0.12) !important;
}

/* Metric borders - left accent bars */
html.theme-mentor .case-studies div[style*="border-left: 3px solid #ffffff"],
html.theme-mentor .case-studies div[style*="border-left:3px solid #ffffff"] {
    border-left-color: rgba(156, 39, 176, 0.6) !important;
    border-left-width: 4px !important;
}

/* Metric values - keep green but add subtle glow */
html.theme-mentor .case-studies p[style*="color: #00FF88"],
html.theme-mentor .case-studies p[style*="color:#00FF88"] {
    color: rgba(156, 39, 176, 1) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(156, 39, 176, 0.2);
}

/* Blue metrics (CloudCar) */
html.theme-mentor .case-studies p[style*="color: #4DA6FF"],
html.theme-mentor .case-studies p[style*="color:#4DA6FF"] {
    color: rgba(156, 39, 176, 1) !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 6px rgba(156, 39, 176, 0.2);
}

/* List bullet points - white squares to purple circles */
html.theme-mentor .case-studies li span[style*="background: #ffffff"],
html.theme-mentor .case-studies li span[style*="background:#ffffff"] {
    background: rgba(156, 39, 176, 0.6) !important;
    border-radius: 50% !important;
}

/* Tags/badges - invert colors with purple theme */
html.theme-mentor .case-studies span[style*="background: #ffffff"][style*="color: #000"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0.75)) !important;
    color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.25);
}

/* CTA Buttons - purple theme */
html.theme-mentor .case-studies a[style*="background: #ffffff"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.95), rgba(156, 39, 176, 0.85)) !important;
    color: rgba(255, 255, 255, 1) !important;
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.3),
        0 2px 6px rgba(156, 39, 176, 0.2);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 4px !important;
}

html.theme-mentor .case-studies a[style*="background: #ffffff"]:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.4),
        0 6px 16px rgba(156, 39, 176, 0.25);
}

/* Divider sections (Career Impact Analysis) */
html.theme-mentor .case-study-divider {
    background: rgba(243, 229, 245, 0.4) !important;
    border: 1px solid rgba(156, 39, 176, 0.15) !important;
    border-radius: 8px;
    padding: 40px;
    margin: 80px 0;
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.08);
}

/* Divider dashboard styling - comprehensive purple theme */
html.theme-mentor .divider-dashboard {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 2px solid rgba(156, 39, 176, 0.25) !important;
    border-radius: 12px !important;
    padding: 32px 40px !important;
    box-shadow:
        0 4px 20px rgba(156, 39, 176, 0.12),
        0 2px 10px rgba(156, 39, 176, 0.08);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

/* Soft glow on hover */
html.theme-mentor .divider-dashboard:hover {
    transform: translateY(-4px) scale(1.005);
    box-shadow:
        0 12px 40px rgba(156, 39, 176, 0.18),
        0 6px 20px rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.35) !important;
}

/* Subtle radial gradient background */
html.theme-mentor .divider-dashboard::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(225, 190, 231, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

/* Header section */
html.theme-mentor .divider-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid rgba(156, 39, 176, 0.15) !important;
    position: relative;
    z-index: 1;
}

html.theme-mentor .divider-label {
    color: rgba(156, 39, 176, 0.95) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

html.theme-mentor .divider-status {
    color: rgba(100, 100, 100, 0.85) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Metrics grid */
html.theme-mentor .divider-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    position: relative;
    z-index: 1;
}

/* Individual metric cards */
html.theme-mentor .divider-metric {
    text-align: center !important;
    padding: 24px 20px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 8px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on metric cards */
html.theme-mentor .divider-metric::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(156, 39, 176, 0.6), rgba(156, 39, 176, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.theme-mentor .divider-metric:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(156, 39, 176, 0.4) !important;
    transform: translateY(-6px) scale(1.05);
    box-shadow:
        0 8px 24px rgba(156, 39, 176, 0.2),
        0 4px 12px rgba(156, 39, 176, 0.12);
}

html.theme-mentor .divider-metric:hover::before {
    opacity: 1;
}

/* Metric icons */
html.theme-mentor .divider-metric-icon {
    margin-bottom: 16px !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .divider-metric:hover .divider-metric-icon {
    transform: scale(1.15) translateY(-4px);
    filter: drop-shadow(0 4px 8px rgba(156, 39, 176, 0.25));
}

/* SVG icons - purple stroke */
html.theme-mentor .divider-metric-icon svg,
html.theme-mentor .case-study-divider svg {
    stroke: rgba(156, 39, 176, 0.75) !important;
    transition: all 0.3s ease;
}

html.theme-mentor .divider-metric:hover .divider-metric-icon svg {
    stroke: rgba(156, 39, 176, 0.95) !important;
}

/* Metric values - large purple numbers */
html.theme-mentor .divider-metric-value {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: rgba(156, 39, 176, 1) !important;
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1 !important;
    margin: 12px 0 !important;
    transition: all 0.3s ease;
}

html.theme-mentor .divider-metric:hover .divider-metric-value {
    transform: scale(1.1);
    text-shadow: 0 2px 8px rgba(156, 39, 176, 0.2);
}

/* Metric labels */
html.theme-mentor .divider-metric-label {
    font-size: 11px !important;
    color: rgba(100, 100, 100, 0.9) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

/* Progress bars */
html.theme-mentor .divider-metric-bar {
    height: 4px !important;
    background: rgba(156, 39, 176, 0.15) !important;
    border-radius: 4px !important;
    margin-top: 12px !important;
    position: relative !important;
    overflow: hidden !important;
}

html.theme-mentor .divider-metric-bar span {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0.6)) !important;
    border-radius: 4px !important;
    transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.4);
}

/* Insight section */
html.theme-mentor .divider-insight {
    color: rgba(80, 80, 80, 1) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
    padding: 16px 20px !important;
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    background: rgba(243, 229, 245, 0.25);
    border-radius: 6px;
    margin-top: 20px;
}

/* ============================================
   MENTOR THEME - PROCESS SECTION (MY PROCESS)
   ============================================ */

/* Process section styling - soft purple gradients */
html.theme-mentor section[style*="background: linear-gradient(180deg, #0a0a0a, #1a1a1a)"] {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1), rgba(243, 229, 245, 0.4)) !important;
}

/* Process unique callout - replace navy with purple gradient, soft rounded corners */
html.theme-mentor .process-unique-callout {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(225, 190, 231, 0.12)) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 12px !important;
    color: rgba(50, 50, 50, 1) !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-unique-callout:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(156, 39, 176, 0.15),
        0 4px 12px rgba(156, 39, 176, 0.08);
}

/* Hide sharp corner decorations - replace with rounded design */
html.theme-mentor .process-unique-callout div[style*="border-top: 2px solid #42A5F5"],
html.theme-mentor .process-unique-callout div[style*="border-bottom: 2px solid #42A5F5"],
html.theme-mentor .process-unique-callout div[style*="border-left: 2px solid #42A5F5"],
html.theme-mentor .process-unique-callout div[style*="border-right: 2px solid #42A5F5"] {
    display: none !important;
}

/* Callout label - purple accent */
html.theme-mentor .callout-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Timeline overview - purple theme with rounded corners */
html.theme-mentor .process-timeline-overview {
    background: rgba(243, 229, 245, 0.3) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.06);
}

html.theme-mentor .process-timeline-overview strong {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Process Steps - card styling with soft shadows */
html.theme-mentor .process-step {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 8px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-step:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.18),
        0 6px 16px rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.35) !important;
}

/* Process step numbers - purple gradient background with rounded shape */
html.theme-mentor .process-step-number-display {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0.75)) !important;
    color: rgba(255, 255, 255, 1) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-step:hover .process-step-number-display {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.4);
}

/* Process headings */
html.theme-mentor .process-step-heading {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Process duration text */
html.theme-mentor .process-duration {
    color: rgba(100, 100, 100, 0.8) !important;
}

/* Process body text */
html.theme-mentor .process-step-body-text {
    color: rgba(80, 80, 80, 1) !important;
}

/* Collaboration box - soft rounded corners */
html.theme-mentor .process-collab-box {
    background: rgba(243, 229, 245, 0.4) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.3s ease;
}

html.theme-mentor .process-collab-box:hover {
    background: rgba(243, 229, 245, 0.5) !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .process-collab-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

html.theme-mentor .process-collab-text {
    color: rgba(80, 80, 80, 1) !important;
}

html.theme-mentor .process-collab-text strong {
    color: rgba(156, 39, 176, 0.85) !important;
}

/* Process tags - purple theme with pill-shaped rounded corners */
html.theme-mentor .process-tag {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(225, 190, 231, 0.15)) !important;
    color: rgba(156, 39, 176, 0.95) !important;
    border: 1px solid rgba(156, 39, 176, 0.25) !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-tag:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(225, 190, 231, 0.25)) !important;
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.2);
}

/* Process tools text */
html.theme-mentor .process-tools {
    color: rgba(100, 100, 100, 0.75) !important;
}

/* Bullet dividers - purple accent with rounded edges */
html.theme-mentor .process-bullet-divider {
    background: rgba(156, 39, 176, 0.6) !important;
    border-radius: 4px !important;
}

html.theme-mentor .process-bullet-text {
    color: rgba(80, 80, 80, 1) !important;
}

/* Callout boxes within steps - soft rounded corners */
html.theme-mentor .process-callout-box {
    background: rgba(243, 229, 245, 0.35) !important;
    border: 1px solid rgba(156, 39, 176, 0.25) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.5) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.3s ease;
}

html.theme-mentor .process-callout-box:hover {
    background: rgba(243, 229, 245, 0.45) !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .process-callout-heading {
    color: rgba(156, 39, 176, 0.9) !important;
    font-weight: 600 !important;
}

html.theme-mentor .process-callout-text {
    color: rgba(80, 80, 80, 1) !important;
}

/* Progression items - rounded stages */
html.theme-mentor .process-progression {
    border-left: 4px solid rgba(156, 39, 176, 0.4) !important;
    border-radius: 8px !important;
    padding-left: 20px !important;
}

html.theme-mentor .process-progression-stage {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(225, 190, 231, 0.15)) !important;
    color: rgba(156, 39, 176, 0.9) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 16px !important;
    padding: 8px 16px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-progression-stage:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(225, 190, 231, 0.2)) !important;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.15);
}

/* Metrics in process - rounded corners */
html.theme-mentor .process-metrics {
    background: rgba(243, 229, 245, 0.3) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.06);
}

html.theme-mentor .process-metric-item {
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-metric-item:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.12);
}

html.theme-mentor .process-metric-value {
    color: rgba(156, 39, 176, 1) !important;
    font-weight: 700 !important;
    font-size: 28px !important;
}

html.theme-mentor .process-metric-label {
    color: rgba(100, 100, 100, 0.85) !important;
    font-size: 12px !important;
}

/* Scale list - rounded bullets and items */
html.theme-mentor .process-scale-list {
    color: rgba(80, 80, 80, 1) !important;
}

html.theme-mentor .process-scale-item {
    padding: 8px 0 !important;
    transition: all 0.2s ease;
}

html.theme-mentor .process-scale-item:hover {
    transform: translateX(4px);
}

html.theme-mentor .process-scale-bullet {
    background: rgba(156, 39, 176, 0.6) !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
}

html.theme-mentor .process-scale-text {
    color: rgba(80, 80, 80, 1) !important;
}

/* ============================================
   MENTOR THEME - CROSS-FUNCTIONAL COLLABORATION
   ============================================ */

/* Collaboration container - rounded corners, no sharp edges */
html.theme-mentor .process-collaboration {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.5)) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 12px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-collaboration:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 24px rgba(156, 39, 176, 0.15),
        0 4px 12px rgba(156, 39, 176, 0.08);
}

/* Hide sharp corner decorations */
html.theme-mentor .process-collaboration div[style*="border-top: 2px solid #42A5F5"],
html.theme-mentor .process-collaboration div[style*="border-bottom: 2px solid #42A5F5"],
html.theme-mentor .process-collaboration div[style*="border-left: 2px solid #42A5F5"],
html.theme-mentor .process-collaboration div[style*="border-right: 2px solid #42A5F5"] {
    display: none !important;
}

/* Collaboration title */
html.theme-mentor .process-collaboration h3 {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Framework label */
html.theme-mentor .framework-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Individual collaboration cards - rounded with purple accents */
html.theme-mentor .process-collaboration > div > div > div[style*="padding: 20px"],
html.theme-mentor .process-collaboration div[style*="border-left: 3px solid #42A5F5"] {
    background: rgba(243, 229, 245, 0.3) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-collaboration > div > div > div[style*="padding: 20px"]:hover {
    background: rgba(243, 229, 245, 0.45) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.12);
}

/* Collaboration card titles */
html.theme-mentor .process-collaboration h4 {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Collaboration card text */
html.theme-mentor .process-collaboration p[style*="color: #666"] {
    color: rgba(80, 80, 80, 1) !important;
}

/* ============================================
   MENTOR THEME - PROCESS PHILOSOPHY
   ============================================ */

/* Philosophy container - rounded, soft purple gradient */
html.theme-mentor .process-philosophy {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.08), rgba(225, 190, 231, 0.12)) !important;
    color: rgba(50, 50, 50, 1) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 16px !important;
    box-shadow:
        0 6px 24px rgba(156, 39, 176, 0.12),
        0 3px 12px rgba(156, 39, 176, 0.08);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .process-philosophy:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow:
        0 12px 40px rgba(156, 39, 176, 0.18),
        0 6px 20px rgba(156, 39, 176, 0.12);
}

/* Hide sharp corner decorations */
html.theme-mentor .process-philosophy div[style*="border-top: 2px solid #42A5F5"],
html.theme-mentor .process-philosophy div[style*="border-bottom: 2px solid #42A5F5"],
html.theme-mentor .process-philosophy div[style*="border-left: 2px solid #42A5F5"],
html.theme-mentor .process-philosophy div[style*="border-right: 2px solid #42A5F5"] {
    display: none !important;
}

/* Philosophy label */
html.theme-mentor .philosophy-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Philosophy title */
html.theme-mentor .process-philosophy h3 {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Philosophy quote text */
html.theme-mentor .process-philosophy > p {
    color: rgba(60, 60, 60, 1) !important;
}

/* Philosophy principle cards - rounded, pill-shaped */
html.theme-mentor .philosophy-principle {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(243, 229, 245, 0.6)) !important;
    border: 1px solid rgba(156, 39, 176, 0.25) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .philosophy-principle:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.7)) !important;
    border-color: rgba(156, 39, 176, 0.4) !important;
    transform: translateY(-8px) scale(1.08) rotate(2deg);
    box-shadow: 0 8px 24px rgba(156, 39, 176, 0.18);
}

/* Principle icon/symbol */
html.theme-mentor .philosophy-principle > div:first-child {
    color: rgba(156, 39, 176, 0.8) !important;
}

/* Principle label */
html.theme-mentor .philosophy-principle > div:last-child {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* ============================================
   MENTOR THEME - PROCESS ADAPTABILITY
   ============================================ */

/* Adaptability container - soft rounded background */
html.theme-mentor .process-adaptability {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1), rgba(243, 229, 245, 0.3)) !important;
    border-radius: 12px !important;
    padding: 48px !important;
}

/* Adaptability title */
html.theme-mentor .adaptability-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Adaptability cards - rounded with soft shadows */
html.theme-mentor .adaptability-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.08),
        0 2px 8px rgba(156, 39, 176, 0.04);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .adaptability-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(243, 229, 245, 0.6)) !important;
    border-color: rgba(156, 39, 176, 0.35) !important;
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.15),
        0 6px 16px rgba(156, 39, 176, 0.1);
}

/* Adaptability card titles */
html.theme-mentor .adaptability-card h4 {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Adaptability card text */
html.theme-mentor .adaptability-card p {
    color: rgba(80, 80, 80, 1) !important;
}

/* ============================================
   MENTOR THEME - PROFESSIONAL TIMELINE SECTION
   ============================================ */

/* Timeline section - replace navy with soft purple gradient */
html.theme-mentor .timeline-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%) !important;
    color: rgba(50, 50, 50, 1) !important;
    border-top: 2px solid rgba(156, 39, 176, 0.3) !important;
}

/* Timeline label */
html.theme-mentor .timeline-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Timeline title */
html.theme-mentor .timeline-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Timeline subtitle */
html.theme-mentor .timeline-subtitle {
    color: rgba(100, 100, 100, 0.85) !important;
}

/* Central timeline line - purple */
html.theme-mentor .timeline-path {
    background: rgba(156, 39, 176, 0.3) !important;
    border-radius: 2px;
}

/* Timeline cards - rounded with purple theme */
html.theme-mentor .timeline-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 24px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .timeline-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.2),
        0 6px 16px rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.5) !important;
}

/* Hide sharp corner decorations on timeline cards */
html.theme-mentor .timeline-card div[style*="position: absolute"][style*="width: 12px"][style*="height: 12px"] {
    display: none !important;
}

/* Timeline card date labels - purple */
html.theme-mentor .timeline-card > div:first-child {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Timeline card company names */
html.theme-mentor .timeline-card > div:nth-child(2) {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Timeline card role text - purple */
html.theme-mentor .timeline-card > div:nth-child(3) {
    color: rgba(156, 39, 176, 0.8) !important;
}

/* NEW badge - purple instead of blue */
html.theme-mentor .timeline-card span[style*="background: #42A5F5"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0.75)) !important;
    color: rgba(255, 255, 255, 1) !important;
    border-radius: 4px !important;
}

/* Timeline node dots - purple circles */
html.theme-mentor .timeline-item > div[style*="width: 16px"][style*="height: 16px"] {
    background: rgba(250, 250, 250, 1) !important;
    border: 3px solid rgba(156, 39, 176, 0.8) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.4);
}

/* Hover dashboard border */
html.theme-mentor .hover-dashboard {
    border-top-color: rgba(156, 39, 176, 0.2) !important;
}

/* Hover dashboard paragraph text */
html.theme-mentor .hover-dashboard p {
    color: rgba(80, 80, 80, 1) !important;
}

/* Platform/info boxes in hover dashboards - rounded with purple accents */
html.theme-mentor .hover-dashboard div[style*="background: rgba(66, 165, 245, 0.1)"] {
    background: rgba(243, 229, 245, 0.4) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-left: 4px solid rgba(156, 39, 176, 0.6) !important;
}

/* Platform/info box labels */
html.theme-mentor .hover-dashboard div[style*="font-size: 10px"][style*="color: #42A5F5"] {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Platform/info box values (white text) */
html.theme-mentor .hover-dashboard div[style*="color: #fff"]:not([style*="background"]) {
    color: rgba(60, 60, 60, 1) !important;
}

/* Funding values (large numbers) - purple */
html.theme-mentor .hover-dashboard div[style*="font-size: 18px"][style*="color: #42A5F5"] {
    color: rgba(156, 39, 176, 1) !important;
}

/* Key deliverables labels */
html.theme-mentor .hover-dashboard div[style*="KEY_DELIVERABLES"],
html.theme-mentor .hover-dashboard div[style*="CONTRIBUTIONS"] {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Deliverables text */
html.theme-mentor .hover-dashboard div[style*="color: rgba(255,255,255,0.7)"] {
    color: rgba(90, 90, 90, 1) !important;
}

/* Additional timeline text color overrides - catch all remaining blues */
html.theme-mentor .timeline-section div[style*="color: #42A5F5"],
html.theme-mentor .timeline-section span[style*="color: #42A5F5"],
html.theme-mentor .timeline-section strong[style*="color: #42A5F5"] {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Timeline card white text - convert to dark readable */
html.theme-mentor .timeline-card div[style*="color: #fff"],
html.theme-mentor .timeline-card span[style*="color: #fff"] {
    color: rgba(60, 60, 60, 1) !important;
}

/* Timeline SVG icons - purple stroke */
html.theme-mentor .timeline-section svg[stroke="#42A5F5"] {
    stroke: rgba(156, 39, 176, 0.75) !important;
}

/* Timeline background overrides for blue tinted areas */
html.theme-mentor .timeline-section div[style*="background: rgba(66, 165, 245"] {
    background: rgba(243, 229, 245, 0.4) !important;
}

/* Timeline border overrides for all blue borders */
html.theme-mentor .timeline-section div[style*="border: 2px solid #42A5F5"],
html.theme-mentor .timeline-section div[style*="border: 2px solid rgba(66, 165, 245"] {
    border-color: rgba(156, 39, 176, 0.3) !important;
}

html.theme-mentor .timeline-section div[style*="border-left: 3px solid #42A5F5"] {
    border-left-color: rgba(156, 39, 176, 0.6) !important;
}

/* Ensure readable contrast for all timeline text */
html.theme-mentor .timeline-section div[style*="color: rgba(255,255,255,0.8)"] {
    color: rgba(80, 80, 80, 1) !important;
}

/* Font family consistency - remove Courier New, use system fonts */
html.theme-mentor .timeline-section [style*="font-family: 'Courier New'"] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================
   MENTOR THEME - ORGANIZATION JOURNEY SECTION
   ============================================ */

/* Organization Journey container */
html.theme-mentor .organization-journey {
    border-top-color: rgba(156, 39, 176, 0.2) !important;
}

/* Organization Journey title */
html.theme-mentor .organization-journey-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Organization cards - rounded with purple theme */
html.theme-mentor .organization-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5)) !important;
    border: 2px solid rgba(156, 39, 176, 0.25) !important;
    border-radius: 24px !important;
    padding: 24px 32px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.08),
        0 2px 8px rgba(156, 39, 176, 0.04);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .organization-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(243, 229, 245, 0.7)) !important;
    border-color: rgba(156, 39, 176, 0.45) !important;
    transform: translateY(-8px) scale(1.05);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.18),
        0 6px 16px rgba(156, 39, 176, 0.12);
}

/* Organization name - purple */
html.theme-mentor .organization-name {
    color: rgba(156, 39, 176, 0.95) !important;
    font-weight: 600 !important;
}

/* Organization dates - readable gray */
html.theme-mentor .organization-dates {
    color: rgba(100, 100, 100, 0.85) !important;
}

/* ============================================
   MENTOR THEME - TESTIMONIALS SECTION
   ============================================ */

/* Testimonials section background */
html.theme-mentor .testimonials-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.3) 100%) !important;
}

/* Testimonials label */
html.theme-mentor .testimonials-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Testimonials title */
html.theme-mentor .testimonials-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Testimonial cards - rounded with purple theme */
html.theme-mentor .testimonial-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 2px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 24px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .testimonial-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.18),
        0 6px 16px rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.35) !important;
}

/* Quote mark - purple */
html.theme-mentor .testimonial-quote-mark {
    color: rgba(156, 39, 176, 0.3) !important;
}

/* Testimonial text - readable dark */
html.theme-mentor .testimonial-text {
    color: rgba(70, 70, 70, 1) !important;
}

/* Testimonial footer border - purple */
html.theme-mentor .testimonial-footer {
    border-top-color: rgba(156, 39, 176, 0.15) !important;
}

/* Author name - purple */
html.theme-mentor .testimonial-author {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Author role - readable gray */
html.theme-mentor .testimonial-role {
    color: rgba(100, 100, 100, 0.85) !important;
}

/* Testimonial overlay badges */
html.theme-mentor .verified-badge {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 0.75)) !important;
    color: rgba(255, 255, 255, 1) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
}

html.theme-mentor .project-duration {
    background: rgba(243, 229, 245, 0.5) !important;
    color: rgba(156, 39, 176, 0.9) !important;
    border: 1px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    font-size: 10px !important;
}

/* Overlay metrics */
html.theme-mentor .metric-label {
    color: rgba(156, 39, 176, 0.85) !important;
}

html.theme-mentor .metric-value {
    color: rgba(80, 80, 80, 1) !important;
}

/* ============================================
   MENTOR THEME - ABOUT JACOB GRUVER SECTION
   ============================================ */

/* About section background */
html.theme-mentor .about-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%) !important;
}

/* About label */
html.theme-mentor .about-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* About title */
html.theme-mentor .about-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* About body text */
html.theme-mentor .about-text {
    color: rgba(70, 70, 70, 1) !important;
}

/* About metrics container - rounded */
html.theme-mentor .about-metrics {
    border: 2px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.08),
        0 2px 8px rgba(156, 39, 176, 0.04);
}

/* Metric cards */
html.theme-mentor .about-metrics .metric-card {
    border-right-color: rgba(156, 39, 176, 0.15) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.4)) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .about-metrics .metric-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(243, 229, 245, 0.6)) !important;
    transform: translateY(-4px);
}

/* Metric numbers - purple instead of green */
html.theme-mentor .metric-number {
    color: rgba(156, 39, 176, 1) !important;
}

/* Metric labels */
html.theme-mentor .metric-label-text {
    color: rgba(100, 100, 100, 0.85) !important;
}

/* ============================================
   MENTOR THEME - SKILLS & EXPERTISE SECTION
   ============================================ */

/* Skills section background */
html.theme-mentor .skills-section {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.4) 0%, rgba(250, 250, 250, 1) 100%) !important;
}

/* Skills label */
html.theme-mentor .skills-label {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Skills title */
html.theme-mentor .skills-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Skills group label */
html.theme-mentor .skills-group-label {
    color: rgba(156, 39, 176, 0.85) !important;
}

/* Skill cards - rounded with purple theme */
html.theme-mentor .skill-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    border-radius: 24px !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.08),
        0 2px 8px rgba(156, 39, 176, 0.04);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .skill-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(243, 229, 245, 0.6)) !important;
    border-color: rgba(156, 39, 176, 0.35) !important;
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.15),
        0 6px 16px rgba(156, 39, 176, 0.1);
}

/* Skill names - purple */
html.theme-mentor .skill-name {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Skill bar filled - purple instead of green */
html.theme-mentor .skill-bar-filled {
    background: rgba(156, 39, 176, 0.8) !important;
    border-radius: 3px !important;
}

/* Skill bar empty - light purple */
html.theme-mentor .skill-bar {
    background: rgba(156, 39, 176, 0.15) !important;
    border-radius: 3px !important;
}

/* ===== TOOLS & SOFTWARE, METHODOLOGIES, INDUSTRY EXPERIENCE ===== */

/* Tools & Software collapsible section - rounded container */
html.theme-mentor .tools-details {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 2px solid rgba(156, 39, 176, 0.25) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    box-shadow:
        0 4px 20px rgba(156, 39, 176, 0.12),
        0 2px 10px rgba(156, 39, 176, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .tools-details:hover {
    transform: translateY(-4px);
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.18),
        0 4px 15px rgba(156, 39, 176, 0.12) !important;
}

/* Tools summary - purple text */
html.theme-mentor .tools-summary {
    color: rgba(156, 39, 176, 0.95) !important;
    font-weight: 700 !important;
}

/* Tools icon (+ symbol) - purple instead of green */
html.theme-mentor .tools-icon {
    color: rgba(156, 39, 176, 0.9) !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .tools-details[open] .tools-icon {
    transform: rotate(45deg);
}

/* Tools content border - purple */
html.theme-mentor .tools-content {
    border-top: 1px solid rgba(156, 39, 176, 0.2) !important;
}

/* Tool category labels - purple */
html.theme-mentor .tool-category-label {
    color: rgba(156, 39, 176, 0.75) !important;
    font-weight: 700 !important;
}

/* Tool category text - readable dark */
html.theme-mentor .tool-category-text {
    color: rgba(60, 60, 60, 0.9) !important;
}

/* Methodologies section */

/* Methodology bullets - perfect circles with purple */
html.theme-mentor .methodology-bullet {
    background: rgba(156, 39, 176, 0.8) !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.4) !important;
}

/* Methodology text - readable dark purple */
html.theme-mentor .methodology-text {
    color: rgba(60, 60, 60, 0.95) !important;
    font-weight: 500 !important;
}

/* Methodology items - hover effect */
html.theme-mentor .methodology-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 8px 0 !important;
}

html.theme-mentor .methodology-item:hover {
    transform: translateX(8px);
}

html.theme-mentor .methodology-item:hover .methodology-bullet {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.6) !important;
}

/* Industry Experience tags */

/* Industry tags - pill-shaped with purple borders */
html.theme-mentor .industry-tag {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.5)) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    box-shadow:
        0 2px 8px rgba(156, 39, 176, 0.1),
        0 1px 4px rgba(156, 39, 176, 0.08) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .industry-tag:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.2),
        0 3px 10px rgba(156, 39, 176, 0.15) !important;
    border-color: rgba(156, 39, 176, 0.5) !important;
}

/* Industry tag text - purple */
html.theme-mentor .industry-tag-text {
    color: rgba(156, 39, 176, 0.9) !important;
    font-weight: 600 !important;
}

/* COMPASS-DRIVEN DESIGN Section (Second Process Section) */

/* Replace black background with soft gradient */
html.theme-mentor .process-section[style*="background: #000000"] {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.3) 100%) !important;
}

/* Section label - purple */
html.theme-mentor .process-label {
    color: rgba(156, 39, 176, 0.7) !important;
}

/* Section title - purple instead of white */
html.theme-mentor .process-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Process description - readable dark text */
html.theme-mentor .process-description[style*="color: #999"] {
    color: rgba(80, 80, 80, 0.9) !important;
}

/* Process steps container - add spacing */
html.theme-mentor .process-steps {
    position: relative;
}

/* Individual process step - hover effect */
html.theme-mentor .process-step {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .process-step:hover {
    transform: translateX(8px);
}

/* Process step numbers - rounded with purple theme */
html.theme-mentor .process-step-number {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 3px solid rgba(156, 39, 176, 0.6) !important;
    border-radius: 16px !important;
    box-shadow:
        0 4px 20px rgba(156, 39, 176, 0.15),
        0 2px 10px rgba(156, 39, 176, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .process-step:hover .process-step-number {
    transform: scale(1.15) rotate(5deg);
    border-color: rgba(156, 39, 176, 0.8) !important;
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.25),
        0 4px 15px rgba(156, 39, 176, 0.18) !important;
}

html.theme-mentor .process-step-number-text {
    color: rgba(156, 39, 176, 1) !important;
    font-weight: 700 !important;
}

/* Timeline lines - purple with soft gradient */
html.theme-mentor .process-step-line {
    background: linear-gradient(180deg, rgba(156, 39, 176, 0.4), rgba(156, 39, 176, 0.2)) !important;
    width: 3px !important;
    border-radius: 2px !important;
}

/* Step titles - purple */
html.theme-mentor .process-step-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.95) !important;
    font-weight: 700 !important;
}

/* Step text - dark readable */
html.theme-mentor .process-step-text[style*="color: #cccccc"] {
    color: rgba(70, 70, 70, 0.95) !important;
    line-height: 1.7 !important;
}

/* Process step content - add subtle background on hover */
html.theme-mentor .process-step-content {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 16px !important;
    border-radius: 10px !important;
}

html.theme-mentor .process-step:hover .process-step-content {
    background: rgba(243, 229, 245, 0.3);
    box-shadow: 0 2px 12px rgba(156, 39, 176, 0.08);
}

/* ===== EXPERIENCE & IMPACT SECTION ===== */

/* Impact section - soft gradient background */
html.theme-mentor .impact-section[style*="background: #000000"] {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.3) 0%, rgba(250, 250, 250, 1) 100%) !important;
}

/* Section label - purple */
html.theme-mentor .impact-label {
    color: rgba(156, 39, 176, 0.7) !important;
}

/* Section title - purple */
html.theme-mentor .impact-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Impact highlights - left column */

/* Individual highlight container - hover effect */
html.theme-mentor .impact-highlight {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 16px !important;
    border-radius: 10px !important;
}

html.theme-mentor .impact-highlight:hover {
    transform: translateX(8px);
    background: rgba(243, 229, 245, 0.25);
    box-shadow: 0 2px 12px rgba(156, 39, 176, 0.1);
}

/* Impact bullets - perfect circles with purple */
html.theme-mentor .impact-bullet {
    background: rgba(156, 39, 176, 0.8) !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: 12px !important;
    box-shadow: 0 0 8px rgba(156, 39, 176, 0.4) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .impact-highlight:hover .impact-bullet {
    transform: scale(1.4);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.6) !important;
}

/* Impact highlight titles - purple */
html.theme-mentor .impact-highlight-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Impact highlight text - readable dark */
html.theme-mentor .impact-highlight-text[style*="color: #cccccc"] {
    color: rgba(70, 70, 70, 0.95) !important;
}

/* Right column - Side Projects box */

/* Side projects container - rounded with gradient */
html.theme-mentor .impact-side-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6)) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 16px !important;
    padding: 48px !important;
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.15),
        0 4px 15px rgba(156, 39, 176, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .impact-side-box:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 40px rgba(156, 39, 176, 0.2),
        0 6px 20px rgba(156, 39, 176, 0.15) !important;
}

/* Side projects title - purple */
html.theme-mentor .impact-side-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Individual side project - subtle hover */
html.theme-mentor .side-project {
    padding: 16px !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .side-project:hover {
    background: rgba(156, 39, 176, 0.08);
    transform: translateX(4px);
}

/* Side project titles - purple */
html.theme-mentor .side-project-title[style*="color: #ffffff"] {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Side project text - readable dark */
html.theme-mentor .side-project-text[style*="color: #999"] {
    color: rgba(70, 70, 70, 0.9) !important;
}

/* Side project links - purple with hover */
html.theme-mentor .side-project-link[style*="color: #00FF88"] {
    color: rgba(156, 39, 176, 0.85) !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .side-project-link:hover {
    color: rgba(156, 39, 176, 1) !important;
    transform: translateX(4px);
}

/* Side project emojis - subtle scale on hover */
html.theme-mentor .side-project:hover .side-project-icon {
    display: inline-block;
    animation: gentle-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gentle-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ===== MORE ABOUT ME SECTION ===== */

/* About me section - soft gradient background */
html.theme-mentor .about-me-section[style*="background-color: #000000"] {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%) !important;
}

/* About me title - purple */
html.theme-mentor .about-me-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* About me grid items - hover effect */
html.theme-mentor .about-me-item {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    padding: 16px !important;
    border-radius: 10px !important;
}

html.theme-mentor .about-me-item:hover {
    background: rgba(243, 229, 245, 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 12px rgba(156, 39, 176, 0.1);
}

/* About me bullets - purple circles instead of green */
html.theme-mentor .about-me-bullet[style*="color: #00FF88"] {
    color: rgba(156, 39, 176, 0.85) !important;
    font-size: 24px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .about-me-item:hover .about-me-bullet {
    transform: scale(1.3);
    color: rgba(156, 39, 176, 1) !important;
}

/* About me text - readable dark */
html.theme-mentor .about-me-text[style*="color: #CCCCCC"] {
    color: rgba(70, 70, 70, 0.95) !important;
}

/* CTA section - purple border instead of gray */
html.theme-mentor .about-me-cta[style*="border-top: 1px solid #222222"] {
    border-top: 2px solid rgba(156, 39, 176, 0.25) !important;
}

/* CTA title - purple */
html.theme-mentor .about-me-cta-title {
    color: rgba(156, 39, 176, 0.95) !important;
}

/* Primary CTA button - purple instead of green */
html.theme-mentor .cta-button-primary[style*="background-color: #00FF88"] {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1)) !important;
    color: rgba(255, 255, 255, 1) !important;
    border-radius: 50px !important;
    box-shadow:
        0 4px 20px rgba(156, 39, 176, 0.3),
        0 2px 10px rgba(156, 39, 176, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .cta-button-primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.4),
        0 4px 15px rgba(156, 39, 176, 0.3) !important;
}

/* Secondary CTA button - purple border and text */
html.theme-mentor .cta-button-secondary[style*="border: 2px solid #FFFFFF"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(156, 39, 176, 0.6) !important;
    color: rgba(156, 39, 176, 0.95) !important;
    border-radius: 50px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .cta-button-secondary:hover {
    background: rgba(156, 39, 176, 0.1) !important;
    border-color: rgba(156, 39, 176, 0.9) !important;
    color: rgba(156, 39, 176, 1) !important;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 4px 20px rgba(156, 39, 176, 0.2);
}

/* ============================================
   MENTOR THEME - ABOUT SECTION
   ============================================ */

/* About section - soft purple gradient background */
html.theme-mentor .about {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 50%, rgba(250, 250, 250, 1) 100%);
    position: relative;
}

/* Subtle radial glow effect */
html.theme-mentor .about::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(225, 190, 231, 0.12), transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* About content container */
html.theme-mentor .about .container {
    position: relative;
    z-index: 1;
}

/* Section title - purple with soft glow */
html.theme-mentor .about .section-title {
    color: rgba(156, 39, 176, 0.95) !important;
    text-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
}

/* About text styling */
html.theme-mentor .about-text {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5));
    padding: 40px;
    border-radius: 8px;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    border: 1px solid rgba(156, 39, 176, 0.15);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .about-text:hover {
    transform: translateY(-6px);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.15),
        0 6px 16px rgba(156, 39, 176, 0.1);
    border-color: rgba(156, 39, 176, 0.25);
}

/* About text paragraphs */
html.theme-mentor .about-text p {
    color: rgba(80, 80, 80, 1) !important;
    line-height: 1.8;
}

/* First paragraph - slightly larger */
html.theme-mentor .about-text p:first-child {
    font-size: 18px;
    color: rgba(60, 60, 60, 1) !important;
}

/* ============================================
   MENTOR THEME - CONTACT SECTION
   ============================================ */

/* Contact section - soft purple gradient */
html.theme-mentor #contact {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.5) 100%);
    position: relative;
}

/* Soft radial gradient accent */
html.theme-mentor #contact::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(225, 190, 231, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Contact section title */
html.theme-mentor #contact .section-title {
    color: rgba(156, 39, 176, 0.95) !important;
    text-shadow: 0 2px 8px rgba(156, 39, 176, 0.15);
    position: relative;
    z-index: 1;
}

/* Contact items - card styling */
html.theme-mentor .contact-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(243, 229, 245, 0.5)) !important;
    border: 1px solid rgba(156, 39, 176, 0.2) !important;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
}

html.theme-mentor .contact-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 12px 32px rgba(156, 39, 176, 0.2),
        0 6px 16px rgba(156, 39, 176, 0.12);
    border-color: rgba(156, 39, 176, 0.35) !important;
}

/* Contact item titles */
html.theme-mentor .contact-item h3 {
    color: rgba(156, 39, 176, 0.9) !important;
}

/* Contact item text */
html.theme-mentor .contact-item p,
html.theme-mentor .contact-item a {
    color: rgba(80, 80, 80, 1) !important;
}

/* Contact item links hover */
html.theme-mentor .contact-item a:hover {
    color: rgba(156, 39, 176, 0.95) !important;
    text-decoration: underline;
}

/* Contact intro text - readable dark */
html.theme-mentor .contact-intro {
    color: rgba(70, 70, 70, 0.95) !important;
    font-size: 18px !important;
}

/* Contact methods container */
html.theme-mentor .contact-methods {
    position: relative;
    z-index: 1;
}

/* Contact item icons - rounded with purple */
html.theme-mentor .contact-item .icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1)) !important;
    color: rgba(255, 255, 255, 1) !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html.theme-mentor .contact-item:hover .icon {
    transform: scale(1.15) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25) !important;
}

/* Contact item text - ensure proper spacing */
html.theme-mentor .contact-item span:not(.icon) {
    color: rgba(70, 70, 70, 0.95) !important;
    font-weight: 500 !important;
}

/* ===== FOOTER ===== */

/* Footer - soft purple gradient */
html.theme-mentor .footer {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.5) 0%, rgba(250, 250, 250, 1) 100%) !important;
    border-top: 2px solid rgba(156, 39, 176, 0.2) !important;
    padding: 48px 40px !important;
    text-align: center !important;
}

/* Footer text - purple */
html.theme-mentor .footer p {
    color: rgba(156, 39, 176, 0.8) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* Footer decorative elements */
html.theme-mentor .footer p::before {
    content: '◆' !important;
    color: rgba(156, 39, 176, 0.6) !important;
    margin-right: 12px !important;
    font-size: 12px !important;
}

html.theme-mentor .footer p::after {
    content: '◆' !important;
    color: rgba(156, 39, 176, 0.6) !important;
    margin-left: 12px !important;
    font-size: 12px !important;
}

/* Accessibility: disable Mentor theme animations */
@media (prefers-reduced-motion: reduce) {
    html.theme-mentor .bubble {
        display: none !important;
    }

    html.theme-mentor .hero-image img {
        animation: none !important;
    }

    html.theme-mentor .hero-image::before {
        animation: none !important;
    }

    html.theme-mentor .project-card[data-position="0"] .project-image::before {
        animation: none !important;
    }

    html.theme-mentor .carousel-controls .nav-orb::after {
        animation: none !important;
        transition: none !important;
    }
}

/* === CLASSIC THEME - Minimal & Editorial === */

/* Editorial typography enhancements */
html.theme-classic body {
    background: #ffffff;
    color: #000000;
}

html.theme-classic .hero-title {
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
}

/* Decorative quotation marks for editorial feel */
html.theme-classic .hero-title::before {
    content: '\201C'; /* Left double quote */
    position: absolute;
    left: -0.5em;
    top: -0.1em;
    font-size: 1.5em;
    opacity: 0.3;
    font-style: normal;
}

html.theme-classic .hero-subtitle {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: none;
    opacity: 0.7;
}

html.theme-classic .section-title {
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.05em;
    position: relative;
}

html.theme-classic .section-title::after {
    display: none;
}

/* Editorial line decoration */
html.theme-classic .section-title::before {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin: 0 auto 1.5rem;
}

/* Pull quotes / emphasized text */
html.theme-classic .section-description {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Brutalist button styling with offset shadows */
html.theme-classic .btn {
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-family: Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
    position: relative;
    transition: all 0.2s linear;
}

html.theme-classic .btn:hover {
    background: var(--primary-color);
    color: white;
    transform: translate(4px, 4px);
    box-shadow: -4px -4px 0px var(--primary-color);
}

html.theme-classic .btn:active {
    transform: translate(0, 0);
    box-shadow: none;
}

html.theme-classic .btn-primary {
    background: var(--primary-color);
    color: white;
}

html.theme-classic .btn-primary:hover {
    background: #ffffff;
    background-image:
        radial-gradient(circle at center, #cccccc 2px, transparent 2px);
    background-size: 10px 10px;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Project cards with brutalist borders */
html.theme-classic .project-card {
    border: 2px solid var(--border-color);
    background: #ffffff;
    box-shadow: none;
    transition: all 0.2s linear;
}

html.theme-classic .project-card:hover {
    transform: translate(6px, 6px);
    box-shadow: -6px -6px 0px var(--primary-color);
}

/* Project titles with editorial styling */
html.theme-classic .project-card h3 {
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.03em;
}

/* Project descriptions with increased line height */
html.theme-classic .project-card p {
    line-height: 1.8;
    font-size: 0.95rem;
}

/* Tags with minimal black borders */
html.theme-classic .tag {
    border: 1px solid var(--primary-color);
    background: transparent;
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 0.75rem;
    font-style: italic;
    transition: all 0.2s linear;
}

html.theme-classic .tag:hover {
    background: var(--primary-color);
    color: white;
    transform: translate(2px, 2px);
    box-shadow: -2px -2px 0px var(--primary-color);
}

/* Skill categories with brutalist aesthetic */
html.theme-classic .skill-category {
    border: 2px solid var(--border-color);
    box-shadow: none;
    background: #ffffff;
    transition: all 0.2s linear;
}

html.theme-classic .skill-category:hover {
    transform: translate(3px, 3px);
    box-shadow: -3px -3px 0px var(--primary-color);
}

html.theme-classic .skill-category h3 {
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.05em;
}

/* Skill tags within categories */
html.theme-classic .skill-category .tag {
    background: #fafafa;
    border: 1px solid #000000;
}

/* Navbar with editorial simplicity */
html.theme-classic .navbar {
    border-bottom: 2px solid var(--border-color);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.98);
}

html.theme-classic .logo {
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.1em;
}

html.theme-classic .nav-link {
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85rem;
    position: relative;
}

/* Underline effect on nav links */
html.theme-classic .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--primary-color);
    transition: width 0.2s linear;
}

html.theme-classic .nav-link:hover::after {
    width: 100%;
}

/* Hero image with simple border */
html.theme-classic .hero-image {
    border: 3px solid var(--primary-color);
    background: #fafafa;
    position: relative;
    overflow: hidden;
}

/* Dark grey polka dot overlay */
html.theme-classic .hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at center, #333333 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

html.theme-classic .hero-image:hover::before {
    opacity: 0.6;
}

html.theme-classic .hero-image img {
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.3s ease;
    position: relative;
    z-index: 1;
}

html.theme-classic .hero-image:hover img {
    filter: grayscale(0%) contrast(1);
}

/* Minimal carousel design */
html.theme-classic .carousel-stack {
    perspective: 1000px;
}

html.theme-classic .project-card[data-position="0"] {
    border: 3px solid var(--primary-color);
    box-shadow: 8px 8px 0px var(--primary-color);
}

html.theme-classic .project-card[data-position="1"],
html.theme-classic .project-card[data-position="-1"] {
    border: 2px solid var(--border-color);
    opacity: 0.6;
}

html.theme-classic .project-card[data-position="2"],
html.theme-classic .project-card[data-position="-2"] {
    border: 1px solid var(--border-color);
    opacity: 0.3;
}

/* Carousel navigation orbs with brutalist styling */
html.theme-classic .carousel-controls .nav-orb {
    background: transparent;
    border: 2px solid var(--primary-color);
    box-shadow: none;
    transition: all 0.2s linear;
}

html.theme-classic .carousel-controls .nav-orb:hover {
    background: var(--primary-color);
    transform: translate(2px, 2px);
    box-shadow: -2px -2px 0px var(--primary-color);
}

html.theme-classic .carousel-controls .nav-orb:hover svg {
    filter: brightness(0) invert(1); /* Make arrows white */
}

html.theme-classic .carousel-controls .nav-orb svg {
    stroke: var(--primary-color);
    transition: all 0.2s linear;
}

/* Progress bar with minimal design */
html.theme-classic .progress-bar {
    background: transparent;
    border: 1px solid var(--primary-color);
    border-radius: 0;
    height: 3px;
}

html.theme-classic .progress-fill {
    background: var(--primary-color);
    box-shadow: none;
}

html.theme-classic .progress-handle {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 0;
    width: 12px;
    height: 12px;
    box-shadow: none;
}

html.theme-classic .progress-handle:hover {
    transform: scale(1.3);
    background: white;
    border-color: var(--primary-color);
}

/* Editorial decorative elements */
html.theme-classic .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 60px;
    background: var(--primary-color);
    opacity: 0.3;
}

/* Add page number decorations */
html.theme-classic .section {
    position: relative;
    counter-increment: section;
}

html.theme-classic .section::before {
    content: counter(section, upper-roman);
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, serif;
    font-size: 0.75rem;
    font-style: italic;
    letter-spacing: 0.2em;
    opacity: 0.3;
}

/* Decorative corner brackets on hover */
html.theme-classic .project-card::before,
html.theme-classic .project-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-color);
    opacity: 0;
    transition: opacity 0.2s linear;
}

html.theme-classic .project-card::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
}

html.theme-classic .project-card::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
}

html.theme-classic .project-card:hover::before,
html.theme-classic .project-card:hover::after {
    opacity: 1;
}

/* Typewriter-style link underlines */
html.theme-classic a:not(.btn):not(.nav-link) {
    text-decoration: none;
    border-bottom: 1px solid var(--primary-color);
    transition: border-width 0.2s linear;
}

html.theme-classic a:not(.btn):not(.nav-link):hover {
    border-bottom-width: 2px;
}

/* Drop cap for first paragraph (if exists) */
html.theme-classic .hero-content p:first-of-type::first-letter {
    font-size: 3em;
    line-height: 0.8;
    float: left;
    margin: 0.1em 0.1em 0 0;
    font-style: normal;
    font-weight: 700;
}

/* Footer with editorial styling */
html.theme-classic footer {
    border-top: 2px solid var(--primary-color);
    margin-top: 4rem;
    padding-top: 2rem;
}

/* Remove all animations for classic theme */
html.theme-classic .hero-content,
html.theme-classic .hero-image,
html.theme-classic * {
    animation: none !important;
}

/* Disable prefers-reduced-motion queries for classic (already minimal) */
@media (prefers-reduced-motion: reduce) {
    html.theme-classic * {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

/* === UNDECIDED THEME - 70s Newspaper Minimalist === */

/* Pure newspaper aesthetic - clean white background */
html.theme-undecided body {
    background: #ffffff;
    color: #000000;
}

/* === BUTTONS - Comic Book Halftone Style === */
html.theme-undecided .btn {
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.85rem;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* Polka dot halftone pattern overlay */
html.theme-undecided .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at center, #000000 1px, transparent 1px);
    background-size: 6px 6px;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

/* Paper fold corner effect */
html.theme-undecided .btn::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0 0;
    border-color: transparent #fafafa transparent transparent;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    pointer-events: none;
}

html.theme-undecided .btn:hover {
    background: #000000;
    color: #ffffff;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.4);
    transform: translate(-4px, -4px) rotate(-1deg);
}

html.theme-undecided .btn:hover::before {
    opacity: 0.15;
    background-image:
        radial-gradient(circle at center, #ffffff 1.5px, transparent 1.5px);
    background-size: 8px 8px;
}

html.theme-undecided .btn:hover::after {
    border-width: 0 20px 20px 0;
}

html.theme-undecided .btn:active {
    transform: scale(0.95) rotate(0deg);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Primary button with inverted halftone */
html.theme-undecided .btn-primary {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-white) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

html.theme-undecided .btn-primary::before {
    display: none !important;
}

html.theme-undecided .btn-primary:hover {
    background: #fffacd !important;
    color: var(--newspaper-black) !important;
    border: var(--border-heavy) solid var(--newspaper-black) !important;
    box-shadow: inset 0 0 0 2px #ffed4e !important;
}

html.theme-undecided .btn-primary:hover::before {
    display: none !important;
}

html.theme-undecided .btn-secondary {
    background: transparent;
    border: 2px solid #000000;
    color: #000000;
}

html.theme-undecided .btn-secondary:hover {
    background: #000000;
    color: #ffffff;
}

/* === HERO SECTION - Front Page Headline === */
html.theme-undecided .hero-title {
    font-size: 4rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.02em;
    border-left: 8px solid #000000;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

html.theme-undecided .hero-subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-bottom: 1px solid #000000;
    border-top: 1px solid #000000;
    padding: 0.5rem 0;
    display: inline-block;
    margin-bottom: 1.5rem;
    font-style: normal;
    font-weight: 400;
}

html.theme-undecided .hero-description,
html.theme-undecided .section-description {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 400;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 1rem 0;
    margin: 2rem 0;
}

/* === NAVBAR - Newspaper Masthead === */
html.theme-undecided .navbar {
    background: #ffffff;
    border-bottom: 4px double #000000;
    border-top: 2px solid #000000;
    box-shadow: none;
    padding: 1rem 0;
}

html.theme-undecided .logo {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    padding: 0 1.5rem;
}

html.theme-undecided .nav-link {
    font-family: Georgia, 'Times New Roman', serif;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    position: relative;
}

html.theme-undecided .nav-link:last-child {
    border-right: none;
}

html.theme-undecided .nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #000000;
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

html.theme-undecided .nav-link:hover::after {
    width: 100%;
}

/* === PROJECT CARDS - Newspaper Photo Frames with Paper Stack === */
/* ===== NEWSPAPER THEME CAROUSEL - Vintage Print Photos ===== */

/* Minimal perspective - newspapers are flat */
html.theme-undecided .carousel-perspective {
    perspective: 1000px;
}

/* Photo frame cards - like newspaper clippings */
html.theme-undecided .project-card {
    border: 4px solid var(--newspaper-black);
    background: #ffffff;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    border-radius: 0;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

/* Grayscale newspaper photos */
html.theme-undecided .project-card img {
    filter: grayscale(100%) contrast(1.1);
    transition: all 0.3s ease;
    border-bottom: 2px solid var(--newspaper-black);
}

/* Paper stack hover effect */
html.theme-undecided .project-card:hover {
    transform: translate(-8px, -8px) rotate(-1.5deg) !important;
    box-shadow:
        4px 4px 0 #000000,
        8px 8px 0 rgba(0, 0, 0, 0.6),
        12px 12px 0 rgba(0, 0, 0, 0.3);
}

/* Halftone effect on hover */
html.theme-undecided .project-card:hover img {
    filter: grayscale(100%) contrast(1.2) brightness(1.05);
}

/* Paper texture overlay */
html.theme-undecided .project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.02) 2px,
        rgba(0,0,0,0.02) 4px
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

html.theme-undecided .project-card:hover::after {
    opacity: 1;
}

/* Active center card - crop marks */
html.theme-undecided .project-card[data-position="0"] {
    border-width: 5px;
    box-shadow: 6px 6px 0 #000000;
}

/* Corner crop marks on active card */
html.theme-undecided .project-card[data-position="0"]::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--newspaper-black);
    border-left: 3px solid var(--newspaper-black);
    z-index: 10;
}

/* Side cards - reduced opacity */
html.theme-undecided .project-card[data-position="1"],
html.theme-undecided .project-card[data-position="-1"] {
    border-width: 3px;
    opacity: 0.7;
}

/* Far cards - more reduced */
html.theme-undecided .project-card[data-position="2"],
html.theme-undecided .project-card[data-position="-2"] {
    border-width: 2px;
    opacity: 0.5;
}

/* === SKILL CATEGORIES - Classified Ads Layout === */
html.theme-undecided .skill-category {
    border: 3px solid #000000;
    padding: 1.5rem;
    background: #ffffff;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    overflow: hidden;
}

/* Striped background for alternating categories */
html.theme-undecided .skill-category:nth-child(even) {
    background: repeating-linear-gradient(
        0deg,
        #ffffff,
        #ffffff 2px,
        #fafafa 2px,
        #fafafa 4px
    );
}

/* Disabled old halftone fill on hover - using simpler lift effect instead */
html.theme-undecided .skill-category::before {
    display: none !important;
}

/* Simplified hover - just lift with shadow (defined in main section above) */
/* Old complex hover styles disabled to maintain readability */

html.theme-undecided .skill-category h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-bottom: 2px solid #000000;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: 700;
    font-style: normal;
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

/* Disabled old hover effect on h3 - keeping text readable */
html.theme-undecided .skill-category:hover h3 {
    /* No color changes - maintain black text for readability */
}

/* === SKILL TAGS - Inline Classified Listings === */
html.theme-undecided .tag,
html.theme-undecided .skill-tag {
    display: inline-block;
    border: 1px solid #000000;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    margin: 0.25rem;
    background: transparent;
    font-style: italic;
    letter-spacing: 0.05em;
    border-radius: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Animated fill effect */
html.theme-undecided .tag::before,
html.theme-undecided .skill-tag::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: #000000;
    background-image:
        radial-gradient(circle at center, #ffffff 0.5px, transparent 0.5px);
    background-size: 4px 4px;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50%;
    z-index: -1;
}

html.theme-undecided .tag:hover,
html.theme-undecided .skill-tag:hover {
    color: #ffffff;
    transform: translate(-2px, -2px) scale(1.05);
    box-shadow: 2px 2px 0 #000000;
}

html.theme-undecided .tag:hover::before,
html.theme-undecided .skill-tag:hover::before {
    width: 200%;
    height: 200%;
}

/* === HERO IMAGE - Newspaper Photo with Vintage Effect === */
html.theme-undecided .hero-image {
    border: 3px solid #000000;
    background: #fafafa;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Halftone overlay */
html.theme-undecided .hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at center, rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 5px 5px;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
    pointer-events: none;
}

html.theme-undecided .hero-image img {
    filter: grayscale(100%) contrast(1.2);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 0;
    position: relative;
    z-index: 0;
}

html.theme-undecided .hero-image:hover {
    transform: translate(-5px, -5px);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
}

html.theme-undecided .hero-image:hover::before {
    opacity: 0;
    background-size: 2px 2px;
}

html.theme-undecided .hero-image:hover img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.05);
}

/* === SECTION TITLES - Ink Drop Effect === */
html.theme-undecided .section-title {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 4px solid var(--newspaper-black);
    border-bottom: 4px solid var(--newspaper-black);
    padding: 0.75rem 0;
    text-align: center;
    margin-bottom: 2rem;
    font-style: normal;
    position: relative;
    cursor: default;
    overflow: hidden;
}

/* Ink drops falling from top */
html.theme-undecided .section-title::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(
        ellipse at 20% 0%,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 50% 0%,
        rgba(0, 0, 0, 0.2) 0%,
        transparent 50%
    ),
    radial-gradient(
        ellipse at 80% 0%,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Ink splatter effect - spreads across text */
html.theme-undecided .section-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 35% 60%, rgba(0, 0, 0, 0.06) 1.5px, transparent 1.5px),
        radial-gradient(circle at 55% 40%, rgba(0, 0, 0, 0.07) 1px, transparent 1px),
        radial-gradient(circle at 75% 70%, rgba(0, 0, 0, 0.05) 2px, transparent 2px),
        radial-gradient(circle at 85% 50%, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.6s ease 0.4s;
    pointer-events: none;
}

/* Hover effects - ink drops and spreads */
html.theme-undecided .section-title:hover::before {
    top: 0;
    opacity: 1;
    animation: inkDrip 0.8s ease-out;
}

html.theme-undecided .section-title:hover::after {
    opacity: 1;
    transform: scale(1);
}

html.theme-undecided .section-title:hover {
    /* Ink absorption - text gets slightly darker/wetter */
    color: #0a0a0a;
    text-shadow:
        0 0 3px rgba(0, 0, 0, 0.3),
        0.5px 0.5px 1px rgba(0, 0, 0, 0.2);
}

/* Ink dripping animation */
@keyframes inkDrip {
    0% {
        top: -100%;
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    100% {
        top: 0;
        opacity: 1;
    }
}

/* === CAROUSEL - Newspaper Photo Gallery === */
/* Brutalist square navigation buttons */
html.theme-undecided .nav-orb {
    width: 50px;
    height: 50px;
    background: transparent;
    border: 2px solid var(--newspaper-black);
    border-radius: 0;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Halftone fill on hover */
html.theme-undecided .nav-orb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--newspaper-black);
    background-image: radial-gradient(circle at center, #ffffff 1px, transparent 1px);
    background-size: 6px 6px;
    transform: scale(0) rotate(0deg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}

html.theme-undecided .nav-orb:hover {
    transform: translate(-3px, -3px) rotate(90deg);
    box-shadow: 3px 3px 0 var(--newspaper-black);
}

html.theme-undecided .nav-orb:hover::before {
    transform: scale(1) rotate(180deg);
}

html.theme-undecided .nav-orb svg {
    stroke: var(--newspaper-black);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    pointer-events: none;
}

html.theme-undecided .nav-orb:hover svg {
    stroke: #ffffff;
    transform: scale(1.1);
}

/* Brutalist progress bar */
html.theme-undecided .progress-track {
    height: 6px;
    background: #ffffff;
    border: 2px solid var(--newspaper-black);
    border-radius: 0;
    box-shadow: none;
}

html.theme-undecided .progress-fill {
    height: 100%;
    background: var(--newspaper-black);
    border-radius: 0;
    box-shadow: none;
}

html.theme-undecided .progress-handle {
    width: 14px;
    height: 14px;
    background: var(--newspaper-black);
    border: 2px solid var(--newspaper-black);
    border-radius: 0;
    box-shadow: none;
    transition: all 0.2s linear;
}

html.theme-undecided .progress-handle::after {
    background: #ffffff;
    border-radius: 0;
}

html.theme-undecided .progress-handle:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background: #ffffff;
    border-color: #000000;
}

/* Progress label numbers */
html.theme-undecided .current-number {
    font-family: var(--headline-font);
    font-weight: 700;
    color: var(--newspaper-black);
    background: none;
    -webkit-text-fill-color: var(--newspaper-black);
}

html.theme-undecided .divider {
    color: var(--newspaper-gray);
}

html.theme-undecided .total-number {
    font-family: var(--body-font);
    color: var(--newspaper-gray);
}

/* === CONTACT SECTION - Publisher Info with Paper Effect === */
html.theme-undecided .contact-item {
    background: #ffffff;
    border: 2px solid #000000;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

/* Disabled old diagonal stripe fill - using simpler lift effect instead */
html.theme-undecided .contact-item::before {
    display: none !important;
}

/* Simplified hover - just lift with shadow (defined in main section above) */
/* Old complex hover styles disabled to maintain readability */

/* === SECTIONS - Editorial Layout === */
html.theme-undecided section {
    border-bottom: 3px solid #000000;
}

html.theme-undecided #home {
    border-bottom: 3px solid #000000;
    padding: 4rem 2rem;
}

/* === FOOTER - Legal Notice === */
html.theme-undecided .footer {
    border-top: 4px double #000000;
    padding: 2rem;
    text-align: center;
    background: #fafafa;
}

/* === NEWSPAPER ANIMATIONS === */

/* Ink bleed hover effect on links */
html.theme-undecided a {
    position: relative;
    transition: all 0.2s linear;
}

html.theme-undecided a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #000000;
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

html.theme-undecided a:not(.btn):hover::after {
    width: 100%;
}

/* Corner brackets for focused elements */
html.theme-undecided .focusable:focus,
html.theme-undecided button:focus,
html.theme-undecided .btn:focus {
    outline: none;
    position: relative;
}

html.theme-undecided .focusable:focus::before,
html.theme-undecided button:focus::before,
html.theme-undecided .btn:focus::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 20px;
    height: 20px;
    border-top: 2px solid #000000;
    border-left: 2px solid #000000;
}

html.theme-undecided .focusable:focus::after,
html.theme-undecided button:focus::after,
html.theme-undecided .btn:focus::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid #000000;
    border-right: 2px solid #000000;
}

/* ===== CASE STUDY SECTION - Newspaper Feature Articles ===== */

/* Section header */
html.theme-undecided .case-studies-header {
    text-align: center !important;
    margin-bottom: 60px !important;
}

html.theme-undecided .case-studies-title {
    font-family: var(--headline-font) !important;
    font-size: 56px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 16px 0 !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .case-studies-subtitle {
    font-family: var(--body-font) !important;
    font-size: 18px !important;
    color: var(--newspaper-gray) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    font-style: italic !important;
    text-align: center !important;
}

/* Case study wrapper */
html.theme-undecided .case-study-wrapper {
    margin-bottom: 80px !important;
}

/* Case study card - newspaper article layout */
html.theme-undecided .case-study-card {
    background: var(--newspaper-bg) !important;
    border: 3px solid var(--newspaper-black) !important;
    padding: 50px !important;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.15) !important;
    position: relative;
}

/* Header section */
html.theme-undecided .case-study-card > div:first-child {
    border-bottom: 2px solid var(--newspaper-black) !important;
    padding-bottom: 25px !important;
    margin-bottom: 35px !important;
}

/* Title - headline style */
html.theme-undecided .case-study-card h2 {
    font-family: var(--headline-font) !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    letter-spacing: -0.02em !important;
    color: var(--newspaper-black) !important;
    text-transform: none !important;
}

/* Subtitle */
html.theme-undecided .case-study-card h2 + p {
    font-family: var(--body-font) !important;
    font-size: 15px !important;
    color: var(--newspaper-gray) !important;
    font-style: italic !important;
    margin: 0 !important;
}

/* Tag badge */
html.theme-undecided .case-study-card span[style*="background: #ffffff"] {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-white) !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: 2px solid var(--newspaper-black) !important;
}

/* Date text */
html.theme-undecided .case-study-card span[style*="background: #ffffff"] + p {
    font-size: 12px !important;
    color: var(--newspaper-gray) !important;
    font-style: normal !important;
}

/* Key metrics - newspaper column style */
html.theme-undecided .case-study-card > div:nth-child(2) {
    display: grid !important;
    gap: 25px !important;
    margin-bottom: 40px !important;
}

html.theme-undecided .case-study-card > div:nth-child(2) > div {
    border-left: 3px solid var(--newspaper-black) !important;
}

/* Metric values */
html.theme-undecided .case-study-card > div:nth-child(2) p:first-child {
    font-family: var(--headline-font) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    margin: 0 !important;
}

html.theme-undecided .case-study-card > div:nth-child(2) p:last-child {
    font-size: 12px !important;
    color: var(--newspaper-gray) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin: 6px 0 0 0 !important;
}

/* Section headings - byline style */
html.theme-undecided .case-study-card h3 {
    font-family: var(--subhead-font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 18px 0 !important;
    color: var(--newspaper-black) !important;
    border-bottom: 1px solid var(--newspaper-black) !important;
    padding-bottom: 8px !important;
}

/* Body text - newspaper paragraph style */
html.theme-undecided .case-study-card p[style*="font-size: 18px"] {
    font-family: var(--body-font) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--newspaper-text) !important;
    text-align: justify !important;
    margin: 0 0 20px 0 !important;
}

/* Achievements list */
html.theme-undecided .case-study-card ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

html.theme-undecided .case-study-card li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: flex-start !important;
    color: var(--newspaper-text) !important;
    font-family: var(--body-font) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

html.theme-undecided .case-study-card li:last-child {
    border-bottom: none !important;
}

/* Bullet squares */
html.theme-undecided .case-study-card li span {
    width: 6px !important;
    height: 6px !important;
    background: var(--newspaper-black) !important;
    margin-right: 14px !important;
    margin-top: 6px !important;
    flex-shrink: 0 !important;
}

/* CTA button */
html.theme-undecided .case-study-card a[style*="View Full Case Study"] {
    background: var(--newspaper-black) !important;
    color: var(--newspaper-white) !important;
    padding: 14px 36px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border: 2px solid var(--newspaper-black) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

html.theme-undecided .case-study-card a[style*="View Full Case Study"]:hover {
    background: var(--newspaper-white) !important;
    color: var(--newspaper-black) !important;
    border: 2px solid var(--newspaper-black) !important;
}

/* Corner crop marks on case study cards */
html.theme-undecided .case-study-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    width: 25px;
    height: 25px;
    border-top: 3px solid var(--newspaper-black);
    border-left: 3px solid var(--newspaper-black);
}

html.theme-undecided .case-study-card::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 25px;
    height: 25px;
    border-bottom: 3px solid var(--newspaper-black);
    border-right: 3px solid var(--newspaper-black);
}

/* Divider dashboard - newspaper classified ad style */
html.theme-undecided .case-study-divider {
    margin: 80px 0 !important;
}

html.theme-undecided .divider-dashboard {
    background: var(--newspaper-bg) !important;
    border: 3px solid var(--newspaper-black) !important;
    padding: 35px 40px !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

html.theme-undecided .divider-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid var(--newspaper-black) !important;
}

html.theme-undecided .divider-label {
    font-family: var(--headline-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

html.theme-undecided .divider-status {
    font-family: var(--subhead-font) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--newspaper-gray) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

html.theme-undecided .divider-status::before {
    content: '■' !important;
    margin-right: 6px !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .divider-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 25px !important;
    margin-bottom: 25px !important;
}

html.theme-undecided .divider-metric {
    text-align: center !important;
    padding: 20px 15px !important;
    background: var(--newspaper-white) !important;
    border: 2px solid var(--newspaper-black) !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

html.theme-undecided .divider-metric:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 3px 3px 0 var(--newspaper-black) !important;
}

html.theme-undecided .divider-metric-value {
    font-family: var(--headline-font) !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--newspaper-black) !important;
    margin: 8px 0 !important;
    line-height: 1 !important;
    background: none !important;
    -webkit-text-fill-color: var(--newspaper-black) !important;
}

html.theme-undecided .divider-metric-label {
    font-family: var(--subhead-font) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--newspaper-gray) !important;
    margin-top: 8px !important;
}

html.theme-undecided .divider-metric-bar {
    height: 4px !important;
    background: rgba(0, 0, 0, 0.15) !important;
    margin-top: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--newspaper-black) !important;
}

html.theme-undecided .divider-metric-bar span {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 0 !important;
    background: var(--newspaper-black) !important;
    transition: width 1.5s ease 0.5s !important;
}

html.theme-undecided .divider-visible .divider-metric-bar span {
    width: 100% !important;
}

html.theme-undecided .divider-metric-icon {
    margin-bottom: 12px !important;
    filter: grayscale(100%) !important;
}

html.theme-undecided .divider-metric-icon svg {
    stroke: var(--newspaper-black) !important;
    color: var(--newspaper-black) !important;
}

html.theme-undecided .divider-insight {
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--newspaper-text) !important;
    padding: 15px 20px !important;
    background: var(--newspaper-white) !important;
    border-left: 3px solid var(--newspaper-black) !important;
    font-style: italic !important;
    margin: 0 !important;
}

/* Drop cap for first paragraph */
html.theme-undecided .hero-description::first-letter,
html.theme-undecided .about p:first-of-type::first-letter {
    float: left;
    font-size: 4em;
    line-height: 0.9;
    padding-right: 0.1em;
    font-weight: 700;
    margin-top: 0.1em;
}

/* === RESPONSIVE - Mobile Newspaper === */
@media (max-width: 768px) {
    html.theme-undecided .hero-title {
        font-size: 2.5rem;
        border-left-width: 5px;
        padding-left: 1rem;
    }

    html.theme-undecided .logo {
        font-size: 1.5rem;
        padding: 0 1rem;
    }

    html.theme-undecided .nav-link {
        font-size: 0.7rem;
        padding: 0 0.5rem;
    }

    html.theme-undecided .section-title {
        font-size: 1.5rem;
    }

    html.theme-undecided .project-card {
        border-width: 3px;
    }

    html.theme-undecided .project-card[data-position="0"] {
        border-width: 4px;
    }
}

/* === DARK MODE - Inverted Newspaper === */
html.theme-classic.dark-mode body {
    background: #000000;
    color: #ffffff;
}

html.theme-classic.dark-mode .navbar {
    background: #000000;
    border-bottom-color: #ffffff;
    border-top-color: #ffffff;
}

html.theme-classic.dark-mode .logo,
html.theme-classic.dark-mode .nav-link {
    color: #ffffff;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .nav-link::after {
    background: #ffffff;
}

html.theme-classic.dark-mode .hero-title,
html.theme-classic.dark-mode .section-title,
html.theme-classic.dark-mode h1,
html.theme-classic.dark-mode h2,
html.theme-classic.dark-mode h3 {
    color: #ffffff;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .hero-subtitle,
html.theme-classic.dark-mode .hero-description,
html.theme-classic.dark-mode .section-description {
    border-color: #ffffff;
}

html.theme-classic.dark-mode .btn {
    border-color: #ffffff;
    color: #ffffff;
}

html.theme-classic.dark-mode .btn-primary {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .btn-primary:hover {
    background: #000000;
    background-image:
        radial-gradient(circle at center, #333333 2px, transparent 2px);
    background-size: 10px 10px;
    color: #ffffff;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .hero-image {
    border-color: #ffffff;
    background: #0a0a0a;
}

html.theme-classic.dark-mode .hero-image::before {
    background-image:
        radial-gradient(circle at center, #cccccc 2px, transparent 2px);
}

html.theme-classic.dark-mode .project-card {
    border-color: #ffffff;
    background: #000000;
}

html.theme-classic.dark-mode .project-card h3,
html.theme-classic.dark-mode .project-card h4,
html.theme-classic.dark-mode .project-card p {
    color: #ffffff;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .project-card img {
    border-bottom-color: #ffffff;
}

html.theme-classic.dark-mode .skill-category {
    border-color: #ffffff;
    background: #000000;
}

html.theme-classic.dark-mode .skill-category:hover {
    background: #ffffff;
    color: #000000;
}

html.theme-classic.dark-mode .skill-category:hover h3,
html.theme-classic.dark-mode .skill-category:hover .tag {
    color: #000000;
    border-color: #000000;
}

html.theme-classic.dark-mode .tag {
    border-color: #ffffff;
    color: #ffffff;
}

html.theme-classic.dark-mode .tag:hover {
    background: #ffffff;
    color: #000000;
}

html.theme-classic.dark-mode section {
    border-bottom-color: #ffffff;
}

html.theme-classic.dark-mode .footer {
    border-top-color: #ffffff;
    background: #0a0a0a;
}

html.theme-classic.dark-mode .carousel-controls .nav-orb,
html.theme-classic.dark-mode .nav-orb {
    border-color: #ffffff;
}

html.theme-classic.dark-mode .carousel-controls .nav-orb svg,
html.theme-classic.dark-mode .nav-orb svg {
    stroke: #ffffff;
}

html.theme-classic.dark-mode .carousel-controls .nav-orb:hover,
html.theme-classic.dark-mode .nav-orb:hover {
    background: #ffffff;
}

html.theme-classic.dark-mode .carousel-controls .nav-orb:hover svg,
html.theme-classic.dark-mode .nav-orb:hover svg {
    stroke: #000000;
}

html.theme-classic.dark-mode .progress-bar,
html.theme-classic.dark-mode .progress-track {
    background: #000000;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .progress-fill {
    background: #ffffff;
}

html.theme-classic.dark-mode .progress-handle {
    background: #ffffff;
    border-color: #ffffff;
}

html.theme-classic.dark-mode .progress-handle:hover {
    background: #000000;
    border-color: #ffffff;
}

/* Smooth transition for dark mode */
html.theme-classic.dark-mode,
html.theme-classic.dark-mode * {
    transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* === ACCESSIBILITY - Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    html.theme-undecided *,
    html.theme-undecided *::before,
    html.theme-undecided *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   RESUME PAGE - BASE STYLES
   ============================================ */

/* Hero Section */
.resume-hero {
    padding: 140px 40px 100px 40px;
    text-align: center;
    background: #ffffff;
}

.resume-hero-container {
    max-width: 800px;
    margin: 0 auto;
}

.resume-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 20px 0;
    color: #666;
}

.resume-title {
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: #000;
    line-height: 1.2;
}

.resume-subtitle {
    font-size: 24px;
    font-weight: 400;
    margin: 0 0 24px 0;
    color: #333;
}

.resume-description {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 40px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.resume-download-cta {
    margin-top: 40px;
}

/* Preview Section */
.resume-preview-section {
    padding: 80px 40px;
    background: #fafafa;
}

.resume-preview-container {
    max-width: 1400px;
    margin: 0 auto;
}

.resume-preview-header {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 16px 0;
    color: #000;
}

.resume-preview-subheader {
    font-size: 18px;
    text-align: center;
    color: #666;
    margin: 0 0 60px 0;
}

.resume-pages-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
}

.resume-page-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.resume-page-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.resume-page-image-wrapper {
    width: 100%;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    border-radius: 4px;
    background: #f0f0f0;
    margin-bottom: 12px;
}

.resume-page-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.resume-page-card:hover .resume-page-image {
    transform: scale(1.05);
}

.resume-page-number {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* Pagination */
.resume-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

.resume-nav-btn {
    padding: 12px 24px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.resume-nav-btn:hover:not(:disabled) {
    background: #333;
    transform: translateY(-2px);
}

.resume-nav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.resume-page-dots {
    display: flex;
    gap: 12px;
}

.page-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-dot:hover {
    background: #999;
    transform: scale(1.2);
}

.page-dot.active {
    background: #000;
    transform: scale(1.3);
}

/* Highlights Section */
.resume-highlights-section {
    padding: 80px 40px;
    background: #ffffff;
}

.resume-highlights-container {
    max-width: 1200px;
    margin: 0 auto;
}

.resume-highlights-header {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 60px 0;
    color: #000;
}

.resume-highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.resume-highlight-card {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.resume-highlight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.highlight-value {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #000;
}

.highlight-label {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Skills Section */
.resume-skills-section {
    padding: 80px 40px;
    background: #fafafa;
}

.resume-skills-container {
    max-width: 800px;
    margin: 0 auto;
}

.resume-skills-header {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 40px 0;
    color: #000;
}

.resume-skills-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.resume-skill-item {
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
}

.resume-skill-item:hover {
    transform: translateX(8px);
    border-color: #000;
}

/* CTA Section */
.resume-cta-section {
    padding: 100px 40px;
    background: #ffffff;
    text-align: center;
}

.resume-cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.resume-cta-header {
    font-size: 42px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: #000;
}

.resume-cta-description {
    font-size: 18px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 40px 0;
}

.resume-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.resume-last-updated {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* Footer */
.resume-footer {
    padding: 40px;
    background: #000;
    color: #fff;
}

.resume-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.resume-footer p {
    margin: 0;
    font-size: 14px;
}

.resume-footer-links {
    display: flex;
    gap: 24px;
}

.resume-footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.resume-footer-links a:hover {
    color: #ccc;
}

/* Lightbox */
.resume-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.resume-lightbox.active {
    display: flex;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 48px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    transform: scale(1.2);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 64px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px;
    transition: transform 0.3s ease;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    transform: translateY(-50%) scale(1.2);
}

.lightbox-caption {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.7);
    padding: 12px 24px;
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .resume-title {
        font-size: 36px;
    }

    .resume-subtitle {
        font-size: 20px;
    }

    .resume-pages-container {
        grid-template-columns: 1fr;
    }

    .resume-highlights-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .resume-skills-list {
        grid-template-columns: 1fr;
    }

    .resume-cta-header {
        font-size: 32px;
    }

    .resume-footer-container {
        flex-direction: column;
        text-align: center;
    }

    .lightbox-prev {
        left: 10px;
        font-size: 48px;
    }

    .lightbox-next {
        right: 10px;
        font-size: 48px;
    }

    .lightbox-close {
        right: 20px;
        font-size: 36px;
    }
}

/* ============================================
   RESUME PAGE - MENTOR THEME
   ============================================ */

/* Hero Section */
html.theme-mentor .resume-hero {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%);
}

html.theme-mentor .resume-eyebrow {
    color: rgba(156, 39, 176, 0.7);
}

html.theme-mentor .resume-title {
    color: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .resume-subtitle {
    color: rgba(156, 39, 176, 0.8);
}

html.theme-mentor .resume-description {
    color: rgba(70, 70, 70, 0.95);
}

/* Preview Section */
html.theme-mentor .resume-preview-section {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.4) 0%, rgba(250, 250, 250, 1) 100%);
}

html.theme-mentor .resume-preview-header {
    color: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .resume-preview-subheader {
    color: rgba(70, 70, 70, 0.9);
}

html.theme-mentor .resume-page-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.6));
    border: 2px solid rgba(156, 39, 176, 0.25);
    border-radius: 12px;
    box-shadow:
        0 4px 20px rgba(156, 39, 176, 0.12),
        0 2px 10px rgba(156, 39, 176, 0.08);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .resume-page-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(156, 39, 176, 0.4);
    box-shadow:
        0 12px 40px rgba(156, 39, 176, 0.2),
        0 6px 20px rgba(156, 39, 176, 0.15);
}

html.theme-mentor .resume-page-image-wrapper {
    border-radius: 8px;
}

html.theme-mentor .resume-page-number {
    color: rgba(156, 39, 176, 0.9);
    font-weight: 700;
}

/* Pagination */
html.theme-mentor .resume-nav-btn {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1));
    border-radius: 50%;
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .resume-nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1));
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25);
}

html.theme-mentor .page-dot {
    background: rgba(156, 39, 176, 0.3);
}

html.theme-mentor .page-dot:hover {
    background: rgba(156, 39, 176, 0.6);
}

html.theme-mentor .page-dot.active {
    background: rgba(156, 39, 176, 1);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}

/* Highlights Section */
html.theme-mentor .resume-highlights-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.3) 100%);
}

html.theme-mentor .resume-highlights-header {
    color: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .resume-highlight-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.5));
    border: 2px solid rgba(156, 39, 176, 0.25);
    border-radius: 12px;
    box-shadow:
        0 4px 16px rgba(156, 39, 176, 0.1),
        0 2px 8px rgba(156, 39, 176, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .resume-highlight-card:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: rgba(156, 39, 176, 0.4);
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.18),
        0 4px 15px rgba(156, 39, 176, 0.12);
}

html.theme-mentor .highlight-value {
    color: rgba(156, 39, 176, 1);
}

html.theme-mentor .highlight-label {
    color: rgba(70, 70, 70, 0.8);
}

/* Skills Section */
html.theme-mentor .resume-skills-section {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.3) 0%, rgba(250, 250, 250, 1) 100%);
}

html.theme-mentor .resume-skills-header {
    color: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .resume-skill-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(243, 229, 245, 0.4));
    border: 2px solid rgba(156, 39, 176, 0.2);
    border-radius: 10px;
    color: rgba(70, 70, 70, 0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .resume-skill-item:hover {
    transform: translateX(12px);
    border-color: rgba(156, 39, 176, 0.5);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(243, 229, 245, 0.6));
    box-shadow: 0 4px 16px rgba(156, 39, 176, 0.15);
}

/* CTA Section */
html.theme-mentor .resume-cta-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.5) 100%);
}

html.theme-mentor .resume-cta-header {
    color: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .resume-cta-description {
    color: rgba(70, 70, 70, 0.95);
}

html.theme-mentor .resume-last-updated {
    color: rgba(156, 39, 176, 0.6);
}

/* Footer */
html.theme-mentor .resume-footer {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.5) 0%, rgba(250, 250, 250, 1) 100%);
    border-top: 2px solid rgba(156, 39, 176, 0.2);
}

html.theme-mentor .resume-footer p {
    color: rgba(156, 39, 176, 0.8);
}

html.theme-mentor .resume-footer-links a {
    color: rgba(156, 39, 176, 0.85);
}

html.theme-mentor .resume-footer-links a:hover {
    color: rgba(156, 39, 176, 1);
}

/* Lightbox */
html.theme-mentor .resume-lightbox {
    background: rgba(156, 39, 176, 0.95);
}

html.theme-mentor .lightbox-caption {
    background: rgba(156, 39, 176, 0.9);
}

/* ============================================
   RESUME CAROUSEL PAGE - SIMPLIFIED
   ============================================ */

/* Main Section */
.resume-carousel-section {
    min-height: 100vh;
    padding: 120px 20px 60px 20px;
    background: #fafafa;
}

.resume-carousel-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Download Buttons */
.resume-download-top,
.resume-download-bottom {
    text-align: center;
    margin: 40px 0;
}

/* Carousel */
.resume-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 40px 0;
}

.carousel-track-container {
    flex: 1;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}

.carousel-slide {
    min-width: 100%;
    display: none;
}

.carousel-slide.active {
    display: block;
}

.resume-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Navigation Buttons */
.carousel-nav {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    font-size: 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.carousel-nav:hover:not(:disabled) {
    background: #333;
    transform: scale(1.1);
}

.carousel-nav:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.page-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-indicator:hover {
    background: #999;
    transform: scale(1.2);
}

.page-indicator.active {
    background: #000;
    transform: scale(1.3);
}

/* Page Counter */
.carousel-page-counter {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin: 10px 0 30px 0;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 768px) {
    .resume-carousel {
        gap: 10px;
    }

    .carousel-nav {
        width: 50px;
        height: 50px;
        font-size: 28px;
    }

    .resume-carousel-section {
        padding: 100px 15px 40px 15px;
    }
}

/* ============================================
   RESUME CAROUSEL - MENTOR THEME
   ============================================ */

html.theme-mentor .resume-carousel-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%);
}

html.theme-mentor .carousel-track-container {
    border-radius: 12px;
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.15),
        0 4px 15px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .carousel-nav {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1));
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .carousel-nav:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1));
    transform: scale(1.15) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25);
}

html.theme-mentor .page-indicator {
    background: rgba(156, 39, 176, 0.3);
}

html.theme-mentor .page-indicator:hover {
    background: rgba(156, 39, 176, 0.6);
}

html.theme-mentor .page-indicator.active {
    background: rgba(156, 39, 176, 1);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}

html.theme-mentor .carousel-page-counter {
    color: rgba(156, 39, 176, 0.8);
    font-weight: 600;
}

/* ============================================
   RESUME CAROUSEL - TWO PAGE VIEW (ABOVE FOLD)
   ============================================ */

/* Override previous carousel styles */
.resume-carousel-section {
    min-height: 100vh;
    height: 100vh;
    padding: 80px 20px 20px 20px;
    background: #fafafa;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.resume-carousel-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Carousel */
.resume-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;
    max-height: calc(100vh - 200px);
}

.carousel-viewer {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow: hidden;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    max-height: 100%;
}

.carousel-page {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
    display: none;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.resume-image {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 250px);
    object-fit: contain;
    display: block;
}

/* Navigation Buttons */
.carousel-nav {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    font-size: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
}

.carousel-nav:hover:not(:disabled) {
    background: #333;
    transform: scale(1.15);
}

.carousel-nav:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Controls */
.carousel-controls {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.page-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-indicator:hover {
    background: #999;
    transform: scale(1.2);
}

.page-indicator.active {
    background: #000;
    transform: scale(1.3);
}

/* Page Counter */
.carousel-page-counter {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin: 0;
    font-weight: 500;
}

/* Download button in nav */
.resume-download-btn-nav {
    font-size: 14px !important;
    padding: 10px 20px !important;
}

/* Mobile */
@media (max-width: 1024px) {
    .carousel-viewer {
        gap: 10px;
    }

    .carousel-page {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }

    .carousel-nav {
        width: 50px;
        height: 50px;
        font-size: 32px;
    }

    .carousel-controls {
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .resume-carousel {
        gap: 15px;
    }

    .carousel-viewer {
        flex-direction: column;
        gap: 10px;
    }

    .carousel-page {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .carousel-nav {
        width: 45px;
        height: 45px;
        font-size: 28px;
    }

    .resume-image {
        max-height: calc(100vh - 300px);
    }
}

/* ============================================
   RESUME CAROUSEL - MENTOR THEME (TWO PAGE)
   ============================================ */

html.theme-mentor .resume-carousel-section {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%);
}

html.theme-mentor .carousel-page {
    border-radius: 12px;
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.15),
        0 4px 15px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .carousel-nav {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1));
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .carousel-nav:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1));
    transform: scale(1.2) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25);
}

html.theme-mentor .page-indicator {
    background: rgba(156, 39, 176, 0.3);
}

html.theme-mentor .page-indicator:hover {
    background: rgba(156, 39, 176, 0.6);
}

html.theme-mentor .page-indicator.active {
    background: rgba(156, 39, 176, 1);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}

html.theme-mentor .carousel-page-counter {
    color: rgba(156, 39, 176, 0.8);
    font-weight: 600;
}

/* ============================================
   RESUME PAGE - CLEAN REBUILD
   ============================================ */

/* Main viewer - fills viewport, no scroll */
.resume-viewer {
    height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 20px;
    background: #fafafa;
}

/* Wrapper to contain overflow */
.resume-pages-wrapper {
    flex: 1;
    max-width: 1400px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Container that slides */
.resume-pages {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
    height: 100%;
    align-items: center;
}

/* Each page takes 50% width (showing 2 at a time) */
.resume-page-img {
    width: 50%;
    flex-shrink: 0;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Navigation buttons */
.resume-nav-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    border: none;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.resume-nav-btn:hover:not(:disabled) {
    background: #333;
    transform: scale(1.1);
}

.resume-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Controls below */
.resume-controls {
    padding: 20px;
    text-align: center;
    background: #fafafa;
}

.resume-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot:hover {
    background: #999;
    transform: scale(1.2);
}

.dot.active {
    background: #000;
    transform: scale(1.4);
}

.resume-counter {
    margin: 0;
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

/* Magnifying Glass */
.magnifier {
    position: fixed;
    display: none;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    cursor: none;
    pointer-events: none;
    background-repeat: no-repeat;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    z-index: 10000;
}

.resume-page-img {
    cursor: crosshair;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .resume-viewer {
        gap: 20px;
        padding: 10px;
    }

    .resume-nav-btn {
        width: 50px;
        height: 50px;
        font-size: 32px;
    }

    .resume-pages {
        gap: 10px;
    }
}

/* ============================================
   RESUME PAGE - MENTOR THEME
   ============================================ */

html.theme-mentor .resume-viewer {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%);
}

html.theme-mentor .resume-controls {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.4) 0%, rgba(250, 250, 250, 1) 100%);
}

html.theme-mentor .resume-page-img {
    border-radius: 24px;
    box-shadow:
        0 8px 30px rgba(156, 39, 176, 0.15),
        0 4px 15px rgba(156, 39, 176, 0.1);
}

html.theme-mentor .resume-nav-btn {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1));
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.theme-mentor .resume-nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1));
    transform: scale(1.15) rotate(5deg);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25);
}

html.theme-mentor .dot {
    background: rgba(156, 39, 176, 0.3);
}

html.theme-mentor .dot:hover {
    background: rgba(156, 39, 176, 0.6);
}

html.theme-mentor .dot.active {
    background: rgba(156, 39, 176, 1);
    box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}

html.theme-mentor .resume-counter {
    color: rgba(156, 39, 176, 0.85);
    font-weight: 600;
}

html.theme-mentor .magnifier {
    border: 4px solid rgba(156, 39, 176, 0.8);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.9),
        0 12px 40px rgba(156, 39, 176, 0.4),
        0 6px 20px rgba(156, 39, 176, 0.3);
}

/* ============================================
   RESUME PAGE - NO HEADER/FOOTER VERSION
   ============================================ */

/* Remove default body margin for resume page */
.resume-body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Main viewer - full viewport */
.resume-body .resume-viewer {
    height: calc(100vh - 100px);
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    grid-template-rows: auto 1fr auto;
    gap: 40px;
    padding: 40px;
    background: #fafafa;
    align-items: center;
}

/* Back button - top left, aligned with left arrow */
.resume-back-btn {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.resume-back-btn:hover {
    color: #333;
    transform: translateX(-4px);
}

/* Download button - top right, aligned with right arrow */
.resume-download-btn {
    grid-column: 3;
    grid-row: 1;
    font-size: 16px;
    color: #fff;
    background: #000;
    padding: 14px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-align: center;
}

.resume-download-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

/* Left arrow - middle left */
.resume-body .resume-prev {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
}

/* Pages wrapper - center */
.resume-body .resume-pages-wrapper {
    grid-column: 2;
    grid-row: 1 / 4;
    height: 100%;
}

/* Right arrow - middle right */
.resume-body .resume-next {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
}

/* Controls - bottom center, spans all columns */
.resume-body .resume-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    text-align: center;
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .resume-body .resume-viewer {
        grid-template-columns: 50px 1fr 50px;
        gap: 20px;
        padding: 20px;
    }

    .resume-back-btn,
    .resume-download-btn {
        font-size: 14px;
    }

    .resume-download-btn {
        padding: 10px 16px;
    }
}

/* ============================================
   RESUME PAGE - MENTOR THEME (NO HEADER)
   ============================================ */

html.theme-mentor .resume-body .resume-viewer {
    background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(243, 229, 245, 0.4) 100%);
}

html.theme-mentor .resume-body .resume-controls {
    background: linear-gradient(180deg, rgba(243, 229, 245, 0.4) 0%, rgba(250, 250, 250, 1) 100%);
    border-top: 1px solid rgba(156, 39, 176, 0.1);
}

html.theme-mentor .resume-back-btn {
    color: rgba(156, 39, 176, 0.9);
}

html.theme-mentor .resume-back-btn:hover {
    color: rgba(156, 39, 176, 1);
}

html.theme-mentor .resume-download-btn {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1));
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15);
    border-radius: 50px;
}

html.theme-mentor .resume-download-btn:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1));
    transform: translateY(-4px);
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25);
}

/* Fix download button overflow */
.resume-download-btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    font-size: 15px !important;
    color: #fff !important;
    background: #000 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: inline-block !important;
    min-width: fit-content !important;
}

.resume-download-btn:hover {
    background: #333 !important;
    transform: translateY(-2px) !important;
}

html.theme-mentor .resume-download-btn {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.9), rgba(156, 39, 176, 1)) !important;
    box-shadow:
        0 4px 12px rgba(156, 39, 176, 0.25),
        0 2px 6px rgba(156, 39, 176, 0.15) !important;
    border-radius: 50px !important;
}

html.theme-mentor .resume-download-btn:hover {
    background: linear-gradient(135deg, rgba(156, 39, 176, 1), rgba(156, 39, 176, 1)) !important;
    transform: translateY(-4px) !important;
    box-shadow:
        0 6px 20px rgba(156, 39, 176, 0.35),
        0 3px 10px rgba(156, 39, 176, 0.25) !important;
}

/* Adjust grid for better button spacing */
.resume-body .resume-viewer {
    grid-template-columns: auto 1fr auto !important;
    column-gap: 40px !important;
}

@media (max-width: 768px) {
    .resume-body .resume-viewer {
        grid-template-columns: auto 1fr auto !important;
        column-gap: 15px !important;
    }

    .resume-download-btn {
        font-size: 13px !important;
        padding: 10px 14px !important;
    }
}

/* ============================================
   RESUME PAGE - DESIGNER THEME
   ============================================ */

html.theme-designer .resume-body .resume-viewer {
    background: linear-gradient(135deg, #fff5f0 0%, #ffffff 100%);
}

html.theme-designer .resume-body .resume-controls {
    background: linear-gradient(180deg, #ffffff 0%, #fff5f0 100%);
    border-top: 3px solid #FF6B35;
}

html.theme-designer .resume-page-img {
    border-radius: 24px;
    border: 3px solid #FF6B35;
    box-shadow:
        0 12px 40px rgba(255, 107, 53, 0.25),
        0 6px 20px rgba(255, 107, 53, 0.15);
}

html.theme-designer .resume-nav-btn {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html.theme-designer .resume-nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #F7931E, #00D9FF);
    transform: scale(1.2) rotate(360deg);
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.4);
}

html.theme-designer .resume-back-btn {
    color: #FF6B35;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}

html.theme-designer .resume-back-btn:hover {
    color: #F7931E;
    transform: translateX(-8px);
}

html.theme-designer .resume-download-btn {
    background: linear-gradient(135deg, #FF6B35, #F7931E) !important;
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.3) !important;
    border-radius: 24px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 800 !important;
}

html.theme-designer .resume-download-btn:hover {
    background: linear-gradient(135deg, #F7931E, #00D9FF) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 40px rgba(255, 107, 53, 0.4) !important;
}

html.theme-designer .dot {
    background: rgba(255, 107, 53, 0.3);
    border: 2px solid #FF6B35;
}

html.theme-designer .dot:hover {
    background: rgba(255, 107, 53, 0.6);
    transform: scale(1.3) rotate(45deg);
}

html.theme-designer .dot.active {
    background: linear-gradient(135deg, #FF6B35, #F7931E);
    transform: scale(1.5);
}

html.theme-designer .resume-counter {
    color: #FF6B35;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
}

html.theme-designer .magnifier {
    border: 5px solid #FF6B35;
    border-radius: 40px;
    box-shadow:
        0 0 0 3px #F7931E,
        0 0 0 6px #00D9FF,
        0 15px 50px rgba(255, 107, 53, 0.5),
        0 8px 25px rgba(247, 147, 30, 0.4);
}

/* ============================================
   RESUME PAGE - BUSINESS THEME
   ============================================ */

html.theme-business .resume-body .resume-viewer {
    background: linear-gradient(180deg, rgba(227, 242, 253, 0.3) 0%, rgba(250, 250, 250, 1) 100%);
}

html.theme-business .resume-body .resume-controls {
    background: rgba(227, 242, 253, 0.5);
    border-top: 2px solid rgba(21, 101, 192, 0.2);
}

html.theme-business .resume-page-img {
    border-radius: 8px;
    border: 1px solid rgba(21, 101, 192, 0.2);
    box-shadow:
        0 4px 20px rgba(21, 101, 192, 0.12),
        0 2px 10px rgba(21, 101, 192, 0.08);
}

html.theme-business .resume-nav-btn {
    background: linear-gradient(135deg, #1565C0, #0D47A1);
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.25);
}

html.theme-business .resume-nav-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #0D47A1, #1565C0);
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(21, 101, 192, 0.35);
}

html.theme-business .resume-back-btn {
    color: #1565C0;
    font-family: 'Courier New', monospace;
}

html.theme-business .resume-back-btn:hover {
    color: #0D47A1;
}

html.theme-business .resume-download-btn {
    background: linear-gradient(135deg, #1565C0, #0D47A1) !important;
    box-shadow: 0 4px 16px rgba(21, 101, 192, 0.25) !important;
    border-radius: 8px !important;
    font-family: 'Courier New', monospace !important;
}

html.theme-business .resume-download-btn:hover {
    background: linear-gradient(135deg, #0D47A1, #1565C0) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 24px rgba(21, 101, 192, 0.35) !important;
}

html.theme-business .dot {
    background: rgba(21, 101, 192, 0.3);
}

html.theme-business .dot:hover {
    background: rgba(21, 101, 192, 0.6);
}

html.theme-business .dot.active {
    background: #1565C0;
}

html.theme-business .resume-counter {
    color: #1565C0;
    font-family: 'Courier New', monospace;
}

html.theme-business .magnifier {
    border: 3px solid #1565C0;
    border-radius: 8px;
    box-shadow:
        0 0 0 2px rgba(21, 101, 192, 0.3),
        0 10px 35px rgba(21, 101, 192, 0.35),
        0 5px 15px rgba(21, 101, 192, 0.25);
}

/* ============================================
   RESUME PAGE - UNDECIDED (NEWSPAPER) THEME
   ============================================ */

html.theme-undecided .resume-body .resume-viewer {
    background: #f9f7f1;
}

html.theme-undecided .resume-body .resume-controls {
    background: #f9f7f1;
    border-top: 4px double #000000;
}

html.theme-undecided .resume-page-img {
    border-radius: 0;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

html.theme-undecided .resume-nav-btn {
    background: #000000;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    font-family: Georgia, 'Times New Roman', serif;
}

html.theme-undecided .resume-nav-btn:hover:not(:disabled) {
    background: #222;
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

html.theme-undecided .resume-back-btn {
    color: #000;
    font-family: 'Playfair Display SC', Georgia, serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

html.theme-undecided .resume-back-btn:hover {
    color: #333;
}

html.theme-undecided .resume-download-btn {
    background: #000000 !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
    font-family: 'Playfair Display SC', Georgia, serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

html.theme-undecided .resume-download-btn:hover {
    background: #222 !important;
    color: #ffffff !important;
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
}

html.theme-undecided .dot {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
}

html.theme-undecided .dot:hover {
    background: #dddddd;
}

html.theme-undecided .dot.active {
    background: #000000;
}

html.theme-undecided .resume-counter {
    color: #000;
    font-family: Georgia, 'Times New Roman', serif;
}

html.theme-undecided .magnifier {
    border: 4px solid #000000;
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================
   RESUME PAGE - CLASSIC THEME
   ============================================ */

html.theme-classic .resume-body .resume-viewer {
    background: #ffffff;
}

html.theme-classic .resume-body .resume-controls {
    background: #ffffff;
    border-top: 1px solid #000000;
}

html.theme-classic .resume-page-img {
    border-radius: 0;
    border: 2px solid #000000;
    box-shadow: none;
}

html.theme-classic .resume-nav-btn {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Times New Roman', serif;
}

html.theme-classic .resume-nav-btn:hover:not(:disabled) {
    background: #000000;
    color: #ffffff;
}

html.theme-classic .resume-back-btn {
    color: #000000;
    font-family: 'Times New Roman', serif;
}

html.theme-classic .resume-back-btn:hover {
    color: #333;
}

html.theme-classic .resume-download-btn {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: 'Times New Roman', serif !important;
}

html.theme-classic .resume-download-btn:hover {
    background: #000000 !important;
    color: #ffffff !important;
    transform: none !important;
}

html.theme-classic .dot {
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
}

html.theme-classic .dot:hover {
    background: #dddddd;
}

html.theme-classic .dot.active {
    background: #000000;
}

html.theme-classic .resume-counter {
    color: #000000;
    font-family: 'Times New Roman', serif;
    font-style: italic;
}

html.theme-classic .magnifier {
    border: 3px solid #000000;
    border-radius: 0;
    box-shadow: none;
}