.mission {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 244, 223, 0.5), transparent 26%),
    linear-gradient(180deg, rgba(242, 235, 224, 0.84) 0%, rgba(253, 251, 247, 0.96) 58%, rgba(238, 230, 218, 0.92) 100%);
  padding: 140px 0;
}

.mission::before,
.mission::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.mission::before {
  inset: 14% 12%;
  border: 1px solid rgba(var(--accent-rgb), 0.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  opacity: 0.24;
  animation: sectionTextureDrift 18s ease-in-out infinite;
}

.mission::after {
  left: 50%;
  top: 50%;
  width: clamp(320px, 44vw, 720px);
  height: clamp(320px, 44vw, 720px);
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.12), transparent 54%),
    radial-gradient(circle at 50% 50%, rgba(255, 248, 236, 0.72), transparent 34%);
  filter: blur(8px);
  animation: sectionAura 17s ease-in-out infinite;
}

.mission-wrapper {
  background: var(--bg);
  padding: 80px 40px;
  border-radius: var(--radius-sm);
  /* Stand out like a massive monolith block */
  box-shadow: var(--shadow-lg), var(--shadow-carved-out);
  position: relative;
  overflow: hidden;
}

.mission-wrapper::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid var(--bg2);
  /* Chiseled inner border */
  box-shadow: var(--shadow-carved-in);
  pointer-events: none;
}

.mission-statement {
  /* Embossed text */
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}
