.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 30% 70%; grid-template-rows: auto minmax(345px, 1fr) auto; min-height: calc(100svh - var(--header-height)); padding-top: clamp(42px, 6vh, 76px); overflow: clip; }
.hero__eyebrow { grid-column: 1; grid-row: 1; align-self: start; padding-top: 9px; }
.hero__eyebrow .eyebrow { padding-left: 15px; border-left: 2px solid var(--color-primary); }
.hero__direction { margin-top: 56px; width: 40px; height: 40px; fill: none; stroke: var(--color-steel); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.hero__intro { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
.hero__title { font-family: var(--font-heading); font-size: clamp(40px, 5.05vw, 81px); font-style: italic; font-weight: 700; line-height: 1.04; letter-spacing: -.055em; text-transform: uppercase; }
.hero__line { display: block; overflow: clip; padding-right: .12em; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__line > span { display: block; }
.hero__description { max-width: 440px; margin-top: 24px; color: #b8b8bf; font-size: 13px; line-height: 1.8; }
.hero__visual { position: absolute; z-index: -1; top: 205px; bottom: 42px; right: 0; left: 23%; overflow: hidden; background: var(--color-background); }
.hero__poster, .hero__video { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero__video { opacity: 0; }
.hero__visual.is-playing .hero__video { opacity: 1; }
.hero__visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--color-background) 0%, transparent 24%), linear-gradient(180deg, var(--color-background) 0%, rgb(10 10 11 / .65) 10%, transparent 36%, transparent 78%, var(--color-background) 100%); }
.hero__actions { grid-column: 1; grid-row: 2; align-self: end; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 62px 48px; }
.hero__actions .button--primary { min-width: 260px; }
.hero__actions .button--text { min-width: 185px; min-height: 45px; font-size: 12px; }
.hero__microcopy { margin-top: 12px; color: var(--color-steel); font-size: 11px; line-height: 1.9; }
.hero__microcopy > span { display: none; }
.hero__baseline { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; border-top: 1px solid rgb(255 255 255 / .1); }
.hero__signature { font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero__signature span { margin-inline: 9px; color: var(--color-primary); }
.hero__media-info { display: flex; align-items: center; gap: 24px; color: var(--color-steel); font-size: 10px; }
.video-control { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 0 8px 16px; background: transparent; cursor: pointer; font-size: 11px; color: #d5d5da; }
.video-control .icon { width: 14px; height: 14px; flex-basis: 14px; }
.video-control:hover { color: var(--color-white); }
.video-control:disabled { cursor: wait; color: var(--color-steel); }