@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* Brand round 3 — pure white ground, trustworthy blues, CAL lockup, mobile menu. */
:root {
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-body: 'Poppins', system-ui, sans-serif;
  --blue-navy: #0b2e59;
  --blue: #1d6fd0;
  --blue-light: #4a90dc;
  --color-bg: #ffffff;
  --color-surface: #f4f8fd;
  --color-accent: #1d6fd0;
  --color-accent-100: #eaf3fd;
  --color-accent-200: #d2e5fa;
  --color-accent-300: #a9cdf4;
  --color-accent-400: #74aee9;
  --color-accent-500: #4a90dc;
  --color-accent-600: #1d6fd0;
  --color-accent-700: #15539e;
  --color-accent-800: #0e3a70;
  --color-accent-900: #0b2e59;
  --color-accent-2: #0b2e59;
  --color-accent-2-100: #e9eef5;
  --color-accent-2-200: #d1dcea;
  --color-accent-2-300: #aabfd8;
  --color-accent-2-400: #7d9cbf;
  --color-accent-2-500: #4f77a2;
  --color-accent-2-600: #2f5988;
  --color-accent-2-700: #1d4470;
  --color-accent-2-800: #123255;
  --color-accent-2-900: #0b2440;
}
body { background: #ffffff; }

/* — sticky header (frosted glass) — */
.nav { position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, #ffffff 72%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--blue) 18%, transparent),
              0 6px 24px -18px rgba(11, 46, 89, 0.45); }
@supports not (backdrop-filter: blur(2px)) { .nav { background: #ffffff; } }

/* — glass dropdown menu (see .menu-panel below) — */

section[id] { scroll-margin-top: 84px; }
.nav { flex-wrap: nowrap; gap: 10px; }
@media (max-width: 480px) {
  .brand-word { font-size: 15px; }
  .brand-badge { width: 30px; height: 30px; font-size: 12px; }
  .nav .btn { padding-inline: 12px; font-size: 14px; }
  .brand-word .c3, .brand-word .cai { display: none; }
  .nav-icon-btn { display: none; }
  .nav .btn.btn-primary { font-size: 0; padding-inline: 14px; }
  .nav .btn.btn-primary::after { content: "Report"; font-size: 14px; }
}
@media (max-width: 380px) {
  .brand-word { display: none; }
}

/* — CAL logo lockup — */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; white-space: nowrap; }
.brand-badge { display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--blue-navy); color: #ffffff;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #ffffff 18%, transparent);
  transition: transform .25s ease, background .25s ease; }
.brand-badge svg { display: block; width: 22px; height: 22px; }
.brand-lockup:hover .brand-badge { transform: rotate(-4deg) scale(1.06); background: var(--blue); }
.brand-word { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.01em; }
.brand-word .c1 { color: var(--color-text); }
.brand-word .c2 { color: var(--blue); }
.brand-word .c3 { color: var(--color-text); }
.brand-word .cai { color: color-mix(in srgb, var(--color-text) 55%, transparent); font-size: 0.85em; }

/* — primary button: blue fill, white text; hover inverts to white with blue border — */
.btn.btn-primary { background: var(--blue); color: #ffffff; border: 1px solid var(--blue);
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn.btn-primary:hover { background: #ffffff; color: var(--blue); border-color: var(--blue); }

/* — blue front-page rules — */
.rule-head { border-top-color: var(--blue); border-bottom-color: var(--blue); }
.rule-cut { border-top-color: var(--blue); }

/* — mobile menu — */
.nav-menu-btn { display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--color-accent-200);
  border-radius: 10px; background: #fff; color: var(--color-accent-700);
  font-size: 22px; cursor: pointer; transition: background .2s ease; }
.nav-menu-btn:hover { background: var(--color-accent-100); }
@media (max-width: 1150px) { .nav-menu-btn { display: inline-flex; } }
.menu-panel { display: none; position: absolute; top: calc(100% + 6px);
  right: clamp(12px, 5vw, 72px); left: auto; z-index: 50;
  min-width: 240px; max-width: min(320px, calc(100vw - 24px));
  background: color-mix(in srgb, #ffffff 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--color-accent-200);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 14px; gap: 4px; }
@supports not (backdrop-filter: blur(2px)) { .menu-panel { background: #ffffff; } }
body.menu-open .menu-panel { display: grid; }
.menu-panel a { display: block; padding: 12px 14px; border-radius: 10px;
  min-height: 44px; box-sizing: border-box;
  font-size: 15.5px; text-decoration: none; color: var(--color-text);
  transition: background .2s ease; }
.menu-panel a:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.menu-panel a.btn { background: var(--color-accent); color: #fff; text-align: center; margin-top: 6px; }
.menu-panel a.btn:hover { background: var(--color-accent-600); }