/* Keep the introduction anchored to the page gutter across wide screens. */
.landuse-page-v2 .lu-hero { position: relative; isolation: isolate; display: flex; flex-direction: row; align-items: center; justify-content: center; height: auto; min-height: min(900px, calc(100svh - var(--site-header-height, 80px))); padding: clamp(56px, 7vh, 96px) var(--page-gutter); background: #062724; }
.landuse-page-v2 .lu-hero-content { flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding: 0; }
.landuse-page-v2 .lu-hero .cr2-eyebrow { margin: 0 0 28px; }
.landuse-page-v2 .lu-hero h1 { width: min(48%, 680px); max-width: none; margin: 0; }
.landuse-page-v2 .lu-hero-content > p:not(.cr2-eyebrow) { width: min(40%, 560px); max-width: none; margin: 28px 0 32px; }
.landuse-page-v2 .lu-hero-image { position: absolute; inset: 0; z-index: -1; background: #062724; }
.landuse-page-v2 .lu-hero-image::before { display: none; }
.landuse-page-v2 .lu-hero-image img { position: absolute; inset: 0 0 0 33%; width: 67%; height: 100%; object-fit: cover; object-position: center; }
.landuse-page-v2 .lu-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #062724 0%, #062724 29%, #062724ed 36%, #06272466 55%, #06272416 100%); }
@media (max-width: 1100px) {
  .landuse-page-v2 .lu-hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
  .landuse-page-v2 .lu-hero-content { order: 0; padding: 48px var(--page-gutter); }
  .landuse-page-v2 .lu-hero h1 { width: 100%; max-width: none; }
  .landuse-page-v2 .lu-hero-content > p:not(.cr2-eyebrow) { width: 100%; max-width: 640px; }
  .landuse-page-v2 .lu-hero-image { position: relative; order: 1; inset: auto; z-index: 0; width: 100%; aspect-ratio: 3254 / 1924; }
  .landuse-page-v2 .lu-hero-image img { inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .landuse-page-v2 .lu-hero-image::after { display: none; }
}
@media (max-width: 600px) {
  .landuse-page-v2 .lu-hero-content { padding-block: 36px; }
  .landuse-page-v2 .lu-hero .cr2-eyebrow { margin-bottom: 22px; }
  .landuse-page-v2 .lu-hero-content > p:not(.cr2-eyebrow) { margin-block: 24px 28px; }
  .landuse-page-v2 .lu-hero .cr2-button { min-height: 48px; }
}