/* ========================================
   SECTION CONTAINERS & SHARED STYLES
   ======================================== */

/* --- Full-height sections with flex centering --- */
.sec, .sec-dark, .sec-mint, .sec-lav, .jsec {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
  box-sizing: border-box;
  border: none !important;
}

.sec { padding: 100px 80px; max-width: 100%; background: var(--light); color: var(--text-primary); }
.sec .inner, .sec > div { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; }
.sec-dark { position: relative; background: var(--dark); color: var(--text-on-dark); padding: 100px 80px; }
.sec-dark .inner { max-width: 1100px; margin: 0 auto; }
.sec-mint { background: var(--soft-mint); padding: 100px 80px; }
.sec-mint .inner { max-width: 1100px; margin: 0 auto; }
.sec-lav { background: var(--soft-lav); padding: 100px 80px; }
.sec-lav .inner { max-width: 1100px; margin: 0 auto; }

/* Kill all pseudo-element borders/gradients between sections */
.sec::before, .sec::after,
.sec-dark::before, .sec-dark::after,
.sec-mint::before, .sec-mint::after,
.sec-lav::before, .sec-lav::after,
.jsec::before, .jsec::after,
.pillars-sec::before, .pillars-sec::after,
.diff-sec::before, .diff-sec::after {
  display: none !important;
}

/* Section Labels / Titles / Descriptions */
.sl {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--mint); margin-bottom: 14px; text-align: center;
}
.st {
  font-family: 'Newsreader', serif;
  font-size: clamp(32px, 4vw, 48px); font-weight: 400;
  line-height: 1.15; margin-bottom: 20px; text-align: center;
}
.st em { font-style: italic; font-weight: 600; }
.sec-dark .st em, .pillars-sec .st em, .diff-sec .st em, .jsec .st em { color: var(--mint); }
.sd {
  font-size: 17px; max-width: 680px; line-height: 1.75;
  margin-bottom: 56px; text-align: center; margin-left: auto; margin-right: auto;
}
.sec-dark .sd { color: var(--text-on-dark-muted); }
.ld { color: var(--text-secondary); }

/* Reveal Animations — handled by GSAP ScrollTrigger (js/gsap-animations.js) */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  will-change: opacity, transform;
}
/* No-JS fallback */
.no-js .reveal, .no-js .reveal-left, .no-js .reveal-right, .no-js .reveal-scale {
  opacity: 1 !important; transform: none !important;
}