/* ============================================================
   OII4 SECTION SYSTEM
============================================================ */

.oii-section-head {
  max-width: 820px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.oii-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.oii-section-head h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -.065em;
}

.oii-section-head p {
  max-width: 680px;
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 1.06rem;
  line-height: 1.8;
}

.oii-section-head--center p {
  margin-inline: auto;
}

.oii-surface-soft {
  background:
    radial-gradient(circle at 0% 0%, rgba(185,120,79,.10), transparent 34%),
    var(--surface-soft);
}

.oii-surface-dark {
  background:
    radial-gradient(circle at 10% 0%, rgba(185,120,79,.18), transparent 34%),
    linear-gradient(135deg, var(--oii-ink), var(--oii-navy) 62%, var(--oii-blue));
  color: var(--text-inverse);
}

.oii-surface-dark h1,
.oii-surface-dark h2,
.oii-surface-dark h3 {
  color: var(--text-inverse);
}

.oii-surface-dark p {
  color: var(--text-inverse-soft);
}

.oii-editorial-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.oii-editorial-grid--reverse {
  grid-template-columns: 1.1fr .9fr;
}

.oii-framed-section {
  position: relative;
  overflow: hidden;
}

.oii-framed-section::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  pointer-events: none;
}

.oii-framed-section > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  .oii-editorial-grid,
  .oii-editorial-grid--reverse {
    grid-template-columns: 1fr;
  }
}