:root {
  /* Brand */
  --blue-900: #003c8f;
  --blue-800: #004fa8;
  --blue-700: #0066c8;
  --blue-600: #0a78dc;
  --blue-100: #e9f1fb;
  --slate-950: #101826;
  --slate-800: #21324a;
  --slate-700: #35506f;
  --slate-500: #6b809d;
  --white: #ffffff;

  /* Semantic colors */
  --color-bg: #f3f7fc;
  --color-text: var(--slate-950);
  --color-text-soft: #4f6683;
  --color-text-muted: var(--slate-500);
  --color-inverse: var(--white);
  --color-border: #d2deec;
  --color-panel: var(--white);
  --color-accent: var(--blue-700);
  --color-accent-dark: var(--blue-900);
  --color-accent-soft: var(--blue-100);

  /* Layout */
  --container: 1220px;
  --section-py: 4.2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;

  /* Radius + effects */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-soft: 0 16px 34px rgba(17, 40, 74, 0.16);

  /* Gradients */
  --gradient-brand: linear-gradient(120deg, var(--blue-900), var(--blue-700));
  --gradient-brand-alt: linear-gradient(110deg, var(--blue-900), var(--blue-700));
  --gradient-page-hero: linear-gradient(120deg, #0f315f, #1158a0);
  --hero-overlay: linear-gradient(95deg, rgba(9, 24, 45, 0.75) 0%, rgba(9, 24, 45, 0.48) 52%, rgba(9, 24, 45, 0.25) 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: "Montserrat", "Segoe UI", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(100% - var(--space-7), var(--container));
  margin-inline: auto;
}

.topbar {
  background: var(--gradient-brand);
  color: var(--color-inverse);
}

.topbar-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  font-weight: 700;
  flex-wrap: wrap;
}

.topbar small {
  width: 100%;
  text-align: center;
  opacity: 0.9;
  font-weight: 500;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.logo img { height: 48px; width: auto; }

.menu-toggle {
  margin-left: auto;
  display: none;
  border: 1px solid #adc0d9;
  color: var(--color-accent-dark);
  background: var(--color-inverse);
  border-radius: var(--radius-sm);
  padding: 0.46rem 0.7rem;
  font-weight: 700;
}

.main-nav {
  margin-left: 0.35rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.9rem;
}

.main-nav a,
.drop-toggle {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #17314f;
}

.main-nav a.active,
.main-nav a:hover,
.drop-toggle:hover,
.drop-toggle.active { color: var(--color-accent); }

.dropdown { position: relative; }

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--color-inverse);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 0.45rem;
}

.dropdown:hover .dropdown-menu,
.dropdown.open .dropdown-menu { display: block; }

.dropdown-menu a {
  display: block;
  padding: 0.52rem 0.62rem;
  border-radius: 7px;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.hero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--hero-overlay);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.28), transparent 70%);
}

.hero-content {
  position: relative;
  z-index: 1;
  color: var(--color-inverse);
  max-width: 760px;
  padding: 5.2rem 0 3.8rem;
}

.hero-cta { margin-top: 1.2rem; }

.kicker {
  margin: 0;
  color: #9fd2ff;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.78rem;
  font-weight: 700;
}

.hero h1 {
  margin: 0.35rem 0 1rem;
  font-size: clamp(2.1rem, 6vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.hero p {
  margin: 0;
  max-width: 56ch;
  color: #d4e5f8;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0.74rem 1.15rem;
  border: 1px solid transparent;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.btn-blue { background: var(--color-accent); color: var(--color-inverse); }
.btn-dark { background: #0e2747; color: var(--color-inverse); }

.section { padding: var(--section-py) 0; }
.section-white { background: var(--color-inverse); }
.section-soft { background: #edf3fa; }

.section-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
  color: #0e2340;
}

.section-head p {
  margin: 0.65rem 0 0;
  max-width: 70ch;
  color: var(--color-text-soft);
}

.cards {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-panel);
}

.card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.card-body { padding: var(--space-4); }

.card h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: #0e2340;
}

.card p { margin: 0.55rem 0 0.85rem; color: #4d6482; }

.feature-grid {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

.feature-large {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}

.feature-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-overlay {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  max-width: 72%;
  background: linear-gradient(120deg, rgba(0, 60, 143, 0.95), rgba(10, 120, 220, 0.94));
  color: var(--color-inverse);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

.feature-overlay-title { margin: 0; text-transform: uppercase; }
.feature-overlay-text { margin: 0.45rem 0 0.7rem; }

.feature-list { display: grid; gap: 0.8rem; }

.feature-item {
  background: #0f3e78;
  color: #d8ebff;
  border-radius: var(--radius-md);
  padding: 0.9rem;
}

.feature-item h4 {
  margin: 0;
  color: var(--color-inverse);
  font-size: 1rem;
  text-transform: uppercase;
}

.feature-item p { margin: 0.4rem 0 0; }

.band {
  background: var(--gradient-brand-alt);
  color: var(--color-inverse);
  text-align: center;
}

.band h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 2.9rem);
  text-transform: uppercase;
}

.band p {
  margin: 0.85rem auto 0;
  max-width: 82ch;
  color: #d7e9ff;
}

.page-hero {
  background: var(--gradient-page-hero);
  color: var(--color-inverse);
  padding: 3rem 0;
}

.page-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.7rem);
  text-transform: uppercase;
}

.page-hero p {
  margin: 0.7rem 0 0;
  max-width: 70ch;
  color: #d9e9ff;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-4);
}

.panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-panel);
  padding: 1.15rem;
}

.panel h2 {
  margin: 0.1rem 0 0.6rem;
  color: #123257;
  text-transform: uppercase;
}

.panel p { color: #49617d; }

.team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.person {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.9rem;
}

.person img {
  width: 130px;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.tags span {
  background: var(--color-accent-soft);
  border: 1px solid #c3d7ed;
  color: #0f3a71;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.6rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 700;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid #bfd0e6;
}

.text-page { padding: 2.3rem 0 3.4rem; }
.text-page .panel { max-width: 980px; }

.text-page h2 {
  margin: 0.2rem 0 0.55rem;
  text-transform: uppercase;
  color: #123257;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-4);
}

.field {
  width: 100%;
  min-height: 48px;
  border: 1px solid #bfd0e6;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font: inherit;
}

textarea.field {
  min-height: 130px;
  resize: vertical;
}

.form-row {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.field-mt { margin-top: 0.8rem; }
.form-submit { margin-top: 0.9rem; }
.land-cta { margin-top: 1rem; }

.notice {
  margin-top: 0.7rem;
  color: #4e6583;
}

.iframe-box {
  min-height: 540px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-inverse);
  overflow: hidden;
}

.iframe-box iframe {
  width: 100%;
  min-height: 540px;
  border: 0;
}

.iframe-placeholder {
  min-height: 540px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #526a89;
  padding: var(--space-7);
}

.site-footer {
  margin-top: 3rem;
  background: #0d2d54;
  color: #d8eaff;
}

.footer-inner { padding: 1.6rem 0 1.15rem; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
}

.footer-bottom {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: 0.42s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1040px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid,
  .grid-2,
  .team,
  .contact-grid,
  .gallery { grid-template-columns: 1fr; }
  .feature-overlay { max-width: 90%; }
}

@media (max-width: 760px) {
  .menu-toggle { display: inline-flex; }
  .header-inner { min-height: 78px; flex-wrap: wrap; }
  .logo img { height: 42px; }

  .main-nav {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    border-top: 1px solid var(--color-border);
    padding: 0.65rem 0 0.95rem;
  }

  .main-nav.open { display: flex; }
  .dropdown-menu { position: static; min-width: 100%; margin-top: 0.35rem; }
  .cards,
  .form-row { grid-template-columns: 1fr; }
  .hero { min-height: 460px; }
}