:root {
  --about-ink: #0f2233;
  --about-muted: #4e6476;
  --about-brand: #005a9c;
  --about-brand-deep: #003f72;
  --about-surface: #f6fafc;
  --about-border: #d6e1ea;
}

body[data-page="about-us"] {
  color: var(--about-ink);
  background-color: #ffffff;
}

@keyframes about-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-reveal {
  animation: about-fade-up 560ms ease both;
}

.about-stagger-grid .col {
  animation: about-fade-up 520ms ease both;
}

.about-stagger-grid .col:nth-child(1) { animation-delay: 60ms; }
.about-stagger-grid .col:nth-child(2) { animation-delay: 110ms; }
.about-stagger-grid .col:nth-child(3) { animation-delay: 160ms; }
.about-stagger-grid .col:nth-child(4) { animation-delay: 210ms; }
.about-stagger-grid .col:nth-child(5) { animation-delay: 260ms; }
.about-stagger-grid .col:nth-child(6) { animation-delay: 310ms; }
.about-stagger-grid .col:nth-child(7) { animation-delay: 360ms; }
.about-stagger-grid .col:nth-child(8) { animation-delay: 410ms; }

.about-hero {
  color: #ffffff;
  background: radial-gradient(circle at 10% 20%, #2c688c 0%, #0f334f 45%, #0a2237 100%);
}

.about-breadcrumb {
  font-size: 1.0rem;
  color: #ffffff;
  letter-spacing: 0.01em;
}

body[data-page="about-us"] .about-breadcrumb,
body[data-page="about-us"] .about-breadcrumb span,
body[data-page="about-us"] .about-breadcrumb i,
body[data-page="about-us"] .about-breadcrumb a {
  color: #ffffff;
  font-size: 1.0rem;
}

body[data-page="about-us"] .about-breadcrumb a:hover,
body[data-page="about-us"] .about-breadcrumb a:focus-visible {
  color: #ffffff;
  font-size: 1.0rem;
}

.about-chip {
  color: #0b3858 !important;
  background-color: #ecf5fb !important;
  border: 1px solid #b5d5ea;
  font-weight: 600;
}

.about-hero-brand {
  border-radius: 0.9rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(2px);
}

.about-hero-logo {
  max-width: 320px;
}

.about-hero .display-6 {
  text-wrap: balance;
}

.about-content-section {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.about-panel {
  border: 1px solid var(--about-border);
  border-radius: 0.9rem;
  background: #ffffff;
}

.about-panel--accent {
  background: linear-gradient(175deg, #f3f9fe 0%, #e9f3fb 100%);
}

.about-number-list {
  padding-left: 1.25rem;
}

.about-number-list li {
  margin-bottom: 0.65rem;
}

.about-number-list li:last-child {
  margin-bottom: 0;
}

.about-functions {
  color: #ffffff;
  background: linear-gradient(145deg, #0a304d 0%, #103956 55%, #16486d 100%);
}

.about-function-item {
  height: 100%;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.about-person-card {
  border: 1px solid var(--about-border);
  border-radius: 0.85rem;
  overflow: hidden;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.about-person-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.2rem rgba(15, 34, 51, 0.14) !important;
}

.about-person-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

.about-person-card .card-body {
  display: flex;
  flex-direction: column;
  min-height: 132px;
}

body[data-page="about-us"] main .about-hero a,
body[data-page="about-us"] main .about-functions a {
  color: #ffffff !important;
}

body[data-page="about-us"] main .about-hero a:hover,
body[data-page="about-us"] main .about-hero a:focus-visible,
body[data-page="about-us"] main .about-functions a:hover,
body[data-page="about-us"] main .about-functions a:focus-visible {
  color: #d7e9f8;
}

body[data-page="about-us"] a:focus-visible,
body[data-page="about-us"] button:focus-visible,
body[data-page="about-us"] [tabindex]:focus-visible {
  outline: 3px solid #ffd54d;
  outline-offset: 3px;
  border-radius: 0.2rem;
}

@media (max-width: 991px) {
  .about-content-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .about-hero-logo {
    max-width: 260px;
  }

  .about-hero {
    background: radial-gradient(circle at 15% 10%, #2a6689 0%, #0f334f 52%, #0b2338 100%);
  }
}

@media (max-width: 576px) {
  .about-number-list {
    padding-left: 1.1rem;
  }

  .about-person-card .card-body {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-reveal,
  .about-stagger-grid .col,
  .about-person-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}