.page-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center; } .page-hero[data-size="full"] { aspect-ratio: 1920 / 981; width: 100%; min-height: 480px; max-height: 92vh; } .page-hero[data-size="compact"] { height: 60vh; min-height: 380px; max-height: 760px; } .page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .page-hero[data-size="full"] .page-hero__bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.32) 100%), var(--hero-image); } .page-hero[data-size="compact"] .page-hero__bg { background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%), var(--hero-image); } .page-hero[data-has-image="false"] .page-hero__bg { background-image: linear-gradient(180deg, #1a1a1a 0%, #333 100%); } .page-hero__content { position: relative; z-index: 1; text-align: center; margin-top: 50px; padding: 0 var(--space-6, 1.5rem); } .page-hero__title { font-family: var(--font-heading, var(--font-body)); font-weight: var(--fw-thin); line-height: 1.15; letter-spacing: -0.005em; color: #fff; margin: 0 0 var(--space-4, 1rem); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .page-hero[data-size="full"] .page-hero__title { font-size: clamp(2.25rem, 4.5vw, 4rem); } .page-hero[data-size="compact"] .page-hero__title { font-size: clamp(1.875rem, 3.6vw, 3.5rem); margin-bottom: var(--space-3, 0.75rem); } .page-hero[data-uppercase-title="true"] .page-hero__title { text-transform: uppercase; letter-spacing: 0.02em; } .page-hero__tagline { font-family: var(--font-body); font-weight: var(--fw-regular); line-height: 1.4; color: #fff; margin: 0 auto; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } .page-hero[data-size="full"] .page-hero__tagline { font-size: clamp(1rem, 1.7vw, 1.875rem); } .page-hero[data-size="compact"] .page-hero__tagline { font-size: clamp(0.9rem, 1.3vw, 1.375rem); max-width: 36ch; }