:root{
      --bg: #f7f7fb;
      --card-bg: #016A41;
      --text: #ffffff;
      --muted: #64748b;
      --primary: #2563eb;
      --ring: rgba(37, 99, 235, .35);
      --border: #e5e7eb;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
      --shadow-md: 0 10px 30px rgba(2, 6, 23, .10);
      --radius: 14px;
    }
    *{box-sizing:border-box}
    .site-header{margin:0; font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; color:var(--text); background:var(--bg);z-index: 9999;}

    /* ===== Header / Nav ===== */
    .site-header{ backdrop-filter:saturate(180%) blur(6px); background: color-mix(in oklab, var(--card-bg) 88%, transparent); border-bottom:1px solid var(--border); transition: box-shadow .18s ease }
    .site-header.is-scrolled{ box-shadow: 0 6px 20px rgba(0,0,0,.06) }
    .wrap{ max-width:1200px; margin-inline:auto; padding: 4px 8px }

    .nav{ display:flex; align-items:center; gap:14px }
    .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:700; letter-spacing:.2px }
    .brand .logo{ width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg, #90cdf4, #60a5fa 60%, #6366f1); box-shadow:var(--shadow-sm) }

    /* Primary links */
    .nav__list{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
    .nav__item{ position:relative }
    .nav__link{ appearance:none; border:0; background:transparent; font:inherit; color:inherit; padding:10px 12px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:8px }
    .nav__link:hover, .nav__link:focus-visible{ outline:none; background:#eef2ff }
    .nav__chev{ width:16px; height:16px; transition:transform .18s ease }
    .nav__item.open .nav__chev{ transform:rotate(180deg) }

    /* ===== Dense, multi-column dropdown ===== */
    .dropdown{ position:absolute; z-index: 10000; top:100%; left:0; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(2,6,23,.08); padding:10px; display:none; width:min(90vw, 700px); max-height:clamp(180px, 30vh, 300px); overflow:auto; overscroll-behavior:contain }
    .nav__item.open > .dropdown{ display:grid }

    .dropdown__grid{ display:grid; grid-template-columns:1fr; gap:4px }
    /* Column presets (desktop only) */
    @media (min-width:961px){
      .dropdown--cols-2 .dropdown__grid{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
      .dropdown--cols-3 .dropdown__grid{ grid-template-columns: repeat(3, minmax(180px,1fr)); }
      .dropdown--cols-4 .dropdown__grid{ grid-template-columns: repeat(4, minmax(160px,1fr)); }
    }

    /* Dense (compact) item styling */
    .dropdown a{ display:block; padding:8px 10px; border-radius:8px; text-decoration:none; color:inherit; line-height:1.25; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .dropdown a:hover, .dropdown a:focus-visible{ background:#f1f5f9; outline:none }
    .dropdown--compact .dropdown__grid{ gap:2px }
    .dropdown--compact a{ padding:6px 8px; font-size:16px; line-height:1.32 }

    /* Scroll affordance (subtle gradients) */
    .dropdown::before, .dropdown::after{ content:""; position:absolute; left:0; right:0; height:12px; pointer-events:none }
    .dropdown::before{ top:0; background:linear-gradient(to bottom, rgba(2,6,23,.12), rgba(2,6,23,0)); border-top-left-radius: inherit; border-top-right-radius: inherit }
    .dropdown::after{ bottom:0; background:linear-gradient(to top, rgba(2,6,23,.10), rgba(2,6,23,0)); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit }

    /* Right-side actions */
    .actions{ display:flex; align-items:center; gap:10px; margin-left:auto }
    .search input{ width:220px; max-width:40vw; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; outline:none }
    .search input:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring) }
    .btn{ appearance:none; border:1px solid var(--border); background:#fff; padding:9px 12px; border-radius:10px; cursor:pointer }
    .btn.primary{ background:var(--primary); color:#fff; border-color:color-mix(in oklab, var(--primary), #000 15%) }
    .btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }

    /* Mobile menu */
    .menu-toggle{ display:none; appearance:none; border:1px solid var(--border); background:#fff; width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center }
    .menu-toggle:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring) }
    .hamb{ width:20px; height:2px; background:#0f172a; position:relative }
    .hamb::before,.hamb::after{ content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a }
    .hamb::before{ top:-6px } .hamb::after{ top:6px }

    /* Collapsible panel for mobile */
    .nav__panel{ display:flex; align-items:center; gap:10px }

    /* ===== Desktop hover-to-open (>=961px) ===== */
    @media (min-width: 961px){
      .nav{ justify-content:flex-start }
      .menu-toggle{ display:none }
      .nav__panel{ display:flex !important }
      .nav__item:hover > .dropdown { display: grid; }
      .nav__item:hover > .nav__link .nav__chev { transform: rotate(180deg); }
      .nav__item:hover > .nav__link { background:#eef2ff }
    }

    

    /* A11y helpers */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }
	
	.nav__link:hover,
	.nav__item:hover > .nav__link,
	.nav__link:focus-visible,
	.dropdown a:hover,
	.dropdown a:focus-visible {
	color: #0f172a; /* dark slate */
	}
	
	.nav__link {
	  font-size: 17px;   /* try 18px or 19px for bolder look */
	  font-weight: 600;  /* optional: adds subtle emphasis */
	}