/* The service stories share one stage so crossfades never shift the page. */
.hero-carousel { --hero-line: #62798770; --hero-muted: #c2d2dc; position: relative; }
.hero-carousel .hero { display: grid; grid-template-columns: 1fr 1.12fr; grid-template-rows: auto 1fr; column-gap: 28px; row-gap: 30px; min-height: 530px; padding-block: 58px 32px; align-items: start; }
.hero-carousel .hero-intro { grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 2; }
.hero-carousel .hero h1, html[lang=ru] .hero-carousel .hero h1 { font-size: clamp(24px, 2.15vw, 30px); line-height: 1.3; margin: 0; letter-spacing: -.035em; }
.hero-carousel .hero h1 em { color: inherit; font-style: normal; }
.hero-carousel .hero-region { font-size: 16px; line-height: 1.55; color: #c2d2dc; margin: 12px 0 0; }
.hero-stories { display: grid; grid-column: 1; grid-row: 2; align-self: start; position: relative; z-index: 2; }
.hero-story { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.22,.61,.36,1); }
.hero-story.is-current { opacity: 1; pointer-events: auto; transform: translateY(0); z-index: 1; transition-delay: .12s; }
.hero-carousel .hero-story h2 { font-size: clamp(36px, 3.55vw, 50px); font-weight: 500; color: #a3d5f4; line-height: 1.16; margin: 0 0 20px; text-wrap: balance; letter-spacing: -.025em; }
.hero-carousel .hero-story p { font-size: 19px; line-height: 1.65; color: var(--hero-muted); margin: 0; max-width: 510px; }
.hero-scene-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.hero-carousel .hero-scene-actions .button { font-size: 18px; padding: 15px 24px; min-height: 52px; border-radius: 14px; }
.hero-carousel .hero-scene-actions .text-link { font-size: 17px; line-height: 1.5; color: #d4e6ef; }
.hero-visuals { grid-column: 2; grid-row: 1 / 3; position: relative; display: grid; align-self: center; min-width: 0; width: calc(100% + 60px); margin-inline: -30px; aspect-ratio: 3 / 2; touch-action: pan-y; }
.hero-visuals::before { content: ''; position: absolute; inset: 10% 5% 0; background: radial-gradient(ellipse, #2d63724a, #12233000 68%); pointer-events: none; }
.hero-scene { grid-area: 1 / 1; opacity: 0; transform: translateY(6px) scale(.99); transition: opacity 2.2s cubic-bezier(.4,0,.2,1), transform 2.6s cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.hero-scene.is-current { opacity: 1; transform: translateY(0) scale(1); }
.hero-scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-navigation { padding-block: 0 30px; position: relative; z-index: 3; }
.hero-navigation[hidden] { display: none; }
.hero-navigation-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--hero-muted); font-size: 16px; padding-block: 8px 12px; }
.hero-transport { display: flex; align-items: center; gap: 12px; }
.hero-position { font-variant-numeric: tabular-nums; font-size: 15px; min-width: 62px; text-align: center; }
.hero-arrow, .hero-rotation { color: #f7f6f1; background: transparent; border: 1px solid var(--hero-line); border-radius: 50%; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font: inherit; cursor: pointer; }
.hero-arrow { font-size: 24px; line-height: 1; }
.hero-rotation { gap: 8px; padding: 8px 14px; border-radius: 24px; font-size: 15px; }
.hero-rotation svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }
.hero-rotation .play-glyph { display: none; }
.hero-rotation[aria-pressed=false] .pause-glyph { display: none; }
.hero-rotation[aria-pressed=false] .play-glyph { display: block; }
.hero-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.hero-choice { position: relative; border: 0; border-top: 1px solid var(--hero-line); background: transparent; color: #bacbd5; display: flex; align-items: baseline; gap: 9px; padding: 18px 0 8px; text-align: start; min-height: 62px; font: inherit; font-size: 16px; line-height: 1.35; cursor: pointer; }
.hero-choice-number { font-size: 13px; color: #97adbc; font-variant-numeric: tabular-nums; }
.hero-choice::before, .hero-choice::after { content: ''; position: absolute; inset-inline-start: 0; top: -1px; height: 2px; width: 0; }
.hero-choice[aria-pressed=true] { color: #fff; }
.hero-choice[aria-pressed=true]::before { width: 100%; background: #eeb17b; }
.hero-choice[aria-pressed=true] .hero-choice-number { color: #f9b77d; }
.hero-carousel[data-running=true] .hero-choice[aria-pressed=true]::after { background: #EB6909; animation: hero-progress 5s linear both; }
@keyframes hero-progress { from { width: 0; } to { width: 100%; } }
.hero-arrow:hover, .hero-rotation:hover { background: #ffffff0c; border-color: #9fb7c5; }
.hero-choice:hover { color: white; }
.hero-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.a11y-contrast .hero-carousel { --hero-line: #444; --hero-muted: #111; }
.a11y-contrast .hero-carousel .hero-story h2, .a11y-contrast .hero-carousel .hero-story p, .a11y-contrast .hero-carousel .hero-scene-actions .text-link, .a11y-contrast .hero-choice, .a11y-contrast .hero-choice-number, .a11y-contrast .hero-arrow, .a11y-contrast .hero-rotation, .a11y-contrast .hero-position { color: #000; }
.a11y-contrast .hero-choice[aria-pressed=true]::before { background: #000; }
.a11y-contrast .hero-visuals::before { display: none; }
.a11y-motion .hero-scene, .a11y-motion .hero-story { transition: none !important; transform: none; }
.a11y-motion .hero-choice::after { animation: none !important; }
@media(prefers-reduced-motion: reduce) { .hero-scene, .hero-story { transition: none !important; transform: none; } .hero-choice::after { animation: none !important; } }
@media(max-width:1100px) { .hero-carousel .hero { grid-template-columns: 1fr 1fr; padding-top: 40px; gap: 24px; } .hero-carousel .hero h1, html[lang=ru] .hero-carousel .hero h1 { font-size: 26px; } .hero-visuals { width: calc(100% + 28px); margin-inline: -14px; } .hero-choices { gap: 12px; } .hero-choice { flex-direction: column; gap: 5px; } }
@media(max-width:760px) {
 .hero-carousel .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-block: 30px 20px; gap: 18px; min-height: 0; }
 .hero-carousel .hero-intro { grid-column: 1; grid-row: 1; }
 .hero-carousel .hero h1, html[lang=ru] .hero-carousel .hero h1 { font-size: 24px; margin: 0; }
 .hero-carousel .hero .eyebrow { font-size: 15px; }
 .hero-visuals { grid-column: 1; grid-row: 3; width: 100%; max-width: 550px; margin-inline: auto; }
 .hero-stories { grid-column: 1; grid-row: 2; }
 .hero-carousel .hero-story h2 { font-size: clamp(32px, 7vw, 42px); }
 .hero-carousel .hero-story p { font-size: 18px; max-width: 100%; }
 .hero-scene-actions { gap: 16px; margin-top: 20px; }
 .hero-carousel .hero-scene-actions .button { font-size: 17px; padding: 14px 19px; }
 .hero-navigation-heading { align-items: center; font-size: 15px; }
 .hero-transport { gap: 8px; }
 .hero-position { display: none; }
 .hero-rotation { min-width: 44px; padding: 10px; }
 .hero-rotation span { display: none; }
 .hero-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
 .hero-choice { font-size: 15px; min-height: 65px; padding-top: 12px; }
 .hero-navigation { padding-bottom: 25px; }
}
@media(max-width:370px) { .hero-carousel .hero h1, html[lang=ru] .hero-carousel .hero h1 { font-size: 22px; } .hero-carousel .hero-story h2 { font-size: 30px; } .hero-carousel .hero-scene-actions .text-link { font-size: 16px; } .hero-choices { gap: 12px; } }

.a11y-contrast .hero-carousel .hero-region { color: #000; }