/* Home hero, Figma 65:1268: copy 570px | 128px gap | image 500px, segmented progress below the copy. */
/* Figma 108:1083: 500px band right under the header; the 500px image sits on the band's bottom edge. */
.sm-hero { position: relative; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-page-x); }
.sm-hero :is(h2,p,figure) { margin: 0; }
.sm-hero__slide { display: grid; grid-template-columns: minmax(0,570px) 500px; justify-content: space-between; column-gap: var(--space-128); align-items: stretch; }
.sm-hero__media { align-self: end; }
.sm-hero__slides { display: grid; }
/* Slides share one cell so the hero keeps the tallest slide's height (no jump on rotation). */
.sm-hero__slide { grid-area: 1 / 1; opacity: 1; transition: opacity .45s ease; }
.sm-hero__slide[hidden] { display: grid; visibility: hidden; opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
@media (prefers-reduced-motion: reduce) { .sm-hero__slide, .sm-hero__slide[hidden] { transition: none; } }
/* Copy sits on the bottom edge so the button keeps one position on every slide. */
.sm-hero__copy { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-24); padding-bottom: 120px; /* progress (37px) + 35px to the edge + 48px gap, as in Figma */ }
.sm-hero__titles { display: flex; flex-direction: column; gap: var(--space-8); max-width: 491px; }
.sm-hero__eyebrow { color: var(--color-brand); }
.sm-hero h2 { color: var(--c-copy); }
.sm-hero__text :is(p) + p { margin-top: var(--space-8); }
.sm-hero__text { color: var(--c-copy); }
.sm-hero .sm-hero__button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; width: 200px; height: 52px; line-height: 1; padding: 0 var(--space-24); border-radius: var(--radius-sm); background: var(--color-brand); color: var(--c-white); text-decoration: none; }
.sm-hero .sm-hero__button:hover { filter: brightness(.94); color: var(--c-white); }
.sm-hero__media img { display: block; width: 500px; height: 500px; object-fit: contain; }
.sm-hero__progress { position: absolute; left: var(--space-page-x); bottom: 35px; display: flex; flex-direction: column; gap: var(--space-8); color: var(--c-copy); }
.sm-hero__dots { display: flex; gap: 4px; }
.sm-hero .sm-hero__dots button { width: 48px; height: 14px; padding: 6px 0; border: 0; border-radius: 0; background: var(--c-blue-light) content-box; box-shadow: none; cursor: pointer; }
.sm-hero .sm-hero__dots button:hover { background-color: var(--color-brand); }
.sm-hero .sm-hero__dots button[aria-current="true"] { background-color: var(--color-brand); }
.sm-hero .sm-hero__dots button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
@media (min-width: 1264px) { .sm-hero { padding-inline: 0; } .sm-hero__progress { left: 0; } }
@media (max-width: 1199px) { .sm-hero__slide { grid-template-columns: minmax(0,1fr) minmax(0,400px); column-gap: var(--space-48); } .sm-hero__media img { width: 100%; height: auto; aspect-ratio: 1; } }
@media (max-width: 767px) {
    .sm-hero { padding-top: var(--space-16); }
    .sm-hero__progress { bottom: var(--space-16); }
    .sm-hero__slide { grid-template-columns: minmax(0,1fr); row-gap: var(--space-16); }
    .sm-hero__media { order: -1; justify-self: center; width: min(100%, 340px); }
    .sm-hero__copy { padding-bottom: 77px; }
    .sm-hero .sm-hero__button { align-self: stretch; width: auto; }
    .sm-hero__progress { right: var(--space-page-x); }
    .sm-hero .sm-hero__dots button { flex: 1; width: auto; min-width: 0; }
}
/* Hero band (Figma 108:1082): BG main from the top of the page (under the fixed header) to the hero bottom; next section is BG blue. */
body.home .sm-header-spacer, body.home #heroRotator { background: var(--c-bg-main); }