/* SECTIONS */
section { padding: 120px 60px; }
.section-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
/* PAGE FLOW — one continuous background gradient running the full height of
   About→Footer. Every section inside it is transparent, so there is never a
   hard color seam anywhere: the whole stretch reads as a single surface that
   happens to pass through a cool tone, a warm sunrise, and back again. This
   replaces the old per-section blend patches, which could only ever soften a
   seam, not remove it. */
#pageFlow {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--bg)       0%,   /* matches the color hero's own overlay fades to, right at the seam */
    var(--bg-alt)   2%,
    var(--bg-alt)   5%,
    var(--bg)       10%,
    var(--bg)       26%,
    var(--bg-alt)   36%,
    var(--bg-alt)   49%,
    #FBF2E4         58%,
    #F8E8D1         65%,
    #F5DCB9         71%,
    #F0CBA1         77%,
    #DCC7B4         83%,
    var(--bg-alt)   90%,
    var(--bg-alt)   96%,
    var(--bg)       100%
  );
}
.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
  display: block;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 32px;
  overflow: hidden;
}
.title-inner {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 0.9s cubic-bezier(.16,1,.3,1);
}
.section-title.title-visible .title-inner { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .title-inner { transform: none; }
}
.divider {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  box-shadow: 0 0 10px rgba(63,113,150,0.5);
  margin-bottom: 48px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1) 0.15s;
  position: relative;
}
.divider.grow { transform: scaleX(1); }
.divider::after {
  content: '';
  position: absolute;
  left: -3px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-bright);
  transform: translateY(-50%) scale(0);
  transition: transform 0.4s ease 0.8s;
}
/* pops in, then continuously slides back and forth along the line */
.divider.grow::after {
  transform: translateY(-50%) scale(1);
  animation: dividerDotSlide 3.2s ease-in-out infinite 1.2s;
}
@keyframes dividerDotSlide {
  0%, 100% { left: -3px; }
  50%      { left: calc(100% - 3px); }
}
@media (prefers-reduced-motion: reduce) { .divider.grow::after { animation: none; } }

/* AMBIENT BACKGROUND ORBS (shared by About / Capabilities / Philosophy) */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  animation: orbDrift 18s ease-in-out infinite alternate;
}
.bg-orb-a {
  width: 420px; height: 420px;
  top: -12%; left: -10%;
  background: radial-gradient(circle, rgba(63,113,150,0.55) 0%, rgba(63,113,150,0) 70%);
  animation-duration: 19s;
}
.bg-orb-b {
  width: 360px; height: 360px;
  bottom: -14%; right: -8%;
  background: radial-gradient(circle, rgba(47,92,121,0.5) 0%, rgba(47,92,121,0) 70%);
  animation-duration: 23s;
  animation-delay: -6s;
}
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(7%, -8%) scale(1.18); }
}
@media (prefers-reduced-motion: reduce) { .bg-orb { animation: none; } }

/* REVEAL ANIMATIONS (generic on-scroll fade/rise; per-component entrance
   variants — sliding in from a side, staggered stats, etc. — live in that
   component's own stylesheet and override this by specificity) */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }