/* ===================
   FIGMA DESIGN TOKENS
   =================== */

:root {
    /* ===================
     SEMANTIC COLORS (FROM FIGMA)
     =================== */


    /* Background colors - Light mode versions */
    --color-background-default: #ffffff;
    --color-background-muted: #f8f9fa;
    --color-background-bold: #e5e7eb;
    --color-background-interactive-primary: #1f2937;
    --color-background-interactive-primary-hover: #374151;
    --color-background-interactive-primary-pressed: #111827;
    --color-background-interactive-secondary: #f3f4f6;
    --color-background-interactive-secondary-hover: #e5e7eb;
    --color-background-interactive-secondary-pressed: #d1d5db;
    --color-background-inverse: #0f172a;
    --color-background-interactive-brand: #3b82f6;
    --color-background-interactive-brand-hover: #2563eb;
    --color-background-interactive-brand-pressed: #1d4ed8;
    --color-background-accent: #f97316;
    --color-background-error: #fef2f2;
    --color-background-overlay: #ffffff80;

    /* Text colors - Light mode versions */
    --color-text-default: #111827;
    --color-text-bold: #374151;
    --color-text-interactive-inverse: #ffffff;
    --color-text-interactive: #1f2937;
    --color-text-muted: #6b7280;
    --color-text-brand: #191B1F;
    --color-text-accent: #f97316;
    --color-text-error: #dc2626;
    --color-text-placeholder: #9ca3af;

    /* Border colors - Light mode versions */
    --color-border-default: #e5e7eb;
    --color-border-error: #dc2626;
    --color-border-interactive-active: #191B1F;
    --color-border-accent: #f97316;
    --color-border-subtle: #f3f4f6;
    --color-border-brand: #191B1F;
    --color-border-interactive: #d1d5db;
    --color-border-interactive-hover: #9ca3af;

    /* Icon colors - Light mode versions */
    --color-icon-interactive: #191B1F;
    --color-icon-inverse: #ffffff;
    --color-icon-bold: #111827;
    --color-icon-muted: #6b7280;
    --color-icon-default: #374151;
    --color-icon-accent: #f97316;
    --color-icon-error: #dc2626;
    --color-icon-interactive-error: #dc2626;


    /* ===================
     FIGMA SPACING TOKENS
     =================== */
    --spacing-none: 0px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-base: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-2xl: 48px;
    --spacing-huge: 72px;

    /* Primitive spacing */
    --space-100: 16px;
    --space-125: 20px;
    --space-150: 24px;
    --space-200: 32px;
    --space-250: 40px;
    --space-300: 48px;
    --space-450: 72px;
    --space-025: 4px;
    --space-075: 12px;
    --space-050: 8px;
    --space-012: 2px;
    --space-none: 0px;


    /* ===================
     FIGMA BORDER RADIUS
     =================== */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-extra-large: 24px;
    --radius-pill: 16px;


    /* ===================
     FIGMA TYPOGRAPHY SYSTEM
     =================== */
    --font-family: Inter, system-ui, -apple-system, sans-serif;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 500;
    --font-weight-bold: 700;

    /* Font sizes */
    --font-size-4xl: 48px;
    --font-size-3xl: 40px;
    --font-size-2xl: 32px;
    --font-size-xl: 24px;
    --font-size-lg: 20px;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;

    /* Line heights */
    --line-height-40: 40px;
    --line-height-32: 32px;
    --line-height-30: 30px;
    --line-height-25: 25px;
    --line-height-19: 19.2px;
    --line-height-17: 16.8px;
    --line-height-14: 14.4px;
    --line-height-16: 16px;

    /* Letter spacing */
    --letter-spacing-tight-xl: -0.8px;
    --letter-spacing-tight-lg: -0.64px;
    --letter-spacing-tight-md: -0.48px;
    --letter-spacing-tight-sm: -0.4px;
    --letter-spacing-tight-xs: -0.32px;
    --letter-spacing-tight-xxs: -0.28px;
    --letter-spacing-tight-xxxs: -0.24px;
    --letter-spacing-none: 0px;

    /* Original typography (keeping for component compatibility) */
    --letter-spacing-compact: -0.02em;
    /* map to --letter-spacing-tight-xs */
    --letter-spacing-light: 0.01em;
    /* map to --letter-spacing-none */

    /* ===================
     EFFECTS & TRANSITIONS
     =================== */
    --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.05);
    --transition-standard: gap 0.3s ease;


    /* Focus */
    --focus-outline: 2px solid #3182CE;

}

/* ===================
   DARK THEME (USING ORIGINAL FIGMA TOKENS)
   =================== */
[data-theme="dark"] {
    /* Background colors - Original Figma dark tokens */
    --color-background-default: #0d0d0d;
    --color-background-muted: #1c1c1c;
    --color-background-bold: #383838;
    --color-background-interactive-primary: #f0f0f0;
    --color-background-interactive-primary-hover: #e0e0e0;
    --color-background-interactive-primary-pressed: #e0e0e0;
    --color-background-interactive-secondary: #383838;
    --color-background-interactive-secondary-hover: #545454;
    --color-background-interactive-secondary-pressed: #383838;
    --color-background-inverse: #f0f0f0;
    --color-background-interactive-brand: #e9ebf6;
    --color-background-interactive-brand-hover: #a4b1e4;
    --color-background-interactive-brand-pressed: #a4b1e4;
    --color-background-accent: #a03308;
    --color-background-error: #1f0007;
    --color-background-overlay: #000000b3;

    /* Text colors - Original Figma dark tokens */
    --color-text-default: #f0f0f0;
    --color-text-bold: #c4c4c4;
    --color-text-interactive-inverse: #000000;
    --color-text-interactive: #f0f0f0;
    --color-text-muted: #8c8c8c;
    --color-text-brand: #F7F8F8;
    --color-text-accent: #e7b5a1;
    --color-text-error: #e7a1b0;
    --color-text-placeholder: #c4c4c4;

    /* Border colors - Original Figma dark tokens */
    --color-border-default: #383838;
    --color-border-error: #a00829;
    --color-border-interactive-active: #e9ebf6;
    --color-border-accent: #a03308;
    --color-border-brand: #F7F8F8;
    --color-border-subtle: #1c1c1c;
    --color-border-interactive: #e0e0e0;
    --color-border-interactive-hover: #f0f0f0;

    /* Icon colors - Original Figma dark tokens */
    --color-icon-interactive: #e9ebf6;
    --color-icon-inverse: #000000;
    --color-icon-bold: #f0f0f0;
    --color-icon-muted: #e0e0e0;
    --color-icon-default: #f9f9f9;
    --color-icon-accent: #e7b5a1;
    --color-icon-error: #e7a1b0;
    --color-icon-interactive-error: #a00829;
}

/* ===================
   FIGMA TYPOGRAPHY CLASSES
   =================== */

.text-display-medium--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-40);
    letter-spacing: var(--letter-spacing-tight-xl);
}

.text-display-medium--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-40);
    letter-spacing: var(--letter-spacing-tight-xl);
}

.text-display-small--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-32);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-display-small--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-32);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-display-small--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-32);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-title-xlarge--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-40);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-title-xlarge--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-40);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-title-xlarge--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-40);
    letter-spacing: var(--letter-spacing-tight-lg);
}

.text-title-medium--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-30);
    letter-spacing: var(--letter-spacing-tight-md);
}

.text-title-medium--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-30);
    letter-spacing: var(--letter-spacing-tight-md);
}

.text-title-medium--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-30);
    letter-spacing: var(--letter-spacing-tight-md);
}

.text-title-small--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-25);
    letter-spacing: var(--letter-spacing-tight-sm);
}

.text-title-small--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-25);
    letter-spacing: var(--letter-spacing-tight-sm);
}

.text-title-small--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-25);
    letter-spacing: var(--letter-spacing-tight-sm);
}

.text-body-large--light {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-19);
    letter-spacing: var(--letter-spacing-tight-xs);
}

.text-body-large--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-19);
    letter-spacing: var(--letter-spacing-tight-xs);
}

.text-body-large--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-19);
    letter-spacing: var(--letter-spacing-tight-xs);
}

.text-body-large--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-19);
    letter-spacing: var(--letter-spacing-tight-xs);
}

.text-body-medium--light {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-17);
    letter-spacing: var(--letter-spacing-tight-xxs);
}

.text-body-medium--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-17);
    letter-spacing: var(--letter-spacing-tight-xxs);
}

.text-body-medium--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-17);
    letter-spacing: var(--letter-spacing-tight-xxs);
}

.text-body-medium--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-17);
    letter-spacing: var(--letter-spacing-tight-xxs);
}

.text-body-small--light {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-300);
    line-height: var(--line-height-14);
    letter-spacing: var(--letter-spacing-tight-xxxs);
}

.text-body-small--regular {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-14);
    letter-spacing: var(--letter-spacing-tight-xxxs);
}

.text-body-small--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-14);
    letter-spacing: var(--letter-spacing-tight-xxxs);
}

.text-body-small--bold {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-14);
    letter-spacing: var(--letter-spacing-tight-xxxs);
}

.text-label-medium--semibold {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-16);
    letter-spacing: var(--letter-spacing-none);
}

/* ===================
   YOUR ORIGINAL COMPONENT STYLES (KEEPING AS IS)
   =================== */

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    /* Settings de la Inter */
    font-feature-settings: 'dlig' on, 'salt' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss04' on, 'cv01' on, 'cv02' on, 'cv03' on, 'cv04' on, 'cv05' on, 'cv06' on, 'cv07' on, 'cv08' on, 'cv09' on, 'cv10' on, 'cv11' on;

}

body {
    color: var(--color-text-default);
    font-weight: var(--font-weight-light);
    line-height: 1.6;
    transition: var(--transition-standard);
    background-color: var(--color-background-default);
}

p {
    color: var(--color-text-bold);
    letter-spacing: var(--letter-spacing-light);
    font-size: var(--font-size-base);
}

/* Layout */
.container {
    max-width: 768px;
    margin: 0 auto;
    padding: 0;
}

.main {
    margin-top: 150px;
}

/* Navigation */
.main-nav {
    display: flex;
    /* ← AJOUT */
    flex-direction: column;
    /* ← AJOUT */
    position: fixed;
    align-items: stretch;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}



/* Header Styles - Optimized and Cleaned */
.header-cheat {
    background-color: var(--color-background-default);
    height: 16px;
}

.header-container {
    display: flex;
    width: 100%;
    /* Prend toute la place dispo */
    max-width: 800px;
    /* Mais pas plus que ça */
    margin: 0 auto;
    /* Centre le tout */
    padding: var(--spacing-base, 16px) var(--spacing-lg, 32px);
    justify-content: space-between;
    align-items: center;
    align-self: center;
    border-radius: var(--border-radius-large, 16px);
    outline: 1px solid var(--color-border-default, #DDE0E3);
    background: var(--color-background-overlay, rgba(255, 255, 255, 0.80));
    backdrop-filter: blur(64px);
}

.logo {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-text-interactive);
    text-decoration: none;
}

.logo:focus {
    outline: var(--focus-outline);
    outline-offset: var(--spacing-sm);
}


.header-menu {
    display: flex;
}

.header-menu ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg, 32px);
}

.manifesto-link-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    text-decoration: none;
}

.header-menu-mobile {
    display: none;
}

.hamburger {
    display: none;
}



.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-icon-default);
    font-size: var(--font-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    transition: var(--transition-standard);
    padding: 12px;
}

.theme-toggle:hover {
    background-color: var(--color-background-bold);
}

.theme-toggle:focus {
    outline: var(--focus-outline);
    outline-offset: 4px;
}

.header-menu-mobile {
    display: none;
}

.menu-item {
    color: var(--color-text-default);
    display: flex;
    padding: var(--spacing-md);
    justify-content: left;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    text-decoration: none;
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
    .header-container {
        margin-top: 0;
        padding: var(--spacing-base) !important;
        border-radius: 0;
    }

    .header-cheat {
        display: none;
    }

    .hamburger {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--spacing-base);
    }

    /* Cache le hamburger quand menu mobile ouvert */
    .header-menu-mobile.active~.header-container .hamburger {
        display: none !important;
    }

    .hamburger svg {
        fill: var(--color-icon-interactive);
    }


    .header-menu {
        display: none;
    }

    .header-menu-mobile {
        /* Display the mobile menu */
        height: 100vh;
        z-index: 100;
        /* style */
        /*background: var(--color-background-default);*/
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        left: 0;
        background-color: var(--color-background-default);
        padding: var(--spacing-huge);
        gap: var(--spacing-huge);
    }

    .header-menu-mobile.active {
        display: flex !important;
    }

    .header-menu-mobile a,
    .header-menu-mobile span {
        color: var(--color-text-interactive);
        text-decoration: none;
    }

    .close-mobile-menu {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        cursor: pointer;
        display: none;
        /* Caché par défaut */
    }

    .header-menu-mobile.active .close-mobile-menu {
        display: block;
        /* Visible quand menu ouvert */
    }
}


/* Hero Section */

.hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md, 24px);
    align-self: stretch;
}

.avatar {
    width: 80px;
}

/* ==========
   COMPONENTS
   ========== */

/* Button Styles */
.btn-group {
    display: flex;
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-lg);
}

.btn {
    display: inline-flex;
    gap: var(--spacing-sm);
    border-radius: var(--radius-medium);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    text-decoration: none;
    transition: var(--transition-standard);
    letter-spacing: var(--letter-sm);
}

.btn-md {
    padding: var(--spacing-base) var(--spacing-md);
}

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-base);
}

.btn svg {
    fill: currentColor;
    align-self: center;
}

.btn:hover {
    gap: 1rem;
}

.btn:focus {
    outline: var(--focus-outline);
    outline-offset: var(--spacing-xs);
}

.btn-primary {
    background-color: var(--color-background-interactive-primary);
    color: var(--color-text-interactive-inverse);
    fill: var(--color-icon-inverse);
}

.btn-primary:hover {
    background-color: var(--color-background-interactive-primary-hover);
}

.btn-secondary {
    background-color: var(--color-background-interactive-secondary);
    color: var(--color-text-interactive);
    fill: var(--color-icon-bold);
}

.btn-secondary:hover {
    background-color: var(--color-background-interactive-secondary-hover);
}

.btn-tertiary {
    background-color: transparent;
    text-decoration: none;
    color: var(--color-text-interactive);
}

.btn-tertiary:hover {
    outline: 1px solid var(--color-border-brand);
    /*background-color: var(--color-background-overlay);*/
    /*text-decoration: underline;*/
}


/* tag */

.tag {
    display: flex;
    padding: var(--space-050, 8px) var(--space-100, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--space-050, 8px);
    border-radius: var(--border-radius-large, 16px);
    font-size: var(--font-size-sm, 16px);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: 120%;
    /* 19.2px */
    letter-spacing: -0.32px;
}

.tag-pill {
    background: var(--color-background-muted, #F7F8F8);
}

.tag-outline {
    background-color: var(--color-background-overlay);
    color: var(--color-text-bold);
    border: 1px solid var(--color-border-bold, #DDE0E3);
}

.tag-group {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: var(--spacing-sm, 8px);
    align-self: stretch;
    flex-wrap: wrap;
    margin: 0 0 var(--spacing-default, 32px) 0;
}

/* Section Styles */
section {
    padding: var(--spacing-huge) 0 var(--spacing-huge) 0;
    /*margin: var(--spacing-md, 24px) var(--spacing-base, 16px);*/
    border-top: 1px solid var(--border-default);
}

.title {
    margin: 0 0 var(--spacing-lg, 32px) 0;
}

.overline {
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    display: block;
    color: var(--color-text-bold);
    font-weight: var(--font-weight-semibold);
}

/* Case Studies Grid */

.case-studies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
    gap: var(--spacing-lg, 32px);
}

.card {
    position: relative;
    background-color: transparent;
    border-radius: var(--radius-large);
    overflow: hidden;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border-default);
    transition: var(--transition-standard);
}

.card:focus-within {
    outline: 2px solid var(--focus-outline);
    outline-offset: var(--spacing-sm);
}

.card-img {
    position: relative;
    height: auto;
    min-height: 200px;
    background-color: var(--color-background-bold);
    border-radius: var(--radius-medium);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.card-img img {
    width: 100%;
    height: auto;
    min-height: 0;
}

.card-content {
    padding: var(--spacing-lg) 0 0 0;
    gap: var(--spacing-md);
}

.card h3 {
    margin-bottom: var(--spacing-sm);
}

.card p {
    margin-bottom: var(--spacing-base);
    color: var(--content-subtle);
}

.card a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--spacing-sm);
}

.card-award {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 8px);
    align-self: stretch;
    padding: var(--spacing-sm) 0;
}

.card-award svg {
    fill: var(--color-icon-muted);
}

.card-award p {
    flex: 1 0 0;
    color: var(--color-text-bold)
}

/* Work experience */
.work-experience {
    font-size: var(--font-size-sm);
}

.work-experience h2 {
    margin-bottom: var(--spacing-lg);
}

.experience-item {
    margin-bottom: var(--spacing-lg);
}

.time-period {
    color: var(--color-text-bold);
    width: 150px;
    margin-bottom: var(--spacing-sm);
}

.company {
    margin: 0 0 0 var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--sm);
    border: solid 1px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-small);
    box-sizing: border-box;
    line-height: 120%;
}

.logo-red {
    background-color: var(--bg-red);
    color: var(--content-red);
}

.logo-blue {
    background-color: var(--bg-blue);
    color: var(--content-blue);
}

.logo-green {
    background-color: var(--bg-green);
    color: var(--content-green);
}

.logo-orange {
    background-color: var(--bg-orange);
    color: var(--content-orange);
}

.logo-purple {
    background-color: var(--bg-purple);
    color: var(--content-purple);
}

/* Position and company container */
.position-company {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position {
    font-weight: var(--font-weight-semibold);
}

/* Skills section */
.skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    align-items: stretch;
    /* This is key - makes all cards same height */
}

@media screen and (max-width: 768px) {
    .skills {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.card-skill {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-border-default, #DDE0E3);
    background: var(--color-background-default, #FFF);
    /* No height property - let it stretch naturally */
}

.card-skill-icon {
    display: flex;
    padding: 8px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--color-background-bold, #EEF1F1);
    width: 40px;
    height: 40px;
}

.card-skill-icon svg {
    fill: var(--color-icon-bold);
    flex-shrink: 0;
}

/* Testimonials Section */
.testimonials {
    background-color: var(--color-background-bold);
    display: flex;
}

blockquote {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-base);
    max-width: 42rem;
}

.testimonial-author {
    font-weight: var(--font-weight-medium);
}

/* Awards Section */

.highlight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacing-xl, 40px);
    align-self: stretch;
}

.awards svg {
    fill: var(--color-icon-bold);
}

.awards-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-base, 16px);
    align-self: stretch;
}


/* Contact Section */
.contact-cta {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
}

.contact-cta p {
    margin-bottom: var(--spacing-base, 16px);
}

input, textarea {
    display: flex;
    padding: var(--space-100, 16px);
    align-items: center;
    gap: var(--space-100, 16px);
    align-self: stretch;
    border-radius: var(--border-radius-050, 8px);
    border: var(--border-width-100, 1px) solid var(--color-border-interactive, #32373E);
    background: var(--color-background-default, #FFF);
    width: 100%;
    font-size: var(--font-size-base, 16px);
}

input:hover, textarea:hover {
    border: var(--border-width-100, 1px) solid var(--color-border-interactive-hover, #0B0C0E);
}

textarea {
    resize: vertical;
    min-height: 150px;
}


form  {
    display: flex;
flex-direction: column;
align-items: center;
gap: var(--size-spacing-40, 24px);
align-self: stretch;
text-align: left;
}

form p {
    width: 100%;
    margin: 0 auto;
   /*    padding: 0 var(--spacing-xl);*/
}

form button {
    width: 100%;
    align-self: stretch;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

label {
        font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-16);
    letter-spacing: var(--letter-spacing-none);
    gap: var(--spacing-sm, 8px);
    display: flex;
    flex-direction: column;
}

/* mandatory field */

/*input:required:invalid,
textarea:required:invalid {
    border-color: var(--color-border-error, #dc2626);
    background-color: var(--color-background-error, #fef2f2);
}*/

input:required:invalid:focus,
textarea:required:invalid:focus {
    outline: var(--focus-outline);
}


/* Only show error styles if the field is invalid AND has been touched or form submitted */
/*input:required:invalid.user-interacted,
textarea:required:invalid.user-interacted {
    border-color: var(--color-border-error, #dc2626);
    background-color: var(--color-background-error, #fef2f2);
}

input:required:invalid.user-interacted:focus,
textarea:required:invalid.user-interacted:focus {
    outline: var(--focus-outline);
}

input:required:valid,
textarea:required:valid {
    border-color: var(--color-border-interactive, #32373E);
    background-color: var(--color-background-default, #FFF);
}*/


.social-links {
    display: flex;
    gap: var(--spacing-base, 16px);
    justify-content: center;
    margin-top: var(--spacing-lg, 32px);
}

.social-links a {
    color: var(--color-text-interactive);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

.social-links a:hover {
    color: var(--color-background-interactive-primary-hover);
}

.social-links a:focus {
    outline: var(--focus-outline);
    outline-offset: var(--spacing-sm, 8px);
}

/* Footer Styles */
footer {
    border: 1px solid var(--color-border-default, #DDE0E3);
    background: var(--color-background-muted, #F7F8F8);
}

footer .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: var(--spacing-lg);
}

footer .container a {
    color: var(--color-text-interactive);
}


/* Case Study Specific Styles */
.case-study-header {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0;
}

.case-study-header p {
    font-size: var(--font-size-md);
    padding: 0 0 var(--spacing-sm) 0;
}

.case-metadata {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-base);
    margin: var(--spacing-xl) 0 0 0;
    justify-content: space-between;
}

.metadata-item {
    flex: 1 0 0 0;
    min-width: 150px;
}

.metadata-item .category {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold);
}

.metadata-item p {
    font-size: var(--font-size-base);
}

.case-content {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--spacing-lg) 0;
    gap: var(--spacing-md);
    display: flex;
    flex-direction: column;
}

.case-content h2 {
    margin-top: var(--spacing-huge);
}

.case-content h3 {
    margin-top: var(--spacing-base);
}

.case-content p,
.case-content ul,
.case-content ol {
    margin-bottom: var(--spacing-sm);
}

.case-content ul,
.case-content ol {
    padding-left: var(--spacing-sm);
}

.case-image {
    margin: var(--spacing-huge) 0 var(--spacing-huge) 0;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    justify-content: center;
    align-items: flex-end;
}

.case-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-small);
}

.case-logo {
    display: grid;
    justify-content: center;
}

.case-flex-content {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-base);
    max-width: 1000px;
    margin: 0 auto;
    align-items: center;
}

.case-flex-content-item {
    flex: 1;
    min-width: 200px;
}

.case-flex-content-header {
    text-align: center;
}

.caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-base) 0 0 0;
}

.next-prev-nav {
    display: flex;
    justify-content: space-between;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.next-prev-link {
    display: flex;
    flex-direction: column;
    max-width: 40%;
    text-decoration: none;
    color: var(--color-text-interactive);
    font-size: var(--font-size-lg);
}

.next-prev-link:focus {
    outline: var(--focus-outline);
    outline-offset: var(--spacing-sm);
}

.next-prev-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-bold);
    margin-bottom: var(--spacing-sm);
}

.next-prev-title {
    color: var(--accent);
    font-weight: var(--font-weight-medium);
}

/* Skip to content link for keyboard users */
.skip-link {
    position: absolute;
    top: -42px;
    left: 0;
    background: var(--color-background-interactive-primary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-base);
    z-index: 1000;
    transition: var(--transition-standard);
}

.skip-link:focus {
    top: 0;
}

/*.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    z-index: 1000;
    transition: top 0.3s;
}*/

.skip-link:focus {
    top: 0;
}

/* Media query for mobile */
@media (max-width: 768px) {
    .position-company {
        flex-direction: row;
        align-items: flex-start;
    }

    .position {
        align-self: center;
    }

    .company {
        align-self: flex-end;
    }

    .case-study-header {
        padding: var(--spacing-huge) var(--spacing-lg) 0 var(--spacing-lg);
    }

    .case-content {
        padding: 0 var(--spacing-lg) 0 var(--spacing-lg);
    }

    .container {
        padding: 0 var(--spacing-lg) 0 var(--spacing-lg);
    }

    .expertise {
        grid-template-columns: 1fr;
    }

    .case-metadata {
        gap: var(--spacing-md);
    }

    .case-video {
        width: 100%;
        height: auto;
    }

    .case-flex-content {
        flex-direction: column;
        padding: var(--spacing-md) 0 0 0;
    }

    .case-flex {
        padding: var(--spacing-xl) var(--spacing-lg) 0 var(--spacing-lg);
    }

    .case-flex-content-header {
        text-align: left;
        padding: var(--spacing-base) 0 0 0;
    }

    form p {
    width: 100%;
    margin: 0 auto;
}
}

@media (max-width: 640px) {
    /*p {
        font-size: var(--font-size-sm);
    }*/

    .case-studies {
        grid-template-columns: 1fr;
    }

    .btn-group {
        flex-direction: column;
        width: 100%
    }

    .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .btn-tertiary {
        justify-content: left;
        align-items: left;
    }

    .card {
        padding: var(--spacing-base);
    }

    /*.card-content {
        padding: var(--spacing-md) 0 0 0;
    }*/
    footer .container {
        flex-direction: column-reverse;
        align-items: center;
        gap: var(--spacing-md);
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/* About page */

.about-experience {
    text-align: center;
    align-items: center;
    padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-base);
}

.about-experience .awards {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    align-self: stretch;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg) 0 0 0;
}