.parallax-section { position: relative; overflow: hidden; }
.parallax-container { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.parallax-section { overflow: visible; }
.parallax-layer { position: absolute; left: 0; width: 100%; will-change: transform; transform: translate3d(0,0,0); pointer-events: none; }
.parallax-layer img { display: block; width: 100%; height: auto; }
.parallax-container { overflow: visible; }

/* Make the last (layer 4) image 40% smaller (preferred 60% width) but
   never smaller than half the viewport width */
.parallax-layer--small img {
  width: clamp(50vw, 60%, 100%);
  margin-left: 0; /* stick to left */
  margin-right: auto;
}

/* Right-aligned small layer */
.parallax-layer--small-right img {
  width: clamp(50vw, 60%, 100%);
  margin-left: auto;
  margin-right: 0; /* stick to right */
}

/* Hero title sizing */
.parallax-overlay h1 {
  /* smaller default, scales with viewport but stays compact on phones */
  font-size: clamp(20px, 5.5vw, 40px);
  line-height: 1.06;
  margin-bottom: 0.5rem;
}

/* paragraph sizing for hero text */
.parallax-overlay p {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.5;
}

/* hero lead paragraph — constrain width and ensure minimum font size on very small viewports */
.parallax-overlay .hero-lead {
  max-width: 50vw;
}

@media (max-width: 480px) {
  .parallax-overlay .hero-lead { max-width: 90vw; }
}

/* Particles layer: full-width canvas, keep pointer-events off */
.parallax-layer--particles {
  pointer-events: none;
  position: absolute;
  inset: 0; /* cover full container */
  width: 100%;
  height: 100%;
}
.parallax-layer--particles { pointer-events: none; }
.parallax-layer--particles canvas { display: block; width: 100%; height: 100%; }
.parallax-overlay { position: relative; z-index: 1000; color: white; text-align: left; }
.parallax-section .inner { position: relative; z-index: 1000; padding-top: 8vh; padding-bottom: 8vh; }

/* Slight dark overlay to improve text contrast */
.parallax-section::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 999; pointer-events: none; }

.parallax-overlay { position: relative; z-index: 4; color: white; text-align: left; }
.parallax-section .inner { position: relative; z-index: 4; padding-top: 8vh; padding-bottom: 8vh; }
.parallax-section::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 3; pointer-events: none; }
/* Responsive tweaks */
@media (max-width: 800px) {
  .parallax-section .inner { padding: 4vh 2rem; text-align: center; }
  .parallax-overlay p { max-width: 90vw; margin: 0 auto; }
}

@media (max-width: 480px) {
  .parallax-overlay h1 { font-size: 18px; }
  .parallax-overlay p { font-size: 14px; }
  .parallax-section .inner { padding-top: 6vh; padding-bottom: 6vh; }
}

/* Force-show sidebar nav when JS hasn't removed the preload class (defensive fix) */
body.is-preload #sidebar>.inner { opacity: 1 !important; transform: none !important; }
body.is-preload #sidebar nav ul li { opacity: 1 !important; transform: none !important; }