/* ==========================================================================
   Home page
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

.hero-content {
  /* margin-top (not padding-top on .hero) guarantees clearance under the
     fixed header no matter how tall the content gets (long headline
     wraps, short viewport, etc). When content + margin exceeds the
     container's 100vh min-height, the container grows to fit it exactly,
     so the item's margin-box top lands at the container's true top edge
     -- which pushes the actual content down by margin-top, never letting
     it render above the header. Padding on .hero itself would do the
     same for the content but would also shift hero-media's containing
     block (it's absolutely positioned against .hero's padding box),
     leaving a gap in the full-bleed background image -- margin on the
     item avoids that entirely. */
  margin-top: 128px;
  padding-bottom: var(--space-12);
  max-width: 860px;
}

.hero-content h1 {
  font-size: var(--fs-hero);
  line-height: 1.16;
  color: var(--color-white);
  margin-block: var(--space-6) var(--space-7);
  max-width: 17ch;
}

.eyebrow--light {
  color: var(--color-gold-400);
}

.lead--light {
  color: rgba(255, 255, 255, 0.82);
  max-width: 54ch;
  margin-bottom: var(--space-8);
}

.hero-scroll-cue {
  position: absolute;
  right: var(--space-7);
  bottom: var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero-scroll-cue span {
  width: 1px;
  height: 42px;
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.hero-scroll-cue span::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-gold-400);
  animation: scrollcue 2.2s ease-in-out infinite;
}

@keyframes scrollcue {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 720px) {
  .hero-scroll-cue { display: none; }
}

/* ---- Value list ---- */
.value-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-7);
}

.value-list li {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.value-list h4 {
  margin-bottom: var(--space-1);
}

.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4/5;
}

/* ---- Pillars (dark grid) ---- */
.pillar {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-on-dark);
}

.pillar-index {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gold-400);
  margin-bottom: var(--space-4);
}

.pillar h3 {
  margin-bottom: var(--space-3);
}

/* ---- Global vision full-bleed ---- */
.global-vision {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-12);
  overflow: hidden;
}

.global-vision > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.global-vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8,24,20,0.94) 0%, rgba(8,24,20,0.6) 55%, rgba(8,24,20,0.85) 100%);
  z-index: -1;
}

.global-vision-content {
  max-width: 680px;
}

.global-vision-content h2 {
  color: var(--color-white);
  margin-bottom: var(--space-5);
}