/* ---------- Page Hero ---------- */
.page-hero {
  padding: 100px 0 60px;
  text-align: center;
  background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);
  border-bottom: 1px solid var(--border);
}

.page-hero h1 {
  font-size: clamp(2.4rem, 4.5vw + 1rem, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 16px auto 24px;
  max-width: 18ch;
}

.page-hero h1 em {
  font-style: normal;
  color: var(--moss);
}

.page-hero p.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto;
}

/* ---------- Layout Grids ---------- */
.story-section { padding: 96px 0; background: var(--white); }
.leadership-section { padding: 96px 0; background: var(--cream); }
.gallery-section { padding: 96px 0; background: var(--white); }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Flips the order for alternating layout */
.story-grid.inverse .story-content {
  order: 2;
}
.story-grid.inverse .story-visual {
  order: 1;
}

.story-content h2 {
  font-size: clamp(2rem, 3vw + 1rem, 2.8rem);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.story-content p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.7;
}

.story-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .story-grid, .story-grid.inverse { 
    grid-template-columns: 1fr; 
    gap: 40px; 
  }
  .story-grid.inverse .story-content { order: 1; }
  .story-grid.inverse .story-visual { order: 2; }
}

/* ---------- Image Placeholders ---------- */
.img-placeholder {
  width: 100%;
  background: var(--cream);
  border: 1.5px dashed var(--stone);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.2rem;
  position: relative;
  overflow: hidden;
}

.img-placeholder small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 8px;
}

/* Aspect Ratios for distinct visuals */
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-square { aspect-ratio: 1 / 1; }

/* When you add an actual img tag inside the placeholder later */
.img-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px; /* Slightly smaller to sit inside the border if you keep it */
}

/* ---------- Infrastructure Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.gallery-grid .img-placeholder {
  aspect-ratio: 4 / 3;
}

/* Stagger the animations slightly */
.delay-1 { transition-delay: 0s; }
.delay-2 { transition-delay: 0.15s; }
.delay-3 { transition-delay: 0.3s; }

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .delay-2, .delay-3 { transition-delay: 0s; } /* Remove delay on mobile stacking */
}