@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
  --public-shell-brand: #0f172a;
  --public-shell-brand-hover: #1e293b;
  --public-shell-brand-light: #334155;
  --public-shell-ink: #06245f;
  --public-shell-secondary-hover: #0a3478;
  --public-shell-secondary-light: #1e4f9a;
  --public-shell-deeper: #080d18;
  --public-shell-copy: #334e7d;
  --public-shell-muted: #64748b;
  --public-shell-action: #2563eb;
  --public-shell-action-hover: #1d4ed8;
  --public-shell-action-light: #60a5fa;
  --public-shell-hero-purple: #4c1d95;
  --public-shell-hero-muted: #31527f;
  --public-shell-page: #f8fafc;
  --public-shell-surface: #fff;
  --public-shell-surface-soft: #f1f5f9;
  --public-shell-surface-violet: #eef2f7;
  --public-shell-line: #e2e8f0;
  --public-shell-line-strong: #cbd5e1;
  --public-shell-inverse: #fff;
  --public-shell-radius: 8px;
  --public-shell-radius-card: 24px;
  --public-shell-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --public-shell-shadow-md: 0 14px 34px rgba(15, 42, 99, 0.1);
  --public-shell-shadow-inner: inset 0 0 0 1px rgba(6, 36, 95, 0.08);
  --public-shell-max-width: 1440px;
  --public-shell-header-height: 96px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  isolation: isolate;
  color: var(--public-shell-ink);
  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
  background: radial-gradient(circle at 15% -60%, rgba(96, 165, 250, 0.18), transparent 35%), linear-gradient(110deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96) 52%, rgba(255, 255, 255, 0.98));
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
  backdrop-filter: blur(12px);
  transition: transform 0.5s ease, opacity 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease;
  will-change: transform;
}

.site-header.is-hidden { opacity: 0; transform: translateY(-110%); }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.96); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12); }
.site-header::after { position: absolute; inset: auto 0 -18px; height: 18px; background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06) 42%, transparent); content: ""; pointer-events: none; }
.public-shell-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 9px 13px; border-radius: var(--public-shell-radius); background: #fff; color: var(--public-shell-action); font-weight: 800; transform: translateY(-160%); }
.public-shell-skip-link:focus { transform: none; }
.site-header__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 40px)); height: var(--public-shell-header-height); margin: auto; gap: 20px; }
.site-header__brand { display: flex; flex: none; align-items: center; border-radius: 18px; transition: filter 0.26s, transform 0.26s; }
.site-header__brand:hover, .site-header__brand:focus-visible { filter: drop-shadow(0 10px 14px rgba(37, 99, 235, 0.2)); outline: none; transform: translateY(-2px); }
.site-header__brand img { display: block; width: auto; height: 88px; margin: 0; object-fit: contain; }
.primary-navigation { display: flex; align-items: center; gap: 2px; padding: 5px 7px; border: 1px solid rgba(37, 99, 235, 0.12); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 246, 255, 0.68)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 12px 30px rgba(37, 99, 235, 0.08); color: var(--public-shell-ink); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.nav-item-group { position: relative; display: flex; }
.primary-navigation .nav-link { position: relative; z-index: 1; display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 999px; color: inherit; letter-spacing: 0.015em; text-decoration: none; transition: color 0.22s, background 0.22s, transform 0.22s; }
.primary-navigation .nav-link:hover, .primary-navigation .nav-link:focus-visible, .primary-navigation .nav-link.is-active { background: linear-gradient(135deg, rgba(219, 234, 254, 0.82), rgba(239, 246, 255, 0.9)); color: var(--public-shell-action); outline: none; transform: translateY(-1px); }
.primary-navigation .nav-link.is-active::after { position: absolute; left: 50%; bottom: 3px; width: 18px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--public-shell-action-light), var(--public-shell-action)); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.26); content: ""; transform: translateX(-50%); }
.service-dropdown { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 20; min-width: 220px; padding-top: 7px; opacity: 0; pointer-events: none; transform: translate(-50%, -7px); transition: opacity 0.2s, transform 0.2s; }
.service-dropdown__surface { display: grid; padding: 7px; overflow: hidden; border: 1px solid rgba(37, 99, 235, 0.16); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(242, 247, 255, 0.97)); box-shadow: 0 24px 64px rgba(15, 42, 91, 0.2); }
.nav-item-group:hover .service-dropdown, .nav-item-group:focus-within .service-dropdown { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.service-dropdown-link { display: block; padding: 10px 12px; border-radius: 11px; color: var(--public-shell-ink); font-size: 13px; font-weight: 750; text-decoration: none; text-transform: none; white-space: nowrap; }
.service-dropdown-link:hover, .service-dropdown-link:focus-visible { background: #eff6ff; color: var(--public-shell-action); outline: none; }
.site-header__actions { display: flex; flex: none; align-items: center; gap: 18px; }
.header-action-divider { width: 1px; height: 36px; background: linear-gradient(180deg, transparent, rgba(37, 99, 235, 0.32), transparent); }
.header-login-button { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; padding: 0 18px; border: 1px solid rgba(37, 99, 235, 0.3); border-radius: 999px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 10px 24px rgba(37, 99, 235, 0.1); color: var(--public-shell-action); font: inherit; font-size: 13px; font-weight: 850; text-decoration: none; cursor: pointer; }
.header-login-icon { display: block; width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.header-login-button:hover, .header-login-button:focus-visible { background: linear-gradient(135deg, var(--public-shell-action-light), var(--public-shell-action)); color: #fff; outline: none; }
.header-user-menu { position: relative; }
.header-user-trigger { display: inline-flex; min-width: 218px; align-items: center; gap: 12px; padding: 7px 12px 7px 8px; border: 1px solid rgba(37, 99, 235, 0.24); border-radius: 999px; background: linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98)); color: var(--public-shell-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 28px rgba(37,99,235,.12); cursor: pointer; }
.header-user-trigger:hover, .header-user-trigger:focus-visible, .header-user-trigger.is-open { border-color: rgba(37,99,235,.56); outline: none; box-shadow: 0 18px 36px rgba(37,99,235,.16); }
.header-user-avatar { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 999px; background: linear-gradient(180deg, var(--public-shell-action-light), var(--public-shell-action)); color: #fff; font-size: 13px; font-weight: 900; }
.header-user-copy { display: grid; min-width: 0; flex: 1; gap: 1px; text-align: left; }
.header-user-copy span, .header-user-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-user-copy span { color: var(--public-shell-ink); font-size: 13px; font-weight: 900; }
.header-user-copy small { color: var(--public-shell-muted); font-size: 11px; font-weight: 700; }
.header-user-chevron { flex: none; color: var(--public-shell-action); transform: rotate(90deg); transition: transform .2s; }
.header-user-trigger.is-open .header-user-chevron { transform: rotate(-90deg); }
.header-user-dropdown { position: absolute; top: calc(100% + 14px); right: 0; z-index: 4; display: grid; width: 248px; gap: 4px; padding: 8px; border: 1px solid rgba(37,99,235,.2); border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 22px 48px rgba(37,99,235,.18); opacity: 0; pointer-events: none; transform: translateY(10px) scale(.97); transition: opacity .2s, transform .2s; }
.header-user-dropdown.is-open { opacity: 1; pointer-events: auto; transform: none; }
.header-user-dropdown__item { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 10px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--public-shell-ink); font: inherit; font-size: 13px; font-weight: 850; text-decoration: none; cursor: pointer; }
.header-user-dropdown__item:hover, .header-user-dropdown__item:focus-visible { background: rgba(37,99,235,.1); color: var(--public-shell-action); outline: none; }
.header-user-dropdown__item--danger { color: #b42318; }
.mobile-menu-toggle, .mobile-header-panel { display: none; }
.mobile-menu-lines { display: grid; gap: 4px; }
.mobile-menu-lines > span { display: block; width: 20px; height: 2px; background: var(--public-shell-action); transition: transform 0.2s, opacity 0.2s; }
.mobile-menu-toggle.is-open .mobile-menu-lines > span:first-child { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.is-open .mobile-menu-lines > span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open .mobile-menu-lines > span:last-child { transform: translateY(-6px) rotate(-45deg); }

.site-footer { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid rgba(37, 99, 235, 0.14); background: radial-gradient(circle at 8% 6%, rgba(219, 234, 254, 0.58), transparent 30%), radial-gradient(circle at 92% 78%, rgba(224, 242, 254, 0.5), transparent 31%), linear-gradient(180deg, #fff 0%, #fff 58%, #fbfdff 100%); color: var(--public-shell-ink); }
.site-footer::after { position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent 3%, #93c5fd 24%, #2563eb 50%, #93c5fd 76%, transparent 97%); box-shadow: 0 7px 20px rgba(37, 99, 235, 0.16); content: ""; }
.site-footer__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(96, 165, 250, 0.12); filter: blur(55px); pointer-events: none; }
.site-footer__glow--left { left: -180px; top: -120px; }
.site-footer__glow--right { right: -180px; bottom: -160px; }
.site-footer__main { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1.45fr 1.05fr 1.25fr; gap: 32px; width: min(var(--public-shell-max-width), calc(100% - 48px)); margin: auto; padding: 48px 0; }
.site-footer__brand-mark { display: inline-flex; align-items: center; }
.site-footer__brand-mark img { display: block; width: auto; height: 96px; margin: 0; object-fit: contain; }
.site-footer__eyebrow { margin: 18px 0 0; color: var(--public-shell-action); font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.site-footer__description { margin: 16px 0 0; color: #5f6f89; font-size: 14px; line-height: 1.75; }
.site-footer__column { min-width: 0; }
.site-footer__title { position: relative; margin: 0; padding-bottom: 13px; color: var(--public-shell-ink); font-size: 16px; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; }
.site-footer__title::after { position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #60a5fa); content: ""; }
.site-footer__contact-list, .site-footer__quick-links { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.site-footer__contact-list li { display: flex; gap: 12px; color: #5f6f89; font-size: 14px; line-height: 1.55; }
.site-footer__contact-icon { flex: none; width: 20px; color: var(--public-shell-action); font-weight: 900; text-align: center; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer__contact-list a:hover, .site-footer__contact-list a:focus-visible { color: var(--public-shell-action); outline: none; }
.site-footer__quick-link { display: flex; min-height: 34px; align-items: center; gap: 9px; border-radius: var(--public-shell-radius); color: #52627c; font-size: 14px; transition: color 0.2s, transform 0.2s; }
.site-footer__quick-link span { color: var(--public-shell-action); font-size: 20px; transition: transform 0.2s; }
.site-footer__quick-link:hover, .site-footer__quick-link:focus-visible { color: var(--public-shell-action); outline: none; transform: translateX(3px); }
.site-footer__social-card { display: inline-flex; width: 100%; max-width: 230px; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; padding: 16px; border: 1px solid rgba(37, 99, 235, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.8); text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.site-footer__social-card:hover, .site-footer__social-card:focus-visible { outline: none; box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14); transform: translateY(-3px); }
.site-footer__qr { display: grid; width: 152px; height: 152px; place-items: center; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 8px 22px rgba(15, 42, 91, 0.12); }
.site-footer__qr img { display: block; width: 128px; height: 128px; margin: 0; object-fit: contain; }
.site-footer__social-label { color: var(--public-shell-action); font-size: 13px; font-weight: 850; }
.site-footer__bottom { position: relative; z-index: 1; border-top: 1px solid rgba(37, 99, 235, 0.12); color: var(--public-shell-muted); font-size: 13px; }
.site-footer__bottom-inner { display: flex; justify-content: space-between; gap: 20px; width: min(var(--public-shell-max-width), calc(100% - 48px)); margin: auto; padding: 18px 0; }
.site-footer__bottom p { margin: 0; }

@media (max-width: 1180px) {
  .primary-navigation .nav-link { padding-inline: 7px; font-size: 11px; }
  .site-header__actions { display: none; }
}

@media (max-width: 1023px) {
  :root { --public-shell-header-height: 80px; }
  .primary-navigation, .site-header__actions { display: none; }
  .site-header__brand img { height: 64px; }
  .mobile-menu-toggle { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid rgba(37, 99, 235, 0.3); border-radius: var(--public-shell-radius); background: #fff; cursor: pointer; }
  .mobile-header-panel { position: absolute; top: 100%; right: 20px; left: 20px; height: calc(100vh - var(--public-shell-header-height) - 16px); max-height: 780px; overflow: hidden; padding: 12px; border: 1px solid rgba(37, 99, 235, 0.14); border-radius: 12px; background: #fff; box-shadow: 0 22px 42px rgba(37, 99, 235, 0.15); }
  .mobile-header-panel.is-open { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .mobile-header-nav { display: grid; gap: 3px; overflow-y: auto; overscroll-behavior: contain; }
  .mobile-header-link { display: flex; min-height: 42px; align-items: center; padding: 8px 12px; border-radius: var(--public-shell-radius); color: var(--public-shell-ink); font-size: 13px; font-weight: 850; text-decoration: none; text-transform: uppercase; }
  .mobile-header-link:hover, .mobile-header-link:focus-visible, .mobile-header-link.is-active, .mobile-header-group.is-active > .mobile-header-link { background: #eff6ff; color: var(--public-shell-action); outline: none; }
  .mobile-header-subnav { display: grid; margin: 0 0 5px 18px; padding-left: 10px; border-left: 2px solid #dbeafe; }
  .mobile-header-subnav a { padding: 7px 10px; border-radius: 6px; color: var(--public-shell-copy); font-size: 13px; font-weight: 700; text-decoration: none; }
  .mobile-header-subnav a:hover, .mobile-header-subnav a:focus-visible { background: #f8fafc; color: var(--public-shell-action); outline: none; }
  .mobile-header-account { position: relative; z-index: 1; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--public-shell-line); background: #fff; }
  .mobile-header-login { display: inline-flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--public-shell-radius); background: var(--public-shell-action); color: #fff; font: inherit; font-size: 13px; font-weight: 850; text-decoration: none; cursor: pointer; }
  .mobile-header-account__profile { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(37,99,235,.2); border-radius: 10px; background: #fff; color: var(--public-shell-ink); text-decoration: none; }
  .mobile-header-account__logout { display: inline-flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; border: 1px solid rgba(37,99,235,.28); border-radius: var(--public-shell-radius); background: #fff; color: var(--public-shell-action); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
  .site-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 639px) {
  :root { --public-shell-header-height: 64px; }
  .site-header__inner { width: calc(100% - 32px); }
  .site-header__brand img { height: 56px; }
  .mobile-header-panel { right: 12px; left: 12px; }
  .site-footer__main { grid-template-columns: 1fr; width: calc(100% - 32px); gap: 28px; }
  .site-footer__bottom-inner { width: calc(100% - 32px); flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header__brand, .primary-navigation .nav-link, .site-footer__quick-link, .site-footer__social-card { transition: none; }
}

/* Progressive enhancements shared by the React shell and server-rendered news. */
.public-shell-motion .public-shell-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 30px, 0) scale(0.988);
  transition:
    opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity, transform, filter;
}

.public-shell-motion .public-shell-reveal--left {
  transform: translate3d(-42px, 0, 0) scale(0.99);
}

.public-shell-motion .public-shell-reveal--right {
  transform: translate3d(42px, 0, 0) scale(0.99);
}

.public-shell-motion .public-shell-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.page-scroll-progress {
  position: fixed;
  top: 50%;
  right: 12px;
  z-index: 70;
  display: none;
  width: 6px;
  height: 248px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(96,165,250,.2), rgba(37,99,235,.16) 50%, rgba(76,29,149,.2));
  box-shadow: 0 0 0 1px rgba(15,23,42,.08), 0 10px 24px rgba(15,23,42,.12);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(16px, -50%, 0) scaleY(.96);
  transition: opacity 420ms cubic-bezier(.32,.72,0,1), transform 520ms cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(10px);
}

.page-scroll-progress.is-visible {
  opacity: 1;
  transform: translate3d(0, -50%, 0) scaleY(1);
}

.page-scroll-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 48%, #4c1d95 100%);
  box-shadow: 0 0 12px rgba(37,99,235,.5), 0 0 20px rgba(76,29,149,.28);
  transition: height 220ms cubic-bezier(.32,.72,0,1);
}

.page-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 70;
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  padding: 0;
  border: 1px solid #1d4ed8;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1e4f9a);
  color: #fff;
  box-shadow: 0 16px 36px rgba(37,99,235,.28);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(.94);
  transition: opacity 420ms cubic-bezier(.32,.72,0,1), transform 520ms cubic-bezier(.16,1,.3,1), box-shadow 320ms ease;
  cursor: pointer;
}

.page-back-to-top svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.page-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

.page-back-to-top:hover,
.page-back-to-top:focus-visible {
  outline: none;
  box-shadow: 0 22px 48px rgba(37,99,235,.34), 0 0 0 6px rgba(37,99,235,.08);
  transform: translate3d(0, -5px, 0) scale(1.035);
}

@media (min-width: 1024px) {
  .page-scroll-progress { display: block; }
}

@media (max-width: 767px) {
  .public-shell-motion .public-shell-reveal--left,
  .public-shell-motion .public-shell-reveal--right {
    transform: translate3d(0, 22px, 0) scale(.99);
  }

  .page-back-to-top {
    right: 14px;
    bottom: 18px;
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-shell-motion .public-shell-reveal,
  .public-shell-motion .public-shell-reveal--left,
  .public-shell-motion .public-shell-reveal--right,
  .public-shell-motion .public-shell-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .page-scroll-progress,
  .page-scroll-progress__bar,
  .page-back-to-top {
    transition: none;
  }
}