.years-page { padding: 56px 0 100px; background: #fff; }
.years-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 15px; }
.years-tabs::after { content: ''; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #cf2943 0%, #a95683 50%, #c18baa 100%); }
.years-tab { position: relative; z-index: 1; min-height: 72px; border: 1px solid #d5ced1; border-radius: 14px; background: #fff; color: #7c7180; font: inherit; cursor: pointer; transition: color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
.years-tab strong, .years-tab span { display: block; } .years-tab strong { font-size: 1rem; font-weight: 700; } .years-tab span { margin-top: 2px; font-size: .76rem; }
.years-tab:hover, .years-tab:focus-visible { color: #9d224f; border-color: #b2577c; transform: translateY(-2px); outline: none; }
.years-tab.is-active { border-color: transparent; color: #fff; background: linear-gradient(105deg, #ce263d, #724875); box-shadow: 0 9px 20px rgba(111, 51, 82, .18); }
.years-tab.is-active::after { content: ''; position: absolute; bottom: -7px; left: 50%; width: 13px; height: 13px; background: #9f315b; transform: translateX(-50%) rotate(45deg); }
.years-panel { padding-top: 46px; }
.years-timeline { position: relative; max-width: 1060px; }
.years-timeline::before { content: ''; position: absolute; left: 50%; top: -46px; bottom: 0; width: 2px; background: #b47a9d; transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .95s cubic-bezier(.22, .8, .24, 1); }
.years-panel.is-introduced .years-timeline::before { transform: translateX(-50%) scaleY(1); }
.years-event { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 98px minmax(0, 1fr); align-items: center; min-height: 310px; padding: 30px 0 54px; }
.years-event__image { position: relative; z-index: 2; width: min(100%, 380px); overflow: hidden; border-radius: 11px; box-shadow: 0 10px 30px rgba(49, 30, 41, .14); }
.years-event--image-left .years-event__image { justify-self: end; margin-right: 20px; } .years-event--image-right .years-event__image { justify-self: start; margin-left: 20px; }
.years-event__image img { width: 100%; aspect-ratio: 1 / .92; object-fit: cover; display: block; transition: transform .65s ease; } .years-event:hover .years-event__image img { transform: scale(1.045); }
.years-event__marker { z-index: 1; justify-self: center; position: relative; min-width: 74px; height: 100%; text-align: center; isolation: isolate; }
.years-event__marker::before { content: ''; position: absolute; z-index: 2; left: 50%; top: 28%; width: 13px; height: 13px; border: 2px solid #b47a9d; background: #fff; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0); transition: opacity .14s ease, transform .42s cubic-bezier(.18, 1.7, .35, 1); }
.years-event__marker::after { content: ''; position: absolute; z-index: -1; right: 50%; top: 28%; width: 68px; height: 2px; background: #b47a9d; opacity: 0; transform: scaleX(0); transform-origin: right center; transition: opacity .12s ease .28s, transform .56s cubic-bezier(.22, .75, .22, 1) .28s; }
.years-event__marker span { display: inline-block; position: absolute; z-index: 3; left: calc(50% + 60px); top: 28%; margin: -27px 0 0; padding: 8px 16px; border-radius: 9px; background: #c45273; color: #fff; font-weight: 700; font-size: 1.65rem; line-height: 1; white-space: nowrap; opacity: 0; transform: scale(.4); transition: opacity .12s ease .45s, transform .42s cubic-bezier(.18, 1.55, .35, 1) .45s; }
.years-event--image-right .years-event__marker::after { left: 50%; right: auto; transform-origin: left center; }
.years-event--image-right .years-event__marker span { left: auto; right: calc(50% + 60px); }
.years-event__content { max-width: 470px; position: relative; top: 0; align-self: start; margin-top: 94px; } .years-event--image-left .years-event__content { left: -10px; margin-left: 0; } .years-event--image-right .years-event__content { right: 0; justify-self: end; text-align: right; margin-right: 0; }
.years-event__year { display: inline-block; margin: 0 0 38px; padding: 8px 16px; border-radius: 9px; background: linear-gradient(105deg, #ce263d, #724875); color: #fff; font-size: 1.65rem; font-weight: 700; line-height: 1; }
.years-event h2 { margin: 0 0 11px; font-size: 1.17rem; line-height: 1.17; font-weight: 700; color: #212121; } .years-event p { margin: 0; color: #252025; font-size: .93rem; line-height: 1.42; } .years-event__detail { margin-top: 13px !important; color: #6d5e68 !important; font-size: .77rem !important; }
.years-event .years-reveal { opacity: 0; transition: opacity .72s ease, transform .82s cubic-bezier(.16, 1, .3, 1); }
.years-event--image-left .years-event__image { transform: translateX(-88px); }
.years-event--image-left .years-event__content { transform: translateX(88px); }
.years-event--image-right .years-event__content { transform: translateX(-88px); }
.years-event--image-right .years-event__image { transform: translateX(88px); }
.years-event.is-centered .years-reveal { opacity: 1; transform: translateX(0); }
.years-event.is-centered .years-event__marker::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.years-event.is-centered .years-event__marker::after { opacity: 1; transform: scaleX(1); }
.years-event.is-centered .years-event__marker span { opacity: 1; transform: scale(1); }
.years-event.is-centered .years-event__image { transition-delay: .68s; }
.years-event.is-centered .years-event__content { transition-delay: .88s; }
@media (max-width: 767.98px) { .years-page { padding: 32px 0 56px; } .years-tabs { grid-template-columns: 1fr; gap: 9px; padding-bottom: 0; border: 0; } .years-tab { min-height: 64px; } .years-tab.is-active::after { display: none; } .years-panel { padding-top: 19px; } .years-timeline::before { left: 22px; top: -19px; } .years-event { grid-template-columns: 45px 1fr; min-height: auto; padding: 23px 0 34px; } .years-event__marker { grid-column: 1; grid-row: 1; align-self: stretch; min-width: 45px; margin: 0; } .years-event__marker::before { left: 22px; top: 24px; } .years-event__marker::after { display: none; } .years-event__marker span, .years-event--image-right .years-event__marker span { left: 35px; right: auto; top: 24px; margin: -13px 0 0; font-size: .78rem; } .years-event__image, .years-event--image-left .years-event__image, .years-event--image-right .years-event__image { grid-column: 2; grid-row: 1; justify-self: stretch; width: auto; margin: 0 0 18px; } .years-event__content, .years-event--image-left .years-event__content, .years-event--image-right .years-event__content { grid-column: 2; grid-row: 2; justify-self: stretch; text-align: left; margin: 0; } .years-event--image-left .years-event__image, .years-event--image-right .years-event__image { transform: translateX(54px); } .years-event--image-left .years-event__content, .years-event--image-right .years-event__content { transform: translateX(54px); } .years-event__image img { aspect-ratio: 1.55 / 1; } }
@media (prefers-reduced-motion: reduce) { .years-tab, .years-reveal, .years-event__image, .years-event__marker::before, .years-event__marker::after, .years-event__marker span { transition: none; } .years-event .years-reveal, .years-event .years-event__marker::before, .years-event .years-event__marker span { opacity: 1; transform: none; } .years-event .years-event__marker::after { opacity: 1; transform: scaleX(1); } }
@media (max-width: 767.98px) { .years-event__content, .years-event--image-left .years-event__content, .years-event--image-right .years-event__content { top: 0; right: auto; left: auto; align-self: auto; margin-top: 0; } .years-event__year { margin-bottom: 20px; font-size: 1.15rem; } }