/* Page hero (Figma 108:1857): BG main band, 491px copy in the 1200px container, two rotated squares on the right edge. */
.sm-has-page-hero .sm-header-spacer { background: var(--c-bg-main); }
.sm-page-hero { position: relative; overflow: hidden; background: var(--c-bg-main); }
/* Figma: 16px inner inset for the copy (text at 116px in the 1400 frame); breadcrumbs: assets/css/breadcrumbs.css. */
.sm-page-hero__inner { position: relative; z-index: 1; max-width: calc(var(--container-max) + 2 * var(--space-page-x)); margin: 0 auto; padding-inline: calc(var(--space-page-x) + var(--space-16)); }
.sm-page-hero__inner { min-height: 300px; padding-block: var(--space-32); display: flex; align-items: center; } /* Figma band 300px; copy is centred */
.sm-page-hero__copy { display: flex; flex-direction: column; gap: var(--space-16); max-width: 491px; }
.sm-page-hero :is(h1,h2,p) { margin: 0; }
.sm-page-hero :is(h1,h2) { color: var(--color-brand); }
.sm-page-hero__texts { display: flex; flex-direction: column; gap: var(--space-8); }
.sm-page-hero__texts .t-body-bold { color: var(--c-copy); }
.sm-page-hero__texts .t-body { color: var(--c-navy); }
/* Decor box = Figma mask (387 x 300) on the right edge: filled 300px square and 3px outline square, both turned 45deg. */
/* Anchored to the band's bottom edge (squares cut there) and to the 1400px Figma frame, not the viewport:
   on wide screens they keep the laptop position instead of drifting right; the band clips what overflows. */
.sm-page-hero__decor { position: absolute; bottom: 0; right: max(0px, calc((100% - 1400px) / 2)); width: 387px; height: 300px; pointer-events: none; }
.sm-page-hero__decor::before, .sm-page-hero__decor::after { content: ""; position: absolute; border-radius: 16px; transform: rotate(45deg); }
.sm-page-hero__decor::before { left: 147px; top: 94px; width: 300px; height: 300px; background: var(--c-blue-light); }
.sm-page-hero__decor::after { left: 31px; top: 149px; width: 180px; height: 180px; border: 3px solid var(--c-blue-light); }
@media (max-width: 1023px) { .sm-page-hero__decor { transform: scale(.7); transform-origin: right bottom; } }
@media (max-width: 767px) {
    .sm-page-hero__inner { min-height: 0; padding-block: var(--space-24) 120px; }
    .sm-page-hero__decor { transform: scale(.5); transform-origin: right bottom; }
}
.sm-has-page-hero main.sm-search { padding-top: var(--space-64); } /* search page: 64px from the hero, as in Figma */
@media (max-width: 767px) { .sm-has-page-hero main.sm-search { padding-top: var(--space-32); } }