.header__intro {
  grid-column: 2 / 6;
  border: 1px solid var(--black);
}
.header__intro--inner {
  grid-column: 1 / 5;
}
.header__top {
  display: flex;
}
.header__title {
  font-family: "nevis-b";
  font-size: 1.2rem;
  line-height: 1.4rem;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
  border-bottom: 1px solid var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__menu--wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.header__menu {
  flex: 1;
  font-family: "nevis-b";
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 1.2rem;
  line-height: 1.4rem;
  display: flex;
  align-items: center;
  gap: 3.8rem;
  padding: 0 3rem;
  justify-content: center;
}
.header__menu li {
  position: relative;
}
.header__menu li:not(:first-child)::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--black);
  left: -2.4rem;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header__logo {
  width: 16rem;
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--yellow);
  border-right: 1px solid var(--black);
  flex: none;
}
.header__logo img {
  max-width: 60%;
}
.header__logo__text {
  font-family: "airbag";
  font-size: 8.2rem;
  line-height: 9.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  padding: 5.2rem 0;
  text-align: center;
}
.header__extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 8rem;
  font-family: "nevis-b";
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  position: relative;
}
.header__extra div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header__extra::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  height: 100%;
  background-color: var(--black);
}

.header__bottom--wrapper {
  transform: translate(-5.1rem, -1px);
  width: calc(100% + 5.1rem);
  grid-column: 6 / -2;
}

.header__bottom {
  border: 1px solid var(--black);
}

.header__bottom__desc {
  font-family: "regular";
  font-size: 4rem;
  line-height: 5.2rem;
  padding: 11rem 3.5rem;
}
.header__numbers {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  height: 10.2rem;
  border-top: 1px solid var(--black);
}
.header__numbers div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  align-items: start;
  padding: 0 3rem;
}
.header__numbers div:first-child {
  padding: 0 2rem;
}
.header__numbers div:not(:last-child) {
  border-right: 1px solid var(--black);
}
.header__numbers__title {
  font-family: "nevis-b";
  font-size: 1.2rem;
  letter-spacing: 1.4rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.header__numbers__value {
  font-family: "purple";
  color: var(--red);
  font-size: 4rem;
  line-height: 4.8rem;
  letter-spacing: 0.4em;
}
.header__bottom__lines {
  height: 3rem;
  background-image: url("../images/border-bg.png");
}
.header__bottom__lines-w {
  height: 3rem;
  background-image: url("../images/border-bg-w.png");
}
.header__bottom__lines img {
  display: flex;
  width: 100%;
  height: 100%;
  object-fit: inherit;
}

/*  */

.selected-works-wrapper {
  margin-top: 12.3rem;
  margin-bottom: 10rem;
}
.selected-work__title {
  font-family: "airbag";
  font-size: 5.5rem;
  line-height: 6.6rem;
  grid-column: 2 / -1;
  text-transform: uppercase;
  font-weight: normal;
}

.selected-works {
  grid-column: 2 / -2;
  margin-top: 3.2rem;
  margin-bottom: 7.6rem;
}
.selected-works li {
  position: relative;
  margin-top: -1px;
}
.selected-works li::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/border-bg.png");
}

.selected-works li:hover .selected-work--wrapper {
  transform: translate(-1rem, -1rem);
}
.selected-work--wrapper {
  border: 1px solid var(--black);
  background-color: var(--white);
  position: relative;
  transition: all 0.3s ease;
}

.selected-work {
  padding: 4.8rem 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border 0.2s ease;
  position: relative;
  overflow: hidden;
}

.selected-work svg path {
  fill: var(--yellow);
}
.selected-work h3 {
  font-family: "regular";
  font-weight: normal;
  font-size: 3rem;
  line-height: 3.9rem;
}
.selected-work__year {
  font-family: "nevis-b";
  transition: transform 0.4s ease;
  will-change: transform;
  font-size: 1.2rem;
  line-height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selected-work__year span {
  width: 1px;
  height: 3rem;
  background-color: var(--black);
  width: 1px;
  display: inline-block;
  margin: 0 2rem;
}
.selected-work__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(10rem, -50%);
  width: 2.2rem;
  transition: all 0.4s ease;
}
.selected-work__arrow svg {
  transform: rotate(90deg);
}
.contact-info__extra__mobile {
  display: none;
}
@media (min-width: 1025px) {
  /* .selected-works li:hover {
    background-color: var(--black);
    color: var(--white);
  }
  .selected-works li:hover .selected-work {
    border-color: transparent;
  }
  .selected-works li:hover {
    background-color: var(--black);
    color: var(--white);
  }
  .selected-works li:hover .selected-work__arrow {
    transform: translate(0, -50%);
  }
  .selected-works li:hover .selected-work__year {
    transform: translateX(-120%);
  } */
}

.our-approach-layout {
  background-color: var(--black);
  color: var(--white);
  padding-top: 13.8rem;
  padding-bottom: 13.8rem;
}
.our-approach {
  grid-column: 2 / -2;
  position: relative;
}

.our-approach__content {
  border: 1px solid var(--white);
  padding: 4rem;
  padding-bottom: 6.2rem;
}
.our-approach__title {
  font-size: 5.5rem;
  line-height: 6.6rem;
  font-family: "airbag";
  text-transform: uppercase;
}
.our-approach__arrow {
  width: 6.8rem;
}
.our-approach__desc {
  font-family: "regular";
  font-weight: 500;
  font-size: 2rem;
  line-height: 2.6rem;
  margin-top: 6rem;
}
.our-approach ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--white);
}
.our-approach .our-approach-item:not(:last-child) {
  border-right: 1px solid var(--white);
}
.our-approach-item {
  padding: 2rem;
  color: var(--white);
}
.our-approach-item__title {
  font-family: "purple";
  font-size: 4rem;
  line-height: 4.8rem;
  letter-spacing: 0.4em;
  color: var(--red);
  font-weight: normal;
}
.our-approach-item__subtitle {
  letter-spacing: 0.18em;
  font-family: "nevis-b";
  font-size: 1.2rem;
  text-transform: uppercase;
}

#contact {
  min-height: 100svh;
  background-color: var(--yellow);

  align-items: center;
  justify-content: center;
}
.contact-wrapper {
  grid-column: 2 / -2;
  display: grid;
  grid-template-columns: 63% 1fr;
}
.contact-info {
  border: 1px solid var(--black);
  position: relative;
}
.contact-info__arrow {
  position: absolute;
  top: 5.6rem;
  right: 5.6rem;
  width: 3rem;
  transform: rotate(90deg);
}
.contact__title {
  font-size: 15.2rem;
  font-family: "airbag";
  text-transform: uppercase;
  line-height: 16rem;
  text-align: center;
  padding: 8rem 2rem 6rem 2rem;
}
.contact-info__extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 8.6rem;
  font-family: "regular";
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  border-top: 1px solid var(--black);
  position: relative;
}
.contact-info__extra::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--black);
}
.contact-info__extra > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact__form {
  border: 1px solid var(--black);
  border-left: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--yellow);
  height: 100%;
  position: relative;
}
.contact__form--wrapper {
  position: relative;
}
.contact__form--wrapper::before {
  content: "";
  position: absolute;
  inset: -2rem;
  left: 0;
  background-image: url("../images/border-bg.png");
}

.contact__form__terms {
  font-size: 1.4rem;
  font-family: "semibold";
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputs {
  flex: 1;
  display: grid;
}
.inputs .input-wrapper:last-child .input {
  border-bottom: 0;
}
.contact__form--extra {
  height: 8.6rem;
  border-top: 1px solid var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.form__btn {
  height: 100%;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--black);
  margin-top: 7rem;
}

.footer ul {
  margin-top: 4rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.terms-layout {
  margin-top: 5.4rem;
}
.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--black);
}

.terms-layout .terms {
  grid-column: 2 / -2;
}
.terms h1 {
  font-family: "airbag";
  text-transform: uppercase;
  font-size: 5.5rem;
  line-height: 4.6rem;
  font-weight: normal;
  margin-bottom: 1.2rem;
}
.terms-border-line {
  width: 100%;
  height: 3rem;
  margin-bottom: 6rem;
}
.terms-border-line img {
  width: 100%;
  height: 100%;
}
.terms .terms--content {
  margin-bottom: 4rem;
  font-weight: 500;
  font-size: 1.6rem;
}

.terms h4 {
  font-weight: 500;
  margin-bottom: 1rem;
}

.terms ul {
  list-style-type: disc;
  padding-left: 3rem;
  margin-top: 1rem;
}

.project-slider-layout {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  padding: 6rem 0;
}
.project-prev,
.project-next {
  flex: 1;
}
.project-prev__subtitle,
.project-next__subtitle {
  margin-bottom: 8rem;
}
.project-prev__content,
.project-next__content {
  display: flex;
  align-items: start;
  gap: 5rem;
}
.project-prev__content svg,
.project-next__content svg {
  width: 2.2rem;
}
.project-prev__content svg {
  transform: rotate(-90deg);
}

.project-next__content {
  flex-direction: row-reverse;
}
.project-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mobile-header__button {
  background-color: transparent;
  border: none;
  display: none;
  align-items: center;
  gap: 1.4rem;
  font-family: "semibold";
  font-size: 2rem;
  position: absolute;
  right: 2rem;
  top: 1.6rem;
}
.mobile-header__button svg {
  transform: rotate(90deg);
  width: 2.2rem;
}
.button-back-mobile {
  display: none;
}
.detail-button-back {
  width: calc(100% + 5rem);
}
.detail-layout {
  margin-top: 5.8rem;
}
.detail-layout__intro-wrapper {
  grid-column: 2 / -2;
  grid-row: 2 / 3;
  margin-top: -5.1rem;
  transform: translateX(-1px);
  border: 1px solid var(--black);
}
.detail-intro__title {
  font-size: 5.5rem;
  line-height: 6.6rem;
  font-family: "airbag";
  text-transform: uppercase;
  font-weight: 400;
  padding: 2rem;
}
.detail-intro__desc {
  padding: 2rem;
}
.detail-desc {
  font-size: 4rem;
  font-family: "regular";
  font-weight: 500;
  line-height: 5.2rem;
  max-width: 101.2rem;
}
.detail-intro__row {
  font-family: "nevis-b";
  font-size: 1.2rem;
  color: var(--black);
  text-transform: uppercase;
  border-top: 1px solid var(--black);
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.detail-intro__row div {
  padding: 2rem 2.4rem;
}
.detail-intro__row div:first-child {
  border-right: 1px solid var(--black);
}
.detail-intro__website-btn {
  grid-row: 3 / 4;
  grid-column: 2 / 4;
}
.detail-desc-layout {
  margin: 12rem 0;
}
.detail-desc-layout .detail-desc {
  grid-column: 2 / -2;
}
.detail-desc-layout--black {
  margin: 0;
  padding-top: 8rem;
  padding-bottom: 8rem;
  color: var(--white);
  background-color: var(--black);
}

.detail__banner {
  display: flex;
}
.detail-bullets {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: var(--black);
  color: var(--white);
  font-size: 3rem;
  line-height: 3.9rem;
  font-family: "regular";
  font-weight: 500;
}
.detail-bullets-wrapper {
  grid-column: 2 / -2;
  max-width: 101.2rem;
}
.detail-bullets h1 {
  margin-bottom: 4rem;
}
.detail__list {
  margin: 4rem 0;
}
.detail__list li {
  position: relative;
  padding-left: 3rem;
}
.detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--white);
}
.detail-project {
  grid-column: 2 / -2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5rem 0;
}
.detail-project > div {
  position: relative;
}
.detail-project__name svg {
  width: 2.2rem;
}
.detail-project__label {
  height: 10.6rem;
  display: flex;
  align-items: center;
  padding-left: 6rem;
  padding-right: 6rem;
  border: 1px solid var(--black);
  font-family: "semibold";
  font-size: 2rem;
}
.detail-project__name {
  min-height: 14.6rem;
  padding-left: 6rem;
  padding-right: 6rem;
  display: flex;
  align-items: center;
  font-size: 5.5rem;
  line-height: 6.6rem;
  font-family: "airbag";
  text-transform: uppercase;
  font-weight: normal;
  border: 1px solid var(--black);
  border-top: none;
  gap: 5rem;
}
.detail-project > div:first-child .detail-project__name svg {
  transform: rotate(-90deg);
}
.detail-project > div:last-child .detail-project__name {
  flex-direction: row-reverse;
}
.detail-project > div:last-child .detail-project__label {
  justify-content: flex-end;
}
.detail-project > div:last-child .detail-project__label,
.detail-project > div:last-child .detail-project__name {
  border-left: none;
}
.detail-project--black {
  background-color: var(--black);
}
.detail-project--black .detail-project__label,
.detail-project--black .detail-project__name {
  border-color: var(--white);
  color: var(--white);
}
.detail-project--black .detail-project__name svg path {
  fill: var(--white);
}
@media (max-width: 1024px) {
  .header__logo {
    width: 10rem;
    height: 10rem;
  }
  .header__title,
  .header__menu {
    font-size: 0.8rem;
  }
  .header__menu {
    padding: 0 1rem;
  }
  .header__logo__text {
    padding: 3.2rem 0;
    font-size: 14vw;
    line-height: 16vw;
  }
  .header__extra {
    height: 5rem;
    font-size: 0.8rem;
  }
  .header__bottom {
    border-top: 0;
  }
  .header__bottom--wrapper {
    transform: none;
    width: 100%;
  }
  .header__bottom__desc {
    padding: 5.8rem 1rem;
    font-size: 3rem;
    line-height: 3.9rem;
  }
  .header__numbers {
    grid-template-columns: repeat(2, 1fr);
    height: initial;
  }
  .header__numbers div:not(:last-child) {
    border: none;
  }
  .header__numbers div {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
  }
  .header__numbers div:nth-child(1) {
    border-right: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header__numbers__title {
    font-size: 0.8rem;
  }
  .header__numbers__value {
    font-size: 3rem;
    line-height: 3.6rem;
  }
  .header__numbers div:nth-child(2) {
    border-bottom: 1px solid var(--black);
  }
  .header__numbers div:nth-child(3) {
    border-right: 1px solid var(--black);
  }
  .selected-works {
    margin-bottom: 4rem;
  }
  .selected-works-wrapper {
    margin-top: 8rem;
  }
  .selected-works-wrapper h1 {
    font-size: 4rem;
    line-height: 5.2rem;
    padding: 0 2rem;
    margin-bottom: 4rem;
  }
  .selected-work--wrapper {
    padding: 0 2rem;
  }
  .selected-work li:hover {
  }
  .selected-work__title {
    text-align: center;
    font-size: 3.5rem;
    line-height: 4.2rem;
    margin-bottom: 3rem;
  }
  .selected-work {
    padding: 2rem 0;
    flex-direction: column;
    align-items: start;
    gap: 1.2rem;
  }
  .selected-work h3 {
    font-size: 2rem;
    line-height: 2.6rem;
    padding-right: 6rem;
    font-family: "semibold";
  }
  .our-approach__title {
    font-size: 3.5rem;
    line-height: 4.2rem;
  }
  .our-approach__arrow {
    display: none;
  }
  .selected-work__arrow {
    transform: translate(0, 0);
    top: 3rem;
  }
  .selected-work__arrow svg {
    transform: rotate(0);
  }
  .our-approach-layout {
    min-height: auto;
    padding: 6rem 2rem;
  }
  .our-approach-item {
    padding: 2rem;
  }
  ul .our-approach-item:not(:last-child) {
    border-bottom: 1px solid var(--white);
  }
  .our-approach-item__subtitle {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
  .our-approach ul {
    grid-template-columns: 1fr;
  }

  .inputs {
    margin-top: 0;
  }
  .contact-wrapper {
    display: block;
    padding: 4rem 0;
  }
  .contact__title {
    font-size: 27vw;
    line-height: 24vw;
  }
  .contact-info__arrow {
    top: 2.6rem;
    right: 3.6rem;
  }
  .contact__form {
    border-top: 0;
    border-left: 1px solid var(--black);
  }
  .contact-info__extra {
    display: none;
  }
  .contact-info__extra__mobile {
    display: block;
    border-bottom: 1px solid var(--black);
    font-family: "regular";
    font-weight: 500;
    font-size: 1.4rem;
  }
  .contact-info__extra__mobile .header__menu {
    font-family: "regular";
    font-weight: 500;
    text-transform: initial;
    font-size: 1.4rem;
    letter-spacing: normal;
  }
  .contact-info__extra__mobile > div:first-child {
    border-bottom: 1px solid var(--black);
  }
  .contact-info__extra__mobile > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8.6rem;
    border-left: 1px solid var(--black);
    border-right: 1px solid var(--black);
  }
  .input-wrapper {
    height: 8.6rem;
  }
  .terms h1 {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: 4rem;
    line-height: 4.4rem;
    padding: 0 2rem;
  }
  .terms--content {
    padding: 0 2rem;
  }
  .terms--content p,
  .terms--content li {
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .terms h4 {
    font-size: 3rem;
    line-height: 3.9rem;
  }

  .button-back-desktop {
    display: none;
  }
  .button-back-mobile {
    display: flex;
  }

  .project-slider-layout {
    flex-direction: column-reverse;
    padding: 0 2rem;
    gap: 8rem;
  }
  .project-next__subtitle,
  .project-prev__subtitle {
    font-size: 2rem;
    line-height: 2.6rem;
    font-family: "regular";
    margin-bottom: 4rem;
    font-weight: 400;
  }
  .project-next__content h1,
  .project-prev__content h1 {
    font-size: 4rem;
    line-height: 5.2rem;
  }
  .project-slider-layout {
    margin: 6rem 0;
  }
  .detail-layout__intro-wrapper {
    transform: 0;
    margin-top: 0;
  }
  .detail-button-back {
    width: fit-content;
  }
  .detail-layout__intro-wrapper {
    margin-top: 6rem;
  }
  .detail-intro__title {
    font-size: 5.2rem;
    line-height: 6.2rem;
  }
  .detail-desc {
    font-size: 2rem;
    line-height: 2.6rem;
  }
  .detail-intro__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 6.5rem;
    line-height: 1.4rem;
  }
  .detail-intro__row div {
    padding: 1.1rem 2rem;
    display: flex;
    align-items: center;
  }
  .detail-intro__website-btn {
    margin-top: 4rem;
    display: inline-block;
  }
  .detail-bullets {
    padding-top: 4rem;
    padding-bottom: 4rem;
    font-size: 2rem;
    line-height: 2.9rem;
  }
  .detail-bullets h1 {
    font-size: 3rem;
    line-height: 3.9rem;
  }
  .detail__list {
    margin: 2rem 0;
  }
  .detail__list li::before {
    top: 1rem;
  }
  .detail-project {
    grid-template-columns: 1fr;
  }
  .detail-project > div:first-child .detail-project__name {
    border-bottom: 0;
  }
  .detail-project > div:last-child .detail-project__label,
  .detail-project > div:last-child .detail-project__name {
    border-left: 1px solid var(--black);
  }
  .detail-project__label {
    height: auto;
    border-bottom: none;
    padding-top: 4rem;
    padding-bottom: 1rem;
  }
  .detail-project > div:first-child .detail-project__label,
  .detail-project > div:first-child .detail-project__name {
    padding-left: 6.8rem;
    padding-right: 6.8rem;
  }
  .detail-project > div:first-child svg {
    position: absolute;
    top: 4rem;
    left: 2rem;
  }
  .detail-project > div:last-child svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
  }
  .detail-project__name {
    min-height: auto;
    font-size: 3.1rem;
    line-height: 3.8rem;
    padding-bottom: 4rem;
  }
  .detail-project--black
    .detail-project
    > div:last-child
    .detail-project__label,
  .detail-project--black
    .detail-project
    > div:last-child
    .detail-project__name {
    border-left: 1px solid var(--white);
  }
}