*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #F5F5F5;
      --ink: #0A0A0A; --ink-medium: #404040; --ink-soft: #737373; --rule: #E0E0E0;
      --primary: #2C2C2C; --primary-dk: #1A1A1A; --secondary: #00E676; --secondary-dk: #00A854;
      --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
      --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
      --ease: cubic-bezier(0.23, 1, 0.32, 1);
    }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    #certificates { margin-top: 4rem; padding: 4rem 2rem; border-top: 3px solid var(--primary); }
    .certs-header { margin-bottom: 2rem; max-width: 1400px; margin-left: auto; margin-right: auto; }
    .certs-header h2 { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--ink); }
    .certs-stats { display: flex; gap: 2rem; margin: 2rem auto; flex-wrap: wrap; max-width: 1400px; }
    .cert-stat { padding: 1rem 1.5rem; background: var(--surface); border: 2px solid var(--rule); border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .cert-stat-number { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--primary); line-height: 1; margin-bottom: 0.25rem; }
    .cert-stat-label { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .certs-controls { display: flex; flex-direction: column; gap: 0.875rem; margin: 0 auto 2rem; padding: 1.5rem; background: var(--surface); border: 2px solid var(--rule); border-radius: 12px; max-width: 1400px; }
    .cert-filter-group { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
    .cert-filter-label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; min-width: 3.5rem; }
    .cert-filter-btn { padding: 0.5rem 1rem; border: 2px solid var(--rule); background: var(--surface-alt); color: var(--ink-medium); font-size: 0.8125rem; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em; }
    .cert-filter-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
    .cert-filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
    .view-toggle { display: flex; gap: 0.25rem; background: var(--surface); padding: 0.25rem; border-radius: 8px; border: 2px solid var(--rule); }
    .view-btn { padding: 0.625rem 1rem; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: var(--ink-soft); transition: all 0.2s var(--ease); display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
    .view-btn:hover { color: var(--ink); background: var(--surface-alt); }
    .view-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    .certs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; max-width: 1400px; margin: 0 auto; }
    .cert-card { background: var(--surface); border: 2px solid var(--rule); border-radius: 10px; padding: 1rem; transition: all 0.3s var(--ease); box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 0.5rem; }
    .cert-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
    .cert-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-soft); }
    .cert-date { font-weight: 700; color: var(--ink); }
    .cert-divider { color: var(--rule); }
    .cert-provider { font-weight: 600; color: var(--primary); }
    .cert-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0.25rem 0; }
    .cert-footer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: auto; }
    .cert-footer-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
    .cert-topic { font-size: 0.6875rem; font-weight: 600; color: var(--ink-soft); padding: 0.25rem 0.5rem; background: rgba(0,0,0,0.06); border-radius: 4px; }
    .cert-badge { font-size: 0.625rem; font-weight: 700; padding: 0.25rem 0.5rem; background: rgba(0,230,118,0.15); color: var(--secondary-dk); border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--secondary); }
    .cert-link { display: flex; justify-content: center; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: #C45000; text-decoration: none; font-weight: 700; padding: 0.5rem; background: rgba(196,80,0,0.08); border-radius: 6px; transition: all 0.2s var(--ease); border: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.03em; width: 100%; }
    .cert-link:hover { background: #C45000; color: white; border-color: #C45000; box-shadow: 0 4px 12px rgba(196,80,0,0.3); }
    .certs-table { background: var(--surface); border: 2px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); max-width: 1400px; margin: 0 auto; display: none; }
    .certs-table.active { display: block; }
    table { width: 100%; border-collapse: collapse; }
    thead { background: var(--surface-alt); border-bottom: 2px solid var(--rule); }
    th { text-align: left; padding: 1rem 1.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; }
    td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr { transition: all 0.2s var(--ease); }
    tbody tr:hover { background: rgba(0,0,0,0.03); }
    .table-date { font-weight: 700; color: var(--ink); white-space: nowrap; }
    .table-title { font-weight: 700; color: var(--ink); }
    .table-issuer { color: var(--primary); font-weight: 600; font-size: 0.8125rem; }
    .table-topic { font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); padding: 0.25rem 0.625rem; background: rgba(0,0,0,0.06); border-radius: 4px; display: inline-block; }
    .table-badge { font-size: 0.625rem; font-weight: 700; padding: 0.25rem 0.5rem; background: rgba(0,230,118,0.15); color: var(--secondary-dk); border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--secondary); display: inline-block; margin-left: 0.5rem; }
    .table-link { color: var(--primary); text-decoration: none; font-size: 0.875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: rgba(0,0,0,0.06); border-radius: 6px; transition: all 0.2s var(--ease); text-transform: uppercase; letter-spacing: 0.03em; }
    .table-link:hover { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
    .cert-results-info { text-align: center; padding: 1rem; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500; max-width: 1400px; margin: 0 auto; }
    .certs-grid.hidden { display: none; }
    @media (max-width: 768px) {
      .certs-grid { grid-template-columns: 1fr; }
      .cert-filter-group { width: 100%; }
      .view-toggle { width: auto; }
      .certs-table { border: none; border-radius: 0; }
      table, thead, tbody, th, td, tr { display: block; }
      thead tr { position: absolute; top: -9999px; left: -9999px; }
      tr { border: 2px solid var(--rule); border-radius: 8px; margin-bottom: 1rem; background: var(--surface); }
      td { border: none; border-bottom: 1px solid var(--rule); position: relative; padding-left: 40%; }
      td:last-child { border-bottom: none; }
      td:before { position: absolute; left: 1.5rem; width: 35%; padding-right: 0.5rem; white-space: nowrap; font-weight: 700; font-size: 0.75rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; }
      td:nth-of-type(1):before { content: "Date"; }
      td:nth-of-type(2):before { content: "Certificate"; }
      td:nth-of-type(3):before { content: "Issuer"; }
      td:nth-of-type(4):before { content: "Topic"; }
      td:nth-of-type(5):before { content: "Link"; }
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg: #FAFAFA; --surface: #FFFFFF; --surface-alt: #F5F5F5;
      --ink: #0A0A0A; --ink-medium: #404040; --ink-soft: #737373; --rule: #E0E0E0;
      --primary: #2C2C2C; --primary-dk: #1A1A1A;
      --secondary: #00E676; --secondary-dk: #00A854;
      --orange: #C45000;
      --font-sans: 'Inter', -apple-system, system-ui, sans-serif;
      --font-display: 'Space Grotesk', -apple-system, system-ui, sans-serif;
      --ease: cubic-bezier(0.23, 1, 0.32, 1);
    }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

    /* NAV */
    nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-bottom: 2px solid var(--rule); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .nav-container { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.75rem; }
    .logo-accent { width: 8px; height: 8px; background: var(--orange); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.7;transform:scale(0.85)} }
    .nav-back { font-size: 0.875rem; color: var(--ink-medium); text-decoration: none; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s var(--ease); }
    .nav-back:hover { color: var(--ink); gap: 0.75rem; }

    /* HEADER */
    header { padding: 4rem 2rem 3rem; background: var(--surface); border-bottom: 2px solid var(--rule); }
    .header-container { max-width: 1400px; margin: 0 auto; }
    .breadcrumb { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
    .breadcrumb a { color: var(--ink-medium); text-decoration: none; font-weight: 600; }
    .breadcrumb a:hover { text-decoration: underline; }
    h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; color: var(--ink); }
    .header-intro { font-size: 1.125rem; line-height: 1.7; color: var(--ink-medium); max-width: 800px; margin-bottom: 1rem; }
    .header-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
    .stat-item { padding: 1.25rem 1.75rem; background: var(--surface); border-radius: 12px; border: 2px solid var(--rule); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .stat-number { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 0.25rem; }
    .stat-label { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

    /* CONTROLS */
    .controls { position: sticky; top: 62px; z-index: 90; background: rgba(255,255,255,0.98); backdrop-filter: blur(12px); border-bottom: 2px solid var(--rule); padding: 1.25rem 2rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .controls-inner { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.875rem; }

    /* Search row */
    .search-row { display: flex; align-items: center; gap: 0.5rem; }
    .search-label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; min-width: 4.5rem; }
    .search-box { position: relative; flex: 1; max-width: 480px; }
    .search-box input { width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 2px solid var(--rule); border-radius: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; background: var(--surface); transition: all 0.2s; }
    .search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,0,0,0.08); }
    .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-soft); pointer-events: none; }

    /* Filter rows */
    .filter-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
    .filter-label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; min-width: 4.5rem; }
    .filter-btn { padding: 0.5rem 1rem; border: 2px solid var(--rule); background: var(--surface-alt); color: var(--ink-medium); font-size: 0.8125rem; font-weight: 700; border-radius: 6px; cursor: pointer; transition: all 0.2s var(--ease); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.03em; }
    .filter-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .filter-btn.active { background: var(--primary); border-color: var(--primary); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

    /* View toggle row */
    .view-toggle { display: flex; gap: 0.25rem; background: var(--surface); padding: 0.25rem; border-radius: 8px; border: 2px solid var(--rule); }
    .view-btn { padding: 0.5rem 1rem; background: transparent; border: none; border-radius: 6px; cursor: pointer; color: var(--ink-soft); transition: all 0.2s var(--ease); display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-family: var(--font-sans); }
    .view-btn:hover { color: var(--ink); background: var(--surface-alt); }
    .view-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

    /* MAIN */
    main { max-width: 1400px; margin: 0 auto; padding: 2rem; }
    .results-info { color: var(--ink-soft); font-size: 0.9375rem; font-weight: 500; margin-bottom: 1.5rem; }

    /* DECADE SECTIONS */
    .decade-section { margin-bottom: 4rem; }
    .decade-header { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 3px solid var(--ink); }
    .decade-title { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); }
    .decade-count { font-size: 0.875rem; color: var(--ink-medium); background: var(--surface-alt); padding: 0.5rem 1rem; border-radius: 100px; font-weight: 700; border: 2px solid var(--rule); }

    /* CARDS */
    .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
    .project-card { background: var(--surface); border: 2px solid var(--rule); border-radius: 12px; padding: 1.5rem; transition: all 0.3s var(--ease); display: flex; flex-direction: column; gap: 0.875rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .project-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.12); }
    .project-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
    .project-year-badge { font-size: 0.75rem; font-weight: 700; color: white; background: var(--ink); padding: 0.375rem 0.75rem; border-radius: 6px; flex-shrink: 0; letter-spacing: 0.05em; }
    .project-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
    .project-client-label { font-size: 0.8125rem; color: var(--ink-medium); font-weight: 600; margin-top: 0.125rem; }
    .project-role-block { font-size: 0.875rem; color: var(--ink-medium); line-height: 1.6; padding: 0.875rem 1rem; background: var(--surface-alt); border-radius: 8px; border-left: 3px solid var(--secondary); flex-grow: 1; }
    .project-link { display: flex; justify-content: center; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--orange); text-decoration: none; font-weight: 700; padding: 0.625rem 1rem; background: rgba(196,80,0,0.08); border-radius: 8px; transition: all 0.2s var(--ease); border: 2px solid transparent; text-transform: uppercase; letter-spacing: 0.03em; width: 100%; margin-top: auto; }
    .project-link:hover { background: var(--orange); color: white; border-color: var(--orange); box-shadow: 0 4px 12px rgba(196,80,0,0.3); }

    /* TABLE */
    .projects-table-wrap { background: var(--surface); border: 2px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    table { width: 100%; border-collapse: collapse; }
    thead { background: var(--surface-alt); border-bottom: 2px solid var(--rule); }
    th { text-align: left; padding: 1rem 1.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; }
    td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule); font-size: 0.875rem; vertical-align: middle; }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr { transition: background 0.15s; }
    tbody tr:hover { background: rgba(0,0,0,0.02); }
    .td-year { font-weight: 700; color: var(--ink); white-space: nowrap; }
    .td-project { font-weight: 700; color: var(--ink); }
    .td-client { color: var(--ink-medium); font-weight: 500; }
    .td-role { color: var(--ink-soft); }
    .td-link a { color: var(--orange); text-decoration: none; font-size: 0.8125rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; background: rgba(196,80,0,0.08); border-radius: 6px; transition: all 0.2s var(--ease); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
    .td-link a:hover { background: var(--orange); color: white; box-shadow: 0 2px 8px rgba(196,80,0,0.25); }

    /* EMPTY */
    .empty-state { text-align: center; padding: 5rem 2rem; color: var(--ink-soft); }
    .empty-state p { font-size: 1rem; margin-top: 1rem; }

    /* FOOTER */
    footer { background: var(--ink); color: rgba(255,255,255,0.7); padding: 3rem 2rem; margin-top: 4rem; border-top: 2px solid rgba(255,255,255,0.08); }
    .footer-container { max-width: 1400px; margin: 0 auto; text-align: center; }
    .footer-links { display: flex; gap: 2rem; justify-content: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.875rem; font-weight: 600; transition: color 0.2s; }
    .footer-links a:hover { color: var(--secondary); }

    /* FOCUS */
    *:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .nav-container, header, .controls { padding-left: 1.25rem; padding-right: 1.25rem; }
      main { padding: 1.25rem; }
      .projects-grid { grid-template-columns: 1fr; }
      .projects-table-wrap { border: none; border-radius: 0; }
      table, thead, tbody, th, td, tr { display: block; }
      thead tr { position: absolute; top: -9999px; left: -9999px; }
      tr { border: 2px solid var(--rule); border-radius: 8px; margin-bottom: 1rem; background: var(--surface); }
      td { border: none; border-bottom: 1px solid var(--rule); position: relative; padding-left: 40%; }
      td:last-child { border-bottom: none; }
      td:before { position: absolute; left: 1.25rem; width: 35%; font-weight: 700; font-size: 0.75rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.05em; }
      td:nth-of-type(1):before { content: "Year"; }
      td:nth-of-type(2):before { content: "Project"; }
      td:nth-of-type(3):before { content: "Client"; }
      td:nth-of-type(4):before { content: "Role"; }
      td:nth-of-type(5):before { content: "Link"; }
      .search-box { max-width: none; }
    }
    .hidden { display: none !important; }