:root{
  --purple:#653eb3;
  --text:#2f334b;
  --muted:#777;
  --line:#e5e5e5;
}
@font-face{
  font-family:"Panton Caps";
  src:url("fonts/Pantonlightcaps.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Panton Caps";
  src:url("fonts/Pantonblackcaps.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;
  color:#333;
  background:#fff;
  font:400 16px/1.55 Roboto,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
p{margin:0 0 1em}

.page{position:relative;overflow:hidden;background:#fff}
.header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  height:80px;
  padding:22px 36px;
  color:#fff;
}
.header.is-dark{color:var(--purple);background:rgba(255,255,255,.94)}
.logo{
  float:left;
  color:inherit;
  font-size:30px;
  font-weight:700;
  line-height:35px;
  letter-spacing:-.08em;
}
.header__nav{
  float:right;
  display:flex;
  gap:35px;
  margin:0;
  padding:9px 0 0;
  list-style:none;
  text-transform:uppercase;
  font-size:13px;
  font-weight:700;
}
.nav__link{opacity:.9}
.nav__link:hover{opacity:1}
.hamburger{display:none}

.top-section,
.top-section__container{
  height:100vh;
  position:relative;
}
.top-section_about{background-color:#cbcfc7}
.top-section__bg{
  position:absolute;
  inset:0;
  background:no-repeat 50% 50%/cover;
  background-position:50% 22%;
  will-change:transform,opacity;
}
.top-section__bg:before{
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(0,0,0,.26);
}
.top-section_fixed .top-section__bg{position:fixed}
.top-section__container{
  width:100%;
  max-width:1120px;
  margin:0 auto;
}
.top-section__content{
  position:absolute;
  bottom:10%;
  max-width:485px;
  padding-bottom:45px;
}
.top-section__title{
  margin-bottom:20px;
  color:#fff;
  text-transform:uppercase;
  font-family:"Panton Caps",Arial,Helvetica,sans-serif;
  font-size:91px;
  line-height:.85;
  letter-spacing:-.05em;
  font-weight:800;
  opacity:0;
  transform:translateY(20px);
  animation:titleIn .7s ease .25s forwards;
}
.top-section__text{
  color:#fff;
  opacity:0;
  transform:translateY(20px);
  animation:titleIn .7s ease .45s forwards;
}
.top-section__text.text p{
  color:#fff;
  font-size:18px;
  line-height:1.45;
}
@keyframes titleIn{
  to{opacity:1;transform:none}
}
.mouse{
  position:absolute;
  left:50%;
  bottom:28px;
  width:22px;
  height:34px;
  margin-left:-11px;
  border:2px solid rgba(255,255,255,.75);
  border-radius:14px;
}
.mouse__wheel{
  position:absolute;
  top:7px;
  left:50%;
  width:4px;
  height:7px;
  margin-left:-2px;
  border-radius:4px;
  background:#fff;
  animation:wheel 1.35s ease infinite;
}
@keyframes wheel{
  0%{opacity:0;transform:translateY(0)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(11px)}
}

.page__inner{position:relative;background:#fff}
.page__inner__content{
  width:100%;
  max-width:1120px;
  margin:0 auto;
}
.about{
  position:relative;
  overflow:hidden;
  padding-top:110px;
}
.about__nav{
  position:absolute;
  top:0;
  left:20px;
  z-index:5;
  min-width:150px;
  height:100vh;
  overflow:hidden;
  text-transform:uppercase;
  font-weight:700;
}
.about__nav.is-fixed{position:fixed}
.about__nav__list{
  position:absolute;
  top:50%;
  left:0;
  margin:0;
  padding:0;
  list-style:none;
  transform:translateY(-50%);
}
.about__nav__item{
  margin-bottom:12px;
  color:#d5d6db;
  cursor:pointer;
  transition:color .35s,transform .35s;
  transform:translateX(-45px);
}
.about__nav__item:hover,
.about__nav__item_selected{
  color:var(--purple);
  transform:translateX(0);
}
.about__nav__item span{
  display:inline-block;
  transform-origin:left;
  transition:transform .35s;
}
.about__nav__item_selected span{transform:scale(1.2)}
.about__nav__item:before{
  content:"";
  display:inline-block;
  vertical-align:middle;
  width:30px;
  height:2px;
  margin:-3px 15px 0 0;
  background:var(--purple);
}

.about__container{position:relative;perspective:1100px}
.about__container:before{
  content:"";
  position:absolute;
  top:24em;
  left:50%;
  width:1px;
  height:100%;
  background-color:var(--line);
}
.about__head-title{
  position:relative;
  margin:0 0 100px;
  color:var(--text);
  text-transform:uppercase;
  font-family:"Panton Caps",Arial,Helvetica,sans-serif;
  font-size:36px;
  line-height:.88;
  font-weight:800;
}
.about-item{position:relative}
.about-year{
  position:relative;
  padding:35px 0;
  margin-bottom:75px;
  text-align:center;
  background-color:#fff;
}
.about-year:last-of-type{margin-bottom:0}
.about-year__photo{
  position:relative;
  display:inline-block;
  width:120px;
  height:120px;
  margin-bottom:28px;
  overflow:hidden;
  border-radius:50%;
  cursor:pointer;
}
.about-year__photo__img{
  width:100%;
  height:100%;
  border-radius:50%;
  background:no-repeat 50% 50%/cover;
  transform:scale(.9);
  transition:transform .35s cubic-bezier(.215,.61,.355,1);
}
.about-year__photo:hover .about-year__photo__img{transform:scale(1)}
.about-year__year{
  position:relative;
  margin:0 0 25px;
  color:var(--purple);
  text-transform:uppercase;
  font-family:"Panton Caps",Arial,Helvetica,sans-serif;
  font-size:97px;
  line-height:.9;
  letter-spacing:-.04em;
  font-weight:800;
}
.about-year__year_small{font-size:70px}
.about-year__people{margin:0}
.about-year__value{
  color:var(--text);
  font-size:28px;
  line-height:1;
  font-weight:700;
}
.about-year__value_last{font-size:34px}
.about-year__label{
  margin:8px 0 0;
  color:#777;
  font-size:14px;
}

.about__event{
  position:relative;
  padding:0 30px 145px;
  opacity:var(--depth-opacity,1);
  filter:blur(var(--depth-blur,0px));
  transform:translate3d(0,var(--depth-y,0px),var(--depth-z,0px));
  transform-origin:50% 35%;
  will-change:transform,opacity,filter;
}
.about__event:after{
  content:"";
  display:block;
  clear:both;
}
.about__date{
  position:absolute;
  top:15px;
  font-size:14px;
  line-height:1;
  opacity:.6;
}
.about__date_left{
  right:50%;
  padding-right:25px;
}
.about__date_left:after{
  content:"";
  position:absolute;
  top:7px;
  right:0;
  width:15px;
  height:1px;
  background-color:var(--line);
}
.about__event__header{
  position:relative;
  width:50%;
  padding-right:150px;
  margin-bottom:30px;
}
.about__event__header_left,
.about__event__header_right{
  width:100%;
  padding-right:0;
}
.profile{
  position:relative;
  min-height:50px;
  padding:4px 0 0 65px;
  font-size:14px;
}
.profile__photo{
  position:absolute;
  top:50%;
  left:0;
  width:50px;
  height:50px;
  margin-top:-25px;
  overflow:hidden;
  border-radius:50%;
  background:#eee;
}
.profile__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.profile__name{
  margin:0;
  font-weight:700;
}
.profile__position{
  margin:0;
  color:#777;
}
.about__event__item{
  position:relative;
  float:left;
  width:50%;
}
.about__event__item > :last-child{margin-bottom:0}
.about__event__item_history{float:none}
.about__event__item_left{padding:0 130px 0 0}
.about__event__item_right{
  float:none;
  margin-left:50%;
  padding:0 0 0 130px;
}
.about__title{
  margin:0 0 22px;
  padding-left:30px;
  color:var(--text);
  text-transform:uppercase;
  font-family:"Panton Caps",Arial,Helvetica,sans-serif;
  font-size:24px;
  line-height:1.15;
  font-weight:800;
}
.about-text-block{margin-bottom:80px}
.about-text-block__title{
  margin:0 0 20px;
  color:#333;
  font-family:"Roboto Slab",Arial,Helvetica,sans-serif;
  font-size:26px;
  line-height:1.3;
  font-weight:300;
}
.text p{
  color:#555;
  font-size:16px;
  line-height:1.65;
}
.company-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;align-items:center;max-width:380px;margin-top:20px}
.company-logos img{width:100%;height:40px;object-fit:contain;object-position:left center}
.about__image-container{
  margin-bottom:25px;
  font-size:0;
}
.about__image-container:last-child{margin-bottom:0}
.about__image-container img{max-width:100%;height:auto}
.about__image-container figcaption,
.about__gallery figcaption{margin-top:9px;color:#777;font-size:13px;line-height:1.4}
.about__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px;clear:both}
.about__gallery figure{min-width:0;margin:0}
.about__gallery img{width:100%;height:auto}
.about__event_gallery .about__event__header{margin-bottom:45px}
.about__event__medal{
  position:relative;
  min-height:50px;
  margin:0 0 0 30px;
  padding-left:50px;
  font-size:14px;
  font-weight:700;
}
.about__event__medal:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:35px;
  height:50px;
  background:
    radial-gradient(circle at 50% 18px,var(--purple) 0 9px,transparent 10px),
    linear-gradient(135deg,transparent 0 22px,var(--purple) 23px 29px,transparent 30px),
    linear-gradient(45deg,transparent 0 22px,var(--purple) 23px 29px,transparent 30px);
  opacity:.9;
}
.about__event__medal a{color:var(--purple)}

.about-now{
  position:relative;
  width:100%;
  min-height:640px;
  margin-top:40px;
  color:#fff;
  background:#333;
}
.about-now__cover{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.about-now__cover__img{
  position:absolute;
  inset:-6%;
  background:no-repeat 50% 50%/cover;
}
.about-now__cover__img:before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.42);
}
.about-now__container{
  position:relative;
  z-index:2;
  max-width:1120px;
  min-height:640px;
  margin:0 auto;
}
.about-now__container:before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background:rgba(255,255,255,.25);
}
.about-now__content{
  position:absolute;
  left:0;
  right:0;
  bottom:78px;
}
.about-now__title{
  margin-bottom:24px;
  text-transform:uppercase;
  font-family:"Panton Caps",Arial,Helvetica,sans-serif;
  font-size:97px;
  line-height:.9;
  font-weight:800;
}
.about-now__people{max-width:560px}
.about-now__label{
  margin-bottom:30px;
  font-family:"Roboto Slab",Arial,Helvetica,sans-serif;
  font-size:30px;
  line-height:1.25;
}
.contact-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px 24px;
  max-width:760px;
}
.contact-links a{
  color:#fff;
  font-size:16px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.55);
}

.image-viewer{display:none;position:fixed;inset:0;z-index:100;background:rgba(16,16,20,.97);color:#fff}
.image-viewer.open{display:block}
.image-viewer__stage{position:absolute;inset:0 0 86px;overflow:hidden;touch-action:none}
.image-viewer__image{position:absolute;top:50%;left:50%;max-width:100vw;max-height:calc(100dvh - 150px);object-fit:contain;transform:translate(-50%,-50%);user-select:none;-webkit-user-drag:none}
.image-viewer__caption{position:absolute;left:16px;right:16px;bottom:94px;text-align:center;font-size:13px;line-height:1.35;pointer-events:none}
.image-viewer__controls{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:18px;align-items:center;height:78px;padding-bottom:env(safe-area-inset-bottom);background:#fff}
.image-viewer__controls button{width:48px;height:48px;border:0;background:transparent;color:#2f334b;font:400 32px/1 Arial,sans-serif;cursor:pointer}
.image-viewer__close{position:absolute;right:18px}

.about-item,
.about-now{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .7s ease,transform .7s ease;
}
.about-item.is-visible,
.about-now.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .about-item,.about-now,.about__event{opacity:1;filter:none;transform:none;transition:none}
  .mouse__wheel{animation:none}
}

@media (max-width:1260px){
  .about__nav{display:none}
}
@media (max-width:1439px){
  .page__inner__content,
  .top-section__container,
  .about-now__container{max-width:980px}
  .about__event{padding:0 0 145px}
  .about__event__item_left{padding-right:70px}
  .about__event__item_right{padding-left:70px}
  .about__event__header{padding-right:70px}
  .top-section__content{max-width:430px}
}
@media (max-width:1023px){
  .page__inner__content,
  .top-section__container,
  .about-now__container{max-width:720px}
  .about{padding-top:80px}
  .about__container:before{top:10em}
  .about__head-title{margin-bottom:25px}
  .about-year__year{font-size:80px;margin-bottom:15px}
  .about__event{padding:0 20px 100px}
  .about__event__item_left{padding-right:40px}
  .about__event__item_right{padding-left:40px}
  .about__event__header{padding-right:30px;margin-bottom:20px}
  .about__title{padding-left:0;font-size:20px}
  .about-text-block{margin-bottom:60px}
}
@media (max-width:767px){
  .header{
    height:65px;
    padding:16px 20px;
    background:rgba(101,62,179,.96);
  }
  .header__nav{display:none;position:absolute;top:65px;left:0;right:0;padding:20px;flex-direction:column;gap:16px;background:#fff;color:var(--purple)}
  .header__nav.is-open{display:flex}
  .hamburger{
    display:block;
    float:right;
    width:28px;
    padding-top:5px;
    border:0;
    background:none;
    cursor:pointer;
  }
  .hamburger__line{
    display:block;
    height:2px;
    margin-bottom:6px;
    background:#fff;
  }
  .header.is-dark .hamburger__line{background:var(--purple)}
  .top-section__bg{
    top:65px;
    background-position:50% 25%;
  }
  .top-section__content{
    left:20px;
    right:20px;
    bottom:20px;
  }
  .top-section__title{font-size:40px}
  .page__inner__content{padding:0 20px}
  .about{padding-top:60px}
  .about__container:before{display:none}
  .about-year{margin-bottom:40px}
  .about-year__year{font-size:64px}
  .about-year__photo{width:100px;height:100px}
  .about__event{padding:0 0 60px}
  .about__date{
    position:static;
    margin-bottom:20px;
  }
  .about__date_left{padding-right:0}
  .about__date_left:after{display:none}
  .about__event__header{
    width:100%;
    padding-right:0;
  }
  .about__event__item{
    float:none;
    width:100%;
  }
  .about__event__item_left,
  .about__event__item_right{
    margin-left:0;
    margin-bottom:40px;
    padding:0;
  }
  .about-text-block{margin-bottom:40px}
  .about-text-block__title{margin-bottom:15px;font-size:22px}
  .company-logos{gap:16px 20px}
  .company-logos img{height:34px}
  .about__event__medal{margin-left:0}
  .about__gallery{grid-template-columns:1fr;gap:28px}
  .about__event_gallery .about__event__header{margin-bottom:25px}
  .about__image-container img,
  .about__gallery img{cursor:zoom-in}
  .image-viewer__image{max-width:100vw;max-height:calc(100dvh - 190px)}
  .about-now,
  .about-now__container{min-height:620px}
  .about-now__container{padding:0 20px}
  .about-now__container:before{display:none}
  .about-now__content{bottom:44px}
  .about-now__title{font-size:64px}
  .about-now__label{font-size:24px}
}