/* Main Stylesheet - Modern CSS with 2025 Features */

/* ===== CSS Cascade Layers - 2025 Organization ===== */
@layer reset, base, components, utilities, overrides;

/* ===== CSS Reset Layer ===== */
@layer reset {
    /* Modern CSS Reset - 2025 Standards */
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    html {
        height: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    body {
        height: 100%;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeSpeed;
    }
    
    /* Remove default list styles */
    ul[role='list'], ol[role='list'] {
        list-style: none;
    }
    
    /* Media element defaults */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    /* SVG icon alignment fix */
    svg:not(:only-child) {
        vertical-align: middle;
    }
    
    /* Form element inheritance */
    input, button, textarea, select {
        font: inherit;
        color: inherit;
    }
    
    /* Remove default button styles */
    button {
        border: none;
        background: none;
        cursor: pointer;
    }
    
    /* Typography overflow handling */
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Isolation for modern JS frameworks */
    #root, #__next {
        isolation: isolate;
    }
    
    /* Accessibility: Remove animations for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* ===== CSS Custom Properties ===== */
@layer base {
:root {
    /* Safe area insets for iOS devices */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    
    /* Modern Color Palette - 2025 Design with oklch */
    --color-primary: oklch(55% 0.25 250);
    --color-primary-dark: oklch(45% 0.25 250);
    --color-primary-light: oklch(65% 0.25 250);
    --color-secondary: oklch(50% 0.18 290);
    --color-accent: oklch(75% 0.35 160);
    --color-success: oklch(60% 0.25 160);
    --color-warning: oklch(75% 0.15 85);
    --color-error: oklch(55% 0.22 25);
    
    /* Color mixing variants for 2025 */
    --color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, white);
    --color-primary-muted: color-mix(in oklch, var(--color-primary) 50%, transparent);
    --color-primary-alpha: color-mix(in oklch, var(--color-primary) 90%, transparent);
    
    /* NHS and Cambridge Colors */
    --color-nhs: #005eb8;
    --color-cambridge: #003e74;
    --color-cambridge-blue: #a3c1ad;
    --color-cambridge-red: #c8102e;
    
    /* Text Colors - WCAG AA Compliant Contrast */
    --color-text: #0a0a0a;
    --color-text-light: #374151; /* Improved from #4a5568 for better contrast */
    --color-text-lighter: #4b5563; /* Improved from #718096 for better contrast */
    
    /* Background Colors - Subtle Gradients with oklch */
    --color-bg: oklch(99% 0 0);
    --color-bg-alt: oklch(97% 0.01 280);
    --color-bg-hover: oklch(95% 0.01 280);
    --color-bg-dark: oklch(92% 0.01 280);
    --color-bg-glass: color-mix(in oklch, white 70%, transparent);
    
    /* Dynamic background variants */
    --color-bg-primary: color-mix(in oklch, var(--color-primary) 5%, var(--color-bg));
    --color-bg-secondary: color-mix(in oklch, var(--color-secondary) 3%, var(--color-bg));
    
    /* Advanced Gradients */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-hero: linear-gradient(135deg, #0066ff 0%, #6b46c1 50%, #06ffa5 100%);
    --gradient-mesh: radial-gradient(at 20% 80%, hsla(220,100%,50%,0.4) 0px, transparent 50%),
                      radial-gradient(at 80% 20%, hsla(259,100%,64%,0.3) 0px, transparent 50%),
                      radial-gradient(at 40% 40%, hsla(162,100%,52%,0.2) 0px, transparent 50%),
                      radial-gradient(at 90% 70%, hsla(220,100%,50%,0.15) 0px, transparent 50%);
    --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    --gradient-glow: radial-gradient(circle at center, var(--color-accent) 0%, transparent 70%);
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;
    
    /* Font Sizes - Fluid Typography */
    --fs-xs: clamp(0.875rem, 0.8rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.9375rem, 0.9rem + 0.375vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1.05rem + 0.625vw, 1.25rem);
    --fs-xl: clamp(1.25rem, 1.15rem + 0.75vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.35rem + 1.25vw, 2rem);
    --fs-3xl: clamp(1.875rem, 1.6rem + 1.875vw, 2.5rem);
    --fs-4xl: clamp(2rem, 1.75rem + 2.5vw, 3rem);
    --fs-5xl: clamp(2.25rem, 2rem + 5vw, 4rem);
    
    /* Fluid Space Scale - Improved for mobile */
    --space-3xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.25rem);
    --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-xs: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);
    --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-md: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --space-lg: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --space-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);
    --space-3xl: clamp(3rem, 2.4rem + 3vw, 4rem);
    
    /* Space multipliers for consistent scaling */
    --space-gap: var(--space-md);
    --space-gutter: var(--space-lg);
    --space-section: var(--space-3xl);
    
    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    
    /* Borders */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    --color-border: rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Z-index */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* Mobile-First Breakpoints */
    --breakpoint-xs: 375px;   /* Small phones */
    --breakpoint-sm: 480px;   /* Regular phones */
    --breakpoint-md: 640px;   /* Large phones/small tablets */
    --breakpoint-lg: 768px;   /* Tablets */
    --breakpoint-xl: 1024px;  /* Large tablets/small laptops */
    --breakpoint-2xl: 1280px; /* Desktops */
    --breakpoint-3xl: 1536px; /* Large desktops */
}

} /* End @layer base */

/* Dark mode support with improved contrast and consistency */
@layer base {
[data-theme="dark"] {
    /* Core color overrides with improved contrast */
    --color-primary: oklch(70% 0.15 250); /* WCAG AA compliant: 5.1:1 contrast ratio */
    --color-primary-dark: oklch(60% 0.15 250);
    --color-primary-light: oklch(80% 0.15 250);
    
    /* Dark mode color mixing */
    --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, white);
    --color-primary-muted: color-mix(in oklch, var(--color-primary) 40%, transparent);
    --color-secondary: #8b6bc7; /* Lighter purple for better contrast */
    --color-accent: #00ff9f;
    --color-success: #00e6a7;
    --color-warning: #ffc936;
    --color-error: #ff5555;
    
    /* NHS and Cambridge Colors - adjusted for dark mode */
    --color-nhs: #1a7fd3; /* Lighter NHS blue */
    --color-cambridge: #1a5a9a; /* Lighter Cambridge blue */
    --color-cambridge-blue: #b8d4bd;
    --color-cambridge-red: #e63946;
    
    /* Text Colors - WCAG AAA compliant */
    --color-text: #ffffff; /* Pure white for maximum contrast */
    --color-text-light: #d4d4d4; /* Enhanced contrast: 5.2:1 ratio */
    --color-text-lighter: #bbbbbb; /* Improved from #999999 for better visibility */
    
    /* Background Colors - better depth perception with oklch */
    --color-bg: oklch(8% 0 0);
    --color-bg-alt: oklch(12% 0.01 280); /* Slightly lighter than #141414 */
    --color-bg-hover: oklch(16% 0.01 280);
    --color-bg-dark: oklch(20% 0.01 280);
    --color-bg-glass: color-mix(in oklch, black 85%, transparent);
    
    /* Dark mode dynamic backgrounds */
    --color-bg-primary: color-mix(in oklch, var(--color-primary) 8%, var(--color-bg));
    --color-bg-secondary: color-mix(in oklch, var(--color-secondary) 5%, var(--color-bg));
    
    /* Borders - increased visibility */
    --color-border: rgba(255, 255, 255, 0.15); /* Increased from 0.1 */
    
    /* Shadows - enhanced for dark mode */
    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.8);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.9), 0 1px 2px 0 rgba(0,0,0,0.6);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.9), 0 2px 4px -1px rgba(0,0,0,0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.9), 0 4px 6px -2px rgba(0,0,0,0.6);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.9), 0 10px 10px -5px rgba(0,0,0,0.6);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,1);
    
    /* Gradients - adjusted for dark mode */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-hero: linear-gradient(135deg, #4d94ff 0%, #8b6bc7 50%, #00ff9f 100%);
    --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}

} /* End @layer base */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile-first: Simple animations by default, enhanced on desktop */
.hero-gradient,
.hero-mesh,
.parallax-element {
    animation: none; /* Safe default for mobile */
}

/* Desktop enhancement: Enable complex animations */
@media (min-width: 769px) {
    .hero-gradient {
        animation: gradient-shift 20s ease-in-out infinite;
    }
    
    .hero-mesh {
        animation: mesh-morph 25s ease-in-out infinite;
    }
    
    .parallax-element {
        animation: parallax-float 15s ease-in-out infinite;
    }
}

/* Mobile-first: Simple box shadows by default */
.card,
.publication-item,
    .timeline-content {
        box-shadow: var(--shadow-sm);
    }
}

/* System preference dark mode fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Inherit dark theme variables */
        --color-primary: #66a3ff;
        --color-primary-dark: #3385ff;
        --color-primary-light: #66a3ff;
        --color-secondary: #8b6bc7;
        --color-accent: #00ff9f;
        --color-success: #00e6a7;
        --color-warning: #ffc936;
        --color-error: #ff5555;
        --color-nhs: #1a7fd3;
        --color-cambridge: #1a5a9a;
        --color-cambridge-blue: #b8d4bd;
        --color-cambridge-red: #e63946;
        --color-text: #f0f0f0;
        --color-text-light: #c4c4c4;
        --color-text-lighter: #999999;
        --color-bg: #0a0a0a;
        --color-bg-alt: #121212;
        --color-bg-hover: #1a1a1a;
        --color-bg-dark: #1f1f1f;
        --color-bg-glass: rgba(10, 10, 10, 0.85);
        --color-border: rgba(255, 255, 255, 0.15);
        --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.8);
        --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.9), 0 1px 2px 0 rgba(0,0,0,0.6);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.9), 0 2px 4px -1px rgba(0,0,0,0.6);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.9), 0 4px 6px -2px rgba(0,0,0,0.6);
        --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.9), 0 10px 10px -5px rgba(0,0,0,0.6);
        --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,1);
        --gradient-primary: linear-gradient(135deg, #4d94ff 0%, #8b6bc7 100%);
        --gradient-hero: linear-gradient(135deg, #4d94ff 0%, #8b6bc7 50%, #00ff9f 100%);
        --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    }
}

/* ===== Reset & Base Styles ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Mobile-first: Optimized HTML base styles for mobile devices */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(3rem + 2rem + 30px); /* Mobile-optimized: smaller header + breadcrumb */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced scroll performance optimization */
@supports (overscroll-behavior: contain) {
    html {
        overscroll-behavior: contain;
    }
}

/* Desktop enhancement: Larger spacing for desktop layouts */
@media (min-width: 769px) {
    html {
        scroll-padding-top: calc(5rem + 2.5rem + 30px); /* Desktop: larger header spacing */
    }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ===== Skip Links ===== */
.skip-links {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: var(--space-sm);
    z-index: var(--z-popover);
    display: flex;
    gap: var(--space-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.skip-link {
    color: white;
    text-decoration: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.1);
    transition: all var(--transition-fast);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: var(--z-modal);
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    font-weight: 600;
    font-size: 1rem;
}
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p {
    margin: 0 0 1rem;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ===== WCAG AAA ACCESSIBILITY ENHANCEMENTS ===== */
/* Enhanced focus indicators for perfect keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="link"]:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--color-bg), 0 0 8px var(--color-primary);
    transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}

/* Remove default focus outline to use custom one */
:focus {
    outline: none;
}

/* Enhanced focus for interactive elements */
.btn:focus-visible,
.nav-link:focus-visible,
.theme-toggle:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
    box-shadow: 0 0 0 1px var(--color-bg), 0 0 12px var(--color-accent);
    transform: translateY(-1px);
}

.btn:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
.theme-toggle:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
    transform: none;
}

/* High contrast focus for dark backgrounds */
.hero a:focus,
.hero button:focus,
.dark-bg *:focus {
    outline-color: var(--color-accent);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 0 12px var(--color-accent);
}

/* Enhanced high contrast focus for accessibility */
@media (prefers-contrast: high) {
    *:focus {
        outline: 4px solid currentColor !important;
        outline-offset: 4px !important;
        box-shadow: 0 0 0 2px var(--color-bg), 0 0 16px currentColor !important;
    }
    
    /* Ensure text has AAA contrast ratio 7:1 */
    :root {
        --color-text: #000000;
        --color-text-light: #2d3748;
        --color-text-lighter: #4a5568;
        --color-primary: #1a365d;
    }
    
    [data-theme="dark"] {
        --color-text: #ffffff;
        --color-text-light: #e2e8f0;
        --color-text-lighter: #cbd5e0;
        --color-primary: #90cdf4;
    }
}

/* Focus-within enhancements for complex components */
.bento-card:focus-within,
.timeline-item:focus-within,
.contact-form:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

/* Skip link enhancements */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--color-primary);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    z-index: var(--z-tooltip);
    font-weight: 600;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Enhanced keyboard navigation indicators */
.keyboard-user *:focus {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 1px var(--color-bg), 0 0 12px var(--color-primary) !important;
}

/* Mouse users get subtle focus indicators */
.mouse-user *:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--color-bg), 0 0 6px var(--color-primary);
}

/* Form accessibility styles */
label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
    cursor: pointer;
}

/* Removed generic required styling - handled by specific form classes */

/* Removed generic invalid styling - handled by specific form classes with :not(:placeholder-shown) */

.error-message {
    color: var(--color-error);
    font-size: var(--fs-sm);
    margin-top: 0.25rem;
}

/* Screen reader only but focusable */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ===== Layout Utilities ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section {
    padding: var(--space-3xl) 0;
    position: relative;
}

/* ===== Header & Navigation ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    z-index: var(--z-sticky);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding-top: var(--safe-area-inset-top);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.nav {
    padding: 0.5rem 0;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
    height: 48px;
}

.nav-logo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.nav-logo:hover {
    color: var(--color-primary);
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-md);
}

.nav-link {
    color: var(--color-text-light);
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.2s ease;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.nav-link.active {
    color: var(--color-primary);
    font-weight: 600;
    /* Enhanced active state visibility */
    position: relative;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
}

.nav-cta {
    padding: 0.375rem 1rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav-cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}

.nav-cta:active {
    transform: translateY(0);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.75rem;
    min-width: 48px;
    min-height: 48px;
    position: relative;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.nav-toggle:active {
    transform: scale(0.95);
}

/* ===== Hero Section ===== */
.hero-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.link-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all var(--transition-base);
}

.link-badge:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.link-badge svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.link-badge:hover svg {
    transform: scale(1.1);
}

/* Mobile-first: Icon-focused badges by default */
.link-badge {
    padding: 0.4rem 0.8rem;
    font-size: var(--fs-xs);
}

.link-badge span {
    display: none; /* Hidden by default for mobile */
}

.link-badge svg {
    width: 24px;
    height: 24px;
}

/* Small screen enhancement: Show labels */
@media (min-width: 481px) {
    .link-badge {
        padding: 0.5rem 1rem;
        font-size: var(--fs-sm);
    }
    
    .link-badge span {
        display: inline;
    }
    
    .link-badge svg {
        width: 20px;
        height: 20px;
    }
}

/* Desktop enhancement: Full styling */
@media (min-width: 769px) {
    .link-badge {
        padding: 0.6rem 1.2rem;
        font-size: var(--fs-base);
    }
}

.hero {
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Create stacking context to contain backgrounds */
}

/* Mobile-first: Optimized hero for small screens */
.hero {
    min-height: 85vh;
    min-height: 85dvh;
    padding-top: calc(4rem + var(--space-lg) + var(--safe-area-inset-top)); /* Mobile: nav height + spacing */
}

/* Mobile landscape: Full height */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }
}

/* Desktop enhancement: Full viewport with padding */
@media (min-width: 769px) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: calc(100px + var(--safe-area-inset-top));
    }
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-gradient {
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 30% 20%, rgba(0, 102, 255, 0.15), transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(120, 67, 233, 0.1), transparent 50%),
        linear-gradient(135deg, #f8f9fa 0%, #e8ecf0 100%);
    opacity: 0.7;
    will-change: transform;
    transform: translateZ(0); /* Force GPU acceleration */
    filter: blur(60px);
}

/* Simplified gradient - no animation for better performance */

/* Floating geometric shapes */
.hero-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    opacity: 0.1;
    animation: shape-float 60s ease-in-out infinite;
    will-change: transform;
    transform: translateZ(0);
}

.shape-1 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.15), rgba(0, 102, 255, 0.1));
    clip-path: circle(50%);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 120px;
    height: 120px;
    background: linear-gradient(45deg, rgba(120, 67, 233, 0.1), rgba(120, 67, 233, 0.05));
    border-radius: 50%;
    bottom: 20%;
    right: 15%;
    animation-delay: 30s;
}

/* Removed shape-3 and shape-4 for simplicity */

@keyframes shape-float {
    0%, 100% { 
        transform: translate(0, 0);
    }
    50% { 
        transform: translate(20px, -20px);
    }
}

.hero-content {
    text-align: center;
    padding: var(--space-xl);
    animation: fade-in-up 1s ease-out;
    will-change: transform;
    transform: translateZ(0); /* Force GPU acceleration */
    position: relative;
    z-index: 1; /* Ensure content appears above background */
    width: 100%;
    max-width: 1200px;
    min-width: 300px;
    margin: 0 auto;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-impact {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    line-height: 1.3;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-greeting {
    display: block;
    font-size: var(--fs-xl);
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.hero-name {
    display: block;
    font-size: var(--fs-5xl);
    font-weight: 700;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-xs);
    position: relative;
    /* Remove glow animation for better LCP - add on interaction instead */
    transition: filter var(--transition-base);
}

.hero-name:hover {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(0, 102, 255, 0.5));
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2) drop-shadow(0 0 20px rgba(0, 102, 255, 0.5)); }
}

.hero-subtitle {
    font-size: var(--fs-xl);
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
}

.hero-role {
    position: relative;
}

.role-context {
    font-size: var(--fs-sm);
    opacity: 0.7;
    font-weight: 400;
    font-style: italic;
}

.hero-separator {
    color: var(--color-text-lighter);
}

/* Pronunciation Guide */
.hero-pronunciation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: calc(var(--space-md) * -0.5) 0 var(--space-lg);
    font-size: var(--fs-base);
    color: var(--color-text-light);
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.hero-pronunciation:hover {
    opacity: 1;
}

.pronunciation-text {
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.pronunciation-audio {
    background: var(--color-bg-alt);
    border: 1px solid rgba(26, 115, 232, 0.2);
    border-radius: var(--radius-full);
    padding: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

.pronunciation-audio:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.pronunciation-audio svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-text-light);
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.pronunciation-audio:hover svg {
    stroke: var(--color-primary);
    opacity: 1;
}

.pronunciation-audio.playing {
    animation: pulse 1s ease-in-out infinite;
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.pronunciation-audio.playing svg {
    stroke: white;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Staggered menu item animations */
@keyframes menu-item-slide-in {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes menu-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pronunciation-audio.loading {
    opacity: 0.6;
    cursor: wait;
}

.pronunciation-audio.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hero-description {
    font-size: var(--fs-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-2xl);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2.5rem;
    min-height: 48px;
    min-width: 48px;
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    text-decoration: none;
    outline: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    pointer-events: none;
    z-index: 0;
}

.btn:hover::before {
    transform: translate(-50%, -50%) scale(1.2);
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.btn:hover::after {
    opacity: 1;
}

.btn > * {
    position: relative;
    z-index: 2;
}

.btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.btn-primary {
    background: linear-gradient(135deg, #0066ff 0%, #004ecc 100%);
    color: white;
    position: relative;
    box-shadow: 0 4px 14px 0 rgba(0, 102, 255, 0.25),
                0 1px 3px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    font-weight: 600;
    /* Enhanced hierarchy with better distinction */
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: -0.01em;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px 0 rgba(0, 102, 255, 0.4),
                0 3px 8px 0 rgba(0, 0, 0, 0.12),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #0066ff 0%, #0052d6 100%);
}

.btn-primary:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 2px 8px 0 rgba(0, 102, 255, 0.2),
                0 1px 2px 0 rgba(0, 0, 0, 0.1),
                inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-primary);
    border: 1.5px solid rgba(0, 102, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    /* Enhanced visual distinction */
    font-weight: 500;
    letter-spacing: -0.005em;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    inset: -1.5px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--color-primary), transparent);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.3);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px -4px rgba(0, 102, 255, 0.3),
                0 0 0 1px rgba(0, 102, 255, 0.1);
}

.btn-secondary:hover::before {
    opacity: 1;
}

.btn-secondary:active {
    transform: translateY(0) scale(0.98);
    background: rgba(0, 102, 255, 0.15);
}

/* ===== Hero Stats ===== */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-lg);
    max-width: 600px;
    margin: 0 auto;
}

.stat {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    transition: all var(--transition-base);
    position: relative;
}

/* Removed glow effect for cleaner look */

.stat:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.stat-number {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.stat-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* ===== Scroll Indicator ===== */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

.scroll-text {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-text-light);
    border-bottom: 2px solid var(--color-text-light);
    transform: rotate(45deg);
}

/* ===== Section Titles ===== */
.section-title {
    font-size: clamp(2rem, 2.5vw + 1rem, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.section-subtitle {
    font-size: clamp(1.125rem, 1vw + 0.875rem, 1.25rem);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.6;
}

/* ===== Breadcrumb Navigation ===== */
@layer components {
.breadcrumb {
    display: none; /* Hidden on mobile by default */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-fixed) - 5); /* Below main nav to avoid blocking clicks */
    font-size: 0.875rem;
    height: 2.5rem; /* Fixed height for consistent spacing */
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
    pointer-events: auto; /* Re-enable pointer events for links */
}

.breadcrumb-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: var(--color-text-light);
}

.breadcrumb-current {
    color: var(--color-text);
}

/* Position header below breadcrumb */
.header {
    top: 2.5rem; /* Space for breadcrumb */
}

/* Adjust hero section for single header (no breadcrumb) */
.hero {
    padding-top: calc(4rem + var(--space-lg)) !important; /* Only main nav height + spacing */
}

/* Dark mode support */
[data-theme="dark"] .breadcrumb {
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .breadcrumb-link {
    color: var(--color-primary-light);
}

[data-theme="dark"] .breadcrumb-link:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .breadcrumb-separator {
    color: var(--color-text-lighter);
}

[data-theme="dark"] .breadcrumb-current {
    color: var(--color-text);
}

/* Dark mode header fix - match breadcrumb styling */
[data-theme="dark"] .header {
    background: rgba(10, 10, 10, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .header.scrolled {
    background: rgba(10, 10, 10, 0.95) !important;
}

[data-theme="dark"] .nav-logo {
    color: var(--color-text);
}

[data-theme="dark"] .nav-link {
    color: var(--color-text-light);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--color-primary);
}

/* Mobile-first: Compact breadcrumb by default */
.breadcrumb {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
}

/* Mobile header positioning - flush to top */
@media (max-width: 768px) {
    .header {
        top: 0; /* Flush to top on mobile */
    }
}

.hero {
    padding-top: calc(4rem + var(--space-lg)) !important; /* Consistent with single header */
}

/* Desktop enhancement: Show breadcrumb and stack headers properly */
@media (min-width: 769px) {
    .breadcrumb {
        display: flex; /* Show breadcrumb on desktop with flex layout */
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
        height: 3rem; /* Slightly larger on desktop */
        justify-content: space-between;
        align-items: center;
    }
    
    /* Desktop header positioning - below breadcrumb, no overlap */
    .header {
        top: 3rem; /* Start below breadcrumb (3rem = 48px) */
    }
    
    .hero {
        padding-top: calc(7rem + var(--space-lg)) !important; /* Breadcrumb (3rem) + Nav (4rem) + spacing */
    }
    
    /* Adjust mobile menu for breadcrumb */
    .nav-menu {
        top: 2rem !important; /* Account for breadcrumb */
        height: calc(100vh - 2rem) !important;
        height: calc(100dvh - 2rem) !important;
    }
}

@media print {
    .breadcrumb {
        display: none;
    }
}

} /* End @layer components */

/* ===== Trust Banner - Smart Sticky Positioning ===== */
@layer components {
.trust-banner {
    background: rgba(248, 249, 250, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1.5rem 0;
    position: -webkit-sticky;
    position: sticky;
    top: calc(8.3125rem + env(safe-area-inset-top)); /* After both headers: 48px + 77px + 8px margin = 133px */
    z-index: calc(var(--z-fixed) - 1); /* Just below navigation but above content */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Enhanced visibility */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Prevent any overlap issues */
    width: 100%;
    left: 0;
    right: 0;
    /* Ensure it doesn't get clipped */
    min-height: 3rem;
    /* Hide when at very top of page to prevent empty banner appearance */
    margin-top: calc(100vh - 10rem);
}

.trust-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: nowrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 48px;
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.trust-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.trust-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    line-height: 1.3;
}

.trust-details strong {
    font-size: 1rem;
    color: var(--color-text);
    font-weight: 600;
    line-height: 1.2;
}

.trust-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.2;
}

.trust-verify {
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-fast);
    padding: 0.125rem 0.25rem;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.trust-verify:hover {
    color: var(--color-primary-dark);
    transform: translateX(2px);
}

.trust-separator {
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.12);
    align-self: center;
}

/* Mobile-first: Vertical stack by default (optimal for small screens) */
.trust-content {
    gap: 1rem;
    flex-direction: column;
    align-items: center;
}

.trust-item {
    flex: none;
    width: 100%;
    max-width: none;
    justify-content: center;
}

/* Tablet enhancement: Flexible layout */
@media (min-width: 481px) {
    .trust-content {
        gap: 1.5rem;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .trust-item {
        flex: 1;
        width: auto;
        min-width: 200px;
    }
}

/* Desktop enhancement: Full horizontal layout */
@media (min-width: 769px) {
    .trust-content {
        gap: 2rem;
        flex-wrap: nowrap;
    }
    
    .trust-item {
        max-width: 300px;
    }
}

/* Mobile-first: Optimized typography for readability */
body {
    line-height: 1.7; /* Better mobile readability */
}

p, .about-text p, .timeline-achievements li {
    line-height: 1.8; /* Enhanced mobile reading experience */
}

.hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    line-height: 1.1;
    width: 100%;
    min-width: 300px;
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.25rem);
}

.hero-description {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.7;
}

.section-title {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
}

/* Desktop enhancement: Refined typography */
@media (min-width: 769px) {
    body {
        line-height: 1.6; /* Tighter for desktop reading */
    }
    
    p, .about-text p, .timeline-achievements li {
        line-height: 1.7;
    }
    
    .hero-title {
        font-size: clamp(3rem, 6vw, 4.5rem);
        line-height: 1.05;
    }
    
    .hero-subtitle {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    }
    
    .hero-description {
        font-size: clamp(1.125rem, 2vw, 1.25rem);
        line-height: 1.6;
    }
    
    .section-title {
        font-size: clamp(2.25rem, 4vw, 3rem);
    }
}
    
    /* Hero section optimization */
    .hero {
        min-height: calc(100vh - 56px); /* Account for mobile header */
        padding-top: 4rem;
        padding-bottom: 2rem;
    }
    
    .hero-background {
        opacity: 0.5; /* Reduce visual complexity */
    }
    
    .hero-shapes {
        display: none; /* Remove animated shapes on mobile */
    }
    
    .hero-content {
        padding: 0 var(--space-md);
        padding-bottom: 180px; /* Account for fixed buttons */
    }
    
    .hero-stats {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-md);
        margin-top: var(--space-xl);
    }
    
    .stat {
        flex: 1 1 calc(50% - var(--space-sm));
        min-width: 120px;
    }
    
    .scroll-indicator {
        display: none; /* Hide on mobile */
    }
    
    .trust-banner {
        position: -webkit-sticky;
        position: sticky;
        top: calc(4rem + env(safe-area-inset-top)); /* Mobile: Single header, no breadcrumb */
        padding: 1.5rem 0;
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
        z-index: calc(var(--z-fixed) - 1); /* Just below navigation but above content */
        /* Mobile enhancement */
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        width: 100%;
        left: 0;
        right: 0;
        /* Ensure it doesn't get clipped */
        min-height: 3rem;
    }
    
    .trust-content {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
        padding: 0 1rem;
    }
    
    .trust-item {
        flex: 1 1 auto;
        min-width: 150px;
        max-width: min(220px, 25vw);
        gap: 0.625rem;
    }
    
    .trust-separator {
        display: none;
    }
    
    .trust-icon {
        width: 20px;
        height: 20px;
    }
    
    .trust-details strong {
        font-size: 0.8125rem;
    }
    
    .trust-subtitle {
        font-size: 0.6875rem;
    }
}

} /* End @layer components */

/* ===== About Section ===== */
.about {
    text-align: center;
}

.section-title {
    text-align: center;
}

.about .section-title {
    margin-bottom: var(--space-2xl);
}


.about-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}

@container (min-width: 768px) {
    .about-content {
        grid-template-columns: 2fr 1fr;
    }
}

.about-text p {
    margin-bottom: var(--space-md);
    color: var(--color-text-light);
    line-height: 1.8;
}

.lead {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--color-text);
}


.highlights-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highlights-list li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
}

.highlights-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

.gmc-info {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 102, 255, 0.05);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
}

/* ===== Timeline ===== */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-lg) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-nhs), rgba(0, 94, 184, 0.2));
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-2xl);
    display: flex;
    align-items: flex-start;
}

.timeline-item:nth-child(odd) {
    justify-content: flex-start;
    padding-right: 50%;
}

.timeline-item:nth-child(even) {
    justify-content: flex-end;
    padding-left: 50%;
}

.timeline-marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--color-nhs);
    border: 3px solid var(--color-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 94, 184, 0.2);
    z-index: 1;
}

.timeline-content {
    background: var(--color-bg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 94, 184, 0.1);
    transition: all var(--transition-base);
    width: 100%;
    border: 2px solid rgba(0, 94, 184, 0.15);
    position: relative;
}

.timeline-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.timeline-logo {
    width: 60px;
    height: auto;
    opacity: 0.8;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-nhs);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.timeline-content:hover::before {
    transform: scaleX(1);
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.timeline-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
}

.international-equiv {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-weight: 400;
    font-style: italic;
    margin-left: var(--space-xs);
}

.timeline-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.timeline-company,
.timeline-date {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

.timeline-rotations {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.rotation-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.25rem;
    background: rgba(0, 94, 184, 0.08);
    color: var(--color-nhs);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    font-weight: 600;
    border: 1px solid rgba(0, 94, 184, 0.2);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.rotation-badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 94, 184, 0.2);
    background: rgba(0, 94, 184, 0.12);
    border-color: var(--color-nhs);
}

.rotation-date {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

.timeline-achievements {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-achievements li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
    font-size: var(--fs-sm);
}

.timeline-achievements li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* ===== Clinical Competencies ===== */
.competencies-section {
    margin-top: var(--space-3xl);
    padding: var(--space-2xl);
    background: var(--gradient-mesh), var(--color-bg-alt);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

.competencies-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    opacity: 0.1;
    filter: blur(40px);
}

.competencies-title {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
    font-weight: 600;
    margin-bottom: var(--space-xl);
    text-align: center;
    color: var(--color-text);
}

.competencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xl);
}

.competency-category {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 102, 255, 0.1);
    transition: all var(--transition-base);
}

.competency-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.15);
    border-color: var(--color-primary);
}

.category-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.competency-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.competency-list li {
    position: relative;
    padding: var(--space-xs) 0;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.competency-list li:hover {
    color: var(--color-text);
}

.competency-list li strong {
    color: var(--color-primary);
    font-weight: 700;
    margin-right: var(--space-xs);
    font-size: var(--fs-base);
}

/* ===== Research Section ===== */
.research-metrics-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
    padding: var(--space-xl);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.metrics-card {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.metrics-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.metric-value {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-sm);
}

.metric-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-sublabel {
    font-size: var(--fs-xs);
    color: var(--color-text-lighter);
    margin-top: var(--space-xs);
}

/* Mobile-first: Compact metrics dashboard by default */
.research-metrics-dashboard {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
}

.metrics-card {
    padding: var(--space-md);
}

.metric-value {
    font-size: var(--fs-2xl);
}

/* Desktop enhancement: Expanded metrics layout */
@media (min-width: 769px) {
    .research-metrics-dashboard {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xl);
        padding: var(--space-2xl);
    }
    
    .metrics-card {
        padding: var(--space-lg);
    }
    
    .metric-value {
        font-size: var(--fs-3xl);
    }
}

.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
}

.publication-card {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.publication-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(0, 102, 255, 0.1) 50%, transparent 70%);
    transform: rotate(45deg) translateY(100%);
    transition: transform 0.6s;
}

.publication-card:hover::after {
    transform: rotate(45deg) translateY(-100%);
}

.publication-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.publication-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.publication-card:hover::before {
    transform: scaleX(1);
}

.publication-type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.publication-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.publication-authors {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.publication-authors strong {
    color: var(--color-text);
}

.publication-journal {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.publication-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--color-primary);
    transition: all var(--transition-fast);
}

.publication-link:hover {
    gap: var(--space-sm);
}

/* Enhanced publication features */
.publication-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: auto;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

/* Ensure consistent card heights and layout */
.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-xl);
    align-items: start;
}

.publication-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.publication-title {
    flex-grow: 1;
    margin-bottom: auto;
}


.doi-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-sm);
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-base);
}

.doi-link:hover {
    color: var(--color-primary-dark);
    transform: translateX(2px);
}

.cite-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--transition-base);
}

.cite-button:hover {
    transform: translateY(-1px) scale(1.01);
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-alt);
}

.cite-button.success {
    border-color: var(--color-success);
    color: var(--color-success);
    background: rgba(0, 200, 150, 0.1);
}

.publication-metrics {
    display: flex;
    gap: var(--space-lg);
    margin-top: var(--space-sm);
    font-size: var(--fs-sm);
    color: var(--color-text-lighter);
}

.metric {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.metric svg {
    opacity: 0.6;
}

.metric-value {
    font-weight: 500;
    color: var(--color-text-light);
}

/* ===== Research Experience ===== */
.research-experience {
    background: var(--color-bg-alt);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
}

.subsection-title {
    font-size: clamp(1.5rem, 2vw + 0.75rem, 1.875rem);
    font-weight: 600;
    margin-bottom: var(--space-xl);
    color: var(--color-text);
}

.research-items {
    display: grid;
    gap: var(--space-xl);
}

.research-item {
    background: var(--color-bg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-bg-dark);
    transition: all var(--transition-base);
}

/* Cambridge research items */
.research-item.cambridge-item {
    border: 2px solid rgba(163, 193, 173, 0.4);
    background: linear-gradient(135deg, rgba(163, 193, 173, 0.08) 0%, rgba(255, 255, 255, 0.5) 100%);
}

.research-item.cambridge-item .research-role {
    color: var(--color-cambridge);
}

.research-item.cambridge-item:hover {
    border-color: var(--color-cambridge-blue);
    box-shadow: 0 8px 20px rgba(163, 193, 173, 0.3);
}

.research-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.research-role {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.research-meta {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-sm);
}

.research-context {
    font-size: var(--fs-sm);
    color: var(--color-cambridge);
    font-style: italic;
    margin-bottom: var(--space-md);
}

.research-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.research-details li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
}

.research-details li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: bold;
}

/* ===== Education Section ===== */
.education-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
}

.education-card {
    background: var(--color-bg);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.education-card.primary {
    background: linear-gradient(135deg, rgba(163, 193, 173, 0.15) 0%, rgba(163, 193, 173, 0.08) 100%);
    color: var(--color-text);
    border: 2px solid var(--color-cambridge-blue);
}

.education-card.cambridge-intercalated {
    background: linear-gradient(135deg, rgba(163, 193, 173, 0.08) 0%, rgba(255, 255, 255, 0.8) 100%);
    border: 2px solid var(--color-cambridge-blue);
    color: var(--color-text);
}

.education-card.cambridge-intercalated .education-detail {
    font-size: var(--fs-sm);
    color: var(--color-cambridge);
    font-style: italic;
    margin-top: var(--space-sm);
}

.education-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.education-icon {
    width: 200px;
    height: auto;
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
}

.education-icon img {
    width: 100%;
    height: auto;
    display: block;
}

/* Remove any filters on real logos */
.education-icon img {
    filter: none !important;
}

/* Cambridge blue background glow for all Cambridge cards */
.education-card.primary::before,
.education-card.cambridge-intercalated::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(163, 193, 173, 0.3) 0%, transparent 70%);
    animation: subtle-glow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes subtle-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.education-card:hover .education-icon {
    transform: scale(1.05);
    opacity: 1;
}

.education-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.education-card.primary .education-degree,
.education-card.cambridge-intercalated .education-degree {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-cambridge);
}

/* Grid adjustment for multiple Cambridge cards */
@media (min-width: 768px) {
    .education-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .education-card:last-child {
        grid-column: 1 / -1;
    }
}

.education-degree {
    font-size: var(--fs-xl);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.education-degree-secondary {
    font-size: var(--fs-lg);
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: inherit;
}

.education-institution {
    font-size: var(--fs-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.education-years {
    font-size: var(--fs-sm);
    color: var(--color-text-lighter);
    margin-bottom: var(--space-lg);
}

.education-grades {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.grade {
    padding: 0.25rem 0.75rem;
    background: var(--color-bg-alt);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.education-activities h4 {
    font-size: var(--fs-base);
    margin-bottom: var(--space-sm);
}

.education-card.primary .education-activities h4 {
    color: var(--color-cambridge);
    font-weight: 700;
}

.education-activities ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.education-activities li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-sm);
}

.education-card.primary .education-activities li {
    color: var(--color-cambridge);
    opacity: 0.9;
}

.education-activities li::before {
    content: '•';
    position: absolute;
    left: 0;
}

/* ===== Skills Section ===== */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
}

.skill-category {
    background: var(--color-bg-alt);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bg-dark);
}

.skill-category.primary-skills {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, rgba(0, 102, 255, 0.02) 100%);
    border: 2px solid rgba(0, 102, 255, 0.2);
}

.skill-category-title {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.skill-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.skill-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.skill-name {
    font-weight: 600;
    font-size: var(--fs-base);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.skill-context {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-style: italic;
    margin-left: var(--space-sm);
}

.skill-level {
    flex: 1;
    height: 8px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.skill-level::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
    transition: width 1s ease-out;
}

.skill-level[data-level="advanced"]::after {
    width: 90%;
}

.skill-level[data-level="intermediate"]::after {
    width: 70%;
}

.skill-level[data-level="beginner"]::after {
    width: 40%;
}

.skill-level-text {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-weight: 500;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.skill-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-bg-dark);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.skill-tag:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px) scale(1.02);
}

/* ===== Excellence Section ===== */
.testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial {
    background: var(--color-bg);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-bg-dark);
    position: relative;
    transition: all var(--transition-base);
}

.testimonial::before {
    content: '"';
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-size: 4rem;
    color: var(--color-primary);
    opacity: 0.2;
    font-weight: 700;
}

.testimonial:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.testimonial-text {
    font-size: var(--fs-base);
    line-height: 1.8;
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    padding-top: var(--space-lg);
}

.testimonial-author {
    font-size: var(--fs-sm);
    color: var(--color-text);
    font-weight: 600;
    font-style: normal;
}

.audit-section {
    background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg));
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.audit-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.05;
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.audit-card {
    background: var(--color-bg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 2px solid rgba(0, 94, 184, 0.15);
    transition: all var(--transition-base);
    position: relative;
}

.audit-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 94, 184, 0.15);
    border-color: var(--color-nhs);
}

/* NHS blue accent line */
.audit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-nhs);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.audit-title {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.audit-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.audit-details li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
}

.audit-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

/* ===== Professional Development Section ===== */
.professional-development {
    background: var(--color-bg);
}

.development-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.development-category {
    background: var(--color-bg-alt);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-bg-dark);
    transition: all var(--transition-base);
}

.development-category:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.category-title {
    font-size: var(--fs-xl);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

/* Certifications */
.certification-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.certification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.certification-item:hover {
    background: rgba(0, 102, 255, 0.05);
}

.cert-icon {
    font-size: var(--fs-2xl);
    line-height: 1;
}

.cert-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.cert-issuer {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* Teaching */
.teaching-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.teaching-item {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-bg-dark);
}

.teaching-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.teaching-role {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.teaching-detail {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* Interest Tags */
.interest-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.interest-tag {
    padding: 0.5rem 1.25rem;
    background: var(--color-bg);
    border: 1px solid var(--color-bg-dark);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.interest-tag.primary {
    background: rgba(0, 102, 255, 0.1);
    color: var(--color-primary);
    border-color: rgba(0, 102, 255, 0.3);
    font-weight: 600;
}

.interest-tag:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===== Contact Section ===== */
.contact {
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
    position: relative;
    overflow: hidden;
}

.contact::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.03;
    animation: rotate 60s linear infinite;
    pointer-events: none;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.contact-heading {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-sm);
}

.contact-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-primary);
    border-radius: var(--radius-full);
}

/* Contact Methods */
.contact-method {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    transition: all var(--transition-base);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.contact-method::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.05) 0%, transparent 100%);
    transition: width var(--transition-base);
    pointer-events: none;
    z-index: -1;
}

.contact-method:hover {
    transform: translateX(5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.contact-method:hover::before {
    width: 100%;
}

.primary-method {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.05) 0%, var(--color-bg) 100%);
    border: 2px solid rgba(0, 102, 255, 0.2);
}

.method-icon {
    width: 48px;
    height: 48px;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.method-content {
    flex: 1;
    position: relative;
    z-index: 50;
}

.method-label {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.method-link {
    font-size: var(--fs-lg);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
    display: inline-block;
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 999;
    cursor: pointer;
    pointer-events: auto;
}

.method-link:hover {
    color: var(--color-primary);
}

.method-link.primary {
    color: var(--color-primary);
}

.method-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-bg-alt);
    color: var(--color-text-light);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 500;
    margin-right: var(--space-sm);
}

.method-badge.nhs {
    background: rgba(0, 94, 184, 0.1);
    color: var(--color-nhs);
}

.method-status {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-style: italic;
}

/* Contact Form */
.contact-form-container {
    max-width: 600px;
    margin: 0 auto var(--space-3xl);
    background: var(--color-bg);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    position: relative;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.hidden {
    display: none !important;
}

.form-group {
    position: relative;
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

.required {
    color: var(--color-error);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem 1.125rem;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    appearance: none;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-light);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.08),
                0 1px 2px 0 rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-1px);
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder {
    opacity: 0.4;
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
    border-color: var(--color-error);
}

.form-input:invalid:not(:placeholder-shown) ~ .form-error,
.form-textarea:invalid:not(:placeholder-shown) ~ .form-error {
    display: block;
}

.form-error {
    display: none;
    font-size: var(--fs-sm);
    color: var(--color-error);
    margin-top: var(--space-xs);
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.btn-submit {
    position: relative;
    min-width: 220px;
    font-weight: 600;
    letter-spacing: -0.01em;
    background: linear-gradient(135deg, #0066ff 0%, #004ecc 100%);
    color: white;
    box-shadow: 0 4px 14px 0 rgba(0, 102, 255, 0.25),
                0 1px 3px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.btn-submit:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px 0 rgba(0, 102, 255, 0.4),
                0 3px 8px 0 rgba(0, 0, 0, 0.12),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.15);
}

.btn-submit:active {
    transform: translateY(0) scale(0.99);
}

.btn-loading {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: inherit;
    border-radius: inherit;
}

.form-submitting .btn-text {
    visibility: hidden;
}

.form-submitting .btn-loading {
    display: flex;
}

/* Enhanced form loading states */
.form-submitting {
    pointer-events: none;
}

.form-submitting .contact-form input,
.form-submitting .contact-form textarea {
    opacity: 0.7;
    cursor: not-allowed;
}

.spinner {
    animation: rotate 1s linear infinite;
}

.spinner-circle {
    stroke: white;
    stroke-dasharray: 63;
    stroke-dashoffset: 63;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dashoffset: 63; }
    50% { stroke-dashoffset: 15; }
    100% { stroke-dashoffset: 63; }
}

.form-note {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-style: italic;
}

.contact-success {
    display: none;
    text-align: center;
    padding: var(--space-2xl);
}

.contact-success.show {
    display: block;
}

.contact-form.hide {
    display: none;
}

.success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-lg);
    background: var(--color-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    font-weight: bold;
}

.contact-success h3 {
    font-size: var(--fs-xl);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.contact-success p {
    color: var(--color-text-light);
}

/* Mobile responsiveness */
/* Mobile-first: Optimized form for touch devices */
.contact-form-container {
    padding: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.form-input,
.form-select,
.form-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
}

/* Desktop enhancement: Spacious form layout */
@media (min-width: 769px) {
    .contact-form-container {
        padding: var(--space-2xl);
        margin-bottom: var(--space-3xl);
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        font-size: var(--fs-base);
    }
}
}

/* Professional Details */
.professional-details {
    background: rgba(0, 102, 255, 0.05);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    border-left: 4px solid var(--color-primary);
}

.detail-item {
    font-size: var(--fs-base);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.detail-item:last-child {
    margin-bottom: 0;
}

.detail-item strong {
    color: var(--color-primary);
    margin-right: var(--space-sm);
}

/* Professional Networks */
.contact-links {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.network-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.network-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.08) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.network-link:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px -6px rgba(0, 102, 255, 0.2),
                0 0 0 1px rgba(0, 102, 255, 0.1);
    border-color: rgba(0, 102, 255, 0.2);
    color: var(--color-primary);
    background: rgba(0, 102, 255, 0.04);
}

.network-link:hover::before {
    opacity: 1;
}

.network-link:active {
    transform: translateY(0) scale(0.98);
}

/* Download Section */
.download-section {
    margin-top: var(--space-xl);
}

.download-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #0066ff 0%, #004ecc 100%);
    color: white;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px 0 rgba(0, 102, 255, 0.25),
                0 1px 3px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    isolation: isolate;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.vcard-button {
    background: linear-gradient(135deg, var(--color-success) 0%, #00a87d 100%);
    box-shadow: 0 4px 14px 0 rgba(0, 200, 150, 0.25),
                0 1px 3px 0 rgba(0, 0, 0, 0.08),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    margin-top: var(--space-sm);
}

.download-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.download-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 32px 0 rgba(0, 102, 255, 0.4),
                0 3px 8px 0 rgba(0, 0, 0, 0.12),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

.download-button:hover::before {
    opacity: 1;
}

.download-button:active {
    transform: translateY(0) scale(0.99);
}

.download-button > * {
    position: relative;
    z-index: 2;
}

.download-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--transition-slow), height var(--transition-slow);
}

.download-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 102, 255, 0.3);
    color: white;
}

.download-button:hover::before {
    width: 300px;
    height: 300px;
}

.file-info {
    display: block;
    font-size: var(--fs-sm);
    opacity: 0.9;
    font-weight: 400;
}

/* Response Indicator */
.response-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-bg-dark);
}

.indicator-dot {
    width: 10px;
    height: 10px;
    background: var(--color-success);
    border-radius: 50%;
    position: relative;
    animation: pulse 2s ease-in-out infinite;
}

.indicator-dot::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    width: 18px;
    height: 18px;
    background: var(--color-success);
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-ring 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.2; }
    100% { transform: scale(0.8); opacity: 0.5; }
}

.indicator-text {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* Responsive */
/* Mobile-first: Stacked contact layout by default */
.contact-wrapper {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

.contact-links {
    flex-direction: column;
}

/* Desktop enhancement: Side-by-side layout */
@media (min-width: 769px) {
    .contact-wrapper {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-2xl);
    }
    
    .contact-links {
        flex-direction: row;
    }
}

.network-link {
        justify-content: center;
    }
}

/* ===== Footer ===== */
.footer {
    background: var(--color-bg-dark);
    padding: var(--space-xl) 0;
    text-align: center;
}

.footer-text,
.footer-update {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin: 0;
}

.footer-update {
    margin-top: var(--space-xs);
}

/* ===== Touch Target Size for Mobile ===== */
@media (pointer: coarse) {
    /* Ensure minimum 44x44px touch targets */
    a, button, input, select, textarea, [role="button"] {
        min-height: 44px;
        min-width: 44px;
        position: relative;
    }
    
    /* Create larger touch areas without affecting visual design */
    .nav-link {
        padding: 0.75rem 1rem;
        position: relative;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        top: -8px;
        bottom: -8px;
        left: -8px;
        right: -8px;
    }
    
    .btn {
        padding: 1rem 2rem;
        min-height: 48px;
    }
    
    .publication-link,
    .network-link {
        padding: 0.75rem 1rem;
        display: inline-block;
        min-height: 44px;
    }
    
    /* Rotation badge touch targets */
    .rotation-badge {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }
    
    /* Skill tags need better spacing on mobile */
    .skill-tag,
    .interest-tag {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
        margin: 0.25rem;
    }
    
    /* Download button enhancement */
    .download-button {
        min-height: 56px;
        padding: 1rem 2rem;
    }
    
    /* Contact method cards */
    .contact-method {
        min-height: 80px;
        padding: 1.25rem;
    }
}

/* ===== Responsive Design ===== */
/* Mobile-first: Compact navigation by default */
.header {
    background: rgba(255, 255, 255, 0.95);
    top: 2rem; /* Mobile breadcrumb space */
}

.nav-container {
    height: 48px;
}

.nav-logo {
    font-size: 1.125rem;
}

/* Desktop enhancement: Larger navigation */
@media (min-width: 769px) {
    .header {
        background: rgba(255, 255, 255, 0.9);
    }
    
    .nav-container {
        height: 60px;
    }
    
    .nav-logo {
        font-size: 1.375rem;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: min(90vw, 400px);
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile */
        background: var(--color-bg);
        flex-direction: column;
        padding: calc(4rem + var(--safe-area-inset-top)) var(--space-xl) calc(var(--space-xl) + var(--safe-area-inset-bottom));
        padding-inline: calc(var(--space-lg) + var(--safe-area-inset-right));
        transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: calc(var(--z-fixed) + 10); /* Above backdrop and other fixed elements */
        overflow-y: auto;
        overscroll-behavior: contain;
        gap: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        transform: translateX(100%);
        will-change: transform;
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    /* Backdrop for mobile menu - hidden by default */
    
    
    
    /* Mobile menu items styling - Ensure clickability */
    .nav-menu li {
        position: relative;
        z-index: calc(var(--z-fixed) + 15); /* Always above backdrop */
        width: 100%;
        opacity: 0;
        transform: translateX(20px);
        animation: menu-item-slide-in 0.3s ease forwards;
        margin: 0;
    }
    
    /* Staggered animation delays */
    .nav-menu.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-menu.active li:nth-child(2) { animation-delay: 0.15s; }
    .nav-menu.active li:nth-child(3) { animation-delay: 0.2s; }
    .nav-menu.active li:nth-child(4) { animation-delay: 0.25s; }
    .nav-menu.active li:nth-child(5) { animation-delay: 0.3s; }
    .nav-menu.active li:nth-child(6) { animation-delay: 0.35s; }
    .nav-menu.active li:nth-child(7) { animation-delay: 0.4s; }
    .nav-menu.active li:nth-child(8) { animation-delay: 0.45s; }
    .nav-menu.active li:nth-child(9) { animation-delay: 0.5s; }
    
    .nav-link {
        display: flex;
        align-items: center;
        padding: 1rem 0;
        min-height: 56px;
        font-size: 1.125rem;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        position: relative;
        pointer-events: auto; /* Ensure links are always clickable */
        z-index: calc(var(--z-fixed) + 20); /* Highest z-index for clickability */
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        left: -24px;
        width: 4px;
        height: 0;
        background: var(--color-primary);
        transition: height 0.2s ease;
        border-radius: 0 2px 2px 0;
    }
    
    .nav-link:active,
    .nav-link.active::after {
        height: 24px;
    }
    
    .nav-cta {
        margin-top: var(--space-xl);
        width: 100%;
        text-align: center;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        min-height: 56px;
    }
    
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        padding: 0;
        position: relative;
        z-index: calc(var(--z-modal) + 1);
    }
    
    .nav-toggle-icon {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--color-text);
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius: 2px;
    }
    
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: inherit;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        border-radius: 2px;
    }
    
    .nav-toggle-icon::before {
        transform: translateY(-8px);
    }
    
    .nav-toggle-icon::after {
        transform: translateY(8px);
    }
    
    .nav-toggle.active .nav-toggle-icon {
        background: transparent;
    }
    
    .nav-toggle.active .nav-toggle-icon::before {
        transform: rotate(45deg);
    }
    
    .nav-toggle.active .nav-toggle-icon::after {
        transform: rotate(-45deg);
    }
    
    .hero-actions {
        flex-direction: column-reverse;
        width: 100%;
        max-width: 300px;
        margin: var(--space-lg) auto var(--space-2xl);
        gap: var(--space-sm);
    }
    
    
    .btn {
        width: 100%;
    }
    
    .timeline {
        padding: var(--space-md) 0;
    }
    
    .timeline::before {
        left: 16px;
        width: 3px;
    }
    
    .timeline-item {
        padding-left: 48px !important;
        padding-right: var(--space-md) !important;
        margin-bottom: var(--space-xl);
        justify-content: flex-start;
    }
    
    .timeline-marker {
        left: 16px;
        width: 32px;
        height: 32px;
    }
    
    .timeline-content {
        width: 100%;
        padding: var(--space-lg);
    }
    
    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
    
    .timeline-logo {
        max-width: 120px;
        height: auto;
    }
    
    .timeline-title {
        font-size: var(--fs-lg);
    }
    
    .timeline-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .timeline-rotations {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }
    
    .rotation-badge {
        flex: 1 1 calc(50% - var(--space-xs));
        min-width: 140px;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .research-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .publication-card {
        padding: var(--space-lg);
    }
    
    .competencies-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .competency-category {
        padding: var(--space-lg);
    }
    
    .education-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .education-card {
        padding: var(--space-lg);
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .development-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .education-card.primary {
        grid-column: 1;
    }
}

/* ===== Additional Mobile Breakpoints ===== */

/* Small phones (iPhone SE, etc.) */
@media (max-width: 375px) {
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    
    .nav-menu {
        width: 100vw;
    }
    
    .section {
        padding: var(--space-2xl) var(--space-md);
    }
    
    .timeline-content {
        padding: var(--space-md);
    }
    
    .publication-item {
        padding: var(--space-md);
    }
}

/* Regular phones */
@media (max-width: 480px) {
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .nav-menu {
        padding-top: calc(2rem + var(--safe-area-inset-top));
        width: min(60vw, 400px);
    }
    
    .nav-link {
        min-height: 44px;
        padding: 0.75rem 0;
        font-size: 1rem;
    }
    
    .hero {
        min-height: 100vh;
        padding-block: var(--space-lg);
    }
    
    .hero-title {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }
    
    .section {
        padding-block: var(--space-xl);
    }
}

/* Large phones and small tablets */
@media (min-width: 481px) and (max-width: 640px) {
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .publication-grid {
        grid-template-columns: 1fr;
    }
    
}

/* Tablets */
@media (min-width: 641px) and (max-width: 1024px) {
    .container {
        max-width: 90%;
    }
    
    .hero-content {
        max-width: 600px;
    }
    
    .timeline-content {
        max-width: 85%;
    }
}

/* ===== Print Styles ===== */
@media print {
    .header,
    .scroll-indicator,
    .hero-background,
    .nav-toggle {
        display: none;
    }
    
    .hero {
        min-height: auto;
        padding: 2rem 0;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    .btn {
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
    }
    
    a {
        color: var(--color-text);
        text-decoration: underline;
    }
    
    .timeline::before,
    .timeline-marker {
        display: none;
    }
    
    .timeline-item {
        padding: 0 !important;
        margin-bottom: 2rem;
    }
    
    .timeline-content {
        box-shadow: none;
        border: 1px solid var(--color-bg-dark);
    }
}

/* ===== Scroll-driven Animations (Modern CSS) ===== */
@supports (animation-timeline: view()) {
    .section {
        animation: fade-in-view linear both;
        animation-timeline: view();
        animation-range: entry 25% cover 50%;
    }
    
    @keyframes fade-in-view {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .timeline-item {
        animation: slide-in-view linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 40%;
    }
    
    .timeline-item:nth-child(odd) {
        --slide-from: -50px;
    }
    
    .timeline-item:nth-child(even) {
        --slide-from: 50px;
    }
    
    @keyframes slide-in-view {
        from {
            opacity: 0;
            transform: translateX(var(--slide-from, 0));
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .publication-card,
    .skill-category,
    .testimonial {
        animation: scale-in-view linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 40%;
    }
    
    @keyframes scale-in-view {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ===== CSS Nesting (2025 Feature) ===== */
@supports (selector(&)) {
    .nav-link {
        &:hover,
        &.active {
            color: var(--color-primary);
            
            &::after {
                transform: scaleX(1);
            }
        }
    }
    
    .btn {
        &-primary {
            background: var(--color-primary);
            color: white;
            
            &:hover {
                background: var(--color-primary-dark);
                transform: translateY(-2px) scale(1.02);
                box-shadow: var(--shadow-lg);
            }
        }
        
        &-secondary {
            background: transparent;
            color: var(--color-primary);
            border-color: var(--color-primary);
            
            &:hover {
                background: var(--color-primary);
                color: white;
            }
        }
    }
}

/* ===== Container Queries (2025 Feature) ===== */
@supports (container-type: inline-size) {
    .about-content,
    .research-grid,
    .skills-grid {
        container-type: inline-size;
    }
    
    @container (min-width: 600px) {
        .about-content {
            grid-template-columns: 2fr 1fr;
        }
    }
    
    @container (min-width: 700px) {
        .research-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/* ===== Mobile-First Header Positioning ===== */
.header {
    top: 2.5rem; /* Space for breadcrumb */
    bottom: auto;
}
    
    /* Add padding to body for fixed header */
    body {
        padding-top: calc(64px + var(--safe-area-inset-top));
    }
    
    /* Optimize touch targets */
    .nav-link,
    .nav-cta,
    .nav-toggle {
        min-height: 44px;
    }
}

/* ===== Mobile-First Performance Optimizations ===== */
/* Mobile-first: System fonts and optimized images by default */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.timeline-logo,
.education-icon {
    max-width: 150px;
}

.section {
    -webkit-overflow-scrolling: touch;
    will-change: auto;
}

/* Desktop enhancement: Web fonts and larger images */
@media (min-width: 769px) {
    body {
        font-family: var(--font-sans); /* Web fonts for desktop */
    }
    
    .timeline-logo,
    .education-icon {
        max-width: 200px;
    }
    
    .section {
        will-change: transform; /* Enhanced animations */
    }
}
    
    /* Simplify gradients on mobile */
    .btn-primary {
        background: var(--color-primary);
    }
    
    /* Reduce padding for mobile screens */
    .section {
        padding: var(--space-2xl) 0;
    }
    
    .container {
        padding: 0 var(--space-sm);
    }
}

/* ===== Floating Action Button ===== */
.fab {
    position: fixed;
    bottom: calc(var(--space-xl) + var(--safe-area-inset-bottom));
    right: calc(var(--space-lg) + var(--safe-area-inset-right));
    width: 56px;
    height: 56px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    z-index: var(--z-sticky);
}

.fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
}

.fab:active {
    transform: scale(0.95);
}

.fab.hidden {
    transform: scale(0);
    opacity: 0;
}

@media (min-width: 769px) {
    .fab {
        display: none;
    }
}

/* ===== Bottom Sheet ===== */
.bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: var(--safe-area-inset-bottom);
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(calc(100% - 40px));
    transition: transform var(--transition-base) ease-out;
    z-index: var(--z-modal);
    max-height: 80vh;
    overflow: hidden;
}

.bottom-sheet.open {
    transform: translateY(0);
}

.sheet-handle {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: pan-y;
}

.sheet-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-full);
}

.sheet-content {
    padding: var(--space-lg);
    overflow-y: auto;
    max-height: calc(80vh - 40px);
}

.sheet-content h3 {
    margin-bottom: var(--space-lg);
    color: var(--color-primary);
}

.sheet-action {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.sheet-action:hover {
    background: var(--color-bg-dark);
    transform: translateX(4px);
}

.sheet-action svg {
    color: var(--color-primary);
}

@media (min-width: 769px) {
    .bottom-sheet {
        display: none;
    }
}

/* ===== Mobile Performance & Reduced Motion ===== */
/* Mobile-first: Performance-optimized by default */
.hero-gradient {
    animation: none;
    background: var(--gradient-mesh), var(--color-bg-alt);
}

.hero::before,
.hero::after {
    display: none;
}

/* Desktop enhancement: Enable complex animations */
@media (min-width: 769px) {
    .hero-gradient {
        animation: gradient-shift 20s ease-in-out infinite;
    }
    
    .hero::before,
    .hero::after {
        display: block;
    }
}
    
    /* Simplify parallax on mobile */
    .hero-content,
    .hero-gradient {
        transform: none !important;
    }
    
    /* Reduce box shadows for performance */
    .publication-card,
    .education-card,
    .timeline-content {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .publication-card:hover,
        .education-card:hover,
        .skill-tag:hover,
        .btn:hover {
            transform: none;
            box-shadow: none;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .hero-gradient,
    .hero::before,
    .hero::after {
        animation: none !important;
    }
    
    .scroll-indicator {
        animation: none !important;
    }
    
    .stat-number {
        animation: none !important;
    }
}

/* ===== :has() Selector (2025 Feature) ===== */
@supports selector(:has(*)) {
    /* Highlight publication cards that have a specific type */
    .publication-card:has(.publication-type:contains("Journal Article")) {
        border-color: var(--color-primary);
    }
    
    /* Style nav when menu is active */
    .nav:has(.nav-menu.active) {
        background: var(--color-bg);
    }
}

/* ===== @scope Rule (2025 Feature) ===== */
@supports selector(:scope) {
    @scope (.hero) {
        /* Scoped styles for hero section */
        h1 { margin-bottom: 0; }
        p { max-width: 600px; margin-left: auto; margin-right: auto; }
    }
    
    @scope (.timeline) {
        /* Scoped styles for timeline */
        .container { max-width: none; }
    }
}

/* ===== Modal Styles ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-modal);
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: modalFadeIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18),
                0 12px 24px -6px rgba(0, 0, 0, 0.1),
                0 0 0 1px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
    animation: modal-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes modal-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    margin: 0;
    font-size: var(--fs-xl);
}

.modal-close {
    background: rgba(0, 0, 0, 0.04);
    border: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--color-text-light);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.modal-close:hover {
    background: rgba(0, 102, 255, 0.1);
    color: var(--color-primary);
    transform: scale(1.1);
}

.modal-close:active {
    transform: scale(0.95);
}

.modal-body {
    padding: var(--space-xl);
}

.cv-preview h3 {
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.cv-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
}

.cv-highlights li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-light);
}

.cv-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: bold;
}

.cv-note {
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

.cv-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.cv-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

/* ===== Newsletter Popup ===== */
.newsletter-popup {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-lg);
    max-width: 350px;
    z-index: var(--z-fixed);
    transform: translateY(150%);
    transition: transform var(--transition-base);
}

.newsletter-popup.show {
    transform: translateY(0);
}

.newsletter-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    font-size: var(--fs-xl);
    cursor: pointer;
    color: var(--color-text-light);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.newsletter-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--fs-lg);
}

.newsletter-text {
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
    font-size: var(--fs-sm);
}

.newsletter-form {
    display: flex;
    gap: var(--space-sm);
}

.newsletter-input {
    flex: 1;
    padding: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}

.newsletter-submit {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.newsletter-submit:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px) scale(1.02);
}

/* ===== Progressive Disclosure ===== */
.about-more-toggle,
.publication-expand {
    background: none;
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    transition: all var(--transition-fast);
    min-height: 44px;
}

.about-more-toggle:hover,
.publication-expand:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
    transform: translateY(-2px) scale(1.02);
}

.toggle-icon,
.expand-icon {
    transition: transform var(--transition-base);
}

.about-more-toggle[aria-expanded="true"] .toggle-icon,
.publication-expand[aria-expanded="true"] .expand-icon {
    transform: rotate(180deg);
}

.about-more-content {
    margin-top: var(--space-md);
    animation: slide-down var(--transition-base) ease-out;
}

.publication-details {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.publication-abstract h4 {
    font-size: var(--fs-base);
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.publication-abstract ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md);
}

.publication-abstract li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-xs);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

.publication-abstract li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.publication-impact {
    font-size: var(--fs-sm);
    color: var(--color-text);
    padding: var(--space-sm);
    background: rgba(0, 102, 255, 0.05);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CV Format Selector ===== */
.cv-format-selector {
    margin-bottom: var(--space-xl);
    padding: var(--space-lg);
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
}

.cv-format-selector h4 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.format-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.format-option {
    cursor: pointer;
    position: relative;
}

.format-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    text-align: center;
}

.format-option input[type="radio"]:checked + .format-card {
    border-color: var(--color-primary);
    background: rgba(0, 102, 255, 0.05);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-md);
}

.format-option:hover .format-card {
    border-color: var(--color-primary-light);
}

.format-flag {
    font-size: var(--fs-2xl);
}

.format-name {
    font-weight: 600;
    color: var(--color-text);
}

.format-desc {
    font-size: var(--fs-xs);
    color: var(--color-text-light);
}

.format-note {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    font-style: italic;
    margin: 0;
}

/* ===== About Section (Simplified) ===== */
.about .section-title {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.about-content {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}

.about-text {
    text-align: center;
}

.about-text p {
    margin-bottom: var(--space-md);
    color: var(--color-text-light);
    line-height: 1.8;
    text-align: left;
}

.about-text .lead {
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--color-text);
    text-align: center !important;
    margin-bottom: var(--space-xl) !important;
}

.gmc-info {
    text-align: center;
    margin-top: var(--space-xl);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}

/* About Stats */
.about-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Mobile-first: Compact stats layout by default */
.about-stats {
    gap: var(--space-lg);
}

.stat-value {
    font-size: var(--fs-2xl);
}

/* Desktop enhancement: Spacious stats layout */
@media (min-width: 769px) {
    .about-stats {
        gap: var(--space-2xl);
    }
    
    .stat-value {
        font-size: var(--fs-4xl);
    }
}

/* Touch target improvements */
.skill-tag,
    .interest-tag {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
        display: inline-flex;
        align-items: center;
    }
    
    .rotation-badge {
        min-height: 48px;
        padding: 0.625rem 1.25rem;
    }
    
    .publication-link,
    .network-link {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
    }
    
    .btn {
        min-height: 48px;
        padding: 1rem 2rem;
    }
    
    .pronunciation-audio {
        width: 48px;
        height: 48px;
    }
    
    .about-more-toggle,
    .publication-expand {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
    }
    
    /* Form inputs */
    .form-input,
    .form-select,
    .form-textarea {
        min-height: 48px;
        padding: 0.75rem 1rem;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    .newsletter-submit {
        min-height: 44px;
        padding: 0.75rem 1.25rem;
    }
}

/* Dark mode support for trust banner */
[data-theme="dark"] .trust-banner {
    background: rgba(18, 18, 18, 0.85); /* Dark background with opacity */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .trust-item {
    color: var(--color-text-light);
}

[data-theme="dark"] .trust-icon {
    color: #ffffff; /* White icons for better visibility */
}

[data-theme="dark"] .trust-icon img {
    filter: brightness(0) invert(1); /* Convert black SVGs to white */
}

[data-theme="dark"] .trust-details strong {
    color: var(--color-text);
}

[data-theme="dark"] .trust-subtitle {
    color: var(--color-text-light);
}

[data-theme="dark"] .trust-verify {
    color: var(--color-primary-light);
    background: rgba(77, 148, 255, 0.1);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .trust-verify:hover {
    color: var(--color-accent);
    background: rgba(77, 148, 255, 0.2);
}

[data-theme="dark"] .trust-separator {
    background: rgba(255, 255, 255, 0.15);
}

/* Additional dark mode styles for consistency */
[data-theme="dark"] .link-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

[data-theme="dark"] .link-badge:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: white;
}

[data-theme="dark"] .metrics-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .metrics-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(51, 133, 255, 0.3);
}

[data-theme="dark"] .metric-value {
    color: var(--color-primary-light);
}

[data-theme="dark"] .metric-label {
    color: var(--color-text);
}

[data-theme="dark"] .metric-sublabel {
    color: var(--color-text-lighter);
}

[data-theme="dark"] .testimonial {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .testimonial-text {
    color: var(--color-text);
}

[data-theme="dark"] .testimonial-author {
    color: var(--color-primary-light);
}

[data-theme="dark"] .audit-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .audit-title {
    color: var(--color-text);
}

[data-theme="dark"] .audit-details {
    color: var(--color-text-light);
}

[data-theme="dark"] .skill-level {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .skill-level::after {
    background: var(--color-primary);
}

[data-theme="dark"] .skill-tag {
    background: rgba(51, 133, 255, 0.15);
    border-color: rgba(51, 133, 255, 0.3);
    color: var(--color-primary-light);
}

[data-theme="dark"] .education-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .education-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(51, 133, 255, 0.3);
}

[data-theme="dark"] .development-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .development-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(51, 133, 255, 0.3);
}

[data-theme="dark"] .contact-info {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .contact-link {
    color: var(--color-primary-light);
}

[data-theme="dark"] .contact-link:hover {
    color: var(--color-accent);
}

[data-theme="dark"] .social-link {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

[data-theme="dark"] .social-link:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary);
    color: white;
}

[data-theme="dark"] .skip-link {
    background: var(--color-bg);
    color: var(--color-primary-light);
    border-color: var(--color-primary);
}

[data-theme="dark"] .skip-link:focus {
    background: var(--color-primary-dark);
    color: white;
}

/* Section backgrounds for dark mode */
[data-theme="dark"] .section {
    background: var(--color-bg);
}

[data-theme="dark"] .section:nth-child(even) {
    background: var(--color-bg-alt);
}

[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
}

[data-theme="dark"] .footer {
    background: var(--color-bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix modal dark mode */
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .modal-content {
    background: rgba(20, 20, 20, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Fix code blocks in dark mode */
[data-theme="dark"] code {
    background: rgba(255, 255, 255, 0.05);
    color: var(--color-primary-light);
}

[data-theme="dark"] pre {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Fix blockquotes in dark mode */
[data-theme="dark"] blockquote {
    border-left-color: var(--color-primary);
    background: rgba(51, 133, 255, 0.05);
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .trust-banner {
        background: rgba(18, 18, 18, 0.85);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    :root:not([data-theme="light"]) .trust-item {
        color: #b8b8b8;
    }
    
    :root:not([data-theme="light"]) .trust-icon {
        color: #ffffff; /* White icons for better visibility */
    }
    
    :root:not([data-theme="light"]) .trust-icon img {
        filter: brightness(0) invert(1); /* Convert black SVGs to white */
    }
    
    :root:not([data-theme="light"]) .trust-details strong {
        color: #f0f0f0;
    }
    
    :root:not([data-theme="light"]) .trust-subtitle {
        color: #b8b8b8;
    }
    
    :root:not([data-theme="light"]) .trust-verify {
        color: #66a3ff;
        background: rgba(77, 148, 255, 0.1);
        border-radius: 0.375rem;
    }
    
    :root:not([data-theme="light"]) .trust-verify:hover {
        color: #00ff9f;
        background: rgba(77, 148, 255, 0.2);
    }
    
    :root:not([data-theme="light"]) .trust-separator {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Performance Optimizations - Modern 2025 */

/* Disable complex animations on mobile */
/* Mobile-first: Simplified hero effects by default */
.hero-shapes {
    display: none; /* Hidden for performance */
}

.hero-gradient {
    animation: none;
    filter: blur(80px);
}

/* Desktop enhancement: Enable decorative elements */
@media (min-width: 769px) {
    .hero-shapes {
        display: block;
    }
    
    .hero-gradient {
        animation: gradient-shift 20s ease-in-out infinite;
        filter: blur(60px);
    }
}

/* Simplify shadows on mobile */
    * {
        box-shadow: none !important;
    }
    
    .btn:active {
        box-shadow: var(--shadow-sm) !important;
    }
}

/* GPU optimization hints */
.hero-gradient,
.shape,
.timeline-progress-fill {
    will-change: auto;
}

/* Contain layout shifts */
.section {
    contain: layout style;
}

.timeline-item {
    contain: layout style paint;
}

/* Optimize image rendering */
img {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}

/* Reduce paint areas */
.hero-background {
    isolation: isolate;
}

/* ===== 2025 PERFORMANCE OPTIMIZATIONS ===== */

/* Font display optimization - Enhanced */
@font-face {
    font-display: swap;
    font-display: optional; /* Fallback for slow connections */
}

/* Font loading optimization with preload fallback */
@supports (font-display: optional) {
    @font-face {
        font-display: optional;
    }
}

/* ===== CONTENT VISIBILITY OPTIMIZATIONS ===== */
/* Optimize rendering performance for sections that can be skipped */
.timeline,
.experience,
.education, 
.publications,
.skills,
.contact {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px; /* Estimated height for layout stability */
}

/* Hero section should always be visible (LCP optimization) */
.hero {
    content-visibility: visible;
}

/* ===== CONTAINMENT OPTIMIZATIONS ===== */
/* Performance isolation for independent components */
.modal-content,
.dropdown-menu,
.tooltip {
    contain: layout style paint;
}

.timeline-item,
.publication-item,
.skill-category,
.bento-card {
    contain: layout style;
}

/* Hero section optimization for LCP */
.hero {
    contain: style paint;
}

/* ===== WILL-CHANGE OPTIMIZATIONS ===== */
/* Remove will-change when not actively animating */
.hero-gradient,
.hero-mesh,
.parallax-element {
    will-change: auto;
}

/* Apply will-change only during hover/focus interactions */
.bento-card:hover,
.timeline-item:hover,
.btn:hover,
.btn:focus {
    will-change: transform, opacity;
}

/* Remove will-change after animations complete */
.bento-card:not(:hover),
.timeline-item:not(:hover),
.btn:not(:hover):not(:focus) {
    will-change: auto;
}

/* ===== GPU ACCELERATION OPTIMIZATIONS ===== */
/* Use transform and opacity for smooth animations */
.fade-in-up {
    transform: translateY(20px) translateZ(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.fade-in-up.animate {
    transform: translateY(0) translateZ(0);
    opacity: 1;
}

.scale-on-hover {
    transform: scale(1) translateZ(0);
    transition: transform 0.2s ease;
}

.scale-on-hover:hover {
    transform: scale(1.05) translateZ(0);
}

/* ===== PROGRESSIVE ENHANCEMENT WITH @SUPPORTS ===== */
/* Content-visibility support detection */
@supports not (content-visibility: auto) {
    .timeline,
    .experience, 
    .education,
    .publications,
    .skills,
    .contact {
        /* Fallback behavior for older browsers */
        display: block;
    }
}

/* Container query support */
@supports (container-type: inline-size) {
    .hero-content {
        container-type: inline-size;
    }
    
    @container (min-width: 400px) {
        .hero-title {
            font-size: var(--fs-4xl);
        }
    }
}

/* View transitions API support */
@supports (view-transition-name: none) {
    .page-transition {
        view-transition-name: page-content;
    }
}

/* ===== INTERSECTION OBSERVER OPTIMIZATION ===== */
/* Prepare elements for lazy loading */
.lazy-load {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.lazy-load.loaded {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

/* ===== CORE WEB VITALS OPTIMIZATIONS ===== */
/* LCP (Largest Contentful Paint) optimizations */
.hero-title,
.hero-name {
    font-display: swap;
    contain: style;
}

/* CLS (Cumulative Layout Shift) prevention */
.bento-card img,
.skill-icon {
    aspect-ratio: attr(width) / attr(height);
    height: auto;
}

/* NHS timeline logo uses natural aspect ratio to prevent distortion */
.timeline-logo {
    height: auto;
}

/* INP (Interaction to Next Paint) optimizations */
button,
.btn,
a[role="button"] {
    contain: layout style;
    will-change: auto;
}

button:active,
.btn:active,
a[role="button"]:active {
    will-change: transform;
    transform: scale(0.98) translateZ(0);
}

/* ===== PERFORMANCE MONITORING HOOKS ===== */
/* Performance markers for monitoring */
.lcp-element {
    /* Marker for LCP tracking */
}

.interaction-element {
    /* Marker for INP tracking */
}

/* Reduce animation complexity on low-end devices */
/* Mobile-first + Accessibility: No animations by default */
.stat-number {
    animation: none !important;
}

[data-animate] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Desktop enhancement: Enable animations for capable devices */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .stat-number {
        animation: count-up 2s ease-out forwards;
    }
    
    [data-animate] {
        animation: fade-in-up 0.6s ease-out forwards;
        opacity: 0;
        transform: translateY(20px);
    }
}

/* Print optimizations */
@media print {
    .hero-gradient,
    .hero-shapes,
    .scroll-indicator,
    .timeline-progress-track,
    .theme-toggle {
        display: none !important;
    }
    
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Theme Toggle Styles */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: calc(var(--z-fixed) + 25); /* Highest z-index for theme toggle */
    pointer-events: auto; /* Ensure theme toggle is always clickable */
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-toggle:active {
    transform: translateY(0);
}

.theme-toggle .theme-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: all 0.3s ease;
}

/* Dark mode theme toggle styling */
[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Smooth transitions for theme changes */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

*,
*::before,
*::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Disable transitions during initial load */
.no-transition * {
    transition: none !important;
}

/* Font Loading Optimization - Using Google Fonts CDN */

/* Inter Variable Font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* Fira Code for monospace (if needed) */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

/* 
 * Font-display: swap is already included in Google Fonts URLs
 * This ensures text remains visible during font load
 */

/* Mobile Modal Optimizations */
/* Mobile-first: Full-screen modal by default */
.modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: none;
    top: 0;
    left: 0;
    animation: modal-slide-up 0.3s ease-out;
}

/* Desktop enhancement: Centered modal with constraints */
@media (min-width: 769px) {
    .modal-content {
        width: 90%;
        height: 90%;
        max-width: 1200px;
        max-height: 800px;
        border-radius: var(--radius-lg);
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        animation: modal-fade-in 0.3s ease-out;
    }
}
    }
    
    @keyframes modal-slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .modal-header {
        position: sticky;
        top: 0;
        background: var(--color-bg);
        z-index: 10;
        padding: var(--space-md);
    }
    
    .modal-body {
        padding: var(--space-md);
        padding-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom));
    }
    
    .modal-close {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }
    
    /* Newsletter popup mobile */
    .newsletter-popup {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--space-lg);
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    }
    
    .newsletter-popup.show {
        transform: translateY(0);
    }
    
    /* CV preview adjustments */
    .cv-format-selector {
        padding: var(--space-md);
    }
    
    .format-options {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .cv-actions {
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-md);
        position: sticky;
        bottom: 0;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border);
    }
    
    .cv-download-btn,
    .vcard-download {
        width: 100%;
    }
}

/* Mobile Performance Optimizations */
/* Mobile-first: Minimal animations for performance */
.shape,
.hero-gradient,
.hero-shapes {
    animation: none !important;
}

.hero-background {
    will-change: auto !important;
}

/* Desktop enhancement: Enable rich animations */
@media (min-width: 769px) {
    .shape {
        animation: float 6s ease-in-out infinite;
    }
    
    .hero-gradient {
        animation: gradient-shift 20s ease-in-out infinite;
    }
    
    .hero-shapes {
        animation: morph 15s ease-in-out infinite;
    }
    
    .hero-background {
        will-change: transform, opacity;
    }
}
    }
    
    /* Simplify shadows on mobile */
    .card,
    .timeline-content,
    .publication-card,
    .education-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Optimize scroll performance */
    .section {
        animation: none !important;
        transform: none !important;
    }
    
    /* Touch-optimized interactions */
    @media (hover: none) {
        /* Remove hover effects, use active states */
        .btn:hover,
        .skill-tag:hover,
        .interest-tag:hover {
            transform: none !important;
        }
        
        .btn:active,
        .skill-tag:active,
        .interest-tag:active {
            transform: scale(0.98) !important;
        }
    }
}

/* ===== Mobile-First Accessibility ===== */
/* Mobile-first: Enhanced accessibility by default - Remove persistent outlines */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: var(--z-modal);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
}

/* Desktop enhancement: Refined focus indicators */
@media (min-width: 769px) {
    :focus {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }
    
    .skip-link:focus {
        top: 1.5rem;
        left: 1.5rem;
        padding: var(--space-md) var(--space-lg);
    }
}
    }
    
    /* Mobile menu accessibility */
    .nav-menu.active {
        outline: none;
    }
    
    .nav-menu.active .nav-link:first-child {
        margin-top: var(--space-md);
    }
    
    /* Touch-friendly tap targets */
    a, button, input, select, textarea {
        touch-action: manipulation;
    }
    
    /* Enhanced touch feedback for interactive elements */
    @media (pointer: coarse) {
        .btn, button, [role="button"] {
            position: relative;
            overflow: hidden;
        }
        
        .btn::after, button::after, [role="button"]::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s ease, height 0.3s ease;
            pointer-events: none;
            z-index: 1;
        }
        
        .btn:active::after, button:active::after, [role="button"]:active::after {
            width: 200px;
            height: 200px;
            transition: width 0.1s ease, height 0.1s ease;
        }
    }
    
    /* Screen reader only content */
    .sr-only,
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .btn-primary {
            border: 2px solid currentColor;
        }
        
        .nav-link {
            text-decoration: underline;
        }
        
        .modal-content,
        .timeline-content,
        .publication-card {
            border: 2px solid currentColor;
        }
        
        .skill-tag,
        .interest-tag {
            border-width: 2px;
        }
    }
    
    /* Focus within improvements */
    .nav-menu:focus-within {
        box-shadow: inset 0 0 0 2px var(--color-primary);
    }
    
    .modal:focus-within .modal-content {
        box-shadow: 0 0 0 4px var(--color-primary);
    }
}

/* ===== CSS Utilities Layer ===== */
@layer utilities {
    /* Text utilities */
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .text-justify { text-align: justify; }
    
    /* Spacing utilities using CSS custom properties */
    .mb-1 { margin-bottom: var(--space-xs); }
    .mb-2 { margin-bottom: var(--space-sm); }
    .mb-3 { margin-bottom: var(--space-md); }
    .mb-4 { margin-bottom: var(--space-lg); }
    .mb-5 { margin-bottom: var(--space-xl); }
    
    .mt-1 { margin-top: var(--space-xs); }
    .mt-2 { margin-top: var(--space-sm); }
    .mt-3 { margin-top: var(--space-md); }
    .mt-4 { margin-top: var(--space-lg); }
    .mt-5 { margin-top: var(--space-xl); }
    
    /* Display utilities */
    .hidden { display: none; }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
    .flex { display: flex; }
    .grid { display: grid; }
    
    /* Flex utilities */
    .flex-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .flex-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    /* Border utilities */
    .border-none { border: none; }
    .border-primary { border: 1px solid var(--color-primary); }
    
    /* Color utilities */
    .text-primary { color: var(--color-primary); }
    .text-error { color: var(--color-error); }
    .text-success { color: var(--color-success); }
    
    /* Animation utilities */
    .animate-fade-in { animation: fadeIn 0.3s ease-in; }
    .animate-slide-up { animation: slideUp 0.3s ease-out; }
    
    /* Responsive utilities */
    @media (max-width: 768px) {
        .mobile-hidden { display: none; }
        .mobile-block { display: block; }
    }
    
    @media (min-width: 769px) {
        .desktop-hidden { display: none; }
        .desktop-block { display: block; }
    }
}

/* ===== CSS Overrides Layer ===== */
@layer overrides {
    /* High-specificity overrides for edge cases and third-party conflicts */
    
    /* Force visibility overrides */
    .force-visible {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .force-hidden {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Focus overrides for accessibility */
    .force-focus:focus {
        outline: 3px solid var(--color-primary) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 8px var(--color-primary) !important;
    }
    
    /* Critical accessibility overrides */
    .no-motion * {
        animation: none !important;
        transition: none !important;
    }
    
    /* Print overrides */
    @media print {
        .no-print { display: none !important; }
        .print-only { display: block !important; }
        .print-page-break { page-break-before: always !important; }
    }
    
    /* Emergency style fixes */
    .fix-z-index { z-index: 9999 !important; }
    .fix-overflow { overflow: visible !important; }
    .fix-width { width: 100% !important; }
    
    /* Form override utilities */
    .form-reset {
        border: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font: inherit !important;
    }
    
    /* Critical performance overrides */
    .will-change-transform { will-change: transform !important; }
    .will-change-auto { will-change: auto !important; }
    
    /* Accessibility compliance overrides */
    .force-accessible {
        color: var(--color-text) !important;
        background: var(--color-bg) !important;
        text-decoration: underline !important;
        outline: 2px solid var(--color-primary) !important;
    }
}
/* ===== ENHANCED CLS PREVENTION - 2025 Optimization ===== */
/* Specific fixes for Cumulative Layout Shift prevention */

/* Hero section CLS stabilization */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    contain-intrinsic-size: 0 100vh; /* Prevents layout shift during loading */
}

/* Image containers with stable aspect ratios */
.timeline-logo {
    width: 80px;
    height: auto;
    aspect-ratio: 2.47 / 1; /* NHS logo natural aspect ratio */
    contain-intrinsic-size: 80px 32px;
}

.skill-icon {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    contain-intrinsic-size: 40px 40px;
}

.gmc-badge img,
.nhs-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    contain-intrinsic-size: 100px 40px;
}

/* Section containers with estimated heights */
.experience-section {
    contain-intrinsic-size: 0 800px;
}

.education-section {
    contain-intrinsic-size: 0 600px;
}

.publications-section {
    contain-intrinsic-size: 0 1000px;
}

.skills-section {
    contain-intrinsic-size: 0 400px;
}

.contact-section {
    contain-intrinsic-size: 0 500px;
}

/* Timeline specific CLS prevention */
.timeline-item {
    contain: layout style;
    contain-intrinsic-size: 0 150px; /* Minimum height for timeline items */
}

.timeline-content {
    contain: layout style paint;
}

/* Card layouts with stable dimensions */
.publication-card,
.education-card,
.experience-card {
    contain: layout style;
    min-height: 200px; /* Prevents collapse during loading */
    contain-intrinsic-size: 0 200px;
}

/* Bento grid CLS prevention */
.bento-card {
    aspect-ratio: 1 / 1; /* Square cards by default */
    contain-intrinsic-size: 250px 250px;
}

.bento-card.span-2 {
    aspect-ratio: 2 / 1; /* Wide cards */
    contain-intrinsic-size: 500px 250px;
}

.bento-card.span-tall {
    aspect-ratio: 1 / 2; /* Tall cards */
    contain-intrinsic-size: 250px 500px;
}

/* Button containers to prevent reflow */
.hero-actions {
    min-height: 60px; /* Prevent layout shift when buttons load */
    contain-intrinsic-size: 0 60px;
}

.floating-buttons {
    contain: layout style;
    contain-intrinsic-size: 0 80px;
}

/* Form elements CLS prevention */
.contact-form {
    contain: layout;
    contain-intrinsic-size: 0 400px;
}

.form-field {
    contain: layout style;
    min-height: 80px; /* Prevent input field collapse */
}

/* Modal CLS prevention */
.modal-content {
    contain: layout style paint;
    contain-intrinsic-size: 400px 300px;
}

/* Performance: Reduce layout thrashing */
@supports (content-visibility: auto) {
    /* Enhanced content-visibility for better performance */
    .stats-grid,
    .bento-grid,
    .timeline {
        content-visibility: auto;
        contain-intrinsic-size: 0 400px;
    }
}

/* Mobile-specific CLS improvements */
@media (max-width: 768px) {
    .hero {
        contain-intrinsic-size: 0 85vh; /* Mobile hero height */
    }
    
    .timeline-item {
        contain-intrinsic-size: 0 120px; /* Smaller mobile timeline items */
    }
    
    .bento-card {
        aspect-ratio: 1 / 1;
        contain-intrinsic-size: 300px 300px; /* Larger touch targets on mobile */
    }
    
    .hero-actions {
        min-height: 120px; /* Account for stacked mobile buttons */
        contain-intrinsic-size: 0 120px;
    }
}

/* Tablet-specific optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
    .bento-card {
        contain-intrinsic-size: 200px 200px; /* Medium size for tablets */
    }
}

/* ===== Enhanced Micro-interactions ===== */
/* Subtle ripple effect for interactive elements */
.btn,
.skill-tag,
.interest-tag,
.network-link,
.timeline-content,
.publication-card {
    position: relative;
    overflow: hidden;
}

.btn::after,
.skill-tag::after,
.interest-tag::after,
.network-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
}

.btn:active::after,
.skill-tag:active::after,
.interest-tag:active::after,
.network-link:active::after {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: width 0.1s ease, height 0.1s ease, opacity 0.1s ease;
}

/* Enhanced focus indicators with subtle pulse */
@keyframes focus-pulse {
    0%, 100% {
        outline-offset: 2px;
        outline-color: var(--color-primary);
    }
    50% {
        outline-offset: 4px;
        outline-color: transparent;
    }
}

*:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    animation: focus-pulse 2s ease-in-out infinite;
}

/* Smooth state transitions for all interactive elements */
.btn,
.skill-tag,
.interest-tag,
.network-link,
.nav-link,
.timeline-content,
.publication-card,
.bento-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Subtle hover glow for cards */
.timeline-content:hover,
.publication-card:hover,
.bento-card:hover {
    box-shadow: 
        0 10px 40px rgba(0, 102, 255, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Enhanced button press animation */
.btn:active,
.skill-tag:active,
.interest-tag:active {
    transform: scale(0.98) translateY(1px);
    box-shadow: 
        0 2px 8px rgba(0, 102, 255, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Accessibility: Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn::after,
    .skill-tag::after,
    .interest-tag::after,
    .network-link::after {
        display: none;
    }
    
    *:focus-visible {
        animation: none;
    }
    
    .btn:active,
    .skill-tag:active,
    .interest-tag:active {
        transform: none;
    }
}/* Navigation Menu Fixes - Remove backdrop entirely for simplicity */

/* Mobile Navigation Styles */
@media (max-width: 768px) {
    /* Remove nav-backdrop completely - not needed */
    
    
    /* Simplified nav-menu positioning */
    .nav-menu {
        position: fixed;
        top: 4rem; /* Below header */
        right: -100%; /* Hidden by default */
        width: min(80vw, 320px); /* Better mobile width */
        height: calc(100vh - 4rem);
        height: calc(100dvh - 4rem); /* Mobile viewport fix */
        background: var(--color-surface);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        z-index: var(--z-sticky);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    }
    
    /* Active state - slide in from right */
    .nav-menu.active {
        right: 0;
    }
    
    /* Ensure menu items are clickable */
    .nav-menu * {
        pointer-events: auto \!important;
    }
    
    /* Better mobile menu item styling */
    .nav-link {
        display: block;
        padding: 1rem 1.5rem;
        color: var(--color-text);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
        transition: background-color 0.2s ease;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        background-color: var(--color-background-alt);
        color: var(--color-primary);
    }
    
    /* Fix body scroll when menu is open */
    body.nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Form Validation Fixes */
.form-error {
    display: block \!important; /* Always ready to show */
    font-size: var(--fs-sm);
    color: var(--color-error);
    margin-top: var(--space-xs);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show error when input is invalid */
.form-input:invalid:not(:focus):not(:placeholder-shown) ~ .form-error,
.form-textarea:invalid:not(:focus):not(:placeholder-shown) ~ .form-error,
.form-input.error ~ .form-error,
.form-textarea.error ~ .form-error {
    opacity: 1;
    max-height: 100px;
}

/* Visual feedback for invalid inputs */
.form-input:invalid:not(:focus):not(:placeholder-shown),
.form-textarea:invalid:not(:focus):not(:placeholder-shown),
.form-input.error,
.form-textarea.error {
    border-color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.05);
}

/* Success state */
.form-input:valid:not(:placeholder-shown),
.form-textarea:valid:not(:placeholder-shown) {
    border-color: var(--color-success);
}

/* Mobile Responsiveness Fixes */
@media (max-width: 768px) {
    /* Fix hero section for mobile */
    .hero {
        min-height: 100vh;
        min-height: 100dvh; /* Use dynamic viewport height */
        padding-top: calc(5rem + var(--space-lg)); /* Account for mobile header */
    }
    
    /* Ensure sections have proper spacing */
    section {
        scroll-margin-top: 5rem; /* Account for fixed header */
    }
    
    /* Fix container padding on mobile */
    .container {
        padding-inline: var(--space-md);
    }
    
    /* Better mobile typography */
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }
    
    /* Fix mobile buttons */
    .btn {
        min-height: 44px; /* iOS touch target */
        padding: 0.75rem 1.5rem;
    }
}

/* Section Loading Animation */
section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hidden state for lazy loading */
section.hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Smooth Scrolling Enhancement */
html {
    scroll-behavior: smooth;
}

/* Fix for smooth scrolling with fixed header */
:target {
    scroll-margin-top: 5rem;
}

/* Navigation Menu Fixes - Remove backdrop entirely for simplicity */

/* Mobile Navigation Styles */
@media (max-width: 768px) {
    /* Remove nav-backdrop completely - not needed */
    .nav-backdrop {
        display: none \!important;
    }
    
    /* Simplified nav-menu positioning */
    .nav-menu {
        position: fixed;
        top: 4rem; /* Below header */
        right: -100%; /* Hidden by default */
        width: min(80vw, 320px); /* Better mobile width */
        height: calc(100vh - 4rem);
        height: calc(100dvh - 4rem); /* Mobile viewport fix */
        background: var(--color-surface);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        z-index: var(--z-sticky);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
    }
    
    /* Active state - slide in from right */
    .nav-menu.active {
        right: 0;
    }
    
    /* Ensure menu items are clickable */
    .nav-menu * {
        pointer-events: auto \!important;
    }
    
    /* Better mobile menu item styling */
    .nav-link {
        display: block;
        padding: 1rem 1.5rem;
        color: var(--color-text);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
        transition: background-color 0.2s ease;
    }
    
    .nav-link:hover,
    .nav-link:focus {
        background-color: var(--color-background-alt);
        color: var(--color-primary);
    }
    
    /* Fix body scroll when menu is open */
    body.nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* Form Validation Fixes */
.form-error {
    display: block \!important; /* Always ready to show */
    font-size: var(--fs-sm);
    color: var(--color-error);
    margin-top: var(--space-xs);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* Show error when input is invalid */
.form-input:invalid:not(:focus):not(:placeholder-shown) ~ .form-error,
.form-textarea:invalid:not(:focus):not(:placeholder-shown) ~ .form-error,
.form-input.error ~ .form-error,
.form-textarea.error ~ .form-error {
    opacity: 1;
    max-height: 100px;
}

/* Visual feedback for invalid inputs */
.form-input:invalid:not(:focus):not(:placeholder-shown),
.form-textarea:invalid:not(:focus):not(:placeholder-shown),
.form-input.error,
.form-textarea.error {
    border-color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.05);
}

/* Success state */
.form-input:valid:not(:placeholder-shown),
.form-textarea:valid:not(:placeholder-shown) {
    border-color: var(--color-success);
}

/* Mobile Responsiveness Fixes */
@media (max-width: 768px) {
    /* Fix hero section for mobile */
    .hero {
        min-height: 100vh;
        min-height: 100dvh; /* Use dynamic viewport height */
        padding-top: calc(5rem + var(--space-lg)); /* Account for mobile header */
    }
    
    /* Ensure sections have proper spacing */
    section {
        scroll-margin-top: 5rem; /* Account for fixed header */
    }
    
    /* Fix container padding on mobile */
    .container {
        padding-inline: var(--space-md);
    }
    
    /* Better mobile typography */
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }
    
    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }
    
    /* Fix mobile buttons */
    .btn {
        min-height: 44px; /* iOS touch target */
        padding: 0.75rem 1.5rem;
    }
}

/* Section Loading Animation */
section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hidden state for lazy loading */
section.hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Smooth Scrolling Enhancement */
html {
    scroll-behavior: smooth;
}

/* Fix for smooth scrolling with fixed header */
:target {
    scroll-margin-top: 5rem;
}