:root {
  --ink: #202733;
  --primary: #0078C8;
  --primary-dark: #005fa0;
  --teal: #24A7A1;
  --proof: #D7A84F;
  --surface: #F4F8FB;
  --surface-alt: #f6fafd;
  --line: #D9E2EA;
  --muted: #5f6b77;
}

html { scroll-behavior: smooth; }
body {
  font-family: Inter, "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
.site-prose a, .site-block a, .site-category-meta a, .site-paragraph a {
  color: var(--primary-dark);
  text-decoration: underline;
  text-decoration-color: rgba(0, 120, 200, .35);
  text-underline-offset: .18em;
}
.site-prose a:hover, .site-block a:hover, .site-category-meta a:hover { color: var(--teal); }

.site-header { position: sticky; top: 0; z-index: 1030; }
.site-navbar { min-height: 64px; box-shadow: 0 12px 32px rgba(32,39,51,.06); }
.site-header { background: #FFFFFF; border-color: var(--line); }
.navbar-toggler { background: var(--primary); border-color: var(--primary); }
.navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
.navbar-brand { font-weight: 700; color: var(--primary-dark); }
.brand-mark {
  width: 40px; height: 40px; border: 2px solid var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: var(--primary);
  background: var(--surface-alt);
}
.nav-link { font-weight: 600; color: #404751; }
.nav-link:hover, .dropdown-item:hover { color: var(--primary); }
.site-overflow-menu { max-height: 70vh; overflow: auto; min-width: 320px; }

.site-hero {
  position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden;
  background: var(--surface);
}
.site-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(246,250,253,.98) 0%, rgba(246,250,253,.9) 48%, rgba(246,250,253,.18) 100%);
}
.site-hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site-hero-content { position: relative; z-index: 2; }
.eyebrow {
  display: inline-block; padding: .35rem .75rem; background: rgba(36,167,161,.15);
  color: #006a66; font-weight: 600; margin-bottom: 1rem; border: 1px solid rgba(36,167,161,.25);
}
.display-title { font-size: clamp(2.1rem, 4vw, 3.7rem); line-height: 1.08; font-weight: 700; max-width: 850px; border-bottom: 4px solid var(--proof); padding-bottom: .75rem; }
.hero-form, .site-panel {
  background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(32,39,51,.14);
  border-radius: 8px;
}
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }

.section-band { padding: 72px 0; }
.section-band.alt { background: var(--surface); }
.stat-card, .feature-card, .service-chip, .site-card {
  border: 1px solid var(--line); background: #fff; border-radius: 8px; box-shadow: 0 12px 32px rgba(32,39,51,.06);
}
.stat-card { padding: 1.4rem; text-align: center; }
.stat-card strong { display: block; color: var(--primary); font-size: 2rem; line-height: 1; }
.feature-card { padding: 1.4rem; height: 100%; }
.feature-card .icon-dot { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,120,200,.12); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; }
.service-chip { padding: .9rem 1rem; display: block; height: 100%; }
.timeline-list { position: relative; }
.timeline-item { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.timeline-number { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

.site-main { padding: 48px 0 72px; }
.site-breadcrumbs { margin-bottom: 1.5rem; font-size: .92rem; }
.article-shell { padding: 48px 0 72px; background: linear-gradient(180deg, var(--surface-alt), #fff 240px); }
.site-prose { max-width: 980px; margin: 0 auto; }
.site-prose h1 { font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.12; font-weight: 700; margin-bottom: 1.5rem; border-bottom: 4px solid var(--proof); padding-bottom: .6rem; }
.site-prose h2, .site-prose h3, .site-heading { margin-top: 2rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.2; color: var(--teal); }
.site-block { margin-bottom: 1.25rem; }
.site-paragraph { color: #34404c; }
.site-image img, .site-gallery img, .site-card img, .site-main-image { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.site-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.site-gallery figure { margin: 0; }
.site-list li { margin-bottom: .45rem; }
.site-card { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 1rem; padding: 1rem; }
.table { background: #fff; }
.site-toc { border: 1px solid var(--line); background: #fff; padding: 1rem; border-radius: 8px; }
.site-toc ul { margin: 0; padding-left: 1.1rem; }

.site-footer { background: #171c1f; color: #edf1f4; padding: 48px 0; }
.footer-brand { font-size: 1.25rem; font-weight: 700; color: #fff; }
.footer-note { color: #b9c3cc; margin-top: 1rem; }
.footer-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; }
.footer-link-grid a, .footer-social a { color: #dfe7ee; font-size: .95rem; }
.footer-link-grid a:hover, .footer-social a:hover { color: #82f5ee; }
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-social a { border: 1px solid rgba(255,255,255,.22); padding: .35rem .6rem; border-radius: 4px; }

@media (max-width: 991.98px) {
  .site-hero { min-height: auto; padding: 72px 0 48px; }
  .site-hero::before { background: rgba(246,250,253,.92); }
  .display-title { font-size: 2.1rem; }
  .site-card { grid-template-columns: 1fr; }
  .footer-link-grid { grid-template-columns: 1fr; }
}
