.intro-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(148px, 15vw, 228px) clamp(82px, 8vw, 116px);
  background: #ffffff;
  color: var(--ink);
}

.intro-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(112px, 13vw, 168px);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.84) 0%, rgba(255, 255, 255, 0.98) 78%, #ffffff 100%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, transparent 100%) 0 32px / 180% 1px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(182, 66, 58, 0.1) 54%, transparent 100%) 0 54px / 160% 1px no-repeat;
  opacity: 0.58;
  animation: aboutBoundarySweep 9s ease-in-out infinite;
  pointer-events: none;
}

.intro-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(25, 26, 29, 0.032) 1px, transparent 1px),
    linear-gradient(180deg, rgba(25, 26, 29, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 66%, rgba(25, 26, 29, 0.05) 66.1% 66.3%, transparent 66.4% 100%),
    linear-gradient(180deg, transparent 0 38%, rgba(25, 26, 29, 0.042) 38.1% 38.3%, transparent 38.4% 100%),
    linear-gradient(90deg, transparent 0 78%, rgba(25, 26, 29, 0.034) 78.1% 78.2%, transparent 78.3% 100%),
    linear-gradient(180deg, transparent 0 72%, rgba(25, 26, 29, 0.03) 72.1% 72.2%, transparent 72.3% 100%),
    linear-gradient(126deg, transparent 0 56%, rgba(25, 26, 29, 0.04) 56.1% 56.3%, transparent 56.4% 100%),
    linear-gradient(0deg, rgba(25, 26, 29, 0.028), rgba(25, 26, 29, 0.028)) 72% 34% / 180px 96px no-repeat,
    linear-gradient(0deg, rgba(25, 26, 29, 0.024), rgba(25, 26, 29, 0.024)) 64% 64% / 210px 110px no-repeat,
    linear-gradient(0deg, rgba(25, 26, 29, 0.02), rgba(25, 26, 29, 0.02)) 18% 22% / 120px 68px no-repeat,
    radial-gradient(circle at 72% 34%, rgba(25, 26, 29, 0.18) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 82% 62%, rgba(25, 26, 29, 0.14) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 64% 64%, rgba(25, 26, 29, 0.14) 0 1.5px, transparent 1.8px),
    radial-gradient(circle at 18% 22%, rgba(25, 26, 29, 0.14) 0 1.5px, transparent 1.8px);
  background-size:
    84px 84px,
    84px 84px,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto,
    auto;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    72% 34%,
    64% 64%,
    18% 22%,
    0 0,
    0 0,
    0 0,
    0 0;
  opacity: 0.74;
  animation: aboutGridDrift 18s linear infinite;
  pointer-events: none;
}

.two-column {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  gap: clamp(56px, 8vw, 112px);
  align-items: start;
}

.two-column > :first-child {
  position: relative;
  z-index: 3;
}

.intro-section h2 {
  max-width: 520px;
  color: var(--ink);
  font-size: clamp(1.8rem, 2.8vw, 2.85rem);
  line-height: 1.35;
  letter-spacing: 0;
}

.body-copy {
  position: relative;
  max-width: 660px;
  padding: 2px 0 2px clamp(24px, 3vw, 40px);
  border-left: 1px solid rgba(25, 26, 29, 0.18);
  background: transparent;
  box-shadow: none;
  color: #4d5358;
  font-size: 0.96rem;
  line-height: 2;
}

.body-copy p {
  margin: 0;
}

.body-copy p + p {
  margin-top: 22px;
}

@keyframes aboutBoundarySweep {
  0%,
  100% {
    background-position: 0 0, -24% 32px, 116% 54px;
  }

  50% {
    background-position: 0 0, 124% 32px, -18% 54px;
  }
}

@keyframes aboutGridDrift {
  from {
    background-position:
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      0 0,
      72% 34%,
      64% 64%,
      18% 22%,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      84px 0,
      0 84px,
      12px 0,
      0 10px,
      -10px 0,
      0 -12px,
      18px -12px,
      calc(72% + 10px) calc(34% - 6px),
      calc(64% - 12px) calc(64% + 8px),
      calc(18% + 8px) calc(22% - 6px),
      10px -6px,
      -8px 10px,
      12px -8px,
      -10px 6px;
  }
}

@media (max-width: 920px) {
  .two-column {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (max-width: 640px) {
  .intro-section {
    padding-block: 88px 56px;
  }

  .intro-section::before {
    height: 104px;
  }

  .two-column {
    gap: 30px;
  }

  .intro-section h2 {
    max-width: 100%;
    font-size: clamp(1.34rem, 6vw, 1.82rem);
    line-height: 1.48;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .body-copy {
    max-width: 100%;
    padding-left: 16px;
    font-size: 0.9rem;
    line-height: 1.86;
    word-break: normal;
  }

  .body-copy p + p {
    margin-top: 18px;
  }
}

@media (max-width: 360px) {
  .body-copy {
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-section::before,
  .intro-section::after {
    animation: none;
  }
}