:root {
/* Colors */
      --header-bg: #fff;
      --header-border: #e5e7eb;
      --header-text: #111827;
      --header-text-secondary: #6b7280;
      --header-hover-bg: #f3f4f6;
      --primary-color: #2563eb;
      --primary-hover: #1d4ed8;
      --dark-bg: #262626;
      --dark-border: #404040;
      --dark-text: #fff;
      --dark-text-secondary: #a3a3a3;
      --dark-hover-bg: #404040;
      
      /* Component specific variables */
      --header-height: clamp(3.5rem, 3.2rem + 1.5vw, 4.5rem);
      --header-logo-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
      --header-icon-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
      --header-toggle-size: clamp(2rem, 1.83rem + 0.87vw, 2.5rem);
      --header-border-radius: clamp(0.375rem, 0.34rem + 0.11vw, 0.5rem);
    }


    /* Z-index management */
    .header {
        position: relative;
        width: 100%;
        background-color: var(--header-bg);
        border-bottom: 1px solid var(--header-border);
        z-index: 1000;
      }
  
      /* Element: Nav */
      .header__nav {
        position: relative;
        max-width: min(85rem, 100%);
        width: 100%;
        margin: 0 auto;
        padding: var(--space-2xs) var(--space-s);
        display: flex;
        flex-wrap: wrap;
      }
  
      @media (min-width: 768px) {
        .header__nav {
          padding: var(--space-xs) var(--space-m);
          justify-content: space-between;
          align-items: center;
          gap: var(--space-s);
        }
      }
  
      /* Element: Brand container */
      .header__brand-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3xs);
        width: 100%;
      }
  
      @media (min-width: 768px) {
        .header__brand-container {
          width: auto;
        }
      }
  
      /* Element: Brand */
      .header__brand {
        font-weight: 600;
        font-size: var(--step-1);
        color: var(--header-text);
        text-decoration: none;
      }
  
      .header__brand:focus {
        opacity: 0.8;
      }
  
      /* Element: Toggle */
      .header__toggle {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--header-toggle-size);
        height: var(--header-toggle-size);
        font-weight: 500;
        font-size: var(--step--1);
        border-radius: var(--header-border-radius);
        border: 1px solid var(--header-border);
        color: var(--header-text);
        background-color: transparent;
        cursor: pointer;
      }
  
      .header__toggle:hover {
        background-color: var(--header-hover-bg);
      }
  
      .header__toggle:focus {
        --header-hover-bg: blue;
        background-color: var(--header-hover-bg);
      }
  
      @media (min-width: 768px) {
        .header__toggle {
          display: none;
        }
      }
  
      /* Element: Toggle icon */
      .header__toggle-icon {
        width: var(--header-icon-size);
        height: var(--header-icon-size);
      }
  
      .header__toggle-icon--menu {
        display: block;
      }
  
      .header__toggle-icon--menu::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='6' y2='6'/%3E%3Cline x1='3' x2='21' y1='12' y2='12'/%3E%3Cline x1='3' x2='21' y1='18' y2='18'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__toggle-icon--close {
        display: none;
      }
  
      .header__toggle-icon--close::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__toggle[aria-expanded="true"] .header__toggle-icon--menu {
        display: none;
      }
  
      .header__toggle[aria-expanded="true"] .header__toggle-icon--close {
        display: block;
      }
  
      /* Element: Collapse */
      .header__collapse {
        display: none;
        width: 100%;
        transition: all 0.3s;
      }
  
      .header__collapse.is-open {
        display: block;
      }
  
      @media (min-width: 768px) {
        .header__collapse {
          display: block;
          width: auto;
          flex-grow: 1;
        }
      }
  
      /* Element: Collapse container */
      .header__collapse-container {
        overflow: visible;
        max-height: none;
      }
  
      @media (max-width: 767px) {
        .header__collapse-container {
          overflow-y: auto;
          max-height: 75vh;
        }
      }
  
      .header__collapse-container::-webkit-scrollbar {
        width: 0.5rem;
      }
  
      .header__collapse-container::-webkit-scrollbar-thumb {
        border-radius: 9999px;
        background-color: #d1d5db;
      }
  
      .header__collapse-container::-webkit-scrollbar-track {
        background-color: #f3f4f6;
      }
  
      /* Element: Menu container */
      .header__menu-container {
        display: flex;
        flex-direction: column;
        padding: var(--space-xs) 0;
        gap: var(--space-3xs);
      }
  
      @media (min-width: 768px) {
        .header__menu-container {
          flex-direction: row;
          align-items: center;
          padding: 0;
        }
      }
  
      /* Element: Menu */
      .header__menu {
        flex-grow: 1;
      }
  
      /* Element: Menu items */
      .header__menu-items {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
      }
  
      @media (min-width: 768px) {
        .header__menu-items {
          flex-direction: row;
          justify-content: flex-end;
          align-items: center;
        }
      }
  
      /* Element: Menu item */
      .header__menu-item {
        display: flex;
        align-items: center;
        padding: var(--space-xs);
        font-size: var(--step--1);
        color: var(--header-text);
        text-decoration: none;
        border-radius: var(--header-border-radius);
      }
  
      .header__menu-item:hover {
        background-color: var(--header-hover-bg);
        text-decoration: none;
      }
  
      .header__menu-item:focus {
        background-color: var(--header-hover-bg);
      }
  
      /* Modifier: Active menu item */
      .header__menu-item--active {
        background-color: var(--header-hover-bg);
      }
  
      /* Element: Menu icon */
      .header__menu-icon {
        width: var(--header-icon-size);
        height: var(--header-icon-size);
        margin-right: var(--space-xs);
        flex-shrink: 0;
      }
  
      .header__menu-icon--home::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.5l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__menu-icon--resources::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__menu-icon--account::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__menu-icon--work::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M22 13a18.15 18.15 0 0 1-20 0'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__menu-icon--blog::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      @media (min-width: 768px) {
        .header__menu-icon {
          margin-right: var(--space-2xs);
          display: none;
        }
      }
  
      .header__dropdown {
        position: relative;
        z-index: 1010;
      }
  
      .header__dropdown-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        padding: var(--space-xs);
        font-size: var(--step--1);
        color: var(--header-text);
        border: none;
        background: none;
        border-radius: var(--header-border-radius);
        cursor: pointer;
      }
  
      .header__dropdown-toggle:hover {
        background-color: var(--header-hover-bg);
      }
  
      .header__dropdown-toggle:focus {
        background-color: var(--header-hover-bg);
      }
  
      .header__dropdown-arrow {
        width: var(--header-icon-size);
        height: var(--header-icon-size);
        margin-left: auto;
        transition: transform 0.3s;
        position: relative;
      }
  
      .header__dropdown-arrow::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      @media (min-width: 768px) {
        .header__dropdown-arrow {
          margin-left: var(--space-2xs);
        }
      }
  
      .header__dropdown-toggle[aria-expanded="true"] .header__dropdown-arrow {
        transform: rotate(180deg);
      }
  
      @media (min-width: 768px) {
        .header__dropdown-toggle[aria-expanded="true"] .header__dropdown-arrow {
          transform: rotate(0);
        }
      }
  
      .header__dropdown-menu {
        display: none;
        opacity: 0;
        position: relative;
        z-index: 10;
        transition: opacity 0.15s, margin 0.15s;
      }
  
      .header__dropdown-toggle[aria-expanded="true"] + .header__dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
      }
  
      @media (min-width: 768px) {
        .header__dropdown-menu {
          position: absolute;
          top: 100%;
          left: 0;
          width: 20rem;
          background-color: var(--header-bg);
          border-radius: var(--header-border-radius);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
  
        .header__dropdown-menu::before {
          content: "";
          position: absolute;
          top: -1rem;
          left: 0;
          width: 100%;
          height: 1.25rem;
        }
      }
  
      .header__dropdown-content {
        padding: var(--space-2xs);
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
      }
  
      /* Dropdown links */
      .header__dropdown-link {
        display: flex;
        gap: var(--space-s);
        padding: var(--space-xs);
        border-radius: var(--header-border-radius);
        text-decoration: none;
      }
  
      .header__dropdown-link:hover {
        background-color: var(--header-hover-bg);
      }
  
      .header__dropdown-link:focus {
        background-color: var(--header-hover-bg);
      }
  
      .header__dropdown-icon {
        width: var(--header-icon-size);
        height: var(--header-icon-size);
        margin-top: var(--space-2xs);
        flex-shrink: 0;
        color: var(--header-text);
        position: relative;
      }
  
      .header__dropdown-icon--data::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' x2='2' y1='12' y2='12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3Cline x1='6' x2='6.01' y1='16' y2='16'/%3E%3Cline x1='10' x2='10.01' y1='16' y2='16'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__dropdown-icon--team::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__dropdown-icon--blog::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
      }
  
      .header__dropdown-text {
        flex-grow: 1;
      }
  
      .header__dropdown-title {
        display: block;
        font-weight: 600;
        font-size: var(--step--1);
        color: var(--header-text);
      }
  
      .header__dropdown-description {
        font-size: var(--step--1);
        color: var(--header-text-secondary);
      }
  
      .header__dropdown-divider {
        margin: var(--space-xs) 0;
        border-top: 1px solid var(--header-border);
      }
  
      /* Badge */
      .header__badge {
        display: inline-block;
        margin-left: var(--space-2xs);
        font-size: var(--step--2);
        font-weight: 500;
        padding: var(--space-3xs) var(--space-xs);
        border-radius: 9999px;
      }
  
      .header__badge--hiring {
        background-color: var(--primary-color);
        color: #fff;
      }
  
      /* Divider */
      .header__divider {
        margin: var(--space-xs) 0;
        width: 100%;
        height: 1px;
        background-color: var(--header-border);
      }
  
      @media (min-width: 768px) {
        .header__divider {
          margin: 0 var(--space-xs);
          width: 1px;
          height: var(--space-s);
          background-color: #d1d5db;
        }
      }
  
      /* Buttons */
      .header__buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2xs);
      }
  
      .header__button {
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        font-size: var(--step--1);
        border-radius: var(--header-border-radius);
        text-decoration: none;
      }
  
      .header__button--secondary {
        padding: calc(var(--space-xs) - 1px) var(--space-xs);
        border: 1px solid var(--header-border);
        background-color: var(--header-bg);
        color: var(--header-text);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }
  
      .header__button--secondary:hover {
        background-color: var(--header-hover-bg);
      }
  
      .header__button--secondary:focus {
        background-color: var(--header-hover-bg);
      }
  
      .header__button--primary {
        padding: var(--space-xs) var(--space-xs);
        background-color: var(--primary-color);
        color: #fff;
      }
  
      .header__button--primary:hover {
        background-color: var(--primary-hover);
      }
  
      .header__button--primary:focus {
        background-color: var(--primary-hover);
      }
  
      /* Dark mode */
      @media (prefers-color-scheme: dark) {
        .header {
          background-color: var(--dark-bg);
          border-color: var(--dark-border);
        }
  
        .header__brand {
          color: var(--dark-text);
        }
  
        .header__menu-item {
          color: var(--dark-text);
        }
  
        .header__dropdown-toggle {
          color: var(--dark-text);
        }
  
        .header__dropdown-menu {
          background-color: var(--dark-bg);
        }
  
        .header__dropdown-title {
          color: var(--dark-text);
        }
  
        .header__dropdown-description {
          color: var(--dark-text-secondary);
        }
  
        .header__dropdown-divider {
          border-color: var(--dark-border);
        }
  
        .header__toggle {
          color: var(--dark-text);
          border-color: var(--dark-border);
        }
  
        .header__toggle:hover, 
        .header__toggle:focus,
        .header__menu-item:hover,
        .header__menu-item:focus,
        .header__menu-item--active,
        .header__dropdown-toggle:hover,
        .header__dropdown-toggle:focus,
        .header__dropdown-link:hover,
        .header__dropdown-link:focus {
          background-color: var(--dark-hover-bg);
        }
  
        .header__dropdown-icon {
          color: var(--dark-text);
        }
  
        .header__collapse-container::-webkit-scrollbar-thumb {
          background-color: var(--dark-text-secondary);
        }
  
        .header__collapse-container::-webkit-scrollbar-track {
          background-color: var(--dark-border);
        }
  
        .header__button--secondary {
          background-color: var(--dark-bg);
          border-color: var(--dark-border);
          color: var(--dark-text-secondary);
        }
  
        .header__button--secondary:hover,
        .header__button--secondary:focus {
          background-color: var(--dark-hover-bg);
        }
  
        .header__button--primary {
          background-color: #3b82f6; /* slightly lighter blue for dark mode */
        }
  
        .header__button--primary:hover,
        .header__button--primary:focus {
          background-color: #60a5fa;
        }
      }
  
      /* Utility */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }